From 846a18dac69078d9bb31c03ea735ae2b6648c306 Mon Sep 17 00:00:00 2001 From: jeff <113397187+cyberhorsey@users.noreply.github.com> Date: Wed, 21 Dec 2022 22:37:55 -0800 Subject: [PATCH] feat(bridge-ui): tooltips, bug fix, general UI enhancements (#462) --- packages/bridge-ui/index.html | 12 +- packages/bridge-ui/package.json | 1 + packages/bridge-ui/public/taiko-favicon.png | Bin 0 -> 7618 bytes packages/bridge-ui/src/App.svelte | 20 +- .../src/components/AddressDropdown.svelte | 25 +- .../src/components/ChainDropdown.svelte | 21 +- .../src/components/ERC20Faucet.svelte | 65 ++++ .../bridge-ui/src/components/Navbar.svelte | 12 +- .../src/components/TaikoBanner.svelte | 2 +- .../bridge-ui/src/components/Tooltip.svelte | 11 + .../src/components/Transaction.svelte | 67 +++- .../src/components/TransactionDetail.svelte | 76 +++++ .../src/components/Transactions.svelte | 9 +- .../src/components/buttons/Connect.svelte | 4 +- .../src/components/buttons/SelectToken.svelte | 13 +- .../src/components/form/BridgeForm.svelte | 86 ++--- .../bridge-ui/src/components/form/Memo.svelte | 67 ++-- .../src/components/form/ProcessingFee.svelte | 79 ++++- .../src/components/form/SelectChain.svelte | 6 +- .../src/components/icons/ArrowDown.svelte | 14 - .../src/components/icons/ArrowLeft.svelte | 4 - .../components/icons/ArrowRightLeft.svelte | 14 - .../src/components/icons/ChevDown.svelte | 15 - .../components/icons/CoinbaseWallet.svelte | 6 +- .../src/components/icons/Copy.svelte | 5 - .../src/components/icons/Disconnect.svelte | 5 - .../src/components/icons/Horse.svelte | 59 ++++ .../src/components/icons/Logo.svelte | 27 -- .../src/components/icons/MetaMask.svelte | 296 ++++++++++-------- .../src/components/icons/TaikoLogo.svelte | 62 ++++ .../src/components/icons/Transactions.svelte | 6 - .../src/components/modals/Modal.svelte | 16 +- .../src/components/modals/TooltipModal.svelte | 17 + .../src/constants/abi/MintableERC20.ts | 255 +++++++++++++++ packages/bridge-ui/src/domain/token.ts | 3 +- packages/bridge-ui/src/erc20/bridge.spec.ts | 17 +- packages/bridge-ui/src/erc20/bridge.ts | 10 +- packages/bridge-ui/src/i18n.js | 69 ++-- packages/bridge-ui/src/pages/home/Home.svelte | 42 ++- packages/bridge-ui/src/store/transactions.ts | 3 +- .../src/utils/recommendProcessingFee.ts | 8 +- pnpm-lock.yaml | 6 + 42 files changed, 1083 insertions(+), 452 deletions(-) create mode 100644 packages/bridge-ui/public/taiko-favicon.png create mode 100644 packages/bridge-ui/src/components/ERC20Faucet.svelte create mode 100644 packages/bridge-ui/src/components/Tooltip.svelte create mode 100644 packages/bridge-ui/src/components/TransactionDetail.svelte delete mode 100644 packages/bridge-ui/src/components/icons/ArrowDown.svelte delete mode 100644 packages/bridge-ui/src/components/icons/ArrowLeft.svelte delete mode 100644 packages/bridge-ui/src/components/icons/ArrowRightLeft.svelte delete mode 100644 packages/bridge-ui/src/components/icons/ChevDown.svelte delete mode 100644 packages/bridge-ui/src/components/icons/Copy.svelte delete mode 100644 packages/bridge-ui/src/components/icons/Disconnect.svelte create mode 100644 packages/bridge-ui/src/components/icons/Horse.svelte delete mode 100644 packages/bridge-ui/src/components/icons/Logo.svelte create mode 100644 packages/bridge-ui/src/components/icons/TaikoLogo.svelte delete mode 100644 packages/bridge-ui/src/components/icons/Transactions.svelte create mode 100644 packages/bridge-ui/src/components/modals/TooltipModal.svelte create mode 100644 packages/bridge-ui/src/constants/abi/MintableERC20.ts diff --git a/packages/bridge-ui/index.html b/packages/bridge-ui/index.html index 772cde44bed..d52ecefa974 100644 --- a/packages/bridge-ui/index.html +++ b/packages/bridge-ui/index.html @@ -2,12 +2,14 @@ - - - - - + + + + Bridge diff --git a/packages/bridge-ui/package.json b/packages/bridge-ui/package.json index a76b1abf728..d084f58c3f3 100644 --- a/packages/bridge-ui/package.json +++ b/packages/bridge-ui/package.json @@ -42,6 +42,7 @@ "rollup-plugin-polyfill-node": "^0.10.2", "svelte": "^3.53.1", "svelte-check": "^2.8.0", + "svelte-heros-v2": "^0.3.10", "svelte-jester": "^2.1.5", "svelte-loader": "^3.1.2", "svelte-preprocess": "^4.10.7", diff --git a/packages/bridge-ui/public/taiko-favicon.png b/packages/bridge-ui/public/taiko-favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..28da6ff13433ccad107f8fc90e7003be222957ad GIT binary patch literal 7618 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 { tx.interval = interval; + if (!tx.signal) return; + const contract = new ethers.Contract( chains[tx.toChainId].bridgeAddress, BridgeABI, @@ -201,16 +203,13 @@ -
-
- - - -
- - - -
+
+ + + +
+ +
diff --git a/packages/bridge-ui/src/components/AddressDropdown.svelte b/packages/bridge-ui/src/components/AddressDropdown.svelte index b977e242741..3308f227e8e 100644 --- a/packages/bridge-ui/src/components/AddressDropdown.svelte +++ b/packages/bridge-ui/src/components/AddressDropdown.svelte @@ -1,20 +1,18 @@ diff --git a/packages/bridge-ui/src/components/ChainDropdown.svelte b/packages/bridge-ui/src/components/ChainDropdown.svelte index 3388ef2128f..93ddf19bb9c 100644 --- a/packages/bridge-ui/src/components/ChainDropdown.svelte +++ b/packages/bridge-ui/src/components/ChainDropdown.svelte @@ -1,14 +1,12 @@ - diff --git a/packages/bridge-ui/src/components/TaikoBanner.svelte b/packages/bridge-ui/src/components/TaikoBanner.svelte index 83824f5c1cc..2ea89ce246f 100644 --- a/packages/bridge-ui/src/components/TaikoBanner.svelte +++ b/packages/bridge-ui/src/components/TaikoBanner.svelte @@ -4,7 +4,7 @@
diff --git a/packages/bridge-ui/src/components/Tooltip.svelte b/packages/bridge-ui/src/components/Tooltip.svelte new file mode 100644 index 00000000000..1ccae3a0157 --- /dev/null +++ b/packages/bridge-ui/src/components/Tooltip.svelte @@ -0,0 +1,11 @@ + + + (isOpen = true)} + size="18" + variation="outline" +/> diff --git a/packages/bridge-ui/src/components/Transaction.svelte b/packages/bridge-ui/src/components/Transaction.svelte index fbe65fd94c3..52c494c71c3 100644 --- a/packages/bridge-ui/src/components/Transaction.svelte +++ b/packages/bridge-ui/src/components/Transaction.svelte @@ -2,12 +2,12 @@ import type { BridgeTransaction } from "../domain/transactions"; import { chains, CHAIN_MAINNET, CHAIN_TKO } from "../domain/chain"; import type { Chain } from "../domain/chain"; - import TransactionsIcon from "./icons/Transactions.svelte"; + import { ArrowTopRightOnSquare } from "svelte-heros-v2"; import { MessageStatus } from "../domain/message"; import { Contract, ethers } from "ethers"; import { bridges } from "../store/bridge"; import { signer } from "../store/signer"; - import { pendingTransactions } from "../store/transactions"; + import { pendingTransactions, showTransactionDetails } from "../store/transactions"; import { errorToast, successToast } from "../utils/toast"; import { _ } from "svelte-i18n"; import { @@ -21,12 +21,15 @@ import HeaderSync from "../constants/abi/HeaderSync"; import { providers } from "../store/providers"; import { fetchSigner, switchNetwork } from "@wagmi/core"; + import Tooltip from "./Tooltip.svelte"; + import TooltipModal from "./modals/TooltipModal.svelte"; export let transaction: BridgeTransaction; export let fromChain: Chain; export let toChain: Chain; + let tooltipOpen: boolean = false; let processable: boolean = false; onMount(async () => { @@ -91,7 +94,7 @@ const srcBlock = await $providers .get(chains[transaction.message.srcChainId.toNumber()].id) .getBlock(latestSyncedHeader); - return transaction.receipt.blockNumber >= srcBlock.number; + return transaction.receipt.blockNumber <= srcBlock.number; } @@ -110,20 +113,7 @@ : ethers.utils.formatUnits(transaction.amountInWei)} {transaction.message?.data !== "0x" ? transaction.symbol : "ETH"} - - - - window.open( - `${fromChain.explorerUrl}/tx/${transaction.ethersTx.hash}`, - "_blank" - )} - > - - - - + {#if !processable} Pending... @@ -161,9 +151,52 @@ {:else if transaction.status === MessageStatus.Done} Claimed {/if} + (tooltipOpen = true)}> + + + + + + $showTransactionDetails = transaction}> + + + + +
+ A bridge message will pass through various states: +

+
    +
  • + Pending: Your asset is not ready to be bridged. Taiko + A1 => Ethereum A1 bridging can take several hours before being ready. + Ethereum A1 => Taiko A1 should be available to claim within minutes. +
  • +
  • + Claimable: Your asset is ready to be claimed on the + destination chain, and requires a transaction. +
  • +
  • + Claimed: Your asset has finished bridging, and is + available to you on the destination chain. +
  • +
  • + Retry: The relayer has failed to process this + message, and you must retry the processing yourself. +
  • +
  • + Failed: Your bridged asset is unable to be processed, + and is available to you on the source chain. +
  • +
+
+
+
+ diff --git a/packages/bridge-ui/src/components/form/SelectChain.svelte b/packages/bridge-ui/src/components/form/SelectChain.svelte index b4242b5797b..6a4fc919b84 100644 --- a/packages/bridge-ui/src/components/form/SelectChain.svelte +++ b/packages/bridge-ui/src/components/form/SelectChain.svelte @@ -1,5 +1,5 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/packages/bridge-ui/src/components/icons/Logo.svelte b/packages/bridge-ui/src/components/icons/Logo.svelte deleted file mode 100644 index d94830b9727..00000000000 --- a/packages/bridge-ui/src/components/icons/Logo.svelte +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - - - - diff --git a/packages/bridge-ui/src/components/icons/MetaMask.svelte b/packages/bridge-ui/src/components/icons/MetaMask.svelte index ba7c238d950..c4b2517cab3 100644 --- a/packages/bridge-ui/src/components/icons/MetaMask.svelte +++ b/packages/bridge-ui/src/components/icons/MetaMask.svelte @@ -1,133 +1,179 @@ - - - - - - - - - - - - - - - - - - - - - - - - + .st10 { + fill: #e2761b; + stroke: #e2761b; + stroke-linecap: round; + stroke-linejoin: round; + } + .st11 { + fill: #e4761b; + stroke: #e4761b; + stroke-linecap: round; + stroke-linejoin: round; + } + .st2 { + fill: #d7c1b3; + stroke: #d7c1b3; + stroke-linecap: round; + stroke-linejoin: round; + } + .st3 { + fill: #233447; + stroke: #233447; + stroke-linecap: round; + stroke-linejoin: round; + } + .st4 { + fill: #cd6116; + stroke: #cd6116; + stroke-linecap: round; + stroke-linejoin: round; + } + .st5 { + fill: #e4751f; + stroke: #e4751f; + stroke-linecap: round; + stroke-linejoin: round; + } + .st6 { + fill: #f6851b; + stroke: #f6851b; + stroke-linecap: round; + stroke-linejoin: round; + } + .st7 { + fill: #c0ad9e; + stroke: #c0ad9e; + stroke-linecap: round; + stroke-linejoin: round; + } + .st8 { + fill: #161616; + stroke: #161616; + stroke-linecap: round; + stroke-linejoin: round; + } + .st9 { + fill: #763d16; + stroke: #763d16; + stroke-linecap: round; + stroke-linejoin: round; + } + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/bridge-ui/src/components/icons/TaikoLogo.svelte b/packages/bridge-ui/src/components/icons/TaikoLogo.svelte new file mode 100644 index 00000000000..26595968c90 --- /dev/null +++ b/packages/bridge-ui/src/components/icons/TaikoLogo.svelte @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + diff --git a/packages/bridge-ui/src/components/icons/Transactions.svelte b/packages/bridge-ui/src/components/icons/Transactions.svelte deleted file mode 100644 index 35a8f9eebf7..00000000000 --- a/packages/bridge-ui/src/components/icons/Transactions.svelte +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/packages/bridge-ui/src/components/modals/Modal.svelte b/packages/bridge-ui/src/components/modals/Modal.svelte index 9892318aef0..093e428bbb0 100644 --- a/packages/bridge-ui/src/components/modals/Modal.svelte +++ b/packages/bridge-ui/src/components/modals/Modal.svelte @@ -12,7 +12,15 @@ }; - + + diff --git a/packages/bridge-ui/src/components/modals/TooltipModal.svelte b/packages/bridge-ui/src/components/modals/TooltipModal.svelte new file mode 100644 index 00000000000..a7ea557e7f7 --- /dev/null +++ b/packages/bridge-ui/src/components/modals/TooltipModal.svelte @@ -0,0 +1,17 @@ + + + +
+
+ +
+ +
+
diff --git a/packages/bridge-ui/src/constants/abi/MintableERC20.ts b/packages/bridge-ui/src/constants/abi/MintableERC20.ts new file mode 100644 index 00000000000..1547279faec --- /dev/null +++ b/packages/bridge-ui/src/constants/abi/MintableERC20.ts @@ -0,0 +1,255 @@ +export default [ + { + inputs: [], + stateMutability: "nonpayable", + type: "constructor", + }, + { + anonymous: false, + inputs: [ + { + indexed: true, + internalType: "address", + name: "owner", + type: "address", + }, + { + indexed: true, + internalType: "address", + name: "spender", + type: "address", + }, + { + indexed: false, + internalType: "uint256", + name: "value", + type: "uint256", + }, + ], + name: "Approval", + type: "event", + }, + { + anonymous: false, + inputs: [ + { + indexed: true, + internalType: "address", + name: "from", + type: "address", + }, + { + indexed: true, + internalType: "address", + name: "to", + type: "address", + }, + { + indexed: false, + internalType: "uint256", + name: "value", + type: "uint256", + }, + ], + name: "Transfer", + type: "event", + }, + { + inputs: [ + { + internalType: "address", + name: "", + type: "address", + }, + { + internalType: "address", + name: "", + type: "address", + }, + ], + name: "allowance", + outputs: [ + { + internalType: "uint256", + name: "", + type: "uint256", + }, + ], + stateMutability: "view", + type: "function", + }, + { + inputs: [ + { + internalType: "address", + name: "spender", + type: "address", + }, + { + internalType: "uint256", + name: "amount", + type: "uint256", + }, + ], + name: "approve", + outputs: [ + { + internalType: "bool", + name: "", + type: "bool", + }, + ], + stateMutability: "nonpayable", + type: "function", + }, + { + inputs: [ + { + internalType: "address", + name: "", + type: "address", + }, + ], + name: "balanceOf", + outputs: [ + { + internalType: "uint256", + name: "", + type: "uint256", + }, + ], + stateMutability: "view", + type: "function", + }, + { + inputs: [ + { + internalType: "uint256", + name: "amount", + type: "uint256", + }, + ], + name: "burn", + outputs: [], + stateMutability: "nonpayable", + type: "function", + }, + { + inputs: [], + name: "decimals", + outputs: [ + { + internalType: "uint8", + name: "", + type: "uint8", + }, + ], + stateMutability: "view", + type: "function", + }, + { + inputs: [ + { + internalType: "uint256", + name: "amount", + type: "uint256", + }, + ], + name: "mint", + outputs: [], + stateMutability: "nonpayable", + type: "function", + }, + { + inputs: [], + name: "name", + outputs: [ + { + internalType: "string", + name: "", + type: "string", + }, + ], + stateMutability: "view", + type: "function", + }, + { + inputs: [], + name: "symbol", + outputs: [ + { + internalType: "string", + name: "", + type: "string", + }, + ], + stateMutability: "view", + type: "function", + }, + { + inputs: [], + name: "totalSupply", + outputs: [ + { + internalType: "uint256", + name: "", + type: "uint256", + }, + ], + stateMutability: "view", + type: "function", + }, + { + inputs: [ + { + internalType: "address", + name: "recipient", + type: "address", + }, + { + internalType: "uint256", + name: "amount", + type: "uint256", + }, + ], + name: "transfer", + outputs: [ + { + internalType: "bool", + name: "", + type: "bool", + }, + ], + stateMutability: "nonpayable", + type: "function", + }, + { + inputs: [ + { + internalType: "address", + name: "sender", + type: "address", + }, + { + internalType: "address", + name: "recipient", + type: "address", + }, + { + internalType: "uint256", + name: "amount", + type: "uint256", + }, + ], + name: "transferFrom", + outputs: [ + { + internalType: "bool", + name: "", + type: "bool", + }, + ], + stateMutability: "nonpayable", + type: "function", + }, +]; diff --git a/packages/bridge-ui/src/domain/token.ts b/packages/bridge-ui/src/domain/token.ts index 2b3f1f40f61..db6b3743945 100644 --- a/packages/bridge-ui/src/domain/token.ts +++ b/packages/bridge-ui/src/domain/token.ts @@ -2,6 +2,7 @@ import Eth from "../components/icons/ETH.svelte"; import type { ComponentType } from "svelte"; import Tko from "../components/icons/TKO.svelte"; import { CHAIN_MAINNET, CHAIN_TKO } from "./chain"; +import Horse from "../components/icons/Horse.svelte"; type Address = { chainId: number; @@ -66,7 +67,7 @@ export const HORSE: Token = { ], decimals: 18, symbol: "HORSE", - logoComponent: Tko, + logoComponent: Horse, }; export const tokens = [ETH, HORSE]; diff --git a/packages/bridge-ui/src/erc20/bridge.spec.ts b/packages/bridge-ui/src/erc20/bridge.spec.ts index 0dce4d84edf..a7851516321 100644 --- a/packages/bridge-ui/src/erc20/bridge.spec.ts +++ b/packages/bridge-ui/src/erc20/bridge.spec.ts @@ -195,12 +195,12 @@ describe("bridge tests", () => { opts.tokenAddress, opts.amountInWei, BigNumber.from(100000), - 0, + opts.processingFeeInWei, "0xfake", - opts.memo - // { - // value: opts.processingFeeInWei, - // } + opts.memo, + { + value: opts.processingFeeInWei, + } ); }); @@ -231,9 +231,12 @@ describe("bridge tests", () => { opts.tokenAddress, opts.amountInWei, BigNumber.from(0), - 0, + BigNumber.from(0), "0xfake", - "" + "", + { + value: BigNumber.from(0), + } ); }); diff --git a/packages/bridge-ui/src/erc20/bridge.ts b/packages/bridge-ui/src/erc20/bridge.ts index e16aafeb2f5..86aaada459f 100644 --- a/packages/bridge-ui/src/erc20/bridge.ts +++ b/packages/bridge-ui/src/erc20/bridge.ts @@ -105,12 +105,12 @@ class ERC20Bridge implements Bridge { opts.tokenAddress, opts.amountInWei, message.gasLimit, - 0, + message.processingFee, message.refundAddress, - message.memo - // { - // value: message.processingFee.add(message.callValue), - // } + message.memo, + { + value: message.processingFee.add(message.callValue), + } ); return tx; diff --git a/packages/bridge-ui/src/i18n.js b/packages/bridge-ui/src/i18n.js index 7cf63c05c7a..8f994bd81b8 100644 --- a/packages/bridge-ui/src/i18n.js +++ b/packages/bridge-ui/src/i18n.js @@ -1,42 +1,41 @@ - import { _, dictionary, locale } from "svelte-i18n"; function setupI18n({ withLocale: _locale } = { withLocale: "en" }) { - dictionary.set({ - en: { - home: { - title: "Taiko Bridge", - selectToken: "Select Token", - to: "To", - bridge: "Bridge", - approve: "Approve" - }, - "bridgeForm": { - fieldLabel: "Bridge Token", - maxLabel: "Max:", - processingFeeLabel: "Processing Fee", - bridge: "Bridge", - approve: "Approve", - }, - nav: { - connect: "Connect Wallet" - }, - toast: { - transactionSent: "Transaction sent", - errorSendingTransaction: "Error sending transaction", - errorDisconneting: "Could not disconnect" - }, - switchChainModal: { - title: "Not on the right network", - subtitle: "Your current network is not supported. Please select one:" - }, - connectModal: { - title: "Connect Wallet" - } - } - }) + dictionary.set({ + en: { + home: { + title: "Taiko Bridge", + selectToken: "Select Token", + to: "To", + bridge: "Bridge", + approve: "Approve", + }, + bridgeForm: { + fieldLabel: "Amount", + maxLabel: "Max:", + processingFeeLabel: "Processing Fee", + bridge: "Bridge", + approve: "Approve", + }, + nav: { + connect: "Connect Wallet", + }, + toast: { + transactionSent: "Transaction sent", + errorSendingTransaction: "Error sending transaction", + errorDisconneting: "Could not disconnect", + }, + switchChainModal: { + title: "Not on the right network", + subtitle: "Your current network is not supported. Please select one:", + }, + connectModal: { + title: "Connect Wallet", + }, + }, + }); - locale.set(_locale); + locale.set(_locale); } export { _, setupI18n }; diff --git a/packages/bridge-ui/src/pages/home/Home.svelte b/packages/bridge-ui/src/pages/home/Home.svelte index d243adc0db4..358f34620f7 100644 --- a/packages/bridge-ui/src/pages/home/Home.svelte +++ b/packages/bridge-ui/src/pages/home/Home.svelte @@ -8,29 +8,27 @@ let activeTab: string = "bridge"; -
-
-
-
- (activeTab = "bridge")}>Bridge - (activeTab = "transactions")} - >Transactions ({$transactions.length}) - -
- {#if activeTab === "bridge"} - -
- -
- {:else} - - {/if} +
+
+
+ (activeTab = "bridge")}>Bridge + (activeTab = "transactions")} + >Transactions ({$transactions.length}) +
+ {#if activeTab === "bridge"} + +
+ +
+ {:else} + + {/if}
diff --git a/packages/bridge-ui/src/store/transactions.ts b/packages/bridge-ui/src/store/transactions.ts index f0061fad605..4f5ad98b251 100644 --- a/packages/bridge-ui/src/store/transactions.ts +++ b/packages/bridge-ui/src/store/transactions.ts @@ -6,4 +6,5 @@ import type { BridgeTransaction, Transactioner } from "../domain/transactions"; const pendingTransactions = writable([]); const transactions = writable([]); const transactioner = writable(); -export { pendingTransactions, transactions, transactioner }; +const showTransactionDetails = writable(); +export { pendingTransactions, transactions, transactioner, showTransactionDetails }; diff --git a/packages/bridge-ui/src/utils/recommendProcessingFee.ts b/packages/bridge-ui/src/utils/recommendProcessingFee.ts index 6f8012777de..2a42880159e 100644 --- a/packages/bridge-ui/src/utils/recommendProcessingFee.ts +++ b/packages/bridge-ui/src/utils/recommendProcessingFee.ts @@ -27,10 +27,16 @@ export async function recommendProcessingFee( // to make it enticing, we say 900k. let gasLimit = ethGasLimit; if (token.symbol.toLowerCase() !== ETH.symbol.toLowerCase()) { - const srcChainAddr = token.addresses.find( + let srcChainAddr = token.addresses.find( (t) => t.chainId === fromChain.id ).address; + if (!srcChainAddr || srcChainAddr === "0x00") { + srcChainAddr = token.addresses.find( + (t) => t.chainId === toChain.id + ).address; + } + const chainIdsToTokenVault = get(chainIdToTokenVaultAddress); const tokenVault = new Contract( chainIdsToTokenVault.get(fromChain.id), diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 92039fc1bc2..e56ae85a5fe 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -46,6 +46,7 @@ importers: rollup-plugin-polyfill-node: ^0.10.2 svelte: ^3.53.1 svelte-check: ^2.8.0 + svelte-heros-v2: ^0.3.10 svelte-i18n: ^3.5.1 svelte-jester: ^2.1.5 svelte-loader: ^3.1.2 @@ -100,6 +101,7 @@ importers: rollup-plugin-polyfill-node: 0.10.2_rollup@2.79.1 svelte: 3.53.1 svelte-check: 2.9.2_abcb4yglsprjylcfcbep3tcqgq + svelte-heros-v2: 0.3.10 svelte-jester: 2.3.2_jest@27.5.1+svelte@3.53.1 svelte-loader: 3.1.4_svelte@3.53.1 svelte-preprocess: 4.10.7_axwq5llc4jwkf7awicvy3hu32q @@ -18728,6 +18730,10 @@ packages: resolution: {integrity: sha512-oU+Xv7Dl4kRU2kdFjsoPLfJfnt5hUhsFUZtuzI3Ku/f2iAFZqBoEuXOqK3N9ngD4dxQOmN4OKWPHVi3NeAeAfQ==} dev: true + /svelte-heros-v2/0.3.10: + resolution: {integrity: sha512-e5ZhYN8blZwfhb2k4KYSfHnbbddonDNsglqMpwXLLwPVPBiJXeGpcPy2zkffq6kvkLS2tYipYOaAPSXimgtuUg==} + dev: true + /svelte-hmr/0.14.12_svelte@3.53.1: resolution: {integrity: sha512-4QSW/VvXuqVcFZ+RhxiR8/newmwOCTlbYIezvkeN6302YFRE8cXy0naamHcjz8Y9Ce3ITTZtrHrIL0AGfyo61w==} engines: {node: ^12.20 || ^14.13.1 || >= 16}