Skip to content

Commit

Permalink
Squashed commit of the following:
Browse files Browse the repository at this point in the history 
commit 4ebd7e7
Author: Korbinian <korbiniank@outlook.de>
Date:   Sat Oct 28 21:13:52 2023 +0200

    fix conditions

commit 38b6f51
Merge: dc456b0 c22b1b9
Author: Korbinian <KorbinianK@users.noreply.github.com>
Date:   Sat Oct 28 20:58:45 2023 +0200

    Merge branch 'main' into feat/bridge-ui-v2--amount-for-1155

commit dc456b0
Author: Korbinian <korbiniank@outlook.de>
Date:   Sat Oct 28 16:34:13 2023 +0200

    fix padding

commit b658f1b
Author: Korbinian <korbiniank@outlook.de>
Date:   Sat Oct 28 16:33:51 2023 +0200

    add amount to import step, validations

commit 8cfc8da
Author: Korbinian <korbiniank@outlook.de>
Date:   Fri Oct 27 16:36:53 2023 +0200

    cleanup

commit 6db4be0
Merge: 72b5e8d 2d52e86
Author: Korbinian <korbiniank@outlook.de>
Date:   Fri Oct 27 16:30:43 2023 +0200

    Merge branch 'main' into chore/bridge-ui-v2--nft-review-step-design-pass

