add bridgetypes, tabs to store

taikoxyz · Sep 25, 2023 · b9281d7 · b9281d7
1 parent 7ee6ecd
commit b9281d7
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 27 deletions.
diff --git a/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte b/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte
@@ -6,11 +6,13 @@
   import { chainConfig } from '$chainConfig';
   import { FlatAlert } from '$components/Alert';
   import ChainSelectorWrapper from '$components/Bridge/ChainSelectorWrapper.svelte';
+  import { Button } from '$components/Button';
   import { Card } from '$components/Card';
   import { successToast, warningToast } from '$components/NotificationToast';
   import { errorToast, infoToast } from '$components/NotificationToast/NotificationToast.svelte';
   import { OnAccount } from '$components/OnAccount';
   import { OnNetwork } from '$components/OnNetwork';
+  import { Step, Stepper } from '$components/Stepper';
   import { TokenDropdown } from '$components/TokenDropdown';
   import {
     type BridgeArgs,
@@ -41,8 +43,18 @@
   import Amount from './Amount.svelte';
   import { ProcessingFee } from './ProcessingFee';
   import Recipient from './Recipient.svelte';
-  import { bridgeService, destNetwork, enteredAmount, processingFee, recipientAddress, selectedToken } from './state';
-
+  import {
+    activeBridge,
+    bridgeService,
+    destNetwork,
+    enteredAmount,
+    processingFee,
+    recipientAddress,
+    selectedToken,
+  } from './state';
+  import { BridgeTypes, NFTSteps } from './types';
+
+  let activeStep: NFTSteps = NFTSteps.IMPORT;
   let amountComponent: Amount;
   let recipientComponent: Recipient;
   let processingFeeComponent: ProcessingFee;
@@ -296,33 +308,68 @@
       }
     }
   }
+
+  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 />
-    </div>
+{#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} />
+      <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="space-y-[16px]">
+        <Recipient bind:this={recipientComponent} />
+        <ProcessingFee bind:this={processingFeeComponent} />
+      </div>
 
-    <div class="h-sep" />
+      <div class="h-sep" />
 
-    <Actions {approve} {bridge} />
+      <Actions {approve} {bridge} />
+    </div>
+  </Card>
+{:else if $activeBridge === BridgeTypes.NFT}
+  <div class="f-col">
+    <Stepper {activeStep}>
+      <Step stepIndex={NFTSteps.IMPORT} currentStepIndex={activeStep} isActive={activeStep === NFTSteps.IMPORT}
+        >{$t('bridge.title.nft.import')}</Step>
+      <Step stepIndex={NFTSteps.REVIEW} currentStepIndex={activeStep} isActive={activeStep === NFTSteps.REVIEW}
+        >{$t('bridge.title.nft.review')}</Step>
+      <Step stepIndex={NFTSteps.CONFIRM} currentStepIndex={activeStep} isActive={activeStep === NFTSteps.CONFIRM}
+        >{$t('bridge.title.nft.confirm')}</Step>
+    </Stepper>
+
+    <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>
-</Card>
+{/if}
 
 <OnNetwork change={onNetworkChange} />
 

diff --git a/packages/bridge-ui-v2/src/components/Bridge/BridgeTabs.svelte b/packages/bridge-ui-v2/src/components/Bridge/BridgeTabs.svelte
@@ -1,25 +1,37 @@
 <script lang="ts">
   import { t } from 'svelte-i18n';
 
-  import { page } from '$app/stores';
-  import { LinkButton } from '$components/LinkButton';
+  import { Button } from '$components/Button';
   import { PUBLIC_NFT_BRIDGE_ENABLED } from '$env/static/public';
   import { classNames } from '$libs/util/classNames';
 
+  import { activeBridge } from './state';
+  import { BridgeTypes } from './types';
+
   let classes = classNames('space-x-2', $$props.class);
 
-  $: isERC20Bridge = $page.route.id === '/';
-  $: isNFTBridge = $page.route.id === '/nft';
+  $: isERC20Bridge = $activeBridge === BridgeTypes.FUNGIBLE;
+  $: isNFTBridge = $activeBridge === BridgeTypes.NFT;
+
+  const onBridgeClick = (type: BridgeTypes) => {
+    activeBridge.set(type);
+  };
 </script>
 
 {#if PUBLIC_NFT_BRIDGE_ENABLED === 'true'}
   <div class={classes}>
-    <LinkButton class="py-2 px-[20px]" href="/" active={isERC20Bridge}>
+    <Button
+      type={isERC20Bridge ? 'primary' : 'neutral'}
+      class="px-[28px] py-[14px] rounded-full flex-1 text-white"
+      on:click={() => onBridgeClick(BridgeTypes.FUNGIBLE)}>
       <span> {$t('nav.token')}</span>
-    </LinkButton>
+    </Button>
 
-    <LinkButton class="py-2 px-[20px]" href="/nft" active={isNFTBridge}>
+    <Button
+      type={isNFTBridge ? 'primary' : 'neutral'}
+      class="px-[28px] py-[14px] rounded-full flex-1 text-white"
+      on:click={() => onBridgeClick(BridgeTypes.NFT)}>
       <span> {$t('nav.nft')}</span>
-    </LinkButton>
+    </Button>
   </div>
 {/if}
diff --git a/packages/bridge-ui-v2/src/components/Bridge/state.ts b/packages/bridge-ui-v2/src/components/Bridge/state.ts
@@ -5,6 +5,8 @@ import { bridges } from '$libs/bridge';
 import { chains } from '$libs/chain';
 import type { Token } from '$libs/token';
 
+import { type BridgeType, BridgeTypes } from './types';
+
 // Note: we could combine this with Context API, but since we'll only
 // have one Bridge component, it would be an overkill. If we wanted to
 // instantiate multiple Bridge components, then we'd need to use
@@ -14,6 +16,7 @@ import type { Token } from '$libs/token';
 // but once again, we don't need such level of security that we have to
 // prevent other components outside the Bridge from accessing this store.
 
+export const activeBridge = writable<BridgeType>(BridgeTypes.FUNGIBLE);
 export const selectedToken = writable<Maybe<Token>>(null);
 export const tokenBalance = writable<Maybe<FetchBalanceResult>>(null);
 export const enteredAmount = writable<bigint>(BigInt(0));

diff --git a/packages/bridge-ui-v2/src/components/Bridge/types.ts b/packages/bridge-ui-v2/src/components/Bridge/types.ts
@@ -0,0 +1,12 @@
+export enum BridgeTypes {
+  FUNGIBLE = 'FUNGIBLE',
+  NFT = 'NFT',
+}
+
+export enum NFTSteps {
+  IMPORT,
+  REVIEW,
+  CONFIRM,
+}
+
+export type BridgeType = BridgeTypes;