feat(bridge-ui-v2): NFT bridge stepper (#14811)

taikoxyz · Sep 28, 2023 · 5aa095e · 5aa095e
1 parent 1e7d5ad
commit 5aa095e
Showing 1 changed file with 42 additions and 18 deletions.
diff --git a/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte b/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte
@@ -308,15 +308,45 @@
       }
     }
   }
+
+  const nextStep = () => (activeStep = Math.min(activeStep + 1, NFTSteps.CONFIRM));
+  const back = () => (activeStep = Math.max(activeStep - 1, NFTSteps.IMPORT));
+
+  let nftStepTitle: string;
+  let nftStepDescription: string;
+
+  $: {
+    const stepKey = NFTSteps[activeStep].toLowerCase(); // Convert enum to string and to lowercase
+    nftStepTitle = $t(`bridge.title.nft.${stepKey}`);
+    nftStepDescription = $t(`bridge.description.nft.${stepKey}`);
+  }
+
   $: if ($selectedToken && amountComponent) {
     amountComponent.validateAmount();
   }
 </script>
 
-<Card class="w-full md:w-[524px]" title={$t('bridge.title.default')} text={$t('bridge.description')}>
-  <div class="space-y-[30px]">
-    <div class="f-between-center gap-4">
-      <ChainSelectorWrapper />
+{#if $activeBridge === BridgeTypes.FUNGIBLE}
+  <Card class="w-full md:w-[524px]" title={$t('bridge.title.default')} text={$t('bridge.description')}>
+    <div class="space-y-[30px]">
+      <div class="f-between-center gap-4">
+        <ChainSelectorWrapper />
+      </div>
+
+      <TokenDropdown {tokens} bind:value={$selectedToken} />
+      {#if $selectedToken?.symbol === 'BLL' && !$selectedToken?.imported}
+        <FlatAlert class="!mt-2" message={$t('bridge.errors.bll_token')} type="warning" />
+      {/if}
+      <Amount bind:this={amountComponent} />
+
+      <div class="space-y-[16px]">
+        <Recipient bind:this={recipientComponent} />
+        <ProcessingFee bind:this={processingFeeComponent} />
+      </div>
+
+      <div class="h-sep" />
+
+      <Actions {approve} {bridge} />
     </div>
   </Card>
 {:else if $activeBridge === BridgeTypes.NFT}
@@ -330,20 +360,14 @@
         >{$t('bridge.title.nft.confirm')}</Step>
     </Stepper>
 
-    <TokenDropdown {tokens} bind:value={$selectedToken} />
-    {#if $selectedToken?.symbol === 'BLL' && !$selectedToken?.imported}
-      <FlatAlert class="!mt-2" message={$t('bridge.errors.bll_token')} type="warning" />
-    {/if}
-    <Amount bind:this={amountComponent} />
-
-    <div class="space-y-[16px]">
-      <Recipient bind:this={recipientComponent} />
-      <ProcessingFee bind:this={processingFeeComponent} />
-    </div>
-
-    <div class="h-sep" />
-
-    <Actions {approve} {bridge} />
+    <Card class="mt-[32px] w-full md:w-[524px]" title={nftStepTitle} text={nftStepDescription}>
+      <div class="f-between-center w-full gap-4">
+        <Button type="primary" class="px-[28px] py-[14px] rounded-full flex-1 text-white" on:click={back}
+          >Previous Step</Button>
+        <Button type="primary" class="px-[28px] py-[14px] rounded-full flex-1 text-white" on:click={nextStep}
+          >Next Step</Button>
+      </div>
+    </Card>
   </div>
 {/if}