feat(bridge-ui-v2): NFT transaction page (#15084)

taikoxyz · Nov 5, 2023 · 49741c5 · 49741c5 · vercel · Nov 5, 2023
1 parent 92392b2
commit 49741c5
Show file tree

Hide file tree

Showing 14 changed files with 442 additions and 175 deletions.
diff --git a/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ImportStep.svelte b/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ImportStep.svelte
@@ -322,6 +322,7 @@ Automatic NFT Input
             </Button>
 
             <IconFlipper
+              type="swap-rotate"
               iconType1="list"
               iconType2="cards"
               selectedDefault="cards"

diff --git a/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ReviewStep.svelte b/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ReviewStep.svelte
@@ -108,6 +108,7 @@ NFT List or Card View
     </div>
     <div class="flex gap-2">
       <IconFlipper
+        type="swap-rotate"
         iconType1="list"
         iconType2="cards"
         selectedDefault="list"

diff --git a/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte b/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte
@@ -47,6 +47,7 @@
     small ? 'w-auto' : 'w-full',
     readOnly ? '' : 'dark:hover:bg-tertiary-interactive-hover',
     'flex justify-start content-center',
+    $$props.class,
   );
 
   let iconSize = small ? 'w-5 h-5' : 'w-7 h-7';
@@ -66,7 +67,7 @@
     // We want to inform the user that they need to connect
     // their wallet if they want to change the network
     if (!$account.isConnected) {
-      warningToast({title: $t('messages.account.required')});
+      warningToast({ title: $t('messages.account.required') });
       return;
     }
     addEscKeyListener();
