transfers.html

<div class="transfers" data-behavior="recent-transfers" style="display: none">
  <header class="transfers__header">
    <h1 class="transfers__heading">Your Transfers</h1>
    <p class="subheading">Manage your transfers below or begin a new one.</p>
    <button class="link button--missing-transfer" data-behavior="newRecovery">
      Missing a transfer?
    </button>
    <!-- TODO: <nav> -->
  </header>
  <div class="transfers__wrapper">
    <div class="button-wrapper">
      <button
        class="button--new-transfer button-variant--secondary full-width"
        data-behavior="newTransfer"
      >
        + New Transfer
      </button>
    </div>
    <div data-behavior="transfers-container"></div>
  </div>
  <p style="margin-top: 2em; font-size: small; text-align: center">
    Need help? Join our
    <a href="https://t.me/rainbowbridgesupport"> support telegram channel</a>.
  </p>
  <div data-behavior="deleteModal" class="modal" style="display: none">
    <div class="modal__container">
      <div class="modal-image__container">
        <img src="/img/delete-pink.svg" alt="" />
      </div>
      <h1 class="modal__heading">Remove transfer from list?</h1>
      <p class="modal__message">
        Deleted transfers can be restored using the initiating transaction
        hash/ID.
      </p>
      <div class="confirm-delete-buttons">
        <button data-behavior="confirmDelete" class="full-width">
          Remove Transfer
        </button>
        <button data-behavior="closeModal" class="cancel full-width">
          Cancel
        </button>
      </div>
    </div>
  </div>
  <style>
    .transfers {
      padding: 5rem 0;
      width: 100%;
      margin: 0 auto 2em;
    }

    .transfers__header {
      padding: 0 5rem;
      margin: 0 auto var(--spacing-xxl);
      text-align: center;
    }

    .transfers__heading {
      font-size: var(--fs-heading-2);
    }

    .transfers__header .subheading {
      margin-bottom: 0;
    }

    .transfers__header .button--missing-transfer {
      margin-bottom: var(--spacing-s);
      font-size: var(--fs-small);
      font-weight: var(--fw-regular);
      text-decoration: underline;
    }

    .transfers__wrapper .button-wrapper {
      padding: 0 var(--spacing-m);
    }

    @media (min-width: 600px) {
      .transfers__wrapper .button-wrapper {
        padding: 0;
      }
    }

    .transfers__wrapper .button--new-transfer {
      margin-bottom: var(--spacing-m);
    }

    .transfer.in-progress {
      --color--transfer-header: var(--orange-300);
      --color--transfer-amount: var(--orange-800);
      --color--transfer-status: var(--orange-700);
      --color--transfer-actions--cta: var(--orange-600);
      --color--transfer-actions--delete: var(--orange-200);
      --color--transfer-actions--delete__icon: var(--orange-700);
      --color--accounts-container: var(--orange-100);
      --color--accounts-label: var(--orange-700);
      --color--accounts-divider: var(--orange-200);
      --color--footer: var(--orange-200);
      --color--footer-text: var(--orange-700);
      --color--footer-caret: var(--orange-500);
    }
    .transfer.completed {
      --color--transfer-header: var(--green-300);
      --color--transfer-amount: var(--green-800);
      --color--transfer-status: var(--green-700);
      --color--transfer-actions--cta: var(--green-600);
      --color--transfer-actions--delete: var(--green-200);
      --color--transfer-actions--delete__icon: var(--green-700);
      --color--accounts-container: var(--green-100);
      --color--accounts-label: var(--green-700);
      --color--accounts-divider: var(--green-200);
      --color--footer: var(--green-200);
      --color--footer-text: var(--green-600);
      --color--footer-caret: var(--green-500);
    }
    .transfer.failed {
      --color--transfer-header: var(--red-300);
      --color--transfer-amount: var(--red-800);
      --color--transfer-status: var(--red-700);
      --color--transfer-actions--cta: var(--red-600);
      --color--transfer-actions--delete: var(--red-200);
      --color--transfer-actions--delete__icon: var(--red-700);
      --color--accounts-container: var(--red-100);
      --color--accounts-label: var(--red-700);
      --color--accounts-divider: var(--red-200);
      --color--footer: var(--red-200);
      --color--footer-text: var(--red-600);
      --color--footer-caret: var(--red-500);
    }
    .transfer.action-needed {
      --color--transfer-header: var(--blue-300);
      --color--transfer-amount: var(--blue-800);
      --color--transfer-status: var(--blue-700);
      --color--transfer-actions--cta: var(--blue-500);
      --color--transfer-actions--delete: var(--blue-200);
      --color--transfer-actions--delete__icon: var(--blue-700);
      --color--accounts-container: var(--blue-100);
      --color--accounts-label: var(--blue-700);
      --color--accounts-divider: var(--blue-200);
      --color--footer: var(--blue-200);
      --color--footer-text: var(--blue-500);
      --color--footer-caret: var(--blue-500);
    }

    .transfer {
      overflow: hidden;
      margin-bottom: var(--spacing-m);
    }

    @media (min-width: 600px) {
      .transfer {
        border-radius: var(--br-small);
      }
    }

    .transfer__header {
      background-color: var(--color--transfer-header);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: var(--spacing-m);
    }

    .transfer__header .transfer__amount {
      color: var(--color--transfer-amount);
      font-size: var(--fs-heading-4);
      margin-bottom: var(--spacing-xs);
    }

    .transfer__status {
      color: var(--color--transfer-status);
      display: flex;
      align-items: center;
      font-size: var(--fs-micro);
    }

    .transfer__status .icon {
      margin-right: var(--spacing-s);
      background-size: contain;
      background-position: center;
      width: var(--spacing-m);
      height: var(--spacing-m);
    }

    .transfer.failed > header .transfer__status .icon {
      background-image: url(img/alert-circle.svg);
    }

    .transfer.completed > header .transfer__status .icon {
      background-image: url(img/completed.svg);
    }

    .transfer.action-needed > header .transfer__status .icon:before {
      content: "→";
    }

    .transfer.in-progress > header .transfer__status .icon {
      margin-right: 0.8em;
      position: relative;
      width: 0.8em;
      height: 0.8em;
    }

    .transfer.in-progress > header .transfer__status .icon:before {
      animation: spin 1.5s ease-in-out infinite;
      border-radius: 50%;
      border: 1px solid transparent;
      border-top-color: var(--color--transfer-status);
      content: " ";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    .transfer__actions {
      display: flex;
      height: 2.4em;
    }

    .transfer__actions .button--cta {
      background-color: var(--color--transfer-actions--cta);
      color: white;
    }

    .transfer__actions .button--delete {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: var(--color--transfer-actions--delete) !important;
      margin-left: var(--spacing-s);
      padding: 0;
      width: var(--input-height--small);
    }

    .transfer__actions .button--delete svg path {
      stroke: var(--color--transfer-actions--delete__icon);
    }

    .transfer__accounts-container {
      background-color: var(--color--accounts-container);
      display: flex;
      flex-direction: column;
      font-size: var(--fs-small);
    }

    .transfer__account {
      border-top: 1px solid var(--color--accounts-divider);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--spacing-s) var(--spacing-m);
    }

    .transfer__account label {
      color: var(--color--accounts-label);
      font-size: var(--fs-micro);
      padding: 0;
      margin: 0;
    }

    .transfer__account .account-with-icon {
      color: var(--color--accounts-label);
    }

    .transfer__footer {
      position: relative;
      height: var(--input-height--small);
    }

    .transfer__footer button {
      color: var(--color--footer-text);
      text-align: center;
      border-radius: 0;
      position: absolute;
      bottom: 0;
      z-index: 1;
      font-size: var(--fs-micro);
      background-color: var(--color--footer);
    }

    .transfer__footer button:before {
      display: inline-block;
      content: " ";
      height: 0.3em;
      width: 0.3em;
      border: 2.5px solid var(--color--footer-caret);
      border-left-color: transparent;
      border-top-color: transparent;
      transform: rotate(45deg);
      margin-right: 0.5em;
      position: relative;
      top: -0.1em;
    }

    .transfer__footer button span:before {
      content: "View ";
    }

    .transfer__footer.open button span:before {
      content: "Hide ";
    }

    .transfer__footer.open button:before {
      top: 0.1em;
      transform: rotate(225deg);
    }

    .transfer__details {
      background-color: var(--gray-800);
      color: var(--gray-500);
      list-style: none;
      margin: 0;
      padding: 1.5rem 1rem;
      position: absolute;
      width: 100%;
    }
    .transfer__details li {
      position: relative;
      margin-bottom: var(--spacing-m);
      font-size: var(--fs-micro);
    }
    .transfer__details li:last-child {
      padding-bottom: 0;
    }
    .transfer__details li span {
      display: flex;
    }
    .transfer__details li span:before {
      content: "•";
      width: 1rem;
      height: 1rem;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      margin-right: 0.5rem;
      text-align: center;
      font-size: var(--fs-heading-3);
      line-height: 0.7;
      z-index: 1;
      flex-shrink: 0;
    }
    /* error message shown in a p */
    .transfer__details li p {
      color: var(--gray-500);
      background-color: var(--black);
      border-radius: 4px;
      font-size: 0.9em;
      margin: 1rem 0 0 1.5rem;
      padding: 1rem;
    }
    /* if very first step pending, bold it. otherwise, bold first pending
     step that comes after a completed step. */
    .transfer__details li.pending:first-child span,
    .transfer__details li.completed + li.pending span {
      color: white;
    }
    .transfer__details li.pending:first-child span:before,
    .transfer__details li.completed + li.pending span:before {
      color: #2b9af4;
    }
    .transfer__details li.failed span:before {
      background-image: url(img/alert-circle.svg);
      content: " ";
    }
    .transfer__details li.completed span:before {
      background-image: url(img/checkmark-48DBA7.svg);
      content: " ";
    }
    .transfer__details li:after {
      content: " ";
      width: 1px;
      border-left: 1px solid var(--gray-700);
      padding: var(--spacing-m) 0;
      position: absolute;
      top: var(--spacing-m);
      bottom: 0;
      left: 7px;
    }

    @media (min-width: 600px) {
      .transfers {
        max-width: 440px;
      }
    }

    .landing {
      padding-bottom: 1em;
    }

    .confirm-delete {
      padding: 3em;
      display: flex;
      text-align: center;
      flex-direction: column;
      justify-content: space-between;
    }

    .confirm-delete > img {
      margin-left: 40%;
      margin-right: 40%;
    }

    .confirm-delete > h4 {
      font-weight: 800;
      line-height: 1.5;
      margin-top: 2em;
      margin-bottom: 1em;
    }

    .confirm-delete button {
      margin-top: 1.2em;
    }

    .confirm-delete-buttons {
      margin: var(--spacing-xxl) 0 var(--spacing-m);
    }

    .confirm-delete-buttons :first-child {
      background-color: var(--red-500);
      color: var(--white);
    }
  </style>
  <script>
    window.addEventListener("load", function addLandingHandlers() {
      window.dom.onClick("newTransfer", function startErc20Transfer() {
        window.urlParams.set({ new: "transfer" });
        window.render();
      });
      // transfers are rendered after page load, so we add one click handler to the
      // body tag to handle clicking each kind of button on a transfer
      document.querySelector("body").addEventListener("click", async (event) => {
        const callToAction = event.target.closest(
          "[data-behavior=transferCallToAction]"
        );

        // no action button clicked, end here
        if (!callToAction) return;

        const transferId = callToAction.closest("[data-behavior=transfer]").id;
        callToAction.disabled = true
        try {
          await window.transfers.act(transferId)
        } catch(error) {
          console.error(error)
        } finally {
          callToAction.disabled = false
        }
      });
      document.querySelector("body").addEventListener("click", (event) => {
        const transferDetailsButton = event.target.closest(
          "[data-behavior=openTransferDetails]"
        );

        // no details button clicked, end here
        if (!transferDetailsButton) return;

        const transferId = transferDetailsButton.closest(
          "[data-behavior=transfer]"
        ).id;
        const footer = transferDetailsButton.closest("footer");
        openTransferDetails[transferId] = !openTransferDetails[transferId];
        footer.classList.toggle("open");
        adjustTransferDetailsHeights();
      });
      document.querySelector("body").addEventListener("click", (event) => {
        const deleteButton = event.target.closest(
          "[data-behavior=deleteTransfer]"
        );

        // no delete button clicked, end here
        if (!deleteButton) return;

        window.dom.show("deleteModal");
        const transferIdToRemove = deleteButton.closest(
          "[data-behavior=transfer]"
        ).id;
        // Delete a transfer after confirmation
        const confirmDeleteButton = window.dom.find("confirmDelete");
        confirmDeleteButton.onclick = () => {
          window.transfers.remove(transferIdToRemove);
          window.dom.hide("deleteModal");
          document.getElementById(transferIdToRemove).remove();
        };
      });
    });
    // tracks UI state for which transfers have "view details" open
    const openTransferDetails = {};

    function renderTransfer(transfer, { inProgress }) {
      transfer = window.transfers.decorate(transfer, { locale: "en_US" });
      return `
    <div
      class="transfer ${transfer.status}"
      id="${transfer.id}"
      data-behavior="transfer"
    >
      <header class="transfer__header">
        <div>
          <h3 class="transfer__amount">${window.utils.formatLargeNum(
            transfer.amount,
            transfer.decimals
          )} ${transfer.sourceTokenName}</h3>
          <div class="transfer__status">
            <span class="icon"></span>
            <span>${transfer.statusMessage}</span>
          </div>
        </div>
        <div class="transfer__actions">
          ${window.dom.toString(
            transfer.callToAction &&
              `<button class="button--cta button-size--small" data-behavior="transferCallToAction">${transfer.callToAction}</button>`
          )}
          ${window.dom.toString(
            transfer.status === "completed" &&
              `<button class="button--delete button-size--small" data-behavior="deleteTransfer"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2 4H3.33333H14" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M5.3335 4.00004V2.66671C5.3335 2.31309 5.47397 1.97395 5.72402 1.7239C5.97407 1.47385 6.31321 1.33337 6.66683 1.33337H9.3335C9.68712 1.33337 10.0263 1.47385 10.2763 1.7239C10.5264 1.97395 10.6668 2.31309 10.6668 2.66671V4.00004M12.6668 4.00004V13.3334C12.6668 13.687 12.5264 14.0261 12.2763 14.2762C12.0263 14.5262 11.6871 14.6667 11.3335 14.6667H4.66683C4.31321 14.6667 3.97407 14.5262 3.72402 14.2762C3.47397 14.0261 3.3335 13.687 3.3335 13.3334V4.00004H12.6668Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M6.6665 7.33337V11.3334" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M9.3335 7.33337V11.3334" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              </svg></button>`
          )}
        </div>
      </header>
      <div class="transfer__accounts-container">
        <div class="transfer__account">
          <label>From</label>
          <div class="account-with-icon ${transfer.sourceNetwork}" title="${
        transfer.sender
      }">
                  ${transfer.sender}
          </div>
        </div>
        <div class="transfer__account">
          <label>To</label>
          <div class="account-with-icon ${
            transfer.destinationNetwork
          }" title="${transfer.recipient}">
            ${transfer.recipient}
          </div>
      </div>
      </div>

      <footer class="transfer__footer ${
        openTransferDetails[transfer.id] || transfer.status !== "completed"
          ? "open"
          : ""
      }">
        <ol class="transfer__details">${transfer.steps
          .map(
            (step) =>
              `<li class="${step.status}">
            <span>${step.description}</span>
            ${window.dom.toString(
              step.status === "failed" &&
                `<p class="error">${transfer.error}</p>`
            )}
          </li>`
          )
          .join("")}</ol>
        <button class="full-width button-size--small" data-behavior="openTransferDetails">
          <span>details</span>
        </button>
      </footer>
    </div>
  `;
    }

    async function updateTransfers() {
      if (!(window.ethInitialized && window.nearInitialized)) return;
      if (!window.isValidEthNetwork) return;

      const transfers = await window.transfers.get();

      if (!transfers.length) {
        window.dom.hide("recent-transfers");
      } else {
        window.dom.show("recent-transfers");
      }

      window.dom
        .fill("transfers-container")
        .with([
          ...transfers.map((t) => renderTransfer(t, { inProgress: true })),
        ]);

      adjustTransferDetailsHeights();
    }

    // adjust hard-coded heights for transfers details panels, to enable slide-out animation
    function adjustTransferDetailsHeights() {
      window.dom.findAll("transfer").map((transfer) => {
        const footer = transfer.querySelector("footer");
        const button = footer.querySelector("button").getBoundingClientRect()
          .height;
        const details = footer.querySelector("ol").getBoundingClientRect()
          .height;
        footer.style.height = footer.classList.contains("open")
          ? `${button + details}px`
          : `${button}px`;
      });
    }

    async function hideShowTransfers() {
      if (!(window.ethInitialized && window.nearInitialized)) return;

      const transfers = await window.transfers.get();
      const currentParams = Object.keys(window.urlParams.get());
      const appUrlPaths = ['new', 'erc20', 'erc20n']

      // Hide transfers if on another page or if there are no transfers
      if (transfers.length && !appUrlPaths.some(param => currentParams.includes(param) )) {
        window.dom.show("recent-transfers");
      } else {
        window.dom.hide("recent-transfers");
      }
    }

    window.renderers.push(updateTransfers);
    window.renderers.push(hideShowTransfers);
  </script>
</div>