commit 72b5e8d
Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Date:   Fri Oct 27 22:15:46 2023 +0800

    chore(deps): bump google.golang.org/grpc from 1.53.0 to 1.56.3 (#15038)

    Signed-off-by: dependabot[bot] <support@github.com>
    Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

commit 15ade8a
Author: FINE <101636126+finedao@users.noreply.github.com>
Date:   Fri Oct 27 01:00:33 2023 +0530

    Update node-troubleshooting.mdx (#15017)

    Co-authored-by: Roger <50648015+RogerLamTd@users.noreply.github.com>

commit 7ca3532
Author: Korbinian <KorbinianK@users.noreply.github.com>
Date:   Thu Oct 26 19:33:51 2023 +0200

    feat(bridge-ui-v2): Import step refinement (#15020)

commit 241e23a
Author: Kenk <kenghin_lim@hotmail.com>
Date:   Thu Oct 26 12:12:55 2023 +0700

    feat(website): add rhino.fi, Hotpot and DotTaiko to ecosystem (#15024)

    Co-authored-by: dave <13951458+d1onys1us@users.noreply.github.com>

commit 391e06f
Author: Roger <50648015+RogerLamTd@users.noreply.github.com>
Date:   Wed Oct 25 21:49:32 2023 -0700

    docs(website): add hint to remove old testnet volumes (#15039)

commit 13ddffc
Author: Korbinian <korbiniank@outlook.de>
Date:   Fri Oct 27 16:17:49 2023 +0200

    merge main

commit 03ea9ff
Author: xiaodino <ruby@taiko.xyz>
Date:   Wed Oct 25 19:14:51 2023 -0700

    feat(bridge-ui-v2): upgrade walletconnect from v2 to v3 (#14999)

commit f71c7b7
Author: Korbinian <korbiniank@outlook.de>
Date:   Fri Oct 27 15:44:11 2023 +0200

    add recipient flow

commit 16c455d
Author: Korbinian <korbiniank@outlook.de>
Date:   Thu Oct 26 12:33:01 2023 +0200

    paddings, explorer links, fix crosschainaddress for 1155

commit 6eb5987
Author: Korbinian <korbiniank@outlook.de>
Date:   Wed Oct 25 17:06:11 2023 +0200

    fix selectedToken store, updated design

commit 7409a28
Author: Korbinian <korbiniank@outlook.de>
Date:   Wed Oct 25 16:17:55 2023 +0200

    fix separator for nft lists

commit ab7759e
Author: Korbinian <korbiniank@outlook.de>
Date:   Wed Oct 25 16:17:38 2023 +0200

    i18n

commit 00cd52d
Author: Korbinian <korbiniank@outlook.de>
Date:   Wed Oct 25 16:17:22 2023 +0200

    dynamic nft display size

commit 83bd7ca
Author: Korbinian <korbiniank@outlook.de>
Date:   Wed Oct 25 16:14:52 2023 +0200

    small recipient and processing fee

commit c4863b8
Author: Korbinian <korbiniank@outlook.de>
Date:   Wed Oct 25 14:51:35 2023 +0200

    cleanup

commit c0ab921
Merge: 8a2c54a 02664a7
Author: Korbinian <KorbinianK@users.noreply.github.com>
Date:   Wed Oct 25 14:53:34 2023 +0200

    Merge branch 'main' into chore/brige-ui-v2--nft-import-design-pass

commit 8a2c54a
Author: Korbinian <korbiniank@outlook.de>
Date:   Wed Oct 25 14:46:36 2023 +0200

    fix selection for listitem

commit b7bd97e
Author: Korbinian <korbiniank@outlook.de>
Date:   Wed Oct 25 12:23:02 2023 +0200

    moved nft components to folder,  fixed selection issues

commit 4b4339e
Author: Korbinian <korbiniank@outlook.de>
Date:   Tue Oct 24 15:24:07 2023 +0200

    moved selectedNFTs to store for state sync

commit 68517f0
Author: Korbinian <korbiniank@outlook.de>
Date:   Tue Oct 24 14:52:07 2023 +0200

    nft card grid view and selection

commit 61b194f
Author: Korbinian <korbiniank@outlook.de>
Date:   Tue Oct 24 14:51:27 2023 +0200

    update icons

commit ad16ed8
Author: Korbinian <korbiniank@outlook.de>
Date:   Tue Oct 24 12:15:05 2023 +0200

    update design and some refactoring
  • Loading branch information
@KorbinianK
KorbinianK committed Oct 28, 2023
1 parent c22b1b9 commit d7d96f0
Show file tree
Hide file tree
Showing 10 changed files with 151 additions and 60 deletions.
65 changes: 52 additions & 13 deletions packages/bridge-ui-v2/src/components/Bridge/Actions.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
import { routingContractsMap } from '$bridgeConfig';
import { Button } from '$components/Button';
import { Icon } from '$components/Icon';
import { bridges } from '$libs/bridge';
import { bridges, type RequireApprovalArgs } from '$libs/bridge';
import type { ERC721Bridge } from '$libs/bridge/ERC721Bridge';
import type { ERC1155Bridge } from '$libs/bridge/ERC1155Bridge';
import { type NFT, TokenType } from '$libs/token';
Expand Down Expand Up @@ -49,6 +49,7 @@
//TODO: this should probably be checked somewhere else?
export async function checkTokensApproved() {
$validatingAmount = true;
if ($selectedToken?.type === TokenType.ERC721 || $selectedToken?.type === TokenType.ERC1155) {
if ($account?.address && $network?.id && $destNetwork?.id) {
const currentChainId = $network?.id;
Expand Down Expand Up @@ -85,27 +86,32 @@
// Let's check if the vault is approved for all ERC721
try {
const requiresApproval = await bridge.requiresApproval({
const args: RequireApprovalArgs = {
tokenAddress: token.addresses[currentChainId],
owner: wallet.account.address,
spenderAddress: erc721VaultAddress,
tokenId: BigInt(token.tokenId),
chainId: currentChainId,
});
};
const requiresApproval = await bridge.requiresApproval(args);
allTokensApproved = !requiresApproval;
} catch (error) {
console.error('isApprovedForAll error');
}
}
}
}
$validatingAmount = false;
}
// TODO: feels like we need a state machine here
// Basic conditions so we can even start the bridging process
$: hasAddress = $recipientAddress || $account?.address;
$: hasNetworks = $network?.id && $destNetwork?.id;
$: hasBalance =
!$insufficientBalance &&
!$computingBalance &&
!$errorComputingBalance &&
($tokenBalance
Expand All @@ -115,7 +121,7 @@
? $tokenBalance.value > BigInt(0)
: false // ERC20
: false);
$: canDoNothing = !hasAddress || !hasNetworks || !hasBalance || !$selectedToken || !$enteredAmount;
$: canDoNothing = !hasAddress || !hasNetworks || !hasBalance || !$selectedToken;
// Conditions for approve/bridge steps
$: isSelectedERC20 = $selectedToken && $selectedToken.type === TokenType.ERC20;
Expand All @@ -136,23 +142,56 @@
// Conditions to disable/enable buttons
$: disableApprove =
$selectedToken?.type === TokenType.ERC20
? canDoNothing || $insufficientBalance || $validatingAmount || approving || isTokenApproved
? canDoNothing || $insufficientBalance || $validatingAmount || approving || isTokenApproved || !$enteredAmount
: $selectedToken?.type === TokenType.ERC721
? allTokensApproved || approving
: $selectedToken?.type === TokenType.ERC1155
? allTokensApproved || approving
: approving;
$: disableBridge =
$selectedToken?.type === TokenType.ERC20
? canDoNothing || $insufficientAllowance || $insufficientBalance || $validatingAmount || bridging
: $selectedToken?.type === TokenType.ERC721
? !allTokensApproved
: $selectedToken?.type === TokenType.ERC1155
? !allTokensApproved
: bridging || !hasAddress || !hasNetworks || !hasBalance || !$selectedToken || !$enteredAmount;
$: isERC20 = $selectedToken?.type === TokenType.ERC20;
$: isERC721 = $selectedToken?.type === TokenType.ERC721;
$: isERC1155 = $selectedToken?.type === TokenType.ERC1155;
$: isETH = $selectedToken?.type === TokenType.ETH;
$: commonConditions =
!bridging &&
hasAddress &&
hasNetworks &&
hasBalance &&
$selectedToken &&
!$validatingAmount &&
!$insufficientBalance;
$: erc20ConditionsSatisfied =
!canDoNothing && !$insufficientAllowance && commonConditions && $tokenBalance && $enteredAmount;
$: erc721ConditionsSatisfied = allTokensApproved && commonConditions;
$: erc1155ConditionsSatisfied = allTokensApproved && $enteredAmount && $enteredAmount > 0 && commonConditions;
$: ethConditionsSatisfied = commonConditions && $enteredAmount && $enteredAmount > 0;
$: disableBridge = isERC20
? !erc20ConditionsSatisfied
: isERC721
? !erc721ConditionsSatisfied
: isERC1155
? !erc1155ConditionsSatisfied
: isETH
? !ethConditionsSatisfied
: commonConditions;
</script>

bridging {bridging}<br />
balance {hasBalance}<br />
validating {$validatingAmount}<br />
insufficientAllowance {$insufficientAllowance}<br /><br />

canDoNothing {canDoNothing} <br />
$insufficientAllowance {insufficientAllowance} <br />
commonConditions {commonConditions}
enteredAmount {$enteredAmount}<br />
tokenBalance {$tokenBalance}<br />
enteredAmount {#if $enteredAmount}test
{/if}<br />
<div class="f-between-center w-full gap-4">
{#if $selectedToken && $selectedToken.type !== TokenType.ETH}
<Button
Expand Down
72 changes: 46 additions & 26 deletions packages/bridge-ui-v2/src/components/Bridge/Amount.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
<script lang="ts">
import { onDestroy } from 'svelte';
import { t } from 'svelte-i18n';
import { formatUnits, parseUnits } from 'viem';
Expand All @@ -8,7 +7,12 @@
import { LoadingText } from '$components/LoadingText';
import { warningToast } from '$components/NotificationToast';
import { checkBalanceToBridge, getMaxAmountToBridge } from '$libs/bridge';
import { InsufficientAllowanceError, InsufficientBalanceError, RevertedWithFailedError } from '$libs/error';
import {
InsufficientAllowanceError,
InsufficientBalanceError,
RevertedWithFailedError,
UnknownTokenTypeError,
} from '$libs/error';
import { ETHToken, getBalance as getTokenBalance, type NFT, TokenType } from '$libs/token';
import { renderBalance } from '$libs/util/balance';
import { debounce } from '$libs/util/debounce';
Expand Down Expand Up @@ -36,6 +40,7 @@
let inputId = `input-${uid()}`;
let inputBox: InputBox;
let computingMaxAmount = false;
let invalidInput = false;
$: balance = $tokenBalance
? typeof $tokenBalance === 'bigint'
Expand All @@ -47,22 +52,17 @@
: BigInt(0) // ERC20
: BigInt(0);
onDestroy(() => {
clearAmount();
});
// Public API
export function clearAmount() {
inputBox?.clear();
$enteredAmount = BigInt(0);
}
export async function validateAmount(token = $selectedToken, fee = $processingFee) {
$validatingAmount = true; // During validation, we disable all the actions
$insufficientBalance = false;
$insufficientAllowance = false;
$validatingAmount = true; // During validation, we disable all the actions
log('Validating amount');
const to = $recipientAddress || $account?.address;
// We need all these guys to validate
Expand All @@ -74,12 +74,8 @@
!$tokenBalance ||
!$selectedToken ||
$enteredAmount === BigInt(0) // no need to check if the amount is 0
) {
log(
`Missing data to validate amount: ${to}, ${token}, ${$network}, ${$destNetwork}, ${$tokenBalance}, ${$selectedToken}, ${$enteredAmount}`,
);
)
return;
}
try {
await checkBalanceToBridge({
Expand All @@ -106,7 +102,11 @@
case err instanceof RevertedWithFailedError:
warningToast({ title: $t('messages.network.rejected') });
break;
default:
invalidInput = true;
break;
}
console.error('Error validating amount: ', err);
} finally {
$validatingAmount = false;
}
Expand Down Expand Up @@ -154,26 +154,42 @@
// We want to debounce this function for input events.
// Could happen as the user enters an amount
const debouncedValidateAmount = debounce(validateAmount, 300);
let sanitizedValue = '';
// Will trigger on input events. We update the entered amount
// and check it's validity
function inputAmount(event: Event) {
invalidInput = false;
$validatingAmount = true; // During validation, we disable all the actions
if (!$selectedToken) return;
const target = event.target as HTMLInputElement;
let value = target.value;
const { value } = event.target as HTMLInputElement;
if (
$selectedToken.type === TokenType.ERC721 ||
$selectedToken.type === TokenType.ERC1155 ||
!$selectedToken.decimals
) {
$enteredAmount = BigInt(value);
if ($selectedToken.type === TokenType.ERC1155) {
// For ERC1155, no decimals are allowed
if (value.includes('.') || value.includes(',')) {
invalidInput = true;
return;
}
} else if ($selectedToken.type === TokenType.ERC20 || $selectedToken.type === TokenType.ETH) {
// For ERC20 or ETH, replace commas with dots
value = value.replace(/[,]/g, '.');
} else {
$enteredAmount = parseUnits(value, $selectedToken.decimals);
throw new UnknownTokenTypeError($selectedToken.type);
}
sanitizedValue = value;
if ($selectedToken.type === TokenType.ERC1155 || !$selectedToken.decimals) {
$enteredAmount = BigInt(sanitizedValue);
} else {
$enteredAmount = parseUnits(sanitizedValue, $selectedToken.decimals);
}
debouncedValidateAmount();
}
$: if (inputBox && sanitizedValue !== inputBox.getValue()) {
inputBox.setValue(sanitizedValue); // Update InputBox value if sanitizedValue changes
}
// "MAX" button handler
async function useMaxAmount() {
// We cannot calculate the max amount without these guys
Expand Down Expand Up @@ -225,6 +241,8 @@
// or there is an issue computing it
$: showInsufficientBalanceAlert = $insufficientBalance && !$errorComputingBalance && !$computingBalance;
$: noDecimalsAllowedAlert = invalidInput;
// TODO: Disabled for now, potentially confusing users
// $: showInsiffucientAllowanceAlert = $insufficientAllowance && !$errorComputingBalance && !$computingBalance;
</script>
Expand Down Expand Up @@ -255,8 +273,8 @@
type="number"
placeholder="0.01"
min="0"
disabled={$errorComputingBalance || computingMaxAmount}
error={$insufficientBalance}
disabled={computingMaxAmount}
error={$insufficientBalance || invalidInput}
on:input={inputAmount}
bind:this={inputBox}
class="py-6 pr-16 px-[26px] title-subsection-bold border-0 {$$props.class}" />
Expand All @@ -270,11 +288,13 @@
</div>
<div class="flex mt-[8px] min-h-[24px]">
{#if showInsufficientBalanceAlert}
<FlatAlert type="error" message={$t('bridge.errors.insufficient_balance')} class="relative" />
<FlatAlert type="error" message={$t('bridge.errors.insufficient_balance.title')} class="relative" />
<!-- TODO: Disabled for now, potentially confusing users -->

<!-- {:else if showInsiffucientAllowanceAlert}
<FlatAlert type="warning" message={$t('bridge.errors.insufficient_allowance')} class="absolute" /> -->
{:else if noDecimalsAllowedAlert}
<FlatAlert type="error" message={$t('bridge.errors.no_decimals_allowed')} class="relative" />
{/if}
</div>
</div>
Expand Down
18 changes: 11 additions & 7 deletions packages/bridge-ui-v2/src/components/Bridge/NFTBridge.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@
enteredAmount,
processingFee,
recipientAddress,
selectedNFTs,
selectedToken,
} from './state';
import { NFTSteps } from './types';
Expand All @@ -59,7 +60,7 @@
function onNetworkChange(newNetwork: Network, oldNetwork: Network) {
updateForm();
activeStep = NFTSteps.CONFIRM;
if (newNetwork) {
const destChainId = $destinationChain?.id;
if (!$destinationChain?.id) return;
Expand Down Expand Up @@ -122,7 +123,9 @@
throw new Error('token address not found');
}
const tokenIds =
nftIdArray.length > 0 ? nftIdArray.map((num) => BigInt(num)) : selectedNFT.map((nft) => BigInt(nft.tokenId));
nftIdArray.length > 0
? nftIdArray.map((num) => BigInt(num))
: $selectedNFTs && $selectedNFTs.map((nft) => BigInt(nft.tokenId));
let txHash: Hash;
Expand Down Expand Up @@ -179,7 +182,9 @@
};
const tokenIds =
nftIdArray.length > 0 ? nftIdArray.map((num) => BigInt(num)) : selectedNFT.map((nft) => BigInt(nft.tokenId));
nftIdArray.length > 0
? nftIdArray.map((num) => BigInt(num))
: $selectedNFTs && $selectedNFTs.map((nft) => BigInt(nft.tokenId));
const bridgeArgs = await getBridgeArgs($selectedToken, $enteredAmount, commonArgs, nftIdArray);
Expand Down Expand Up @@ -254,7 +259,7 @@
importMethod === 'scan';
scanned = false;
canProceed = false;
selectedNFT = [];
$selectedNFTs = [];
};
/**
Expand All @@ -275,7 +280,6 @@
let validatingImport: boolean = false;
let scanned: boolean = false;
let selectedNFT: NFT[];
let canProceed: boolean = false;
let foundNFTs: NFT[] = [];
Expand Down Expand Up @@ -303,7 +307,7 @@
token.tokenId = id;
fetchNFTImageUrl(token).then((nftWithUrl) => {
$selectedToken = nftWithUrl;
selectedNFT = [nftWithUrl];
$selectedNFTs = [nftWithUrl];
});
} else {
throw new Error('no token');
Expand Down Expand Up @@ -393,7 +397,7 @@
-->
{#if activeStep === NFTSteps.REVIEW}
<div class="f-col w-full gap-4">
<Actions {approve} {bridge} />
<Actions bind:this={actionsComponent} {approve} {bridge} />
<button on:click={previousStep} class="flex justify-center py-3 link">
{$t('common.back')}
</button>
Expand Down
Loading

0 comments on commit d7d96f0

Please sign in to comment.