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 (#14170)
Co-authored-by: Korbinian <KorbinianK@users.noreply.github.com>
- Loading branch information
1 parent
4ce016a
commit 13ebf1c
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
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> |
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> | ||
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
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.