From f71c7b7715247d457e695c45900793b1d7e3c470 Mon Sep 17 00:00:00 2001 From: Korbinian Date: Fri, 27 Oct 2023 15:44:11 +0200 Subject: [PATCH] add recipient flow --- .../src/components/Bridge/NFTBridge.svelte | 39 ++++++++++++---- .../NFTBridgeSteps/RecipientStep.svelte | 18 ++++++++ .../Bridge/NFTBridgeSteps/ReviewStep.svelte | 13 +++++- .../components/Bridge/NFTBridgeSteps/index.ts | 1 + .../Bridge/ProcessingFee/ProcessingFee.svelte | 46 ++++++++++--------- .../src/components/Bridge/Recipient.svelte | 13 ++---- .../src/components/Bridge/state.ts | 2 + .../src/components/Bridge/types.ts | 1 + packages/bridge-ui-v2/src/i18n/en.json | 11 ++++- .../src/libs/bridge/getBridgeArgs.ts | 14 +++--- 10 files changed, 111 insertions(+), 47 deletions(-) create mode 100644 packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/RecipientStep.svelte diff --git a/packages/bridge-ui-v2/src/components/Bridge/NFTBridge.svelte b/packages/bridge-ui-v2/src/components/Bridge/NFTBridge.svelte index e5caaf74d38..2d6e935697d 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/NFTBridge.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/NFTBridge.svelte @@ -35,22 +35,23 @@ 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, destNetwork as destinationChain, enteredAmount, processingFee, + processingFeeMethod, recipientAddress, selectedToken, } from './state'; import { NFTSteps } from './types'; let amountComponent: Amount; - let recipientComponent: Recipient; + let recipientStepComponent: RecipientStep; let processingFeeComponent: ProcessingFee; let actionsComponent: Actions; let importMethod: 'scan' | 'manual' = 'scan'; @@ -181,7 +182,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 }; @@ -242,9 +243,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(); @@ -335,6 +336,10 @@ }); }; + const handleTransactionDetailsClick = () => { + activeStep = NFTSteps.RECIPIENT; + }; + // Whenever the user switches bridge types, we should reset the forms $: $activeBridge && (resetForm(), (activeStep = NFTSteps.IMPORT)); @@ -345,6 +350,7 @@ nftStepDescription = $t(`bridge.description.nft.${stepKey}`); nextStepButtonText = getStepText(); } + onDestroy(() => { resetForm(); }); @@ -353,12 +359,15 @@
{$t('bridge.title.nft.import')} + >{$t('bridge.nft.step.import.title')} {$t('bridge.title.nft.review')} + >{$t('bridge.nft.step.review.title')} {$t('bridge.title.nft.confirm')} + >{$t('bridge.nft.step.confirm.title')} + + {$processingFeeMethod} +
@@ -373,12 +382,14 @@ bind:validating={validatingImport} /> {:else if activeStep === NFTSteps.REVIEW} - + {:else if activeStep === NFTSteps.CONFIRM}
+ {:else if activeStep === NFTSteps.RECIPIENT} + {/if} +
{$t('bridge.nft.step.review.recipient_details')}
- +
- +
diff --git a/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/index.ts b/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/index.ts index 6656ce98287..36f093a3d9f 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/index.ts +++ b/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/index.ts @@ -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'; diff --git a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte index e4f0478801b..a2a811167b1 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte @@ -13,21 +13,20 @@ import { parseToWei } from '$libs/util/parseToWei'; import { uid } from '$libs/util/uid'; - import { processingFee } from '../state'; + import { processingFee, processingFeeMethod } from '../state'; import NoneOption from './NoneOption.svelte'; import RecommendedFee from './RecommendedFee.svelte'; export let small = false; + export let hasEnoughEth = false; let dialogId = `dialog-${uid()}`; - let selectedFeeMethod = ProcessingFeeMethod.RECOMMENDED; let prevOptionSelected = ProcessingFeeMethod.RECOMMENDED; let recommendedAmount = BigInt(0); let calculatingRecommendedAmount = false; let errorCalculatingRecommendedAmount = false; - let hasEnoughEth = false; let calculatingEnoughEth = false; let errorCalculatingEnoughEth = false; @@ -37,14 +36,14 @@ // Public API export function resetProcessingFee() { inputBox?.clear(); - selectedFeeMethod = ProcessingFeeMethod.RECOMMENDED; + $processingFeeMethod = ProcessingFeeMethod.RECOMMENDED; } function closeModal() { // Let's check if we are closing with CUSTOM method selected and zero amount entered - if (selectedFeeMethod === ProcessingFeeMethod.CUSTOM && $processingFee === BigInt(0)) { + if ($processingFeeMethod === ProcessingFeeMethod.CUSTOM && $processingFee === BigInt(0)) { // If so, let's switch to RECOMMENDED method - selectedFeeMethod = ProcessingFeeMethod.RECOMMENDED; + $processingFeeMethod = ProcessingFeeMethod.RECOMMENDED; } removeEscKeyListener(); modalOpen = false; @@ -53,14 +52,14 @@ function openModal() { // Keep track of the selected method before opening the modal // so if we cancel we can go back to the previous method - prevOptionSelected = selectedFeeMethod; + prevOptionSelected = $processingFeeMethod; addEscKeyListener(); modalOpen = true; } function cancelModal() { inputBox?.clear(); - selectedFeeMethod = prevOptionSelected; + $processingFeeMethod = prevOptionSelected; closeModal(); } @@ -69,7 +68,7 @@ } function inputProcessFee(event: Event) { - if (selectedFeeMethod !== ProcessingFeeMethod.CUSTOM) return; + if ($processingFeeMethod !== ProcessingFeeMethod.CUSTOM) return; const { value } = event.target as HTMLInputElement; $processingFee = parseToWei(value); @@ -119,20 +118,21 @@ function unselectNoneIfNotEnoughETH(method: ProcessingFeeMethod, enoughEth: boolean) { if (method === ProcessingFeeMethod.NONE && !enoughEth) { - selectedFeeMethod = ProcessingFeeMethod.RECOMMENDED; + $processingFeeMethod = ProcessingFeeMethod.RECOMMENDED; // We need to manually trigger this update because we are already in an update // cicle, meaning the change above will not start a new one. This is how Svelte // works, batching all the changes and kicking off an update cicle. This could // also prevent infinite loops. It's safe though to call this function because // we're not changing state that could potentially end up in such situation. - updateProcessingFee(selectedFeeMethod, recommendedAmount); + updateProcessingFee($processingFeeMethod, recommendedAmount); } } - $: updateProcessingFee(selectedFeeMethod, recommendedAmount); - - $: unselectNoneIfNotEnoughETH(selectedFeeMethod, hasEnoughEth); + $: { + updateProcessingFee($processingFeeMethod, recommendedAmount); + } + $: unselectNoneIfNotEnoughETH($processingFeeMethod, hasEnoughEth); {#if small} @@ -145,7 +145,9 @@ {:else if errorCalculatingRecommendedAmount} {$t('processing_fee.recommended.error')} {:else} - {formatEther($processingFee ?? BigInt(0))} ETH + {formatEther($processingFee ?? BigInt(0))} ETH {#if $processingFee !== recommendedAmount} + | Customized + {/if} {/if}
@@ -169,7 +171,9 @@ {:else if errorCalculatingRecommendedAmount} {$t('processing_fee.recommended.error')} {:else} - {formatEther($processingFee ?? BigInt(0))} ETH + {formatEther($processingFee ?? BigInt(0))} ETH {#if $processingFee !== recommendedAmount} + | Customized + {/if} {/if} @@ -206,7 +210,7 @@ type="radio" value={ProcessingFeeMethod.RECOMMENDED} name="processingFeeMethod" - bind:group={selectedFeeMethod} /> + bind:group={$processingFeeMethod} /> @@ -227,7 +231,7 @@ disabled={!hasEnoughEth} value={ProcessingFeeMethod.NONE} name="processingFeeMethod" - bind:group={selectedFeeMethod} /> + bind:group={$processingFeeMethod} />
{#if !hasEnoughEth} @@ -251,16 +255,16 @@ type="radio" value={ProcessingFeeMethod.CUSTOM} name="processingFeeMethod" - bind:group={selectedFeeMethod} /> + bind:group={$processingFeeMethod} />
- {#if selectedFeeMethod === ProcessingFeeMethod.CUSTOM} + {#if $processingFeeMethod === ProcessingFeeMethod.CUSTOM} diff --git a/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte b/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte index d244106bffc..27ea58ded83 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte @@ -1,5 +1,4 @@