Skip to content

Commit

Permalink
chore(bridge-ui-v2): review step refinement (#15037)
Browse files Browse the repository at this point in the history 
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: xiaodino <ruby@taiko.xyz>
Co-authored-by: Roger <50648015+RogerLamTd@users.noreply.github.com>
Co-authored-by: Kenk <kenghin_lim@hotmail.com>
Co-authored-by: dave <13951458+d1onys1us@users.noreply.github.com>
Co-authored-by: FINE <101636126+finedao@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
  • Loading branch information
@KorbinianK @xiaodino
@RogerLamTd @2manslkh @d1onys1us @finedao @dependabot
7 people committed Oct 28, 2023
1 parent b70e958 commit c22b1b9
Show file tree
Hide file tree
Showing 18 changed files with 477 additions and 326 deletions.
51 changes: 33 additions & 18 deletions packages/bridge-ui-v2/src/components/Bridge/NFTBridge.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,9 @@
import type Amount from './Amount.svelte';
import type IdInput from './IDInput/IDInput.svelte';
import ImportStep from './NFTBridgeSteps/ImportStep.svelte';
import RecipientStep from './NFTBridgeSteps/RecipientStep.svelte';
import ReviewStep from './NFTBridgeSteps/ReviewStep.svelte';
import type { ProcessingFee } from './ProcessingFee';
import type Recipient from './Recipient.svelte';
import {
activeBridge,
bridgeService,
Expand All @@ -50,7 +50,7 @@
import { NFTSteps } from './types';
let amountComponent: Amount;
let recipientComponent: Recipient;
let recipientStepComponent: RecipientStep;
let processingFeeComponent: ProcessingFee;
let actionsComponent: Actions;
let importMethod: 'scan' | 'manual' = 'scan';
Expand Down Expand Up @@ -181,7 +181,7 @@
const tokenIds =
nftIdArray.length > 0 ? nftIdArray.map((num) => BigInt(num)) : selectedNFT.map((nft) => BigInt(nft.tokenId));
const bridgeArgs = await getBridgeArgs($selectedToken, $enteredAmount, commonArgs, selectedNFT, nftIdArray);
const bridgeArgs = await getBridgeArgs($selectedToken, $enteredAmount, commonArgs, nftIdArray);
const args = { ...bridgeArgs, tokenIds };
Expand Down Expand Up @@ -242,9 +242,9 @@
const resetForm = () => {
//we check if these are still mounted, as the user might have left the page
if (amountComponent) amountComponent.clearAmount();
if (recipientComponent) recipientComponent.clearRecipient();
if (processingFeeComponent) processingFeeComponent.resetProcessingFee();
if (addressInputComponent) addressInputComponent.clearAddress();
if (recipientStepComponent) recipientStepComponent.reset();
// Update balance after bridging
if (amountComponent) amountComponent.updateBalance();
Expand Down Expand Up @@ -335,6 +335,10 @@
});
};
const handleTransactionDetailsClick = () => {
activeStep = NFTSteps.RECIPIENT;
};
// Whenever the user switches bridge types, we should reset the forms
$: $activeBridge && (resetForm(), (activeStep = NFTSteps.IMPORT));
Expand All @@ -345,6 +349,7 @@
nftStepDescription = $t(`bridge.description.nft.${stepKey}`);
nextStepButtonText = getStepText();
}
onDestroy(() => {
resetForm();
});
Expand All @@ -353,12 +358,13 @@
<div class="f-col">
<Stepper {activeStep}>
<Step stepIndex={NFTSteps.IMPORT} currentStepIndex={activeStep} isActive={activeStep === NFTSteps.IMPORT}
>{$t('bridge.title.nft.import')}</Step>
>{$t('bridge.nft.step.import.title')}</Step>
<Step stepIndex={NFTSteps.REVIEW} currentStepIndex={activeStep} isActive={activeStep === NFTSteps.REVIEW}
>{$t('bridge.title.nft.review')}</Step>
>{$t('bridge.nft.step.review.title')}</Step>
<Step stepIndex={NFTSteps.CONFIRM} currentStepIndex={activeStep} isActive={activeStep === NFTSteps.CONFIRM}
>{$t('bridge.title.nft.confirm')}</Step>
>{$t('bridge.nft.step.confirm.title')}</Step>
</Stepper>

