forked from taikoxyz/taiko-mono
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(bridge-ui-v2): Processing Fee (taikoxyz#14170)
Co-authored-by: Korbinian <[email protected]>
- Loading branch information
1 parent
4ce016a
commit 13ebf1c
Showing
38 changed files
with
563 additions
and
209 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| export const recommentProcessingFee = { | ||
| ethGasLimit: BigInt(900000), | ||
| erc20NotDeployedGasLimit: BigInt(3100000), | ||
| erc20DeployedGasLimit: BigInt(1100000), | ||
| }; | ||
|
|
||
| export const processingFeeComponent = { | ||
| closingDelayOptionClick: 300, | ||
| intervalComputeRecommendedFee: 20000, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
71 changes: 0 additions & 71 deletions
71
packages/bridge-ui-v2/src/components/AmountInput/AmountInput.svelte
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
26 changes: 26 additions & 0 deletions
26
packages/bridge-ui-v2/src/components/Bridge/AmountInput/AmountInput.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| <script lang="ts"> | ||
| import { t } from 'svelte-i18n'; | ||
| import { InputBox } from '$components/InputBox'; | ||
| import { uid } from '$libs/util/uid'; | ||
| import Balance from './Balance.svelte'; | ||
| let inputId = `input-${uid()}`; | ||
| </script> | ||
|
|
||
| <div class="AmountInput f-col space-y-2"> | ||
| <div class="f-between-center text-secondary-content"> | ||
| <label class="body-regular" for={inputId}>{$t('amount_input.label')}</label> | ||
| <Balance /> | ||
| </div> | ||
| <div class="relative f-items-center"> | ||
| <InputBox | ||
| id={inputId} | ||
| type="number" | ||
| placeholder="0.01" | ||
| min="0" | ||
| class="w-full input-box outline-none py-6 pr-16 px-[26px] title-subsection-bold placeholder:text-tertiary-content" /> | ||
| <button class="absolute right-6 uppercase">{$t('amount_input.button.max')}</button> | ||
| </div> | ||
| </div> |
56 changes: 56 additions & 0 deletions
56
packages/bridge-ui-v2/src/components/Bridge/AmountInput/Balance.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| <script lang="ts"> | ||
| import type { FetchBalanceResult } from '@wagmi/core'; | ||
| import { t } from 'svelte-i18n'; | ||
| import LoadingText from '$components/LoadingText/LoadingText.svelte'; | ||
| import { getBalance as getTokenBalance, type Token } from '$libs/token'; | ||
| import { truncateString } from '$libs/util/truncateString'; | ||
| import { type Account, account } from '$stores/account'; | ||
| import { network } from '$stores/network'; | ||
| import { destNetwork, selectedToken } from '../state'; | ||
| let tokenBalance: Maybe<FetchBalanceResult>; | ||
| let computingTokenBalance = false; | ||
| let errorComputingTokenBalance = false; | ||
| async function updateTokenBalance(token: Maybe<Token>, account?: Account, srcChainId?: number, destChainId?: number) { | ||
| if (!token || !account || !account.address) return; | ||
| computingTokenBalance = true; | ||
| errorComputingTokenBalance = false; | ||
| try { | ||
| tokenBalance = await getTokenBalance({ | ||
| token, | ||
| destChainId, | ||
| userAddress: account.address, | ||
| chainId: srcChainId, | ||
| }); | ||
| } catch (error) { | ||
| console.error(error); | ||
| errorComputingTokenBalance = true; | ||
| } finally { | ||
| computingTokenBalance = false; | ||
| } | ||
| } | ||
| export function renderTokenBalance(balance: Maybe<FetchBalanceResult>) { | ||
| if (!balance) return '0.00'; | ||
| return `${truncateString(balance.formatted, 6)} ${balance.symbol}`; | ||
| } | ||
| $: updateTokenBalance($selectedToken, $account, $network?.id, $destNetwork?.id); | ||
| </script> | ||
|
|
||
| <div class="body-small-regular"> | ||
| <span>{$t('amount_input.balance')}:</span> | ||
| <span> | ||
| {#if computingTokenBalance} | ||
| <LoadingText mask="0.0000" /> | ||
| <LoadingText mask="XXX" /> | ||
| {:else} | ||
| {renderTokenBalance(tokenBalance)} | ||
| {/if} | ||
| </span> | ||
| </div> |
1 change: 1 addition & 0 deletions
1
packages/bridge-ui-v2/src/components/Bridge/AmountInput/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export { default as AmountInput } from './AmountInput.svelte'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
51 changes: 51 additions & 0 deletions
51
packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/NoneOption.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| <script lang="ts"> | ||
| import type { Address } from 'abitype'; | ||
| import { recommendProcessingFee } from '$libs/fee'; | ||
| import { getBalance, type Token } from '$libs/token'; | ||
| import { account, network } from '$stores'; | ||
| import { destNetwork, selectedToken } from '../state'; | ||
| export let enoughEth: boolean; | ||
| export let calculating = false; | ||
| export let error = false; | ||
| async function compute(token: Maybe<Token>, userAddress?: Address, srcChainId?: number, destChainId?: number) { | ||
| if (!token || !userAddress || !srcChainId || !destChainId) { | ||
| enoughEth = false; | ||
| return; | ||
| } | ||
| calculating = true; | ||
| error = false; | ||
| try { | ||
| // Get the balance of the user on the destination chain | ||
| const destBalance = await getBalance({ | ||
| token, | ||
| userAddress, | ||
| chainId: destChainId, | ||
| }); | ||
| // Calculate the recommended amount of ETH needed for processMessage call | ||
| const recommendedAmount = await recommendProcessingFee({ | ||
| token, | ||
| destChainId, | ||
| srcChainId, | ||
| }); | ||
| // Does the user have enough ETH to claim manually on the destination chain? | ||
| enoughEth = destBalance ? destBalance?.value >= recommendedAmount : false; | ||
| } catch (err) { | ||
| console.error(err); | ||
| error = true; | ||
| enoughEth = false; | ||
| } finally { | ||
| calculating = false; | ||
| } | ||
| } | ||
| $: compute($selectedToken, $account?.address, $network?.id, $destNetwork?.id); | ||
| </script> |
Oops, something went wrong.