@@ -89,10 +90,10 @@
       } catch (err) {
         console.error(err);
         if (err instanceof SwitchChainError) {
-          warningToast({title: $t('messages.network.pending')});
+          warningToast({ title: $t('messages.network.pending') });
         }
         if (err instanceof UserRejectedRequestError) {
-          warningToast({title: $t('messages.network.rejected')});
+          warningToast({ title: $t('messages.network.rejected') });
         }
       } finally {
         switchingNetwork = false;

diff --git a/packages/bridge-ui-v2/src/components/Header/Header.svelte b/packages/bridge-ui-v2/src/components/Header/Header.svelte
@@ -9,6 +9,7 @@
   import { account } from '$stores/account';
 
   $: isBridgePage = $page.route.id === '/' || $page.route.id === '/nft';
+  $: isTransactionsPage = $page.route.id === '/transactions';
 </script>
 
 <header
@@ -31,7 +32,7 @@
   <LogoWithText width={77} height={21} class="md:hidden" textFillClass={'fill-primary-content'} />
 
   <div class="flex justify-end w-full">
-    {#if isBridgePage}
+    {#if isBridgePage || isTransactionsPage}
       <BridgeTabs class="hidden md:flex md:flex-1" />
     {/if}
 

diff --git a/packages/bridge-ui-v2/src/components/Icon/IconFlipper.svelte b/packages/bridge-ui-v2/src/components/Icon/IconFlipper.svelte
@@ -11,16 +11,22 @@
 
   export let selectedDefault: IconType = iconType1;
 
+  export let flipped: boolean = false;
+
+  export let type: 'swap-rotate' | 'swap-flip' | '' = '';
+
   const dispatch = createEventDispatcher();
 
   function handleLabelClick() {
     selectedDefault = selectedDefault === iconType1 ? iconType2 : iconType1;
+    flipped = !flipped;
     dispatch('labelclick');
   }
 
-  $: isDefault = selectedDefault === iconType1;
+  // $: isDefault = selectedDefault === iconType1;
+  $: isDefault = !flipped;
 
-  $: classes = classNames('swap swap-rotate btn-neutral', $$props.class);
+  $: classes = classNames('swap  btn-neutral', type, $$props.class);
 </script>
 
 <div role="button" tabindex="0" class={classes} on:click={handleLabelClick} on:keypress={handleLabelClick}>

diff --git a/packages/bridge-ui-v2/src/components/NFTs/NFTInfoDialog.svelte b/packages/bridge-ui-v2/src/components/NFTs/NFTInfoDialog.svelte
@@ -32,6 +32,8 @@
   };
 
   $: currentChain = $network?.id;
+
+  $: imgUrl = nft.metadata?.image || placeholderUrl;
 </script>
 
 <dialog id={dialogId} class="modal modal-bottom md:modal-middle" class:modal-open={modalOpen}>
@@ -41,10 +43,7 @@
     <div class="f-col w-full space-y-[30px]">
       <h3 class="title-body-bold">{$t('bridge.nft.step.import.nft_card.title')}</h3>
 
-      <img
-        alt="placeholder nft"
-        src={nft.metadata?.image || placeholderUrl}
-        class="rounded-[20px] self-center bg-white" />
+      <img alt="nft" src={imgUrl} class="rounded-[20px] self-center bg-white" />
       <div id="metadata">
         <div class="f-between-center">
           <div class="text-secondary-content">{$t('common.collection')}</div>

diff --git a/packages/bridge-ui-v2/src/components/TokenDropdown/TokenDropdown.svelte b/packages/bridge-ui-v2/src/components/TokenDropdown/TokenDropdown.svelte
@@ -69,7 +69,7 @@
     // In order to select a token, we only need the source chain to be selected,
     // unless it's an imported token...
     if (!chain) {
-      warningToast({title: $t('messages.network.required')});
+      warningToast({ title: $t('messages.network.required') });
       return;
     }
 
@@ -78,7 +78,7 @@
     if (token.imported) {
       // ... in the case of imported tokens, we also require the destination chain to be selected.    if (!destChain) {
       if (!destChain) {
-        warningToast({title: $t('messages.network.required_dest')});
+        warningToast({ title: $t('messages.network.required_dest') });
         return;
       }
 

diff --git a/packages/bridge-ui-v2/src/components/Transactions/StatusFilterDropdown.svelte b/packages/bridge-ui-v2/src/components/Transactions/StatusFilterDropdown.svelte
@@ -0,0 +1,79 @@
+<script lang="ts">
+  import { t } from 'svelte-i18n';
+
+  import IconFlipper from '$components/Icon/IconFlipper.svelte';
+  import { MessageStatus } from '$libs/bridge';
+  import { classNames } from '$libs/util/classNames';
+  import { closeOnEscapeOrOutsideClick } from '$libs/util/customActions';
+
+  export let selectedStatus: MessageStatus | null = null;
+
+  let flipped = false;
+
+  let iconFlipperComponent: IconFlipper;
+
+  let menuOpen = false;
+
+  const options = [
+    { value: null, label: $t('transactions.filter.all') },
+    { value: MessageStatus.NEW, label: $t('transactions.filter.processing') },
+    { value: MessageStatus.RETRIABLE, label: $t('transactions.filter.retry') },
+    { value: MessageStatus.DONE, label: $t('transactions.filter.claimed') },
+    { value: MessageStatus.FAILED, label: $t('transactions.filter.failed') },
+  ];
+
+  const selectOption = (option: (typeof options)[0]) => {
+    selectedStatus = option.value;
+    menuOpen = false;
+  };
+
+  const toggleMenu = () => {
+    menuOpen = !menuOpen;
+    flipped = !flipped;
+  };
+
+  $: menuClasses = classNames(
+    'menu absolute right-0 w-[210px] p-3 mt-2 rounded-[10px] bg-neutral-background z-10  box-shadow-small',
+    menuOpen ? 'visible opacity-100' : 'invisible opacity-0',
+  );
+</script>
+
+<div class="relative">
+  <button
+    aria-haspopup="listbox"
+    aria-expanded={menuOpen}
+    class="f-between-center w-[210px] min-h-[36px] max-h-[36px] px-6 bg-neutral border-0 shadow-none outline-none rounded-[6px]"
+    on:click|stopPropagation={toggleMenu}>
+    <span class="text-primary-content font-bold">
+      {selectedStatus !== null
+        ? options.find((option) => option.value === selectedStatus)?.label
+        : $t('transactions.filter.all')}
+    </span>
+    <IconFlipper
+      bind:flipped
+      bind:this={iconFlipperComponent}
+      iconType1="chevron-left"
+      iconType2="chevron-down"
+      selectedDefault="chevron-left"
+      size={15} />
+  </button>
+
+  {#if menuOpen}
+    <ul
+      role="listbox"
+      class={menuClasses}
+      use:closeOnEscapeOrOutsideClick={{ enabled: menuOpen, callback: () => (menuOpen = false) }}>
+      {#each options as option (option.value)}
+        <li
+          role="option"
+          aria-selected={option.value === selectedStatus}
+          tabindex="0"
+          class="flex items-center h-[56px] px-3 cursor-pointer rounded-[6px]"
+          on:click={() => selectOption(option)}
+          on:keydown={() => selectOption(option)}>
+          <span class="flex w-full h-[56px] text-primary-content font-bold">{option.label}</span>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>