<Card class="mt-[32px] w-full md:w-[524px]" title={nftStepTitle} text={nftStepDescription}>
<div class="space-y-[30px]">
<!-- IMPORT STEP -->
Expand All @@ -368,32 +374,29 @@
bind:canProceed
bind:nftIdArray
bind:contractAddress
{foundNFTs}
bind:foundNFTs
bind:scanned
bind:validating={validatingImport} />
<!-- REVIEW STEP -->
{:else if activeStep === NFTSteps.REVIEW}
<ReviewStep />
<ReviewStep on:editTransactionDetails={handleTransactionDetailsClick} />
<!-- CONFIRM STEP -->
{:else if activeStep === NFTSteps.CONFIRM}
<div class="f-between-center gap-4">
<ChainSelectorWrapper />
</div>
{:else if activeStep === NFTSteps.RECIPIENT}
<RecipientStep bind:this={recipientStepComponent} />
{/if}
<!--
User Actions
-->
{#if activeStep !== NFTSteps.IMPORT}
<Button
type="neutral"
class="px-[28px] py-[14px] rounded-full w-auto flex-1 bg-transparent !border border-primary-brand hover:border-primary-interactive-hover"
on:click={previousStep}>
<span class="body-bold">{$t('common.edit')}</span></Button>
{/if}
{#if activeStep === NFTSteps.REVIEW}
<div class="f-between-center w-full gap-4">
<div class="h-sep" />
<div class="f-col w-full gap-4">
<Actions {approve} {bridge} />
<button on:click={previousStep} class="flex justify-center py-3 link">
{$t('common.back')}
</button>
</div>
{:else if activeStep === NFTSteps.IMPORT}
{#if importMethod === 'manual'}
Expand Down Expand Up @@ -426,6 +429,18 @@
</button>
</div>
{/if}
{:else if activeStep === NFTSteps.RECIPIENT}
<div class="f-col w-full">
<Button
disabled={!canProceed}
type="primary"
class="px-[28px] py-[14px] rounded-full flex-1 w-auto text-white"
on:click={() => (activeStep = NFTSteps.REVIEW)}><span class="body-bold">{nextStepButtonText}</span></Button>

<button on:click={previousStep} class="flex justify-center py-3 link">
{$t('common.back')}
</button>
</div>
{/if}
</div>
</Card>
Expand Down
1 change: 1 addition & 0 deletions packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ImportStep.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -217,6 +217,7 @@
<!--
Manual NFT Input
-->

{#if importMethod === 'manual'}
<div id="manualImport">
<AddressInput
Expand Down
18 changes: 18 additions & 0 deletions packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/RecipientStep.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<script lang="ts">
import { ProcessingFee } from '../ProcessingFee';
import Recipient from '../Recipient.svelte';
let recipientComponent: Recipient;
let processingFeeComponent: ProcessingFee;
export let hasEnoughEth: boolean = false;
export const reset = () => {
recipientComponent.clearRecipient();
processingFeeComponent.resetProcessingFee();
};
</script>

<Recipient bind:this={recipientComponent} />
<ProcessingFee bind:this={processingFeeComponent} bind:hasEnoughEth />

<div class="h-sep" />
115 changes: 72 additions & 43 deletions packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ReviewStep.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,22 @@
<script lang="ts">
import { createEventDispatcher } from 'svelte';
import { t } from 'svelte-i18n';
import { chainConfig } from '$chainConfig';
import { ProcessingFee } from '$components/Bridge/ProcessingFee';
import Recipient from '$components/Bridge/Recipient.svelte';
import { destNetwork as destinationChain, selectedNFTs } from '$components/Bridge/state';
import { destNetwork as destinationChain, enteredAmount, selectedNFTs } from '$components/Bridge/state';
import { ChainSelector } from '$components/ChainSelector';
import { Icon, IconFlipper } from '$components/Icon';
import { IconFlipper } from '$components/Icon';
import { NFTDisplay } from '$components/NFTs';
import { shortenAddress } from '$libs/util/shortenAddress';
import { network } from '$stores/network';
let recipientComponent: Recipient;
let processingFeeComponent: ProcessingFee;
let hasEnoughEth: boolean;
const dispatch = createEventDispatcher();
$: nftsToDisplay = $selectedNFTs ? $selectedNFTs : [];
Expand All @@ -29,61 +33,70 @@
nftView = NFTView.CARDS;
}
};
const editTransactionDetails = () => {
dispatch('editTransactionDetails');
};
</script>

<div class="container mx-auto inline-block align-middle space-y-[25px]">
<div class="flex justify-between mb-2 items-center">
<div class="font-bold">{$t('common.destination')}</div>
<div><ChainSelector small value={$destinationChain} readOnly /></div>
<div class="font-bold text-primary-content">{$t('bridge.nft.step.review.transfer_details')}</div>
</div>
<div class="flex justify-between mb-2">
<div class="font-bold">{$t('common.contract_address')}</div>
<div class="text-secondary-content">
<ul>
{#each nftsToDisplay as nft}
{@const currentChain = $network?.id}
{#if currentChain && $destinationChain?.id}
<li>
<a
class="flex justify-start link"
href={`${chainConfig[$destinationChain?.id].urls.explorer}`}
target="_blank">
{shortenAddress(nft.addresses[currentChain], 8, 12)}
<Icon type="arrow-top-right" fillClass="fill-primary-link" />
</a>
</li>
{/if}
{/each}
</ul>
<div>
<div class="flex justify-between items-center">
<div class="text-secondary-content">{$t('common.from')}</div>
<div class="">{$network?.name}</div>
</div>
<div class="flex justify-between items-center">
<div class="text-secondary-content">{$t('common.to')}</div>
<div class="">{$destinationChain?.name}</div>
</div>
</div>

<div class="flex justify-between">
<div class="font-bold">{$t('inputs.token_id_input.label')}</div>
<div class="break-words text-right text-secondary-content">
<ul>
{#each nftsToDisplay as nft}
<li>{nft.tokenId}</li>
{/each}
</ul>
<div class="flex justify-between">
<div class="text-secondary-content">{$t('common.contract_address')}</div>
<div class="">
<ul>
{#each nftsToDisplay as nft}
{@const currentChain = $network?.id}
{#if currentChain && $destinationChain?.id}
<li>
<a
class="flex justify-start link"
href={`${chainConfig[currentChain].urls.explorer}/token/${nft.addresses[currentChain]}`}
target="_blank">
{shortenAddress(nft.addresses[currentChain], 8, 12)}
<!-- <Icon type="arrow-top-right" fillClass="fill-primary-link" /> -->
</a>
</li>
{/if}
{/each}
</ul>
</div>
</div>
</div>
</div>

<div class="h-sep" />
<!--
Recipient & Processing Fee
-->
<div class="space-y-[16px]">
<Recipient bind:this={recipientComponent} />
<ProcessingFee bind:this={processingFeeComponent} />
<div class="flex justify-between">
<div class="text-secondary-content">{$t('inputs.token_id_input.label')}</div>
<div class="break-words text-right">
<ul>
{#each nftsToDisplay as nft}
<li>{nft.tokenId}</li>
{/each}
</ul>
</div>
</div>

<div class="flex justify-between">
<div class="text-secondary-content">{$t('common.amount')}</div>
{$enteredAmount}
</div>
</div>
</div>

<div class="h-sep" />
<!--
NFT List or Card View
-->
<section class="space-y-2">
<section class="space-y-[16px]">
<div class="flex justify-between items-center w-full">
<div class="flex items-center gap-2">
<span>{$t('bridge.nft.step.review.your_tokens')}</span>
Expand All @@ -101,3 +114,19 @@ NFT List or Card View
</div>
<NFTDisplay loading={false} nfts={$selectedNFTs} {nftView} viewOnly />
</section>

<div class="h-sep" />
<!--
Recipient & Processing Fee
-->

<div class="f-col">
<div class="f-between-center mb-[10px]">
<div class="font-bold text-primary-content">{$t('bridge.nft.step.review.recipient_details')}</div>
<button class="flex justify-start link" on:click={editTransactionDetails}> Edit </button>
</div>
<Recipient bind:this={recipientComponent} small />
<ProcessingFee bind:this={processingFeeComponent} small bind:hasEnoughEth />
</div>

<div class="h-sep" />
1 change: 1 addition & 0 deletions packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
export { default as ImportStep } from './ImportStep.svelte';
export { default as RecipientStep } from './RecipientStep.svelte';
export { default as ReviewStep } from './ReviewStep.svelte';
Loading

1 comment on commit c22b1b9

@vercel
Copy link

@vercel vercel bot commented on c22b1b9 Oct 28, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

bridge-ui-v2-internal – ./packages/bridge-ui-v2

bridge-ui-v2-internal.vercel.app
bridge-ui-v2-internal-git-main-taikoxyz.vercel.app
bridge-ui-v2-internal-taikoxyz.vercel.app

Please sign in to comment.