From 8742a9b9b5048f8ba31f88c4adde76dc351cfa28 Mon Sep 17 00:00:00 2001 From: Korbinian Kasberger Date: Mon, 24 Jul 2023 13:14:03 +0200 Subject: [PATCH 01/75] feat(nft-bridge): initial UI setup for NFT bridge, fetching images, update dependencies --- packages/bridge-ui-v2/package.json | 18 +- packages/bridge-ui-v2/src/app.html | 2 +- .../Activities/ListWithDetailsView.svelte | 272 ++++++++-------- .../src/components/Bridge/AddressInput.svelte | 71 +++++ .../src/components/Bridge/Bridge.svelte | 26 +- .../src/components/Bridge/BridgeTabs.svelte | 19 ++ .../src/components/Bridge/NFTBridge.svelte | 130 ++++++++ .../src/components/Bridge/NFTIdInput.svelte | 36 +++ .../src/components/Header/Header.svelte | 22 +- .../components/LinkButton/LinkButton.svelte | 2 +- .../SideNavigation/SideNavigation.svelte | 66 ++-- packages/bridge-ui-v2/src/i18n/en.json | 75 +++-- .../src/libs/token/detectContractType.ts | 62 ++++ .../src/libs/token/fetch1155Images.ts | 47 +++ .../src/libs/token/fetchErc721Images.ts | 44 +++ packages/bridge-ui-v2/src/libs/token/index.ts | 3 + .../bridge-ui-v2/src/routes/nft/+page.svelte | 8 + packages/bridge-ui-v2/src/stores/index.ts | 1 + packages/bridge-ui-v2/src/stores/nfts.ts | 5 + pnpm-lock.yaml | 296 ++++++++++-------- 20 files changed, 857 insertions(+), 348 deletions(-) create mode 100644 packages/bridge-ui-v2/src/components/Bridge/AddressInput.svelte create mode 100644 packages/bridge-ui-v2/src/components/Bridge/BridgeTabs.svelte create mode 100644 packages/bridge-ui-v2/src/components/Bridge/NFTBridge.svelte create mode 100644 packages/bridge-ui-v2/src/components/Bridge/NFTIdInput.svelte create mode 100644 packages/bridge-ui-v2/src/libs/token/detectContractType.ts create mode 100644 packages/bridge-ui-v2/src/libs/token/fetch1155Images.ts create mode 100644 packages/bridge-ui-v2/src/libs/token/fetchErc721Images.ts create mode 100644 packages/bridge-ui-v2/src/routes/nft/+page.svelte create mode 100644 packages/bridge-ui-v2/src/stores/nfts.ts diff --git a/packages/bridge-ui-v2/package.json b/packages/bridge-ui-v2/package.json index 9f689a0e0f8..14428d577b6 100644 --- a/packages/bridge-ui-v2/package.json +++ b/packages/bridge-ui-v2/package.json @@ -21,9 +21,9 @@ }, "devDependencies": { "@playwright/test": "^1.28.1", - "@sveltejs/adapter-auto": "^2.0.0", + "@sveltejs/adapter-auto": "^2.1.0", "@sveltejs/adapter-static": "^2.0.2", - "@sveltejs/kit": "^1.5.0", + "@sveltejs/kit": "^1.22.3", "@types/debug": "^4.1.7", "@typescript-eslint/eslint-plugin": "^5.45.0", "@typescript-eslint/parser": "^5.45.0", @@ -35,17 +35,19 @@ "eslint-config-prettier": "^8.5.0", "eslint-plugin-simple-import-sort": "^10.0.0", "eslint-plugin-svelte": "^2.26.0", + "ethereum-address": "^0.0.4", "postcss": "^8.4.24", - "prettier": "^2.8.0", - "prettier-plugin-svelte": "^2.8.1", - "svelte": "^3.54.0", - "svelte-check": "^3.4.4", + "prettier": "^3.0.0", + "prettier-plugin-svelte": "^3.0.0", + "svelte": "^4.1.0", + "svelte-check": "^3.4.6", "tailwindcss": "^3.3.2", "tslib": "^2.4.1", - "typescript": "^5.0.0", + "typescript": "^5.1.6", "vite": "^4.3.0", "vite-tsconfig-paths": "^4.2.0", - "vitest": "^0.32.2" + "vitest": "^0.32.2", + "vitest-fetch-mock": "^0.2.2" }, "type": "module", "dependencies": { diff --git a/packages/bridge-ui-v2/src/app.html b/packages/bridge-ui-v2/src/app.html index be167ec1d9b..39b9d4df542 100644 --- a/packages/bridge-ui-v2/src/app.html +++ b/packages/bridge-ui-v2/src/app.html @@ -1,4 +1,4 @@ - + diff --git a/packages/bridge-ui-v2/src/components/Activities/ListWithDetailsView.svelte b/packages/bridge-ui-v2/src/components/Activities/ListWithDetailsView.svelte index 021b55d32c4..f664644387f 100644 --- a/packages/bridge-ui-v2/src/components/Activities/ListWithDetailsView.svelte +++ b/packages/bridge-ui-v2/src/components/Activities/ListWithDetailsView.svelte @@ -25,150 +25,148 @@
-
+ + + + + +
2.5 BLL
+ +
+ + {$t('activities.status.failed')} +
+ + + + +
diff --git a/packages/bridge-ui-v2/src/components/Bridge/AddressInput.svelte b/packages/bridge-ui-v2/src/components/Bridge/AddressInput.svelte new file mode 100644 index 00000000000..0e940331f1c --- /dev/null +++ b/packages/bridge-ui-v2/src/components/Bridge/AddressInput.svelte @@ -0,0 +1,71 @@ + + +
+
+ +
+
+ +
+
+
+ {#if !isValidEthereumAddress && !tooShort} + +

Invalid address

+

This doesn't seem to be a valid Ethereum address

+ + {:else if isValidEthereumAddress && !tooShort && showAlert} + +

Valid address format

+ + {/if} +
diff --git a/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte b/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte index 8cdbc5aad02..cc7cd6aac49 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte @@ -77,7 +77,7 @@ }); infoToast( - $t('bridge.approve.tx', { + $t('bridge.actions.approve.tx', { values: { token: $selectedToken.symbol, url: `${PUBLIC_L1_EXPLORER_URL}/tx/${txHash}`, @@ -88,7 +88,7 @@ await pendingTransactions.add(txHash, $network.id); successToast( - $t('bridge.approve.success', { + $t('bridge.actions.approve.success', { values: { token: $selectedToken.symbol, }, @@ -102,17 +102,17 @@ switch (true) { case err instanceof UserRejectedRequestError: - warningToast($t('bridge.approve.rejected')); + warningToast($t('bridge.errors.rejected')); break; case err instanceof NoAllowanceRequiredError: - errorToast($t('bridge.approve.no_allowance_required')); + errorToast($t('bridge.errors.no_allowance_required')); break; case err instanceof ApproveError: // TODO: see contract for all possible errors - errorToast($t('bridge.approve.error')); + errorToast($t('bridge.errors.approve_error')); break; default: - errorToast($t('bridge.approve.unknown_error')); + errorToast($t('bridge.errors.unknown_error')); } } } @@ -181,7 +181,7 @@ const txHash = await $bridgeService.bridge(bridgeArgs); infoToast( - $t('bridge.bridge.tx', { + $t('bridge.actions.bridge.tx', { values: { token: $selectedToken.symbol, url: `${PUBLIC_L1_EXPLORER_URL}/tx/${txHash}`, @@ -192,7 +192,7 @@ await pendingTransactions.add(txHash, $network.id); successToast( - $t('bridge.bridge.success', { + $t('bridge.actions.bridge.success', { values: { network: $destNetwork.name, }, @@ -211,24 +211,24 @@ switch (true) { case err instanceof UserRejectedRequestError: - warningToast($t('bridge.bridge.rejected')); + warningToast($t('bridge.errors.rejected')); break; case err instanceof SendMessageError: // TODO: see contract for all possible errors - errorToast($t('bridge.bridge.send_message_error')); + errorToast($t('bridge.errors.send_message_error')); break; case err instanceof SendERC20Error: // TODO: see contract for all possible errors - errorToast($t('bridge.bridge.send_erc20_error')); + errorToast($t('bridge.errors.send_erc20_error')); break; default: - errorToast($t('bridge.approve.unknown_error')); + errorToast($t('bridge.errors.unknown_error')); } } } - +
diff --git a/packages/bridge-ui-v2/src/components/Bridge/BridgeTabs.svelte b/packages/bridge-ui-v2/src/components/Bridge/BridgeTabs.svelte new file mode 100644 index 00000000000..9541eb57ba7 --- /dev/null +++ b/packages/bridge-ui-v2/src/components/Bridge/BridgeTabs.svelte @@ -0,0 +1,19 @@ + + +
+ + {$t('nav.token')} + + + + {$t('nav.nft')} + +
diff --git a/packages/bridge-ui-v2/src/components/Bridge/NFTBridge.svelte b/packages/bridge-ui-v2/src/components/Bridge/NFTBridge.svelte new file mode 100644 index 00000000000..5bc47107524 --- /dev/null +++ b/packages/bridge-ui-v2/src/components/Bridge/NFTBridge.svelte @@ -0,0 +1,130 @@ + + + +
+
+
+ +
+ + {#if isAddressValid} + + + {/if} + + {#if imageUrls.length > 0} +

Contract Type: {$contractTypeStore}

+ {#if imageUrls.length === 1} +
+
+ NFT +
+
+ {:else if imageUrls.length > 1 && imageUrls.length <= 3} +
+ {#each imageUrls as imageUrl, index (imageUrl)} +
+ {`Nft +
+ {/each} +
+ {:else} +
+ {#each imageUrls as imageUrl, index (imageUrl)} +
+ {`Nft +
+ {/each} +
+ {/if} + {/if} + + {#if $errorIdStore.length !== 0} + +

Import failed

+

Are you sure all token exist and that you are the owner?

+

Token with id(s) {$errorIdStore} threw errors.

+
+

Check our guide if you need help!

+ + {/if} + +
+ +
+ +
+
+ + + +
+ + +
+ diff --git a/packages/bridge-ui-v2/src/components/Bridge/NFTIdInput.svelte b/packages/bridge-ui-v2/src/components/Bridge/NFTIdInput.svelte new file mode 100644 index 00000000000..7dda72f71aa --- /dev/null +++ b/packages/bridge-ui-v2/src/components/Bridge/NFTIdInput.svelte @@ -0,0 +1,36 @@ + + +
+
+ +
+
+ + Check our guide if you need help finding your token ID +
+
diff --git a/packages/bridge-ui-v2/src/components/Header/Header.svelte b/packages/bridge-ui-v2/src/components/Header/Header.svelte index 843a80c5e8c..7887db40fcc 100644 --- a/packages/bridge-ui-v2/src/components/Header/Header.svelte +++ b/packages/bridge-ui-v2/src/components/Header/Header.svelte @@ -1,15 +1,19 @@
+ "> -
- + {#if isBridgePage} + + {:else} +
+ {/if} - -
+ + +
diff --git a/packages/bridge-ui-v2/src/components/LinkButton/LinkButton.svelte b/packages/bridge-ui-v2/src/components/LinkButton/LinkButton.svelte index 0f00d7efbe1..a18dff88fca 100644 --- a/packages/bridge-ui-v2/src/components/LinkButton/LinkButton.svelte +++ b/packages/bridge-ui-v2/src/components/LinkButton/LinkButton.svelte @@ -13,6 +13,6 @@ + class={classNames('p-3 rounded-full flex justify-start content-center', activeClass, $$props.class)}> diff --git a/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte b/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte index bfbcbb6b78b..f63f4f87512 100644 --- a/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte +++ b/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte @@ -68,38 +68,40 @@ -
    -
  • - - - {$t('nav.bridge')} - -
    • -
  • - - - {$t('nav.faucet')} - -
    • -
  • - - - {$t('nav.activities')} - -
    • -
  • - - - {$t('nav.explorer')} - -
    • -
  • - - - {$t('nav.guide')} - -
    • -
+
+
    +
  • + + + {$t('nav.bridge')} + +
    • +
  • + + + {$t('nav.faucet')} + +
    • +
  • + + + {$t('nav.activities')} + +
    • +
  • + + + {$t('nav.explorer')} + +
    • +
  • + + + {$t('nav.guide')} + +
    • +
+
diff --git a/packages/bridge-ui-v2/src/i18n/en.json b/packages/bridge-ui-v2/src/i18n/en.json index 15490b9dc73..20e21930c64 100644 --- a/packages/bridge-ui-v2/src/i18n/en.json +++ b/packages/bridge-ui-v2/src/i18n/en.json @@ -4,38 +4,50 @@ "faucet": "Faucet", "activities": "Activities", "explorer": "Explorer", - "guide": "Guide" + "guide": "Guide", + "nft": "NFT", + "token": "Token" }, - "bridge": { - "title": "Bridge", + "title": { + "default": "Bridge Token", + "nft": "Bridge NFT" + }, "description": "Send your assets across chains.", - "approve": { - "tx": "Transaction sent to approve {token} tokens. Click here to see it in the explorer.", - "success": "Approved {token} tokens!. You can now proceed to bridge.", - "rejected": "Request to approve rejected." + "actions": { + "approve": { + "tx": "Transaction sent to approve {token} tokens. Click here to see it in the explorer.", + "success": "Approved {token} tokens!. You can now proceed to bridge.", + "rejected": "Request to approve rejected." + }, + "bridge": { + "tx": "Transaction sent to bridge {token} tokens. Click here to see it in the explorer.", + "success": "Transaction completed!. Your funds are getting ready to be claimed on {network}" + } }, - "bridge": { - "tx": "Transaction sent to bridge {token} tokens. Click here to see it in the explorer.", - "success": "Transaction completed!. Your funds are getting ready to be claimed on {network}", - "rejected": "Request to bridge rejected." + "errors": { + "send_erc20_error": "Failed to send ERC20 token", + "send_message_error": "Failed to send message", + "approve_error": "Failed to approve token", + "rejected": "Request to bridge rejected.", + "no_allowance_required": "You need to add allowance to bridge this token.", + "unknown_error": "An error occured" }, "button": { "approve": "Approve", "approving": "Approving", "approved": "Approved", "bridge": "Bridge", - "bridging": "Bridging" + "bridging": "Bridging", + "import": "Fetch NFT data" } }, - "recipient": { "title": "Recipient address", "description": "Customize the recipient address for your bridged tokens instead of using your current wallet address.", "link": "Change recipient", "placeholder": "Add custom recipient 0x…" }, - "processing_fee": { "title": "Processing fee", "description": "Some description about the processing fee", @@ -59,7 +71,6 @@ "cancel": "Cancel" } }, - "activities": { "title": "Activities", "description": "Track your bridge transactions here.", @@ -81,7 +92,6 @@ "failed": "Failed" } }, - "faucet": { "title": "Faucet", "description": "Mint test tokens.", @@ -105,34 +115,49 @@ "token_minted": "You have already minted this token." } }, - "token_dropdown": { "label": "Select token" }, - "amount_input": { "label": "Amount", "balance": "Balance", "button": { "max": "Max", "failed_max": "Coult not estimate max amount to bridge." + } + }, + "error": { + "insufficient_balance": "Insufficient balance", + "insufficient_allowance": "Insufficient allowance" + }, + "inputs": { + "nft": { + "token_id": { + "label": "Token ID(s)", + "placeholder": "1 or 5,14,733" + } + }, + "amount_input": { + "label": "Amount", + "balance": "Balance", + "button.max": "Max" }, - "error": { - "insufficient_balance": "Insufficient balance", - "insufficient_allowance": "Insufficient allowance" + "address_input": { + "label": "Address", + "placeholder": "Enter address" } }, - "chain_selector": { "placeholder": "Select chain", "currently_on": "You are currently on" }, - "chain": { "to": "To", "from": "From" }, - + "custom_recipient": { + "placeholder": "Add custom recipient" + }, "wallet": { "connect": "Connect wallet", "status": { @@ -141,7 +166,6 @@ "connecting": "Connecting" } }, - "messages": { "account": { "required": "Please connect your wallet.", @@ -153,7 +177,6 @@ "rejected": "Request to switch chain rejected." } }, - "common": { "edit": "Edit", "cancel": "Cancel", diff --git a/packages/bridge-ui-v2/src/libs/token/detectContractType.ts b/packages/bridge-ui-v2/src/libs/token/detectContractType.ts new file mode 100644 index 00000000000..13fac07838d --- /dev/null +++ b/packages/bridge-ui-v2/src/libs/token/detectContractType.ts @@ -0,0 +1,62 @@ +import { readContract } from '@wagmi/core'; + +export async function detectContractType(contractAddress: string, tokenId: number) { + // eslint-disable-next-line no-console + console.info('detectContractType', contractAddress); + const ERC721_ABI = [ + { + constant: true, + inputs: [{ name: 'tokenId', type: 'uint256' }], + name: 'ownerOf', + outputs: [{ name: '', type: 'address' }], + payable: false, + stateMutability: 'view', + type: 'function', + }, + ]; + + const ERC1155_ABI = [ + { + constant: true, + inputs: [ + { name: 'owner', type: 'address' }, + { name: 'operator', type: 'address' }, + ], + name: 'isApprovedForAll', + outputs: [{ name: '', type: 'bool' }], + payable: false, + stateMutability: 'view', + type: 'function', + }, + ]; + + try { + await readContract({ + address: contractAddress as `0x${string}`, + abi: ERC721_ABI, + functionName: 'ownerOf', + args: [tokenId], + }); + // eslint-disable-next-line no-console + console.info('ERC721'); + return 'ERC721'; + } catch (err) { + // eslint-disable-next-line no-console + console.log(err); + try { + await readContract({ + address: contractAddress as `0x${string}`, + abi: ERC1155_ABI, + functionName: 'isApprovedForAll', + args: ['0x0000000000000000000000000000000000000000', '0x0000000000000000000000000000000000000000'], + }); + // eslint-disable-next-line no-console + console.info('ERC1155'); + return 'ERC1155'; + } catch (err) { + // eslint-disable-next-line no-console + console.log(err); + return 'UNKNOWN'; + } + } +} diff --git a/packages/bridge-ui-v2/src/libs/token/fetch1155Images.ts b/packages/bridge-ui-v2/src/libs/token/fetch1155Images.ts new file mode 100644 index 00000000000..aa7fa7e47bd --- /dev/null +++ b/packages/bridge-ui-v2/src/libs/token/fetch1155Images.ts @@ -0,0 +1,47 @@ +import { readContract } from '@wagmi/core'; + +export async function fetchERC1155Images(contractAddress: string, tokenIds: number[]) { + const ERC1155_ABI = [ + { + constant: true, + inputs: [{ name: 'id', type: 'uint256' }], + name: 'uri', + outputs: [{ name: '', type: 'string' }], + payable: false, + stateMutability: 'view', + type: 'function', + }, + ]; + + type ImageEntry = { [id: string]: string }; + type ImagesArray = ImageEntry[]; + const result: { images: ImagesArray; errors: number[] } = { + images: [], + errors: [], + }; + + for (const id of tokenIds) { + try { + const uri = await readContract({ + address: contractAddress as `0x${string}`, + abi: ERC1155_ABI, + functionName: 'uri', + args: [id], + }); + const url = uri as string; + + // Replace placeholder with actual id + // const resolvedUrl = url.replace("{id}", id.toString()); + + // Todo: temporary fix for pinata gateway + const baseUrlToRemove = 'https://gateway.pinata.cloud'; + + const metadata = await fetch(url.replace(baseUrlToRemove, '')).then(async (res) => await res.json()); + result.images.push({ [id]: metadata.image.replace(baseUrlToRemove, '') }); + } catch (error) { + result.errors.push(id); + console.error(error); + } + } + return result; +} diff --git a/packages/bridge-ui-v2/src/libs/token/fetchErc721Images.ts b/packages/bridge-ui-v2/src/libs/token/fetchErc721Images.ts new file mode 100644 index 00000000000..b7b321338f0 --- /dev/null +++ b/packages/bridge-ui-v2/src/libs/token/fetchErc721Images.ts @@ -0,0 +1,44 @@ +import { readContract } from '@wagmi/core'; + +export async function fetchERC721Images(contractAddress: string, tokenIds: number[]) { + const ERC721_ABI = [ + { + constant: true, + inputs: [{ name: 'tokenId', type: 'uint256' }], + name: 'tokenURI', + outputs: [{ name: '', type: 'string' }], + payable: false, + stateMutability: 'view', + type: 'function', + }, + ]; + + type ImageEntry = { [id: string]: string }; + type ImagesArray = ImageEntry[]; + const result: { images: ImagesArray; errors: number[] } = { + images: [], + errors: [], + }; + + for (const id of tokenIds) { + try { + const uri = await readContract({ + address: contractAddress as `0x${string}`, + abi: ERC721_ABI, + functionName: 'tokenURI', + args: [id], + }); + const url = uri as string; + + // Todo: temporary fix for pinata gateway + const baseUrlToRemove = 'https://gateway.pinata.cloud'; + + const metadata = await fetch(url.replace(baseUrlToRemove, '')).then(async (res) => await res.json()); + result.images.push({ [id]: metadata.image.replace(baseUrlToRemove, '') }); + } catch (error) { + result.errors.push(id); + console.error(error); + } + } + return result; +} diff --git a/packages/bridge-ui-v2/src/libs/token/index.ts b/packages/bridge-ui-v2/src/libs/token/index.ts index e13186d034f..8d9541eb01d 100644 --- a/packages/bridge-ui-v2/src/libs/token/index.ts +++ b/packages/bridge-ui-v2/src/libs/token/index.ts @@ -1,4 +1,7 @@ export { checkMintable } from './checkMintable'; +export { detectContractType } from './detectContractType'; +export { fetchERC1155Images } from './fetch1155Images'; +export { fetchERC721Images } from './fetchErc721Images'; export { getAddress } from './getAddress'; export { getBalance } from './getBalance'; export { isDeployedCrossChain } from './isDeployedCrossChain'; diff --git a/packages/bridge-ui-v2/src/routes/nft/+page.svelte b/packages/bridge-ui-v2/src/routes/nft/+page.svelte new file mode 100644 index 00000000000..2f04afa7895 --- /dev/null +++ b/packages/bridge-ui-v2/src/routes/nft/+page.svelte @@ -0,0 +1,8 @@ + + + + + diff --git a/packages/bridge-ui-v2/src/stores/index.ts b/packages/bridge-ui-v2/src/stores/index.ts index 33cb4308011..2872f9d19f3 100644 --- a/packages/bridge-ui-v2/src/stores/index.ts +++ b/packages/bridge-ui-v2/src/stores/index.ts @@ -1,3 +1,4 @@ export { account } from './account'; export { network } from './network'; +export * from './nfts'; export { pendingTransactions } from './pendingTransactions'; diff --git a/packages/bridge-ui-v2/src/stores/nfts.ts b/packages/bridge-ui-v2/src/stores/nfts.ts new file mode 100644 index 00000000000..ad2ad3c63ff --- /dev/null +++ b/packages/bridge-ui-v2/src/stores/nfts.ts @@ -0,0 +1,5 @@ +import { writable } from 'svelte/store'; + +export const contractTypeStore = writable(''); +export const tokenIdStore = writable>([]); +export const errorIdStore = writable>([]); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2cf32f6e897..db636ca00a0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -214,7 +214,7 @@ importers: version: 2.6.2(react@18.2.0) '@zerodevx/svelte-toast': specifier: ^0.9.5 - version: 0.9.5(svelte@3.54.0) + version: 0.9.5(svelte@4.1.0) abitype: specifier: ^0.8.2 version: 0.8.2(typescript@5.1.6) @@ -223,7 +223,7 @@ importers: version: 4.3.4(supports-color@8.1.1) svelte-i18n: specifier: ^3.6.0 - version: 3.6.0(svelte@3.54.0) + version: 3.6.0(svelte@4.1.0) viem: specifier: ^1.2.9 version: 1.2.9(typescript@5.1.6) @@ -232,14 +232,14 @@ importers: specifier: ^1.28.1 version: 1.28.1 '@sveltejs/adapter-auto': - specifier: ^2.0.0 - version: 2.0.0(@sveltejs/kit@1.5.0) + specifier: ^2.1.0 + version: 2.1.0(@sveltejs/kit@1.22.3) '@sveltejs/adapter-static': specifier: ^2.0.2 - version: 2.0.2(@sveltejs/kit@1.5.0) + version: 2.0.2(@sveltejs/kit@1.22.3) '@sveltejs/kit': - specifier: ^1.5.0 - version: 1.5.0(svelte@3.54.0)(vite@4.3.0) + specifier: ^1.22.3 + version: 1.22.3(svelte@4.1.0)(vite@4.3.0) '@types/debug': specifier: ^4.1.7 version: 4.1.7 @@ -272,22 +272,25 @@ importers: version: 10.0.0(eslint@8.28.0) eslint-plugin-svelte: specifier: ^2.26.0 - version: 2.26.0(eslint@8.28.0)(svelte@3.54.0) + version: 2.26.0(eslint@8.28.0)(svelte@4.1.0) + ethereum-address: + specifier: ^0.0.4 + version: 0.0.4 postcss: specifier: ^8.4.24 version: 8.4.24 prettier: - specifier: ^2.8.0 - version: 2.8.8 + specifier: ^3.0.0 + version: 3.0.0 prettier-plugin-svelte: - specifier: ^2.8.1 - version: 2.9.0(prettier@2.8.8)(svelte@3.54.0) + specifier: ^3.0.0 + version: 3.0.0(prettier@3.0.0)(svelte@4.1.0) svelte: - specifier: ^3.54.0 - version: 3.54.0 + specifier: ^4.1.0 + version: 4.1.0 svelte-check: - specifier: ^3.4.4 - version: 3.4.4(postcss@8.4.24)(svelte@3.54.0) + specifier: ^3.4.6 + version: 3.4.6(postcss@8.4.24)(svelte@4.1.0) tailwindcss: specifier: ^3.3.2 version: 3.3.2 @@ -295,7 +298,7 @@ importers: specifier: ^2.4.1 version: 2.4.1 typescript: - specifier: ^5.0.0 + specifier: ^5.1.6 version: 5.1.6 vite: specifier: ^4.3.0 @@ -306,6 +309,9 @@ importers: vitest: specifier: ^0.32.2 version: 0.32.2 + vitest-fetch-mock: + specifier: ^0.2.2 + version: 0.2.2(vitest@0.32.2) packages/eventindexer: {} @@ -4942,52 +4948,51 @@ packages: '@stablelib/random': 1.0.2 '@stablelib/wipe': 1.0.1 - /@sveltejs/adapter-auto@2.0.0(@sveltejs/kit@1.5.0): - resolution: {integrity: sha512-b+gkHFZgD771kgV3aO4avHFd7y1zhmMYy9i6xOK7m/rwmwaRO8gnF5zBc0Rgca80B2PMU1bKNxyBTHA14OzUAQ==} + /@sveltejs/adapter-auto@2.1.0(@sveltejs/kit@1.22.3): + resolution: {integrity: sha512-o2pZCfATFtA/Gw/BB0Xm7k4EYaekXxaPGER3xGSY3FvzFJGTlJlZjBseaXwYSM94lZ0HniOjTokN3cWaLX6fow==} peerDependencies: '@sveltejs/kit': ^1.0.0 dependencies: - '@sveltejs/kit': 1.5.0(svelte@3.54.0)(vite@4.3.0) - import-meta-resolve: 2.2.2 + '@sveltejs/kit': 1.22.3(svelte@4.1.0)(vite@4.3.0) + import-meta-resolve: 3.0.0 dev: true - /@sveltejs/adapter-static@2.0.2(@sveltejs/kit@1.5.0): + /@sveltejs/adapter-static@2.0.2(@sveltejs/kit@1.22.3): resolution: {integrity: sha512-9wYtf6s6ew7DHUHMrt55YpD1FgV7oWql2IGsW5BXquLxqcY9vjrqCFo0TzzDpo+ZPZkW/v77k0eOP6tsAb8HmQ==} peerDependencies: '@sveltejs/kit': ^1.5.0 dependencies: - '@sveltejs/kit': 1.5.0(svelte@3.54.0)(vite@4.3.0) + '@sveltejs/kit': 1.22.3(svelte@4.1.0)(vite@4.3.0) dev: true - /@sveltejs/kit@1.5.0(svelte@3.54.0)(vite@4.3.0): - resolution: {integrity: sha512-AkWgCO9i2djZjTqCgIQJ5XfnSzRINowh2w2Gk9wDRuTwxKizSuYe3jNvds/HCDDGHo8XE5E0yWNC9j2XxbrX+g==} + /@sveltejs/kit@1.22.3(svelte@4.1.0)(vite@4.3.0): + resolution: {integrity: sha512-IpHD5wvuoOIHYaHQUBJ1zERD2Iz+fB/rBXhXjl8InKw6X4VKE9BSus+ttHhE7Ke+Ie9ecfilzX8BnWE3FeQyng==} engines: {node: ^16.14 || >=18} hasBin: true requiresBuild: true peerDependencies: - svelte: ^3.54.0 + svelte: ^3.54.0 || ^4.0.0-next.0 vite: ^4.0.0 dependencies: - '@sveltejs/vite-plugin-svelte': 2.4.2(svelte@3.54.0)(vite@4.3.0) + '@sveltejs/vite-plugin-svelte': 2.4.2(svelte@4.1.0)(vite@4.3.0) '@types/cookie': 0.5.1 cookie: 0.5.0 devalue: 4.3.2 esm-env: 1.0.0 kleur: 4.1.5 - magic-string: 0.27.0 + magic-string: 0.30.1 mime: 3.0.0 sade: 1.8.1 set-cookie-parser: 2.6.0 sirv: 2.0.3 - svelte: 3.54.0 - tiny-glob: 0.2.9 - undici: 5.18.0 + svelte: 4.1.0 + undici: 5.22.1 vite: 4.3.0(@types/node@20.4.2) transitivePeerDependencies: - supports-color dev: true - /@sveltejs/vite-plugin-svelte-inspector@1.0.3(@sveltejs/vite-plugin-svelte@2.4.2)(svelte@3.54.0)(vite@4.3.0): + /@sveltejs/vite-plugin-svelte-inspector@1.0.3(@sveltejs/vite-plugin-svelte@2.4.2)(svelte@4.1.0)(vite@4.3.0): resolution: {integrity: sha512-Khdl5jmmPN6SUsVuqSXatKpQTMIifoQPDanaxC84m9JxIibWvSABJyHpyys0Z+1yYrxY5TTEQm+6elh0XCMaOA==} engines: {node: ^14.18.0 || >= 16} peerDependencies: @@ -4995,9 +5000,9 @@ packages: svelte: ^3.54.0 || ^4.0.0 vite: ^4.0.0 dependencies: - '@sveltejs/vite-plugin-svelte': 2.4.2(svelte@3.54.0)(vite@4.3.0) + '@sveltejs/vite-plugin-svelte': 2.4.2(svelte@4.1.0)(vite@4.3.0) debug: 4.3.4(supports-color@8.1.1) - svelte: 3.54.0 + svelte: 4.1.0 vite: 4.3.0(@types/node@20.4.2) transitivePeerDependencies: - supports-color @@ -5026,20 +5031,20 @@ packages: - supports-color dev: true - /@sveltejs/vite-plugin-svelte@2.4.2(svelte@3.54.0)(vite@4.3.0): + /@sveltejs/vite-plugin-svelte@2.4.2(svelte@4.1.0)(vite@4.3.0): resolution: {integrity: sha512-ePfcC48ftMKhkT0OFGdOyycYKnnkT6i/buzey+vHRTR/JpQvuPzzhf1PtKqCDQfJRgoPSN2vscXs6gLigx/zGw==} engines: {node: ^14.18.0 || >= 16} peerDependencies: svelte: ^3.54.0 || ^4.0.0 vite: ^4.0.0 dependencies: - '@sveltejs/vite-plugin-svelte-inspector': 1.0.3(@sveltejs/vite-plugin-svelte@2.4.2)(svelte@3.54.0)(vite@4.3.0) + '@sveltejs/vite-plugin-svelte-inspector': 1.0.3(@sveltejs/vite-plugin-svelte@2.4.2)(svelte@4.1.0)(vite@4.3.0) debug: 4.3.4(supports-color@8.1.1) deepmerge: 4.3.1 kleur: 4.1.5 magic-string: 0.30.1 - svelte: 3.54.0 - svelte-hmr: 0.15.2(svelte@3.54.0) + svelte: 4.1.0 + svelte-hmr: 0.15.2(svelte@4.1.0) vite: 4.3.0(@types/node@20.4.2) vitefu: 0.2.4(vite@4.3.0) transitivePeerDependencies: @@ -5208,7 +5213,7 @@ packages: /@types/acorn@4.0.6: resolution: {integrity: sha512-veQTnWP+1D/xbxVrPC3zHnCZRjSrKfhbMUlEA43iMZLu7EsnTtkJklIuwrCPbOi8YkvDQAiW05VQQFvvz9oieQ==} dependencies: - '@types/estree': 1.0.1 + '@types/estree': 0.0.50 dev: false /@types/async-eventemitter@0.2.1: @@ -5309,7 +5314,7 @@ packages: resolution: {integrity: sha512-9K4zoImiZc3HlIp6AVUDE4CWYx22a+lhSZMYNpbjW04+YF0KWj4pJXnEMjdnFTiQibFFmElcsasJXDbdI/EPhA==} dependencies: '@types/eslint': 8.44.0 - '@types/estree': 1.0.1 + '@types/estree': 0.0.50 dev: true /@types/eslint@8.2.1: @@ -5322,14 +5327,14 @@ packages: /@types/eslint@8.44.0: resolution: {integrity: sha512-gsF+c/0XOguWgaOgvFs+xnnRqt9GwgTvIks36WpE6ueeI4KCEHHd8K/CKHqhOqrJKsYH8m27kRzQEvWXAwXUTw==} dependencies: - '@types/estree': 1.0.1 + '@types/estree': 0.0.50 '@types/json-schema': 7.0.12 dev: true /@types/estree-jsx@1.0.0: resolution: {integrity: sha512-3qvGd0z8F2ENTGr/GG1yViqfiKmRfrXVx5sJyHGFu3z7m5g5utCQtGp/g29JnjflhtQJBv1WDQukHiT58xPcYQ==} dependencies: - '@types/estree': 1.0.1 + '@types/estree': 0.0.50 dev: false /@types/estree@0.0.39: @@ -5338,7 +5343,6 @@ packages: /@types/estree@0.0.50: resolution: {integrity: sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw==} - dev: true /@types/estree@1.0.1: resolution: {integrity: sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==} @@ -5443,7 +5447,7 @@ packages: dependencies: '@types/abstract-leveldown': 7.2.1 '@types/level-errors': 3.0.0 - '@types/node': 12.20.55 + '@types/node': 20.4.2 dev: true /@types/lru-cache@5.1.1: @@ -7382,12 +7386,12 @@ packages: resolution: {integrity: sha512-k0W1JFoqHIcIQaP9ij99+Rv0ugaQSSNwOuNwwmTGRjWtIqrQr+ExLDE8LQGXLlJIprqDyMWB4lJkUql/r0RAtA==} dev: true - /@zerodevx/svelte-toast@0.9.5(svelte@3.54.0): + /@zerodevx/svelte-toast@0.9.5(svelte@4.1.0): resolution: {integrity: sha512-JLeB/oRdJfT+dz9A5bgd3Z7TuQnBQbeUtXrGIrNWMGqWbabpepBF2KxtWVhL2qtxpRqhae2f6NAOzH7xs4jUSw==} peerDependencies: svelte: ^3.57.0 || ^4.0.0 dependencies: - svelte: 3.54.0 + svelte: 4.1.0 dev: false /JSONStream@1.3.5: @@ -7855,6 +7859,11 @@ packages: /argparse@2.0.1: resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==} + /aria-query@5.3.0: + resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==} + dependencies: + dequal: 2.0.3 + /arr-diff@4.0.0: resolution: {integrity: sha512-YVIQ82gZPGBebQV/a8dar4AitzCQs0jjXwMPZllpXMaGjXPYVUawSxQrRsjhjupyVxEvbHgUmIhKVlND+j02kA==} engines: {node: '>=0.10.0'} @@ -7902,7 +7911,7 @@ packages: dependencies: call-bind: 1.0.2 define-properties: 1.2.0 - es-abstract: 1.21.2 + es-abstract: 1.21.3 get-intrinsic: 1.2.1 is-string: 1.0.7 dev: true @@ -7928,7 +7937,7 @@ packages: dependencies: call-bind: 1.0.2 define-properties: 1.2.0 - es-abstract: 1.21.2 + es-abstract: 1.21.3 es-shim-unscopables: 1.0.0 dev: true @@ -7938,7 +7947,7 @@ packages: dependencies: call-bind: 1.0.2 define-properties: 1.2.0 - es-abstract: 1.21.2 + es-abstract: 1.21.3 es-shim-unscopables: 1.0.0 dev: true @@ -8119,6 +8128,11 @@ packages: - debug dev: false + /axobject-query@3.2.1: + resolution: {integrity: sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==} + dependencies: + dequal: 2.0.3 + /babel-code-frame@6.26.0: resolution: {integrity: sha512-XqYMR2dfdGMW+hd0IUZ2PwK+fGeFkOxZJ0wY+JaQAHzt1Zx8LcvpiZD2NiGkEG8qx0CfkAOr5xt76d1e8vG90g==} dependencies: @@ -9802,6 +9816,15 @@ packages: engines: {node: '>=0.10.0'} dev: true + /code-red@1.0.3: + resolution: {integrity: sha512-kVwJELqiILQyG5aeuyKFbdsI1fmQy1Cmf7dQ8eGmVuJoaRVdwey7WaMknr2ZFeVSYSKT0rExsa8EGw0aoI/1QQ==} + dependencies: + '@jridgewell/sourcemap-codec': 1.4.15 + '@types/estree': 1.0.1 + acorn: 8.10.0 + estree-walker: 3.0.3 + periscopic: 3.1.0 + /collect-v8-coverage@1.0.2: resolution: {integrity: sha512-lHl4d5/ONEbLlJvaJNtsF/Lz+WvB07u2ycqTYbdrq7UypDXailES4valYb2eWiJFxZlVmpGekfqoxQhzyFdT4Q==} dev: true @@ -10348,6 +10371,10 @@ packages: randomfill: 1.0.4 dev: true + /crypto-js@3.3.0: + resolution: {integrity: sha512-DIT51nX0dCfKltpRiXV+/TVZq+Qq2NgF4644+K7Ttnla7zEzqc+kjJyiB96BHNyUTBxyjzRcZYpUdZa+QAqi6Q==} + dev: true + /css-loader@6.8.1(webpack@5.88.1): resolution: {integrity: sha512-xDAXtEVGlD0gJ07iclwWVkLoZOpEvAWaSyf6W18S2pOC//K8+qUDIx8IIT3D+HjnmkJPQeesOPv5aiUaJsCM2g==} engines: {node: '>= 12.13.0'} @@ -10382,6 +10409,13 @@ packages: fastparse: 1.1.2 dev: true + /css-tree@2.3.1: + resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==} + engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0} + dependencies: + mdn-data: 2.0.30 + source-map-js: 1.0.2 + /css-what@6.1.0: resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==} engines: {node: '>= 6'} @@ -10995,7 +11029,6 @@ packages: /dequal@2.0.3: resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==} engines: {node: '>=6'} - dev: false /des.js@1.1.0: resolution: {integrity: sha512-r17GxjhUCjSRy8aiJpr8/UadFIzMzJGexI3Nmz4ADi9LYSFx4gTBp80+NaX/YsXWWLhpZ7v/v/ubEc/bCNfKwg==} @@ -11366,46 +11399,6 @@ packages: is-arrayish: 0.2.1 dev: true - /es-abstract@1.21.2: - resolution: {integrity: sha512-y/B5POM2iBnIxCiernH1G7rC9qQoM77lLIMQLuob0zhp8C56Po81+2Nj0WFKnd0pNReDTnkYryc+zhOzpEIROg==} - engines: {node: '>= 0.4'} - dependencies: - array-buffer-byte-length: 1.0.0 - available-typed-arrays: 1.0.5 - call-bind: 1.0.2 - es-set-tostringtag: 2.0.1 - es-to-primitive: 1.2.1 - function.prototype.name: 1.1.5 - get-intrinsic: 1.2.1 - get-symbol-description: 1.0.0 - globalthis: 1.0.3 - gopd: 1.0.1 - has: 1.0.3 - has-property-descriptors: 1.0.0 - has-proto: 1.0.1 - has-symbols: 1.0.3 - internal-slot: 1.0.5 - is-array-buffer: 3.0.2 - is-callable: 1.2.7 - is-negative-zero: 2.0.2 - is-regex: 1.1.4 - is-shared-array-buffer: 1.0.2 - is-string: 1.0.7 - is-typed-array: 1.1.10 - is-weakref: 1.0.2 - object-inspect: 1.12.3 - object-keys: 1.1.1 - object.assign: 4.1.4 - regexp.prototype.flags: 1.5.0 - safe-regex-test: 1.0.0 - string.prototype.trim: 1.2.7 - string.prototype.trimend: 1.0.6 - string.prototype.trimstart: 1.0.6 - typed-array-length: 1.0.4 - unbox-primitive: 1.0.2 - which-typed-array: 1.1.10 - dev: true - /es-abstract@1.21.3: resolution: {integrity: sha512-ZU4miiY1j3sGPFLJ34VJXEqhpmL+HGByCinGHv4HC+Fxl2fI2Z4yR6tl0mORnDr6PA8eihWo4LmSWDbvhALckg==} engines: {node: '>= 0.4'} @@ -12228,7 +12221,7 @@ packages: svelte: 3.54.0 dev: true - /eslint-plugin-svelte@2.26.0(eslint@8.28.0)(svelte@3.54.0): + /eslint-plugin-svelte@2.26.0(eslint@8.28.0)(svelte@4.1.0): resolution: {integrity: sha512-EMcHDOMfMvjxoB5aCGASwDhVHOb/yy0Syer5aPm4GDQpjbPMceacs7LdSDL4xsCIHuOGPdOnc0YIjGpmmuKOlQ==} engines: {node: ^14.17.0 || >=16.0.0} peerDependencies: @@ -12247,8 +12240,8 @@ packages: postcss: 8.4.24 postcss-load-config: 3.1.4(postcss@8.4.24) postcss-safe-parser: 6.0.0(postcss@8.4.24) - svelte: 3.54.0 - svelte-eslint-parser: 0.26.1(svelte@3.54.0) + svelte: 4.1.0 + svelte-eslint-parser: 0.26.1(svelte@4.1.0) transitivePeerDependencies: - supports-color - ts-node @@ -12595,7 +12588,6 @@ packages: resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==} dependencies: '@types/estree': 1.0.1 - dev: false /esutils@2.0.3: resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==} @@ -12838,6 +12830,13 @@ packages: miller-rabin: 4.0.1 dev: true + /ethereum-address@0.0.4: + resolution: {integrity: sha512-3Vwr2CikFLezh/zLAPBV6C51jC0fFnf6vjhkoIWsDms/W5MLgAZNhh9nZUxPmg899K8cVFbklrYQBxcD4JmfrA==} + engines: {node: '>= 4.3.0', npm: '>= 3.7.0'} + dependencies: + crypto-js: 3.3.0 + dev: true + /ethereum-bloom-filters@1.0.10: resolution: {integrity: sha512-rxJ5OFN3RwjQxDcFP2Z5+Q9ho4eIdEmSc2ht0fCu8Se9nbXjZ7/031uXoUYJ87KHCOdVeiUuwSnoS7hmYAGVHA==} dependencies: @@ -14134,6 +14133,7 @@ packages: /globalyzer@0.1.0: resolution: {integrity: sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==} + dev: false /globby@10.0.2: resolution: {integrity: sha512-7dUi7RvCoT/xast/o/dLN53oqND4yk0nsHkhRgn9w65C4PofCLOoJ39iSOg+qVDdWQPIEj+eszMHQ+aLVwwQSg==} @@ -14979,8 +14979,8 @@ packages: resolve-cwd: 3.0.0 dev: true - /import-meta-resolve@2.2.2: - resolution: {integrity: sha512-f8KcQ1D80V7RnqVm+/lirO9zkOxjGxhaTC1IPrBGd3MEfNgmNG67tSUO9gTi2F3Blr2Az6g1vocaxzkVnWl9MA==} + /import-meta-resolve@3.0.0: + resolution: {integrity: sha512-4IwhLhNNA8yy445rPjD/lWh++7hMDOml2eHtd58eG7h+qK3EryMuuRbsHGPikCoAgIkkDnckKfWSk2iDla/ejg==} dev: true /imul@1.0.1: @@ -15374,8 +15374,7 @@ packages: /is-reference@3.0.1: resolution: {integrity: sha512-baJJdQLiYaJdvFbJqXrcGv3WU3QCzBlUcI5QhbesIm6/xPsvmO+2CDoi/GMOFBQEQm+PXkwOPrp9KK5ozZsp2w==} dependencies: - '@types/estree': 1.0.1 - dev: false + '@types/estree': 0.0.50 /is-regex@1.1.4: resolution: {integrity: sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==} @@ -16785,6 +16784,9 @@ packages: engines: {node: '>=14'} dev: true + /locate-character@3.0.0: + resolution: {integrity: sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==} + /locate-path@2.0.0: resolution: {integrity: sha512-NCI2kiDkyR7VeEKm27Kda/iQHyKJe1Bu0FlTbYp3CqJu+9IFe9bLyAjMxf5ZDDbEg+iMPzB5zYyUTSm8wVTKmA==} engines: {node: '>=4'} @@ -17306,6 +17308,9 @@ packages: '@types/mdast': 3.0.12 dev: false + /mdn-data@2.0.30: + resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==} + /media-typer@0.3.0: resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==} engines: {node: '>= 0.6'} @@ -18870,7 +18875,7 @@ packages: dependencies: call-bind: 1.0.2 define-properties: 1.2.0 - es-abstract: 1.21.2 + es-abstract: 1.21.3 dev: true /obliterator@2.0.4: @@ -19339,7 +19344,6 @@ packages: '@types/estree': 1.0.1 estree-walker: 3.0.3 is-reference: 3.0.1 - dev: false /picocolors@0.2.1: resolution: {integrity: sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==} @@ -19766,14 +19770,14 @@ packages: svelte: 3.54.0 dev: true - /prettier-plugin-svelte@2.9.0(prettier@2.8.8)(svelte@3.54.0): - resolution: {integrity: sha512-3doBi5NO4IVgaNPtwewvrgPpqAcvNv0NwJNflr76PIGgi9nf1oguQV1Hpdm9TI2ALIQVn/9iIwLpBO5UcD2Jiw==} + /prettier-plugin-svelte@3.0.0(prettier@3.0.0)(svelte@4.1.0): + resolution: {integrity: sha512-l3RQcPty2UBCoRh3yb9c5XCAmxkrc4BptAnbd5acO1gmSJtChOWkiEjnOvh7hvmtT4V80S8gXCOKAq8RNeIzSw==} peerDependencies: - prettier: ^1.16.4 || ^2.0.0 - svelte: ^3.2.0 + prettier: ^3.0.0 + svelte: ^3.2.0 || ^4.0.0-next.0 dependencies: - prettier: 2.8.8 - svelte: 3.54.0 + prettier: 3.0.0 + svelte: 4.1.0 dev: true /prettier@2.7.1: @@ -19788,6 +19792,12 @@ packages: hasBin: true dev: true + /prettier@3.0.0: + resolution: {integrity: sha512-zBf5eHpwHOGPC47h0zrPyNn+eAEIdEzfywMoYn2XPi0P44Zp0tSq64rq0xAREh4auw2cJZHo9QUob+NqCQky4g==} + engines: {node: '>=14'} + hasBin: true + dev: true + /pretty-error@4.0.0: resolution: {integrity: sha512-AoJ5YMAcXKYxKhuJGdcvse+Voc6v1RgnsR3nWcYU7q4t6z0Q6T86sv5Zq8VIRbOWWFpvdGE83LtdSMNd+6Y0xw==} dependencies: @@ -21953,8 +21963,8 @@ packages: - sugarss dev: true - /svelte-check@3.4.4(postcss@8.4.24)(svelte@3.54.0): - resolution: {integrity: sha512-Uys9+R65cj8TmP8f5UpS7B2xKpNLYNxEWJsA5ZoKcWq/uwvABFF7xS6iPQGLoa7hxz0DS6xU60YFpmq06E4JxA==} + /svelte-check@3.4.6(postcss@8.4.24)(svelte@4.1.0): + resolution: {integrity: sha512-OBlY8866Zh1zHQTkBMPS6psPi7o2umTUyj6JWm4SacnIHXpWFm658pG32m3dKvKFL49V4ntAkfFHKo4ztH07og==} hasBin: true peerDependencies: svelte: ^3.55.0 || ^4.0.0-next.0 || ^4.0.0 @@ -21965,8 +21975,8 @@ packages: import-fresh: 3.3.0 picocolors: 1.0.0 sade: 1.8.1 - svelte: 3.54.0 - svelte-preprocess: 5.0.4(postcss@8.4.24)(svelte@3.54.0)(typescript@5.1.6) + svelte: 4.1.0 + svelte-preprocess: 5.0.4(postcss@8.4.24)(svelte@4.1.0)(typescript@5.1.6) typescript: 5.1.6 transitivePeerDependencies: - '@babel/core' @@ -21984,7 +21994,7 @@ packages: resolution: {integrity: sha512-oU+Xv7Dl4kRU2kdFjsoPLfJfnt5hUhsFUZtuzI3Ku/f2iAFZqBoEuXOqK3N9ngD4dxQOmN4OKWPHVi3NeAeAfQ==} dev: true - /svelte-eslint-parser@0.26.1(svelte@3.54.0): + /svelte-eslint-parser@0.26.1(svelte@4.1.0): resolution: {integrity: sha512-9amXrcFVhv9xrEdCnuIxai22NFQe/NwWVoD8cHGUHPhcU/yXlIHdhZX1L+0iLJszIPdK+iAgImC9IF572OXVWQ==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: @@ -21996,7 +22006,7 @@ packages: eslint-scope: 7.2.0 eslint-visitor-keys: 3.4.1 espree: 9.6.0 - svelte: 3.54.0 + svelte: 4.1.0 dev: true /svelte-heros-v2@0.3.10: @@ -22012,13 +22022,13 @@ packages: svelte: 3.54.0 dev: true - /svelte-hmr@0.15.2(svelte@3.54.0): + /svelte-hmr@0.15.2(svelte@4.1.0): resolution: {integrity: sha512-q/bAruCvFLwvNbeE1x3n37TYFb3mTBJ6TrCq6p2CoFbSTNhDE9oAtEfpy+wmc9So8AG0Tja+X0/mJzX9tSfvIg==} engines: {node: ^12.20 || ^14.13.1 || >= 16} peerDependencies: svelte: ^3.19.0 || ^4.0.0-next.0 dependencies: - svelte: 3.54.0 + svelte: 4.1.0 dev: true /svelte-i18n@3.6.0(svelte@3.54.0): @@ -22037,6 +22047,22 @@ packages: tiny-glob: 0.2.9 dev: false + /svelte-i18n@3.6.0(svelte@4.1.0): + resolution: {integrity: sha512-qvvcMqHVCXJ5pHoQR5uGzWAW5vS3qB9mBq+W6veLZ6jkrzZGOziR+wyOUJsc59BupMh+Ae30qjOndFrRU6v5jA==} + engines: {node: '>= 16'} + hasBin: true + peerDependencies: + svelte: ^3.25.1 + dependencies: + cli-color: 2.0.3 + deepmerge: 4.3.1 + estree-walker: 2.0.2 + intl-messageformat: 9.13.0 + sade: 1.8.1 + svelte: 4.1.0 + tiny-glob: 0.2.9 + dev: false + /svelte-jester@2.1.5(jest@27.5.1)(svelte@3.54.0): resolution: {integrity: sha512-T3JoPsNYltlN2MiVFDxAMOulIO4fztFFI3DhOkzbs1yZQCUFp6sqS6aqusBsIEMVmXaEDW4HO/6bX+CuwuEUSw==} engines: {node: '>= 12'} @@ -22113,7 +22139,7 @@ packages: typescript: 4.9.5 dev: true - /svelte-preprocess@5.0.4(postcss@8.4.24)(svelte@3.54.0)(typescript@5.1.6): + /svelte-preprocess@5.0.4(postcss@8.4.24)(svelte@4.1.0)(typescript@5.1.6): resolution: {integrity: sha512-ABia2QegosxOGsVlsSBJvoWeXy1wUKSfF7SWJdTjLAbx/Y3SrVevvvbFNQqrSJw89+lNSsM58SipmZJ5SRi5iw==} engines: {node: '>= 14.10.0'} requiresBuild: true @@ -22157,7 +22183,7 @@ packages: postcss: 8.4.24 sorcery: 0.11.0 strip-indent: 3.0.0 - svelte: 3.54.0 + svelte: 4.1.0 typescript: 5.1.6 dev: true @@ -22171,6 +22197,24 @@ packages: resolution: {integrity: sha512-tdrgeJU0hob0ZWAMoKXkhcxXA7dpTg6lZGxUeko5YqvPdJBiyRspGsCwV27kIrbrqPP2WUoSV9ca0gnLlw8YzQ==} engines: {node: '>= 8'} + /svelte@4.1.0: + resolution: {integrity: sha512-qob6IX0ui4Z++Lhwzvqb6aig79WhwsF3z6y1YMicjvw0rv71hxD+RmMFG3BM8lB7prNLXeOLnP64Zrynqa3Gtw==} + engines: {node: '>=16'} + dependencies: + '@ampproject/remapping': 2.2.1 + '@jridgewell/sourcemap-codec': 1.4.15 + '@jridgewell/trace-mapping': 0.3.18 + acorn: 8.10.0 + aria-query: 5.3.0 + axobject-query: 3.2.1 + code-red: 1.0.3 + css-tree: 2.3.1 + estree-walker: 3.0.3 + is-reference: 3.0.1 + locate-character: 3.0.0 + magic-string: 0.30.1 + periscopic: 3.1.0 + /swarm-js@0.1.42: resolution: {integrity: sha512-BV7c/dVlA3R6ya1lMlSSNPLYrntt0LUq4YMgy3iwpCIc6rZnS5W2wUoctarZ5pXlpKtxDDf9hNziEkcfrxdhqQ==} dependencies: @@ -22510,6 +22554,7 @@ packages: dependencies: globalyzer: 0.1.0 globrex: 0.1.2 + dev: false /tinybench@2.5.0: resolution: {integrity: sha512-kRwSG8Zx4tjF9ZiyH4bhaebu+EDz1BOx9hOigYHlUW4xxI/wKIUQUqo018UlU4ar6ATPBsaMrdbKZ+tmPdohFA==} @@ -23075,13 +23120,6 @@ packages: dev: true optional: true - /undici@5.18.0: - resolution: {integrity: sha512-1iVwbhonhFytNdg0P4PqyIAXbdlVZVebtPDvuM36m66mRw4OGrCm2MYynJv/UENFLdP13J1nPVQzVE2zTs1OeA==} - engines: {node: '>=12.18'} - dependencies: - busboy: 1.6.0 - dev: true - /undici@5.22.1: resolution: {integrity: sha512-Ji2IJhFXZY0x/0tVBXeQwgPlLWw13GVzpsWPQ3rV50IFMMof2I55PZZxtm4P6iNq+L5znYN9nSTAq0ZyE6lSJw==} engines: {node: '>=14.0'} @@ -23748,6 +23786,18 @@ packages: vite: 4.3.0(@types/node@20.4.2) dev: true + /vitest-fetch-mock@0.2.2(vitest@0.32.2): + resolution: {integrity: sha512-XmH6QgTSjCWrqXoPREIdbj40T7i1xnGmAsTAgfckoO75W1IEHKR8hcPCQ7SO16RsdW1t85oUm6pcQRLeBgjVYQ==} + engines: {node: '>=14.14.0'} + peerDependencies: + vitest: '>=0.16.0' + dependencies: + cross-fetch: 3.1.8 + vitest: 0.32.2 + transitivePeerDependencies: + - encoding + dev: true + /vitest@0.32.2: resolution: {integrity: sha512-hU8GNNuQfwuQmqTLfiKcqEhZY72Zxb7nnN07koCUNmntNxbKQnVbeIS6sqUgR3eXSlbOpit8+/gr1KpqoMgWCQ==} engines: {node: '>=v14.18.0'} From fe03cc00620eefa287fb750dcf3704b289eea2e1 Mon Sep 17 00:00:00 2001 From: Korbinian Kasberger Date: Wed, 26 Jul 2023 09:46:44 +0200 Subject: [PATCH 02/75] feat(bridge-ui-v2): add relayer api, initial activities page --- packages/bridge-ui-v2/package.json | 4 +- packages/bridge-ui-v2/src/app.html | 4 +- .../components/Activities/Activities.svelte | 125 +++++++- .../src/components/Card/Card.svelte | 10 +- packages/bridge-ui-v2/src/libs/assets/bg.svg | 1 + .../bridge-ui-v2/src/libs/bridge/types.ts | 50 +++- .../bridge-ui-v2/src/libs/chain/chains.ts | 45 +++ .../src/libs/relayer/RelayerAPIService.ts | 273 ++++++++++++++++++ .../src/libs/relayer/relayerApi.ts | 102 +++++++ packages/bridge-ui-v2/src/routes/+page.svelte | 1 + packages/bridge-ui-v2/src/styles/base.css | 8 + packages/bridge-ui-v2/static/bg/grid.svg | 223 ++++++++++++++ .../bridge-ui-v2/static/bg/spotlights.svg | 51 ++++ packages/bridge-ui-v2/tailwind.config.js | 6 + pnpm-lock.yaml | 85 +++--- 15 files changed, 923 insertions(+), 65 deletions(-) create mode 100644 packages/bridge-ui-v2/src/libs/assets/bg.svg create mode 100644 packages/bridge-ui-v2/src/libs/relayer/RelayerAPIService.ts create mode 100644 packages/bridge-ui-v2/src/libs/relayer/relayerApi.ts create mode 100644 packages/bridge-ui-v2/static/bg/grid.svg create mode 100644 packages/bridge-ui-v2/static/bg/spotlights.svg diff --git a/packages/bridge-ui-v2/package.json b/packages/bridge-ui-v2/package.json index 8d87b15bf0e..5fe15156e25 100644 --- a/packages/bridge-ui-v2/package.json +++ b/packages/bridge-ui-v2/package.json @@ -29,7 +29,9 @@ "@typescript-eslint/parser": "^5.45.0", "@vitest/coverage-v8": "^0.33.0", "@wagmi/cli": "^1.0.1", + "abitype": "^0.9.5", "autoprefixer": "^10.4.14", + "axios": "^1.4.0", "daisyui": "3.1.7", "eslint": "^8.28.0", "eslint-config-prettier": "^8.5.0", @@ -58,6 +60,6 @@ "abitype": "^0.8.2", "debug": "^4.3.4", "svelte-i18n": "^3.6.0", - "viem": "^1.2.9" + "viem": "^1.4.1" } } diff --git a/packages/bridge-ui-v2/src/app.html b/packages/bridge-ui-v2/src/app.html index 39b9d4df542..432d4f6beaa 100644 --- a/packages/bridge-ui-v2/src/app.html +++ b/packages/bridge-ui-v2/src/app.html @@ -25,6 +25,8 @@ -
%sveltekit.body%
+
+
%sveltekit.body%
+
diff --git a/packages/bridge-ui-v2/src/components/Activities/Activities.svelte b/packages/bridge-ui-v2/src/components/Activities/Activities.svelte index c5549a215ea..09f2348c4dc 100644 --- a/packages/bridge-ui-v2/src/components/Activities/Activities.svelte +++ b/packages/bridge-ui-v2/src/components/Activities/Activities.svelte @@ -1,25 +1,122 @@ - -
- - -
- + +
+
+
From
+
To
+
Amount
+
Status
+
Explorer
- - - diff --git a/packages/bridge-ui-v2/src/components/Card/Card.svelte b/packages/bridge-ui-v2/src/components/Card/Card.svelte index b01b4fc50d6..7096c7eb73c 100644 --- a/packages/bridge-ui-v2/src/components/Card/Card.svelte +++ b/packages/bridge-ui-v2/src/components/Card/Card.svelte @@ -5,7 +5,15 @@ export let text = ''; export let classes = classNames( - 'card w-full md:bg-elevated-background rounded-[20px] md:border md:border-neutral-background', + ` card + w-full + rounded-xl + md:border + md:border-gray-700 + bg-gradient-to-r from-glass-gradient-from to-glass-gradient-to + backdrop-blur-sm + bg-gray-800/30 + `, $$props.class, ); diff --git a/packages/bridge-ui-v2/src/libs/assets/bg.svg b/packages/bridge-ui-v2/src/libs/assets/bg.svg new file mode 100644 index 00000000000..f22eae19695 --- /dev/null +++ b/packages/bridge-ui-v2/src/libs/assets/bg.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/bridge-ui-v2/src/libs/bridge/types.ts b/packages/bridge-ui-v2/src/libs/bridge/types.ts index 274906e45cf..0e212469e91 100644 --- a/packages/bridge-ui-v2/src/libs/bridge/types.ts +++ b/packages/bridge-ui-v2/src/libs/bridge/types.ts @@ -1,33 +1,57 @@ import type { WalletClient } from '@wagmi/core'; import type { Address, Hex } from 'viem'; +export enum MessageStatus { + New, + Retriable, + Done, + Failed, +} + // Bridge sendMessage(message: Message) -export type Message = { +export type BridgeMessage = { // Message ID. Will be set in contract - id: bigint; + Id: bigint; // Message sender address (auto filled) - sender: Address; + Sender: Address; // Source chain ID (auto filled) - srcChainId: bigint; + SrcChainId: bigint; // Destination chain ID where the `to` address lives (auto filled) - destChainId: bigint; + DestChainId: bigint; // Owner address of the bridged asset. - owner: Address; + Owner: Address; // Destination owner address - to: Address; + To: Address; // Alternate address to send any refund. If blank, defaults to owner. - refundAddress: Address; + RefundAddress: Address; // Deposited Ether minus the processingFee. - depositValue: bigint; + DepositValue: bigint; // callValue to invoke on the destination chain, for ERC20 transfers. - callValue: bigint; + CallValue: bigint; // Processing fee for the relayer. Zero if owner will process themself. - processingFee: bigint; + ProcessingFee: bigint; // gasLimit to invoke on the destination chain, for ERC20 transfers. - gasLimit: bigint; + GasLimit: bigint; // callData to invoke on the destination chain, for ERC20 transfers. - data: Hex; + Data: Hex; // Optional memo. + Memo: string; +}; + +// todo: relayer returns with capital letters, switch to lowercase +export type Message = { + id: bigint; + sender: Address; + srcChainId: bigint; + destChainId: bigint; + owner: Address; + to: Address; + refundAddress: Address; + depositValue: bigint; + callValue: bigint; + processingFee: bigint; + gasLimit: bigint; + data: Hex; memo: string; }; diff --git a/packages/bridge-ui-v2/src/libs/chain/chains.ts b/packages/bridge-ui-v2/src/libs/chain/chains.ts index 496137b14ba..88288dd1b74 100644 --- a/packages/bridge-ui-v2/src/libs/chain/chains.ts +++ b/packages/bridge-ui-v2/src/libs/chain/chains.ts @@ -1,6 +1,7 @@ import type { Address, Chain } from '@wagmi/core'; import { + // L1 PUBLIC_L1_BRIDGE_ADDRESS, PUBLIC_L1_CHAIN_ID, PUBLIC_L1_CHAIN_NAME, @@ -9,6 +10,7 @@ import { PUBLIC_L1_RPC_URL, PUBLIC_L1_SIGNAL_SERVICE_ADDRESS, PUBLIC_L1_TOKEN_VAULT_ADDRESS, + // L2 PUBLIC_L2_BRIDGE_ADDRESS, PUBLIC_L2_CHAIN_ID, PUBLIC_L2_CHAIN_NAME, @@ -17,8 +19,19 @@ import { PUBLIC_L2_RPC_URL, PUBLIC_L2_SIGNAL_SERVICE_ADDRESS, PUBLIC_L2_TOKEN_VAULT_ADDRESS, + PUBLIC_L3_BRIDGE_ADDRESS, + PUBLIC_L3_CHAIN_ID, + PUBLIC_L3_CHAIN_NAME, + PUBLIC_L3_CROSS_CHAIN_SYNC_ADDRESS, + PUBLIC_L3_EXPLORER_URL, + PUBLIC_L3_RPC_URL, + PUBLIC_L3_SIGNAL_SERVICE_ADDRESS, + PUBLIC_L3_TOKEN_VAULT_ADDRESS, + // L3 } from '$env/static/public'; +export type ChainID = bigint; + export const mainnetChain: Chain = { id: Number(PUBLIC_L1_CHAIN_ID), name: PUBLIC_L1_CHAIN_NAME, @@ -61,8 +74,34 @@ export const taikoChain: Chain = { }, }; +export const taikoL3Chain: Chain = { + id: Number(PUBLIC_L3_CHAIN_ID), + name: PUBLIC_L3_CHAIN_NAME, + network: 'L3', + nativeCurrency: { + name: 'Ether', + symbol: 'ETH', + decimals: 18, + }, + rpcUrls: { + public: { http: [PUBLIC_L3_RPC_URL] }, + default: { http: [PUBLIC_L3_RPC_URL] }, + }, + blockExplorers: { + default: { + name: 'Layer 3', + url: PUBLIC_L3_EXPLORER_URL, + }, + }, +}; + +//Todo: add L3 chain export const chains = [mainnetChain, taikoChain]; +export const isSupportedChain = (chainId: ChainID): boolean => { + return chains.some((chain) => BigInt(chain.id) === chainId); +}; + export const chainContractsMap: Record< string, { @@ -84,4 +123,10 @@ export const chainContractsMap: Record< crossChainSyncAddress: PUBLIC_L2_CROSS_CHAIN_SYNC_ADDRESS as Address, signalServiceAddress: PUBLIC_L2_SIGNAL_SERVICE_ADDRESS as Address, }, + [PUBLIC_L3_CHAIN_ID]: { + bridgeAddress: PUBLIC_L3_BRIDGE_ADDRESS as Address, + tokenVaultAddress: PUBLIC_L3_TOKEN_VAULT_ADDRESS as Address, + crossChainSyncAddress: PUBLIC_L3_CROSS_CHAIN_SYNC_ADDRESS as Address, + signalServiceAddress: PUBLIC_L3_SIGNAL_SERVICE_ADDRESS as Address, + }, }; diff --git a/packages/bridge-ui-v2/src/libs/relayer/RelayerAPIService.ts b/packages/bridge-ui-v2/src/libs/relayer/RelayerAPIService.ts new file mode 100644 index 00000000000..70412947d38 --- /dev/null +++ b/packages/bridge-ui-v2/src/libs/relayer/RelayerAPIService.ts @@ -0,0 +1,273 @@ +/* eslint-disable no-console */ +import type { Address } from '@wagmi/core'; +import { readContract, waitForTransaction } from '@wagmi/core'; +import type { Abi } from 'abitype'; +import axios from 'axios'; + +import { bridgeABI } from '$abi'; +import { type Message, MessageStatus } from '$libs/bridge'; +import { getLogger } from '$libs/util/logger'; + +import { chainContractsMap, type ChainID, isSupportedChain } from '../chain/chains'; +import type { + APIRequestParams, + APIResponse, + APIResponseTransaction, + BridgeTransaction, + GetAllByAddressResponse, + PaginationInfo, + PaginationParams, + RelayerAPI, + RelayerBlockInfo, + TxUIStatus, +} from './relayerApi'; + +const log = getLogger('RelayerAPIService'); + +export class RelayerAPIService implements RelayerAPI { + private static _filterDuplicateAndWrongBridge(items: APIResponseTransaction[]) { + const uniqueHashes = new Set(); + const filteredItems: APIResponseTransaction[] = []; + for (const item of items) { + const { bridgeAddress } = chainContractsMap[item.chainID]; // todo: also handle unsupported chain + + // Todo: fix + // eslint-disable-next-line no-unsafe-optional-chaining + const { DestChainId, SrcChainId } = item.data?.Message; + // eslint-disable-next-line no-unsafe-optional-chaining + const { transactionHash, address } = item.data?.Raw; + const hasDuplicateHash = uniqueHashes.has(transactionHash); + const wrongBridgeAddress = address?.toLowerCase() !== bridgeAddress?.toLowerCase(); + + const isSupported: boolean = isSupportedChain(BigInt(DestChainId)) && isSupportedChain(BigInt(SrcChainId)); + // Do not include tx if for whatever reason the properties transactionHash + // and address are not present in the response + const shouldIncludeTx = transactionHash && address && !hasDuplicateHash && !wrongBridgeAddress && isSupported; + + if (!hasDuplicateHash) uniqueHashes.add(transactionHash); + if (shouldIncludeTx) filteredItems.push(item); + } + return filteredItems; + } + + private static async _getBridgeMessageStatus( + bridgeAddress: Address, + bridgeAbi: Abi, + chainId: ChainID, + msgHash: string, + ) { + const result = await readContract({ + address: bridgeAddress, + abi: bridgeAbi, + chainId: Number(chainId), + functionName: 'getMessageStatus', + args: [msgHash], + }); + return result as TxUIStatus; + } + + private readonly baseUrl: string; + + constructor(baseUrl: string) { + console.log('relayer instantiated'); + // There is a chance that by accident the env var + // does (or does not) have trailing slash for + // this baseURL. Normalize it, preventing errors + this.baseUrl = baseUrl.replace(/\/$/, ''); + } + + async getTransactionsFromAPI(params: APIRequestParams): Promise { + const requestURL = `${this.baseUrl}/events`; + + try { + log('Fetching events from API with params', params); + + const response = await axios.get(requestURL, { params }); + + if (response.status >= 400) throw response; + + log('Events form API', response.data); + + return response.data; + } catch (error) { + console.error(error); + throw new Error('could not fetch transactions from API', { + cause: error, + }); + } + } + + async getAllBridgeTransactionByAddress( + address: Address, + paginationParams: PaginationParams, + chainID?: number, + ): Promise { + const params = { + address, + chainID, + event: 'MessageSent', + ...paginationParams, + }; + + const apiTxs: APIResponse = await this.getTransactionsFromAPI(params); + + const { page, size, total, total_pages, first, last, max_page } = apiTxs; + + // TODO: we cannot rely on these values, because the API might return duplicates + // and we need to filter them out in the Frontend side. We should fix this + // in the API side. + const paginationInfo: PaginationInfo = { + page, + size, + total, + total_pages, + first, + last, + max_page, + }; + + if (apiTxs.items?.length === 0) { + return { txs: [], paginationInfo }; + } + + // TODO: maybe we should also filter out unsupported chains here? + const items = RelayerAPIService._filterDuplicateAndWrongBridge(apiTxs.items); + + const txs = items.map((tx: APIResponseTransaction) => { + let data: string = tx.data.Message.Data; + if (data === '') { + data = '0x'; + } else if (data !== '0x') { + const buffer = Buffer.from(data, 'base64'); + data = `0x${buffer.toString('hex')}`; + } + + const transformedTx = { + status: tx.status, + amount: BigInt(tx.amount), + symbol: tx.canonicalTokenSymbol, + hash: tx.data.Raw.transactionHash, + from: tx.messageOwner, + srcChainId: tx.data.Message.SrcChainId, + destChainId: tx.data.Message.DestChainId, + msgHash: tx.msgHash, + canonicalTokenAddress: tx.canonicalTokenAddress, + canonicalTokenSymbol: tx.canonicalTokenSymbol, + canonicalTokenName: tx.canonicalTokenName, + canonicalTokenDecimals: tx.canonicalTokenDecimals, + message: { + id: tx.data.Message.Id, + to: tx.data.Message.To, + data: tx.data.Message.Data, + memo: tx.data.Message.Memo, + owner: tx.data.Message.Owner, + sender: tx.data.Message.Sender, + gasLimit: BigInt(tx.data.Message.GasLimit), + callValue: BigInt(tx.data.Message.CallValue), + srcChainId: tx.data.Message.SrcChainId, + destChainId: tx.data.Message.DestChainId, + depositValue: BigInt(tx.data.Message.DepositValue), + processingFee: BigInt(tx.data.Message.ProcessingFee), + refundAddress: tx.data.Message.RefundAddress, + } as Message, + }; + + return transformedTx; + }); + + const txsPromises = txs.map(async (tx) => { + if (!tx) return; + if (tx.from.toLowerCase() !== address.toLowerCase()) return; + + const bridgeTx: BridgeTransaction = { + message: tx.message, + msgHash: tx.msgHash, + status: tx.status, + amount: tx.amount, + symbol: tx.symbol, + decimals: tx.canonicalTokenDecimals, + srcChainId: tx.srcChainId, + destChainId: tx.destChainId, + hash: tx.hash, + from: tx.from, + }; + + const { destChainId, srcChainId, hash, msgHash } = bridgeTx; + + // Returns the transaction receipt for hash or null + // if the transaction has not been mined. + const receipt = await waitForTransaction({ chainId: Number(srcChainId), hash: hash as `0x${string}` }); + + // TODO: do we want to show these transactions? + if (!receipt) return; + + bridgeTx.receipt = receipt; + + const { bridgeAddress: destBridgeAddress } = chainContractsMap[Number(destChainId)]; + + if (!msgHash) return; //todo: handle this case + + const status = (await RelayerAPIService._getBridgeMessageStatus( + destBridgeAddress, + bridgeABI, + destChainId, + msgHash, + )) as TxUIStatus; + + // Update the status + bridgeTx.status = status; + + if ( + tx.canonicalTokenAddress && + tx.canonicalTokenAddress !== ('0x0000000000000000000000000000000000000000' as Address) + ) { + // if it has a canonical address it is a token transfer + + bridgeTx.amount = tx.amount; + bridgeTx.symbol = tx.symbol; + bridgeTx.decimals = tx.canonicalTokenDecimals; + } + + return bridgeTx; + }); + + const bridgeTxs: BridgeTransaction[] = (await Promise.all(txsPromises)).filter((tx): tx is BridgeTransaction => + Boolean(tx), + ); // Removes undefined values + + // Spreading to preserve original txs in case of array mutation + log('Enhanced transactions', [...bridgeTxs]); + + // We want to show the latest transactions first + bridgeTxs.reverse(); + + // Place new transactions at the top of the list + bridgeTxs.sort((tx) => (tx.status === MessageStatus.New ? -1 : 1)); + + return { txs: bridgeTxs, paginationInfo }; + } + + async getBlockInfo(): Promise> { + const requestURL = `${this.baseUrl}/blockInfo`; + + // TODO: why to use a Map here? + const blockInfoMap: Map = new Map(); + + try { + const response = await axios.get<{ data: RelayerBlockInfo[] }>(requestURL); + + if (response.status >= 400) throw response; + + const { data } = response; + + if (data?.data.length > 0) { + data.data.forEach((blockInfo: RelayerBlockInfo) => blockInfoMap.set(blockInfo.chainID, blockInfo)); + } + } catch (error) { + console.error(error); + throw new Error('failed to fetch block info', { cause: error }); + } + + return blockInfoMap; + } +} diff --git a/packages/bridge-ui-v2/src/libs/relayer/relayerApi.ts b/packages/bridge-ui-v2/src/libs/relayer/relayerApi.ts new file mode 100644 index 00000000000..982d3c5014f --- /dev/null +++ b/packages/bridge-ui-v2/src/libs/relayer/relayerApi.ts @@ -0,0 +1,102 @@ +import type { Address } from '@wagmi/core'; +import type { TransactionReceipt } from 'viem'; + +import type { BridgeMessage, Message, MessageStatus } from '$libs/bridge'; +import type { ChainID } from '$libs/chain'; + +export type GetAllByAddressResponse = { + txs: BridgeTransaction[]; + paginationInfo: PaginationInfo; +}; + +export type PaginationParams = { + size: number; + page: number; +}; + +export enum TxExtendedStatus { + Pending = 'Pending', + Claiming = 'Claiming', + Releasing = 'Releasing', + Released = 'Released', +} + +export type TxUIStatus = MessageStatus | TxExtendedStatus; + +export interface RelayerAPI { + getTransactionsFromAPI(params: APIRequestParams): Promise; + getAllBridgeTransactionByAddress( + address: Address, + paginationParams: PaginationParams, + chainID?: number, + ): Promise; + getBlockInfo(): Promise>; +} + +export type TransactionData = { + Message: BridgeMessage; + Raw: { + address: Address; + transactionHash: string; + transactionIndex: string; + }; +}; + +export type BridgeTransaction = { + hash: string; + from: string; + receipt?: TransactionReceipt; + status: TxUIStatus; + msgHash?: string; + message?: Message; + interval?: NodeJS.Timer; + amount?: bigint; + symbol?: string; + decimals?: number; + srcChainId: ChainID; + destChainId: ChainID; +}; + +export type APIResponseTransaction = { + id: number; + name: string; + data: TransactionData; + status: number; + eventType: number; + chainID: number; + canonicalTokenAddress: Address; + canonicalTokenSymbol: string; + canonicalTokenName: string; + canonicalTokenDecimals: number; + amount: string; + msgHash: string; + messageOwner: Address; + event: string; +}; + +export type RelayerBlockInfo = { + chainID: number; + latestProcessedBlock: number; + latestBlock: number; +}; + +export type APIRequestParams = { + address: Address; + chainID?: number; + event?: string; +}; + +export type PaginationInfo = { + page: number; + size: number; + max_page: number; + total_pages: number; + total: number; + last: boolean; + first: boolean; +}; + +export type APIResponse = PaginationInfo & { + items: APIResponseTransaction[]; + visible: number; +}; diff --git a/packages/bridge-ui-v2/src/routes/+page.svelte b/packages/bridge-ui-v2/src/routes/+page.svelte index e57f4ce38b7..cfc543f5696 100644 --- a/packages/bridge-ui-v2/src/routes/+page.svelte +++ b/packages/bridge-ui-v2/src/routes/+page.svelte @@ -1,6 +1,7 @@ diff --git a/packages/bridge-ui-v2/src/styles/base.css b/packages/bridge-ui-v2/src/styles/base.css index 326e28d9e74..2eefb1b60f5 100644 --- a/packages/bridge-ui-v2/src/styles/base.css +++ b/packages/bridge-ui-v2/src/styles/base.css @@ -17,5 +17,13 @@ html, body { height: 100%; + background-image: url(/bg/spotlights.svg); + background-size: cover; + } + + #wrapper { + background-image: url(/bg/grid.svg); + background-size: 840px; + background-attachment: fixed; } } diff --git a/packages/bridge-ui-v2/static/bg/grid.svg b/packages/bridge-ui-v2/static/bg/grid.svg new file mode 100644 index 00000000000..e3b5993a3a0 --- /dev/null +++ b/packages/bridge-ui-v2/static/bg/grid.svg @@ -0,0 +1,223 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/bridge-ui-v2/static/bg/spotlights.svg b/packages/bridge-ui-v2/static/bg/spotlights.svg new file mode 100644 index 00000000000..aba8d48ec23 --- /dev/null +++ b/packages/bridge-ui-v2/static/bg/spotlights.svg @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/bridge-ui-v2/tailwind.config.js b/packages/bridge-ui-v2/tailwind.config.js index bb9345b7ef8..b10b6ac45b7 100644 --- a/packages/bridge-ui-v2/tailwind.config.js +++ b/packages/bridge-ui-v2/tailwind.config.js @@ -164,6 +164,9 @@ export default { 'overlay-background': 'var(--overlay-background)', 'divider-border': 'var(--divider-border)', + + 'glass-gradient-from': 'var(--glass-gradient-from)', + 'glass-gradient-to': 'var(--glass-gradient-to)', }, }, }, @@ -224,6 +227,9 @@ export default { '--divider-border': '#444A55', // grey-600 + '--glass-gradient-from': 'rgba(93, 99, 111, 0.10)', + '--glass-gradient-to': 'rgba(25, 30, 40, 0.20)', + // ================================ // primary: '#C8047D', // pink-500, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index db636ca00a0..d1493a8d5e8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -205,10 +205,10 @@ importers: dependencies: '@wagmi/core': specifier: ^1.3.6 - version: 1.3.6(react@18.2.0)(typescript@5.1.6)(viem@1.2.9) + version: 1.3.6(react@18.2.0)(typescript@5.1.6)(viem@1.4.1) '@web3modal/ethereum': specifier: ^2.6.2 - version: 2.6.2(@wagmi/core@1.3.6)(viem@1.2.9) + version: 2.6.2(@wagmi/core@1.3.6)(viem@1.4.1) '@web3modal/html': specifier: ^2.6.2 version: 2.6.2(react@18.2.0) @@ -225,8 +225,8 @@ importers: specifier: ^3.6.0 version: 3.6.0(svelte@4.1.0) viem: - specifier: ^1.2.9 - version: 1.2.9(typescript@5.1.6) + specifier: ^1.4.1 + version: 1.4.1(typescript@5.1.6) devDependencies: '@playwright/test': specifier: ^1.28.1 @@ -258,6 +258,9 @@ importers: autoprefixer: specifier: ^10.4.14 version: 10.4.14(postcss@8.4.24) + axios: + specifier: ^1.4.0 + version: 1.4.0(debug@4.3.4) daisyui: specifier: 3.1.7 version: 3.1.7(postcss@8.4.24) @@ -4504,7 +4507,7 @@ packages: resolution: {integrity: sha512-gYw0ki/EAuV1oSyMxpqandHjnthZjYYy+YWpTAzf8BqfXM3ItcZLpjxfg+3+mXW8HIO+3jw6T9iiqEXsqHaMMw==} dependencies: '@safe-global/safe-gateway-typescript-sdk': 3.7.3 - viem: 1.2.9(typescript@5.1.6) + viem: 1.4.1(typescript@5.1.6) transitivePeerDependencies: - bufferutil - encoding @@ -4534,7 +4537,7 @@ packages: resolution: {integrity: sha512-bcKpo1oj54hGholplGLpqPHRbIsnbixFtc06nwuNM5/dwSXOq/AAYoIBRsBmnZJSdfeNW5rnff7NTAz3ZCqR9Q==} dependencies: '@noble/curves': 1.0.0 - '@noble/hashes': 1.3.0 + '@noble/hashes': 1.3.1 '@scure/base': 1.1.1 /@scure/bip39@1.1.1: @@ -4547,7 +4550,7 @@ packages: /@scure/bip39@1.2.0: resolution: {integrity: sha512-SX/uKq52cuxm4YFXWFaVByaSHJh2w3BnokVSeUJVCv6K7WulT9u2BuNRBhuFl8vAuYnzx9bEu9WgpcNYTrYieg==} dependencies: - '@noble/hashes': 1.3.0 + '@noble/hashes': 1.3.1 '@scure/base': 1.1.1 /@sentry-internal/tracing@7.53.1: @@ -6328,16 +6331,6 @@ packages: typescript: 5.1.6 dev: true - /@wagmi/chains@1.2.0(typescript@5.1.6): - resolution: {integrity: sha512-dmDRipsE54JfyudOBkuhEexqQWcrZqxn/qiujG8SBzMh/az/AH5xlJSA+j1CPWTx9+QofSMF3B7A4gb6XRmSaQ==} - peerDependencies: - typescript: '>=5.0.4' - peerDependenciesMeta: - typescript: - optional: true - dependencies: - typescript: 5.1.6 - /@wagmi/chains@1.4.0(typescript@5.1.6): resolution: {integrity: sha512-9HwJrhcZ1TxyrCbE10y7s1eSiSiyfGam7AHIOLYExaOX+vpOZ+MNTt4orFEDbEpz1fxwJDPPI38lanAUix1OSA==} peerDependencies: @@ -6357,7 +6350,6 @@ packages: optional: true dependencies: typescript: 5.1.6 - dev: true /@wagmi/cli@1.0.1(@wagmi/core@1.3.6)(typescript@5.1.6): resolution: {integrity: sha512-SZwT7RglyVDipDTPL/dEKfrAJ3GdSKfdhaF6CFoseIgSiOLkj3xbakvAqdjYSkYnnpjrqLXc3WKZCnszQryctA==} @@ -6376,7 +6368,7 @@ packages: optional: true dependencies: '@wagmi/chains': 0.2.22(typescript@5.1.6) - '@wagmi/core': 1.3.6(react@18.2.0)(typescript@5.1.6)(viem@1.2.9) + '@wagmi/core': 1.3.6(react@18.2.0)(typescript@5.1.6)(viem@1.4.1) abitype: 0.8.1(typescript@5.1.6)(zod@3.21.4) abort-controller: 3.0.0 bundle-require: 3.1.2(esbuild@0.15.13) @@ -6512,7 +6504,7 @@ packages: - utf-8-validate - zod - /@wagmi/connectors@2.6.5(@wagmi/chains@1.4.0)(react@18.2.0)(typescript@5.1.6)(viem@1.2.9): + /@wagmi/connectors@2.6.5(@wagmi/chains@1.4.0)(react@18.2.0)(typescript@5.1.6)(viem@1.4.1): resolution: {integrity: sha512-klF31togMDd0qQqEcLl5cCGxjMbL0RRXQ8I1vxmEa3KdGzw6Z3ICVzX7/bDfnNEZcOW7BKyAnZDq7rCt5jTOiw==} peerDependencies: '@wagmi/chains': '>=1.3.0' @@ -6536,7 +6528,7 @@ packages: abitype: 0.8.7(typescript@5.1.6)(zod@3.21.4) eventemitter3: 4.0.7 typescript: 5.1.6 - viem: 1.2.9(typescript@5.1.6) + viem: 1.4.1(typescript@5.1.6) transitivePeerDependencies: - '@react-native-async-storage/async-storage' - bufferutil @@ -6599,7 +6591,7 @@ packages: - typescript dev: false - /@wagmi/core@1.3.6(react@18.2.0)(typescript@5.1.6)(viem@1.2.9): + /@wagmi/core@1.3.6(react@18.2.0)(typescript@5.1.6)(viem@1.4.1): resolution: {integrity: sha512-TXv9ZlRR5aySfERFuWMuo+lKXC/CoqtxVJZVHPqhK1jY+nldMx3AvrWzzF4CccRaMYcVdvPFepvmxzq2A2VvWg==} peerDependencies: typescript: '>=5.0.4' @@ -6609,11 +6601,11 @@ packages: optional: true dependencies: '@wagmi/chains': 1.4.0(typescript@5.1.6) - '@wagmi/connectors': 2.6.5(@wagmi/chains@1.4.0)(react@18.2.0)(typescript@5.1.6)(viem@1.2.9) + '@wagmi/connectors': 2.6.5(@wagmi/chains@1.4.0)(react@18.2.0)(typescript@5.1.6)(viem@1.4.1) abitype: 0.8.7(typescript@5.1.6)(zod@3.21.4) eventemitter3: 4.0.7 typescript: 5.1.6 - viem: 1.2.9(typescript@5.1.6) + viem: 1.4.1(typescript@5.1.6) zustand: 4.3.9(react@18.2.0) transitivePeerDependencies: - '@react-native-async-storage/async-storage' @@ -7234,14 +7226,14 @@ packages: - react dev: false - /@web3modal/ethereum@2.6.2(@wagmi/core@1.3.6)(viem@1.2.9): + /@web3modal/ethereum@2.6.2(@wagmi/core@1.3.6)(viem@1.4.1): resolution: {integrity: sha512-8QCzJj0+x6y/7V++DQnXdPjdmMvq+zm/Fl8CEKhNlni9p4H406q7ramjdJEu1Bk4xtCklYh/aU3ZGR5wUIDysA==} peerDependencies: '@wagmi/core': '>=1' viem: '>=1' dependencies: - '@wagmi/core': 1.3.6(react@18.2.0)(typescript@5.1.6)(viem@1.2.9) - viem: 1.2.9(typescript@5.1.6) + '@wagmi/core': 1.3.6(react@18.2.0)(typescript@5.1.6)(viem@1.4.1) + viem: 1.4.1(typescript@5.1.6) dev: false /@web3modal/html@2.6.2(react@18.2.0): @@ -7470,6 +7462,7 @@ packages: optional: true dependencies: typescript: 5.1.6 + dev: true /abitype@0.8.2(typescript@4.9.5): resolution: {integrity: sha512-B1ViNMGpfx/qjVQi0RTc2HEFHuR9uoCoTEkwELT5Y7pBPtBbctYijz9BK6+Kd0hQ3S70FhYTO2dWWk0QNUEXMA==} @@ -7520,6 +7513,19 @@ packages: typescript: 5.1.6 zod: 3.21.4 + /abitype@0.9.3(typescript@5.1.6): + resolution: {integrity: sha512-dz4qCQLurx97FQhnb/EIYTk/ldQ+oafEDUqC0VVIeQS1Q48/YWt/9YNfMmp9SLFqN41ktxny3c8aYxHjmFIB/w==} + peerDependencies: + typescript: '>=5.0.4' + zod: ^3 >=3.19.1 + peerDependenciesMeta: + typescript: + optional: true + zod: + optional: true + dependencies: + typescript: 5.1.6 + /abort-controller@3.0.0: resolution: {integrity: sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==} engines: {node: '>=6.5'} @@ -8128,6 +8134,16 @@ packages: - debug dev: false + /axios@1.4.0(debug@4.3.4): + resolution: {integrity: sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==} + dependencies: + follow-redirects: 1.15.2(debug@4.3.4) + form-data: 4.0.0 + proxy-from-env: 1.1.0 + transitivePeerDependencies: + - debug + dev: true + /axobject-query@3.2.1: resolution: {integrity: sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==} dependencies: @@ -13628,7 +13644,6 @@ packages: asynckit: 0.4.0 combined-stream: 1.0.8 mime-types: 2.1.35 - dev: false /formdata-polyfill@4.0.10: resolution: {integrity: sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==} @@ -23617,8 +23632,8 @@ packages: - zod dev: true - /viem@1.2.9(typescript@5.1.6): - resolution: {integrity: sha512-EnEbTuAAHv43unUgMISdQXbD9mrhZLvOdmf6eRGbDFl+XwP/PEzZAT79RaWAuDPnLXGMP1gBCJF++NFjSMukUw==} + /viem@1.3.0(typescript@5.1.6): + resolution: {integrity: sha512-gCtachbNPG9G9D7UNuiqLaLf8IFV15FypBrSpXEFeeEczXxI+Jgi9FTwDS+NJLreVrjBeZXQVj1ITTqKpItw4w==} peerDependencies: typescript: '>=5.0.4' peerDependenciesMeta: @@ -23630,7 +23645,7 @@ packages: '@noble/hashes': 1.3.0 '@scure/bip32': 1.3.0 '@scure/bip39': 1.2.0 - '@wagmi/chains': 1.2.0(typescript@5.1.6) + '@wagmi/chains': 1.6.0(typescript@5.1.6) abitype: 0.8.11(typescript@5.1.6) isomorphic-ws: 5.0.0(ws@8.12.0) typescript: 5.1.6 @@ -23639,9 +23654,10 @@ packages: - bufferutil - utf-8-validate - zod + dev: true - /viem@1.3.0(typescript@5.1.6): - resolution: {integrity: sha512-gCtachbNPG9G9D7UNuiqLaLf8IFV15FypBrSpXEFeeEczXxI+Jgi9FTwDS+NJLreVrjBeZXQVj1ITTqKpItw4w==} + /viem@1.4.1(typescript@5.1.6): + resolution: {integrity: sha512-MtaoBHDSJDqa+QyXKG5d+S6EQSebRO0tzw6anSP4zC7AbC614vMeg9Y8LbkmEkWCw8swFYkort+H9l7GkWB0uA==} peerDependencies: typescript: '>=5.0.4' peerDependenciesMeta: @@ -23654,7 +23670,7 @@ packages: '@scure/bip32': 1.3.0 '@scure/bip39': 1.2.0 '@wagmi/chains': 1.6.0(typescript@5.1.6) - abitype: 0.8.11(typescript@5.1.6) + abitype: 0.9.3(typescript@5.1.6) isomorphic-ws: 5.0.0(ws@8.12.0) typescript: 5.1.6 ws: 8.12.0 @@ -23662,7 +23678,6 @@ packages: - bufferutil - utf-8-validate - zod - dev: true /vite-node@0.32.2(@types/node@20.4.2): resolution: {integrity: sha512-dTQ1DCLwl2aEseov7cfQ+kDMNJpM1ebpyMMMwWzBvLbis8Nla/6c9WQcqpPssTwS6Rp/+U6KwlIj8Eapw4bLdA==} From e5731af56d27f28cc45903d66125dd792e5fd518 Mon Sep 17 00:00:00 2001 From: Korbinian Kasberger Date: Wed, 26 Jul 2023 09:49:36 +0200 Subject: [PATCH 03/75] chore(bridge-ui-v2): remove bg asset --- packages/bridge-ui-v2/src/libs/assets/bg.svg | 1 - 1 file changed, 1 deletion(-) delete mode 100644 packages/bridge-ui-v2/src/libs/assets/bg.svg diff --git a/packages/bridge-ui-v2/src/libs/assets/bg.svg b/packages/bridge-ui-v2/src/libs/assets/bg.svg deleted file mode 100644 index f22eae19695..00000000000 --- a/packages/bridge-ui-v2/src/libs/assets/bg.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file From b9554f3e4e051155ddeb6b7e441e896588c6c60f Mon Sep 17 00:00:00 2001 From: Korbinian Kasberger Date: Wed, 26 Jul 2023 10:08:51 +0200 Subject: [PATCH 04/75] feat(bridge-ui-v2): update bg --- .gitignore | 4 ++++ packages/bridge-ui-v2/src/app.html | 2 -- packages/bridge-ui-v2/src/styles/base.css | 11 +++-------- 3 files changed, 7 insertions(+), 10 deletions(-) diff --git a/.gitignore b/.gitignore index 316fffbabf0..d2cefd2067c 100644 --- a/.gitignore +++ b/.gitignore @@ -115,3 +115,7 @@ __pycache__/ # Ignore .husky for new contributors using lefthook while maintaining # backwards compatibility for past contributors .husky + + +# VSCode +.vscode/launch.json diff --git a/packages/bridge-ui-v2/src/app.html b/packages/bridge-ui-v2/src/app.html index 432d4f6beaa..61051584433 100644 --- a/packages/bridge-ui-v2/src/app.html +++ b/packages/bridge-ui-v2/src/app.html @@ -25,8 +25,6 @@ -
%sveltekit.body%
-
diff --git a/packages/bridge-ui-v2/src/styles/base.css b/packages/bridge-ui-v2/src/styles/base.css index 2eefb1b60f5..2936569b000 100644 --- a/packages/bridge-ui-v2/src/styles/base.css +++ b/packages/bridge-ui-v2/src/styles/base.css @@ -17,13 +17,8 @@ html, body { height: 100%; - background-image: url(/bg/spotlights.svg); - background-size: cover; - } - - #wrapper { - background-image: url(/bg/grid.svg); - background-size: 840px; - background-attachment: fixed; + background-image: url(/bg/grid.svg), url(/bg/spotlights.svg), linear-gradient(270deg, #1f1f1f 0%, #000000 100%); + background-size: 840px, cover, cover; + background-blend-mode: color-dodge, lighten, multiply; } } From 911f3d21a1dea262647a2b75c12bfdea6213e20e Mon Sep 17 00:00:00 2001 From: Francisco Date: Wed, 26 Jul 2023 12:02:52 +0200 Subject: [PATCH 05/75] types --- .../bridge-ui-v2/src/libs/bridge/types.ts | 70 +++++++++---------- 1 file changed, 35 insertions(+), 35 deletions(-) diff --git a/packages/bridge-ui-v2/src/libs/bridge/types.ts b/packages/bridge-ui-v2/src/libs/bridge/types.ts index 0e212469e91..d4390b12f42 100644 --- a/packages/bridge-ui-v2/src/libs/bridge/types.ts +++ b/packages/bridge-ui-v2/src/libs/bridge/types.ts @@ -1,58 +1,58 @@ -import type { WalletClient } from '@wagmi/core'; -import type { Address, Hex } from 'viem'; +import type { ChainID } from '$libs/chain'; +import type { Hash, WalletClient } from '@wagmi/core'; +import type { Address, Hex, TransactionReceipt } from 'viem'; export enum MessageStatus { - New, - Retriable, - Done, - Failed, + NEW, + RETRIABLE, + DONE, + FAILED, } -// Bridge sendMessage(message: Message) -export type BridgeMessage = { +// Bridge sendMessage() +// Claim/Retry processMessage()/retryMessage() +// Release releaseEthe()/releaseERC20() +export type Message = { // Message ID. Will be set in contract - Id: bigint; + id: bigint; // Message sender address (auto filled) - Sender: Address; + sender: Address; // Source chain ID (auto filled) - SrcChainId: bigint; + srcChainId: bigint; // Destination chain ID where the `to` address lives (auto filled) - DestChainId: bigint; + destChainId: bigint; // Owner address of the bridged asset. - Owner: Address; + owner: Address; // Destination owner address - To: Address; + to: Address; // Alternate address to send any refund. If blank, defaults to owner. - RefundAddress: Address; + refundAddress: Address; // Deposited Ether minus the processingFee. - DepositValue: bigint; + depositValue: bigint; // callValue to invoke on the destination chain, for ERC20 transfers. - CallValue: bigint; + callValue: bigint; // Processing fee for the relayer. Zero if owner will process themself. - ProcessingFee: bigint; + processingFee: bigint; // gasLimit to invoke on the destination chain, for ERC20 transfers. - GasLimit: bigint; + gasLimit: bigint; // callData to invoke on the destination chain, for ERC20 transfers. - Data: Hex; + data: Hex; // Optional memo. - Memo: string; + memo: string; }; -// todo: relayer returns with capital letters, switch to lowercase -export type Message = { - id: bigint; - sender: Address; - srcChainId: bigint; - destChainId: bigint; +export type BridgeTransaction = { + hash: Hash; owner: Address; - to: Address; - refundAddress: Address; - depositValue: bigint; - callValue: bigint; - processingFee: bigint; - gasLimit: bigint; - data: Hex; - memo: string; + status: MessageStatus; + amount: bigint; + symbol: string; + decimals: number; + srcChainId: ChainID; + destChainId: ChainID; + receipt?: TransactionReceipt; + msgHash?: Hash; + message?: Message; }; // TokenVault sendERC20(...args) From eed4ee3f1d5c3a6ba3d82e8bdd50cb0d3233f0ec Mon Sep 17 00:00:00 2001 From: Francisco Date: Wed, 26 Jul 2023 12:03:19 +0200 Subject: [PATCH 06/75] types --- packages/bridge-ui-v2/src/app.html | 2 +- packages/bridge-ui-v2/src/libs/bridge/types.ts | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/bridge-ui-v2/src/app.html b/packages/bridge-ui-v2/src/app.html index 61051584433..39b9d4df542 100644 --- a/packages/bridge-ui-v2/src/app.html +++ b/packages/bridge-ui-v2/src/app.html @@ -25,6 +25,6 @@ -
%sveltekit.body%
+
%sveltekit.body%
diff --git a/packages/bridge-ui-v2/src/libs/bridge/types.ts b/packages/bridge-ui-v2/src/libs/bridge/types.ts index d4390b12f42..a034b59255f 100644 --- a/packages/bridge-ui-v2/src/libs/bridge/types.ts +++ b/packages/bridge-ui-v2/src/libs/bridge/types.ts @@ -1,7 +1,8 @@ -import type { ChainID } from '$libs/chain'; import type { Hash, WalletClient } from '@wagmi/core'; import type { Address, Hex, TransactionReceipt } from 'viem'; +import type { ChainID } from '$libs/chain'; + export enum MessageStatus { NEW, RETRIABLE, From 44ebb89b980d87248b63070b921fceadea00999a Mon Sep 17 00:00:00 2001 From: Francisco Date: Wed, 26 Jul 2023 15:29:01 +0200 Subject: [PATCH 07/75] bridgetx storage --- packages/bridge-ui-v2/src/app.config.ts | 5 + .../src/libs/storage/BridgeTxService.ts | 153 ++++++++++++++++++ .../src/libs/storage/CustomTokenService.ts | 3 + 3 files changed, 161 insertions(+) create mode 100644 packages/bridge-ui-v2/src/libs/storage/BridgeTxService.ts create mode 100644 packages/bridge-ui-v2/src/libs/storage/CustomTokenService.ts diff --git a/packages/bridge-ui-v2/src/app.config.ts b/packages/bridge-ui-v2/src/app.config.ts index 64e9bd3fb03..d3032b74a9f 100644 --- a/packages/bridge-ui-v2/src/app.config.ts +++ b/packages/bridge-ui-v2/src/app.config.ts @@ -17,3 +17,8 @@ export const bridge = { export const pendingTransaction = { waitTimeout: 300000, }; + +export const storageService = { + bridgeTxPrefix: 'bridge-tx', + customTokenPrefix: 'custom-token', +}; diff --git a/packages/bridge-ui-v2/src/libs/storage/BridgeTxService.ts b/packages/bridge-ui-v2/src/libs/storage/BridgeTxService.ts new file mode 100644 index 00000000000..2dd45f39722 --- /dev/null +++ b/packages/bridge-ui-v2/src/libs/storage/BridgeTxService.ts @@ -0,0 +1,153 @@ +import { getContract, waitForTransaction } from '@wagmi/core'; +import type { Address, Hash, TransactionReceipt } from 'viem'; + +import { bridgeABI } from '$abi'; +import { pendingTransaction, storageService } from '$config'; +import { type BridgeTransaction, MessageStatus } from '$libs/bridge'; +import { chainContractsMap, isSupportedChain } from '$libs/chain'; +import { jsonParseWithDefault } from '$libs/util/jsonParseWithDefault'; +import { getLogger } from '$libs/util/logger'; +import { publicClient } from '$libs/wagmi'; + +const log = getLogger('storage:BridgeTxService'); + +export class BridgeTxService { + private readonly storage: Storage; + + private static async _getTransactionReceipt(chainId: number, hash: Hash) { + const client = publicClient({ chainId }); + return client.getTransactionReceipt({ hash }); + } + + private static async _getBridgeMessageSent(userAddress: Address, chainId: number, blockNumber: number) { + // Gets the event MessageSent from the bridge contract + // in the block where the transaction was mined, and find + // our event MessageSent whose owner is the address passed in + + const bridgeAddress = chainContractsMap[chainId].bridgeAddress; + const client = publicClient({ chainId }); + + const filter = await client.createContractEventFilter({ + abi: bridgeABI, + address: bridgeAddress, + eventName: 'MessageSent', + fromBlock: BigInt(blockNumber), + toBlock: BigInt(blockNumber), + }); + + const messageSentEvents = await client.getFilterLogs({ filter }); + + // Filter out those events that are not from the current address + return messageSentEvents.find(({ args }) => args.message?.owner.toLowerCase() === userAddress.toLowerCase()); + } + + private static _getBridgeMessageStatus(msgHash: Hash, chainId: number) { + const bridgeAddress = chainContractsMap[chainId].bridgeAddress; + + const bridgeContract = getContract({ + chainId, + abi: bridgeABI, + address: bridgeAddress, + }); + + return bridgeContract.read.getMessageStatus([msgHash]) as Promise; + } + + constructor(storage: Storage) { + this.storage = storage; + } + + private _getTxFromStorage(address: Address) { + const key = `${storageService.bridgeTxPrefix}:${address}`; + const txs = jsonParseWithDefault(this.storage.getItem(key), []) as BridgeTransaction[]; + return txs; + } + + private async _enhanceTx(tx: BridgeTransaction, address: Address, waitForTx = false) { + // Filters out the transactions that are not from the current address + if (tx.owner.toLowerCase() !== address.toLowerCase()) return; + + const bridgeTx: BridgeTransaction = { ...tx }; // prevent mutation + + const { destChainId, srcChainId, hash } = bridgeTx; + + // Ignore transactions from chains not supported by the bridge + if (isSupportedChain(srcChainId)) return; + + let receipt: TransactionReceipt | null = null; + + if (waitForTx) { + receipt = await waitForTransaction({ + hash, + chainId: Number(srcChainId), + timeout: pendingTransaction.waitTimeout, + }); + } else { + // Returns the transaction receipt for hash or null + // if the transaction has not been mined. + receipt = await BridgeTxService._getTransactionReceipt(Number(srcChainId), hash); + } + + if (!receipt) { + return bridgeTx; + } + + // We have receipt + bridgeTx.receipt = receipt; + + const messageSentEvent = await BridgeTxService._getBridgeMessageSent( + address, + Number(srcChainId), + Number(receipt.blockNumber), + ); + + if (!messageSentEvent?.args?.msgHash || !messageSentEvent?.args?.message) { + // No message yet, so we can't get more info from this transaction + return bridgeTx; + } + + const { msgHash, message } = messageSentEvent.args; + + // Let's add this new info to the transaction in case something else + // fails, such as the filter for ERC20Sent events + bridgeTx.msgHash = msgHash; + bridgeTx.message = message; + + const status = await BridgeTxService._getBridgeMessageStatus(msgHash, Number(destChainId)); + + bridgeTx.status = status; + } + + async getAllTxByAddress(userAddress: Address) { + const txs = this._getTxFromStorage(userAddress); + + log('Bridge transactions from storage', txs); + + const enhancedTxPromises = txs.map(async (tx) => this._enhanceTx(tx, userAddress)); + + const enhancedTxs = (await Promise.all(enhancedTxPromises)) + // Removes undefined values + .filter((tx) => Boolean(tx)) as BridgeTransaction[]; + + // Place new transactions at the top of the list + enhancedTxs.sort((tx) => (tx.status === MessageStatus.NEW ? -1 : 1)); + + log('Enhanced transactions', [...enhancedTxs]); + + return enhancedTxs; + } + + async getTxByHash(hash: Hash, address: Address) { + const txs = this._getTxFromStorage(address); + + const tx = txs.find((tx) => tx.hash === hash) as BridgeTransaction; + + log('Transaction from storage', { ...tx }); + + const enhancedTx = await this._enhanceTx(tx, address, true); + + log('Enhanced transaction', enhancedTx); + + return enhancedTx; + } +} diff --git a/packages/bridge-ui-v2/src/libs/storage/CustomTokenService.ts b/packages/bridge-ui-v2/src/libs/storage/CustomTokenService.ts new file mode 100644 index 00000000000..09647f8c144 --- /dev/null +++ b/packages/bridge-ui-v2/src/libs/storage/CustomTokenService.ts @@ -0,0 +1,3 @@ +export class CustomTokenService { + // TODO +} From cc2eacfd6fe25b3cf40fd7abcc75201435709870 Mon Sep 17 00:00:00 2001 From: Francisco Date: Wed, 26 Jul 2023 15:57:54 +0200 Subject: [PATCH 08/75] bridge tx service --- .../src/components/Bridge/Bridge.svelte | 27 ++++++++++++++++- .../bridge-ui-v2/src/libs/bridge/types.ts | 4 +-- .../src/libs/storage/BridgeTxService.ts | 30 ++++++++++++++++--- .../src/libs/storage/CustomTokenService.ts | 6 ++++ .../bridge-ui-v2/src/libs/storage/services.ts | 6 ++++ packages/bridge-ui-v2/src/routes/+page.svelte | 1 - 6 files changed, 66 insertions(+), 8 deletions(-) create mode 100644 packages/bridge-ui-v2/src/libs/storage/services.ts diff --git a/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte b/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte index cc7cd6aac49..3025af946d3 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte @@ -10,10 +10,17 @@ import { OnNetwork } from '$components/OnNetwork'; import { TokenDropdown } from '$components/TokenDropdown'; import { PUBLIC_L1_EXPLORER_URL } from '$env/static/public'; - import { type BridgeArgs, bridges, type ERC20BridgeArgs, type ETHBridgeArgs } from '$libs/bridge'; + import { + type BridgeArgs, + bridges, + type BridgeTransaction, + type ERC20BridgeArgs, + type ETHBridgeArgs, + } from '$libs/bridge'; import type { ERC20Bridge } from '$libs/bridge/ERC20Bridge'; import { chainContractsMap, chains } from '$libs/chain'; import { ApproveError, NoAllowanceRequiredError, SendERC20Error, SendMessageError } from '$libs/error'; + import { bridgeTxService } from '$libs/storage/services'; import { ETHToken, getAddress, isDeployedCrossChain, tokens, TokenType } from '$libs/token'; import { getConnectedWallet } from '$libs/util/getConnectedWallet'; import { type Account, account } from '$stores/account'; @@ -199,6 +206,24 @@ }), ); + // Let's add it to the user's localStorage + const bridgeTx = { + hash: txHash, + from: $account.address, + amount: $enteredAmount, + symbol: $selectedToken.symbol, + decimals: $selectedToken.decimals, + srcChainId: BigInt($network.id), + destChainId: BigInt($destNetwork.id), + + // TODO: do we need something else? we can have + // access to the Transaction object: + // TransactionLegacy, TransactionEIP2930 and + // TransactionEIP1559 + } as BridgeTransaction; + + bridgeTxService.addTxByAddress($account.address, bridgeTx); + // Reset the form amountComponent.clearAmount(); recipientComponent.clearRecipient(); diff --git a/packages/bridge-ui-v2/src/libs/bridge/types.ts b/packages/bridge-ui-v2/src/libs/bridge/types.ts index a034b59255f..498017ce277 100644 --- a/packages/bridge-ui-v2/src/libs/bridge/types.ts +++ b/packages/bridge-ui-v2/src/libs/bridge/types.ts @@ -44,13 +44,13 @@ export type Message = { export type BridgeTransaction = { hash: Hash; - owner: Address; - status: MessageStatus; + from: Address; amount: bigint; symbol: string; decimals: number; srcChainId: ChainID; destChainId: ChainID; + status?: MessageStatus; receipt?: TransactionReceipt; msgHash?: Hash; message?: Message; diff --git a/packages/bridge-ui-v2/src/libs/storage/BridgeTxService.ts b/packages/bridge-ui-v2/src/libs/storage/BridgeTxService.ts index 2dd45f39722..69f6052eac8 100644 --- a/packages/bridge-ui-v2/src/libs/storage/BridgeTxService.ts +++ b/packages/bridge-ui-v2/src/libs/storage/BridgeTxService.ts @@ -65,7 +65,7 @@ export class BridgeTxService { private async _enhanceTx(tx: BridgeTransaction, address: Address, waitForTx = false) { // Filters out the transactions that are not from the current address - if (tx.owner.toLowerCase() !== address.toLowerCase()) return; + if (tx.from.toLowerCase() !== address.toLowerCase()) return; const bridgeTx: BridgeTransaction = { ...tx }; // prevent mutation @@ -77,6 +77,7 @@ export class BridgeTxService { let receipt: TransactionReceipt | null = null; if (waitForTx) { + // We might want to wait for the transaction to be mined receipt = await waitForTransaction({ hash, chainId: Number(srcChainId), @@ -118,12 +119,12 @@ export class BridgeTxService { bridgeTx.status = status; } - async getAllTxByAddress(userAddress: Address) { - const txs = this._getTxFromStorage(userAddress); + async getAllTxByAddress(address: Address) { + const txs = this._getTxFromStorage(address); log('Bridge transactions from storage', txs); - const enhancedTxPromises = txs.map(async (tx) => this._enhanceTx(tx, userAddress)); + const enhancedTxPromises = txs.map(async (tx) => this._enhanceTx(tx, address)); const enhancedTxs = (await Promise.all(enhancedTxPromises)) // Removes undefined values @@ -150,4 +151,25 @@ export class BridgeTxService { return enhancedTx; } + + addTxByAddress(address: Address, tx: BridgeTransaction) { + const txs = this._getTxFromStorage(address); + + txs.unshift(tx); + + log('Adding transaction to storage', tx); + + const key = `${storageService.bridgeTxPrefix}:${address}`; + this.storage.setItem( + key, + // We need to serialize the BigInts as strings + JSON.stringify(txs, (_, value) => (typeof value === 'bigint' ? value.toString() : value)), + ); + } + + updateByAddress(address: Address, txs: BridgeTransaction[]) { + log('Updating storage with transactions', txs); + const key = `${storageService.bridgeTxPrefix}:${address}`; + this.storage.setItem(key, JSON.stringify(txs)); + } } diff --git a/packages/bridge-ui-v2/src/libs/storage/CustomTokenService.ts b/packages/bridge-ui-v2/src/libs/storage/CustomTokenService.ts index 09647f8c144..0be6a88168a 100644 --- a/packages/bridge-ui-v2/src/libs/storage/CustomTokenService.ts +++ b/packages/bridge-ui-v2/src/libs/storage/CustomTokenService.ts @@ -1,3 +1,9 @@ export class CustomTokenService { + private readonly storage: Storage; + + constructor(storage: Storage) { + this.storage = storage; + } + // TODO } diff --git a/packages/bridge-ui-v2/src/libs/storage/services.ts b/packages/bridge-ui-v2/src/libs/storage/services.ts new file mode 100644 index 00000000000..15ea11c1a4c --- /dev/null +++ b/packages/bridge-ui-v2/src/libs/storage/services.ts @@ -0,0 +1,6 @@ +import { BridgeTxService } from './BridgeTxService'; +import { CustomTokenService } from './CustomTokenService'; + +export const bridgeTxService = new BridgeTxService(globalThis.localStorage); + +export const customTokenService = new CustomTokenService(globalThis.localStorage); diff --git a/packages/bridge-ui-v2/src/routes/+page.svelte b/packages/bridge-ui-v2/src/routes/+page.svelte index cfc543f5696..e57f4ce38b7 100644 --- a/packages/bridge-ui-v2/src/routes/+page.svelte +++ b/packages/bridge-ui-v2/src/routes/+page.svelte @@ -1,7 +1,6 @@ From beea5ad2597b2efb2a7d199cb1cca28c9c73c95c Mon Sep 17 00:00:00 2001 From: Francisco Date: Wed, 26 Jul 2023 16:29:56 +0200 Subject: [PATCH 09/75] minor changes in the styling --- .../src/components/Bridge/BridgeTabs.svelte | 16 ++++++++++------ .../src/components/Header/Header.svelte | 17 ++++++++++------- .../src/components/LinkButton/LinkButton.svelte | 7 +++---- 3 files changed, 23 insertions(+), 17 deletions(-) diff --git a/packages/bridge-ui-v2/src/components/Bridge/BridgeTabs.svelte b/packages/bridge-ui-v2/src/components/Bridge/BridgeTabs.svelte index 9541eb57ba7..8ecc0023461 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/BridgeTabs.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/BridgeTabs.svelte @@ -3,17 +3,21 @@ import { page } from '$app/stores'; import { LinkButton } from '$components/LinkButton'; - $: isERC20Bridge = $page.route.id === '/' ? true : false; - $: isNFTBridge = $page.route.id === '/nft' ? true : false; - $: classes = `flex-basis-0 mr-2 p-3 rounded-full flex justify-center items-center w-auto sm:w-20 2xl:w-32`; + import { classNames } from '$libs/util/classNames'; + + // TODO: mobile first approach? by default all it's for `sm` + let classes = classNames('space-x-2', $$props.class); + + $: isERC20Bridge = $page.route.id === '/'; + $: isNFTBridge = $page.route.id === '/nft'; -
- +
+ {$t('nav.token')} - + {$t('nav.nft')}
diff --git a/packages/bridge-ui-v2/src/components/Header/Header.svelte b/packages/bridge-ui-v2/src/components/Header/Header.svelte index 7887db40fcc..9ffee545928 100644 --- a/packages/bridge-ui-v2/src/components/Header/Header.svelte +++ b/packages/bridge-ui-v2/src/components/Header/Header.svelte @@ -6,9 +6,12 @@ import { LogoWithText } from '$components/Logo'; import { drawerToggleId } from '$components/SideNavigation'; import { account } from '$stores/account'; + $: isBridgePage = $page.route.id === '/' || $page.route.id === '/nft'; + +
- {#if isBridgePage} - - {:else} -
- {/if} +
+ {#if isBridgePage} +
-
diff --git a/packages/bridge-ui-v2/src/components/LinkButton/LinkButton.svelte b/packages/bridge-ui-v2/src/components/LinkButton/LinkButton.svelte index a18dff88fca..75fa94bc8c8 100644 --- a/packages/bridge-ui-v2/src/components/LinkButton/LinkButton.svelte +++ b/packages/bridge-ui-v2/src/components/LinkButton/LinkButton.svelte @@ -8,11 +8,10 @@ $: activeClass = active ? 'body-bold bg-primary-interactive hover:bg-primary-interactive-hover' : 'body-regular hover:bg-secondary-interactive-hover'; + + $: classes = classNames('p-3 rounded-full flex justify-start content-center', activeClass, $$props.class); - + From bb6ef3d1b191485d3720005a1a8457735d70d733 Mon Sep 17 00:00:00 2001 From: Francisco Date: Wed, 26 Jul 2023 16:30:21 +0200 Subject: [PATCH 10/75] minor change --- packages/bridge-ui-v2/src/components/Bridge/BridgeTabs.svelte | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/bridge-ui-v2/src/components/Bridge/BridgeTabs.svelte b/packages/bridge-ui-v2/src/components/Bridge/BridgeTabs.svelte index 8ecc0023461..16707e241c1 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/BridgeTabs.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/BridgeTabs.svelte @@ -5,7 +5,6 @@ import { LinkButton } from '$components/LinkButton'; import { classNames } from '$libs/util/classNames'; - // TODO: mobile first approach? by default all it's for `sm` let classes = classNames('space-x-2', $$props.class); $: isERC20Bridge = $page.route.id === '/'; From 613c55cae2914f7337a907843614fda81d7172c8 Mon Sep 17 00:00:00 2001 From: Korbinian Kasberger Date: Wed, 26 Jul 2023 19:38:47 +0200 Subject: [PATCH 11/75] chore(bridge-ui-v2): types, additional vault configs --- .../bridge-ui-v2/src/libs/bridge/types.ts | 18 +++++ .../bridge-ui-v2/src/libs/chain/chains.ts | 14 ++++ .../src/libs/relayer/RelayerAPIService.ts | 80 ++++++++++--------- .../src/libs/relayer/relayerApi.ts | 4 +- packages/bridge-ui-v2/src/routes/+page.svelte | 1 - packages/bridge-ui-v2/src/styles/base.css | 1 + 6 files changed, 79 insertions(+), 39 deletions(-) diff --git a/packages/bridge-ui-v2/src/libs/bridge/types.ts b/packages/bridge-ui-v2/src/libs/bridge/types.ts index a034b59255f..fb45051a8a7 100644 --- a/packages/bridge-ui-v2/src/libs/bridge/types.ts +++ b/packages/bridge-ui-v2/src/libs/bridge/types.ts @@ -42,6 +42,24 @@ export type Message = { memo: string; }; +// Todo: adjust relayer to return same as bridge +// Identical to Message, but relayer uses capitalization +export type RelayerMessage = { + Id: bigint; + Sender: Address; + SrcChainId: bigint; + DestChainId: bigint; + Owner: Address; + To: Address; + RefundAddress: Address; + DepositValue: bigint; + CallValue: bigint; + ProcessingFee: bigint; + GasLimit: bigint; + Data: Hex; + Memo: string; +}; + export type BridgeTransaction = { hash: Hash; owner: Address; diff --git a/packages/bridge-ui-v2/src/libs/chain/chains.ts b/packages/bridge-ui-v2/src/libs/chain/chains.ts index 88288dd1b74..1f4e11bb874 100644 --- a/packages/bridge-ui-v2/src/libs/chain/chains.ts +++ b/packages/bridge-ui-v2/src/libs/chain/chains.ts @@ -6,6 +6,8 @@ import { PUBLIC_L1_CHAIN_ID, PUBLIC_L1_CHAIN_NAME, PUBLIC_L1_CROSS_CHAIN_SYNC_ADDRESS, + PUBLIC_L1_ERC721_VAULT_ADDRESS, + PUBLIC_L1_ERC1155_VAULT_ADDRESS, PUBLIC_L1_EXPLORER_URL, PUBLIC_L1_RPC_URL, PUBLIC_L1_SIGNAL_SERVICE_ADDRESS, @@ -15,6 +17,8 @@ import { PUBLIC_L2_CHAIN_ID, PUBLIC_L2_CHAIN_NAME, PUBLIC_L2_CROSS_CHAIN_SYNC_ADDRESS, + PUBLIC_L2_ERC721_VAULT_ADDRESS, + PUBLIC_L2_ERC1155_VAULT_ADDRESS, PUBLIC_L2_EXPLORER_URL, PUBLIC_L2_RPC_URL, PUBLIC_L2_SIGNAL_SERVICE_ADDRESS, @@ -23,6 +27,8 @@ import { PUBLIC_L3_CHAIN_ID, PUBLIC_L3_CHAIN_NAME, PUBLIC_L3_CROSS_CHAIN_SYNC_ADDRESS, + PUBLIC_L3_ERC721_VAULT_ADDRESS, + PUBLIC_L3_ERC1155_VAULT_ADDRESS, PUBLIC_L3_EXPLORER_URL, PUBLIC_L3_RPC_URL, PUBLIC_L3_SIGNAL_SERVICE_ADDRESS, @@ -107,6 +113,8 @@ export const chainContractsMap: Record< { bridgeAddress: Address; tokenVaultAddress: Address; + erc721VaultAddress: Address; + erc1155VaultAddress: Address; crossChainSyncAddress: Address; signalServiceAddress: Address; } @@ -114,18 +122,24 @@ export const chainContractsMap: Record< [PUBLIC_L1_CHAIN_ID]: { bridgeAddress: PUBLIC_L1_BRIDGE_ADDRESS as Address, tokenVaultAddress: PUBLIC_L1_TOKEN_VAULT_ADDRESS as Address, + erc721VaultAddress: PUBLIC_L1_ERC721_VAULT_ADDRESS as Address, + erc1155VaultAddress: PUBLIC_L1_ERC1155_VAULT_ADDRESS as Address, crossChainSyncAddress: PUBLIC_L1_CROSS_CHAIN_SYNC_ADDRESS as Address, signalServiceAddress: PUBLIC_L1_SIGNAL_SERVICE_ADDRESS as Address, }, [PUBLIC_L2_CHAIN_ID]: { bridgeAddress: PUBLIC_L2_BRIDGE_ADDRESS as Address, tokenVaultAddress: PUBLIC_L2_TOKEN_VAULT_ADDRESS as Address, + erc721VaultAddress: PUBLIC_L2_ERC721_VAULT_ADDRESS as Address, + erc1155VaultAddress: PUBLIC_L2_ERC1155_VAULT_ADDRESS as Address, crossChainSyncAddress: PUBLIC_L2_CROSS_CHAIN_SYNC_ADDRESS as Address, signalServiceAddress: PUBLIC_L2_SIGNAL_SERVICE_ADDRESS as Address, }, [PUBLIC_L3_CHAIN_ID]: { bridgeAddress: PUBLIC_L3_BRIDGE_ADDRESS as Address, tokenVaultAddress: PUBLIC_L3_TOKEN_VAULT_ADDRESS as Address, + erc721VaultAddress: PUBLIC_L3_ERC721_VAULT_ADDRESS as Address, + erc1155VaultAddress: PUBLIC_L3_ERC1155_VAULT_ADDRESS as Address, crossChainSyncAddress: PUBLIC_L3_CROSS_CHAIN_SYNC_ADDRESS as Address, signalServiceAddress: PUBLIC_L3_SIGNAL_SERVICE_ADDRESS as Address, }, diff --git a/packages/bridge-ui-v2/src/libs/relayer/RelayerAPIService.ts b/packages/bridge-ui-v2/src/libs/relayer/RelayerAPIService.ts index 70412947d38..9d8cb96889a 100644 --- a/packages/bridge-ui-v2/src/libs/relayer/RelayerAPIService.ts +++ b/packages/bridge-ui-v2/src/libs/relayer/RelayerAPIService.ts @@ -5,9 +5,11 @@ import type { Abi } from 'abitype'; import axios from 'axios'; import { bridgeABI } from '$abi'; -import { type Message, MessageStatus } from '$libs/bridge'; +import type { Message } from '$libs/bridge'; +import { TokenType } from '$libs/token'; import { getLogger } from '$libs/util/logger'; +// import mockedData from '../../mocktx.json' import { chainContractsMap, type ChainID, isSupportedChain } from '../chain/chains'; import type { APIRequestParams, @@ -25,7 +27,7 @@ import type { const log = getLogger('RelayerAPIService'); export class RelayerAPIService implements RelayerAPI { - private static _filterDuplicateAndWrongBridge(items: APIResponseTransaction[]) { + private static _filterDuplicateAndWrongBridge(items: APIResponseTransaction[]): APIResponseTransaction[] { const uniqueHashes = new Set(); const filteredItems: APIResponseTransaction[] = []; for (const item of items) { @@ -84,8 +86,11 @@ export class RelayerAPIService implements RelayerAPI { const response = await axios.get(requestURL, { params }); + // response.data.items.push(...mockedData); if (response.status >= 400) throw response; + console.log(response); + log('Events form API', response.data); return response.data; @@ -133,7 +138,7 @@ export class RelayerAPIService implements RelayerAPI { // TODO: maybe we should also filter out unsupported chains here? const items = RelayerAPIService._filterDuplicateAndWrongBridge(apiTxs.items); - const txs = items.map((tx: APIResponseTransaction) => { + const txs: BridgeTransaction[] = items.map((tx: APIResponseTransaction) => { let data: string = tx.data.Message.Data; if (data === '') { data = '0x'; @@ -145,16 +150,13 @@ export class RelayerAPIService implements RelayerAPI { const transformedTx = { status: tx.status, amount: BigInt(tx.amount), - symbol: tx.canonicalTokenSymbol, + symbol: tx.canonicalTokenSymbol || 'ETH', + decimals: tx.canonicalTokenDecimals, hash: tx.data.Raw.transactionHash, from: tx.messageOwner, srcChainId: tx.data.Message.SrcChainId, destChainId: tx.data.Message.DestChainId, msgHash: tx.msgHash, - canonicalTokenAddress: tx.canonicalTokenAddress, - canonicalTokenSymbol: tx.canonicalTokenSymbol, - canonicalTokenName: tx.canonicalTokenName, - canonicalTokenDecimals: tx.canonicalTokenDecimals, message: { id: tx.data.Message.Id, to: tx.data.Message.To, @@ -169,29 +171,15 @@ export class RelayerAPIService implements RelayerAPI { depositValue: BigInt(tx.data.Message.DepositValue), processingFee: BigInt(tx.data.Message.ProcessingFee), refundAddress: tx.data.Message.RefundAddress, - } as Message, + }, }; return transformedTx; }); - const txsPromises = txs.map(async (tx) => { - if (!tx) return; - if (tx.from.toLowerCase() !== address.toLowerCase()) return; - - const bridgeTx: BridgeTransaction = { - message: tx.message, - msgHash: tx.msgHash, - status: tx.status, - amount: tx.amount, - symbol: tx.symbol, - decimals: tx.canonicalTokenDecimals, - srcChainId: tx.srcChainId, - destChainId: tx.destChainId, - hash: tx.hash, - from: tx.from, - }; - + const txsPromises = txs.map(async (bridgeTx) => { + if (!bridgeTx) return; + if (bridgeTx.from.toLowerCase() !== address.toLowerCase()) return; const { destChainId, srcChainId, hash, msgHash } = bridgeTx; // Returns the transaction receipt for hash or null @@ -217,16 +205,22 @@ export class RelayerAPIService implements RelayerAPI { // Update the status bridgeTx.status = status; - if ( - tx.canonicalTokenAddress && - tx.canonicalTokenAddress !== ('0x0000000000000000000000000000000000000000' as Address) - ) { - // if it has a canonical address it is a token transfer + const type = checkType(bridgeTx); - bridgeTx.amount = tx.amount; - bridgeTx.symbol = tx.symbol; - bridgeTx.decimals = tx.canonicalTokenDecimals; - } + // bridgeTx.message?.data. + + // bridgeTx.symbol = type === TokenType.ETH ? 'ETH' : bridgeTx.symbol; + + // if ( + // bridgeTx.symbol && + // tx.canonicalTokenAddress !== ('0x0000000000000000000000000000000000000000' as Address) + // ) { + // // if it has a canonical address it is a token transfer + + // bridgeTx.amount = tx.amount; + // bridgeTx.symbol = tx.symbol; + // bridgeTx.decimals = tx.canonicalTokenDecimals; + // } return bridgeTx; }); @@ -242,7 +236,7 @@ export class RelayerAPIService implements RelayerAPI { bridgeTxs.reverse(); // Place new transactions at the top of the list - bridgeTxs.sort((tx) => (tx.status === MessageStatus.New ? -1 : 1)); + // bridgeTxs.sort((tx) => (tx.status === MessageStatus.New ? -1 : 1)); return { txs: bridgeTxs, paginationInfo }; } @@ -271,3 +265,17 @@ export class RelayerAPIService implements RelayerAPI { return blockInfoMap; } } + +function checkType(bridgeTx: BridgeTransaction): TokenType { + const to = bridgeTx.message?.to; + switch (to) { + case chainContractsMap[Number(bridgeTx.srcChainId)].tokenVaultAddress: + return TokenType.ERC20; + case chainContractsMap[Number(bridgeTx.srcChainId)].erc721VaultAddress: + return TokenType.ERC721; + case chainContractsMap[Number(bridgeTx.srcChainId)].erc1155VaultAddress: + return TokenType.ERC1155; + default: + return TokenType.ETH; + } +} diff --git a/packages/bridge-ui-v2/src/libs/relayer/relayerApi.ts b/packages/bridge-ui-v2/src/libs/relayer/relayerApi.ts index 982d3c5014f..720ad26db16 100644 --- a/packages/bridge-ui-v2/src/libs/relayer/relayerApi.ts +++ b/packages/bridge-ui-v2/src/libs/relayer/relayerApi.ts @@ -1,7 +1,7 @@ import type { Address } from '@wagmi/core'; import type { TransactionReceipt } from 'viem'; -import type { BridgeMessage, Message, MessageStatus } from '$libs/bridge'; +import type { Message, MessageStatus, RelayerMessage } from '$libs/bridge'; import type { ChainID } from '$libs/chain'; export type GetAllByAddressResponse = { @@ -34,7 +34,7 @@ export interface RelayerAPI { } export type TransactionData = { - Message: BridgeMessage; + Message: RelayerMessage; Raw: { address: Address; transactionHash: string; diff --git a/packages/bridge-ui-v2/src/routes/+page.svelte b/packages/bridge-ui-v2/src/routes/+page.svelte index cfc543f5696..e57f4ce38b7 100644 --- a/packages/bridge-ui-v2/src/routes/+page.svelte +++ b/packages/bridge-ui-v2/src/routes/+page.svelte @@ -1,7 +1,6 @@ diff --git a/packages/bridge-ui-v2/src/styles/base.css b/packages/bridge-ui-v2/src/styles/base.css index 2936569b000..dba6f8953eb 100644 --- a/packages/bridge-ui-v2/src/styles/base.css +++ b/packages/bridge-ui-v2/src/styles/base.css @@ -20,5 +20,6 @@ background-image: url(/bg/grid.svg), url(/bg/spotlights.svg), linear-gradient(270deg, #1f1f1f 0%, #000000 100%); background-size: 840px, cover, cover; background-blend-mode: color-dodge, lighten, multiply; + background-attachment: fixed; } } From 2336a1983172315477d2dee2977849d45f5a44e3 Mon Sep 17 00:00:00 2001 From: Francisco Ramos Date: Wed, 26 Jul 2023 22:34:54 +0200 Subject: [PATCH 12/75] feat(bridge-ui-v2): BridgeTx storage (#14284) --- packages/bridge-ui-v2/src/app.config.ts | 5 + .../src/components/Bridge/Bridge.svelte | 27 ++- .../src/components/Bridge/BridgeTabs.svelte | 15 +- .../src/components/Header/Header.svelte | 17 +- .../components/LinkButton/LinkButton.svelte | 7 +- .../bridge-ui-v2/src/libs/bridge/types.ts | 4 +- .../src/libs/storage/BridgeTxService.ts | 175 ++++++++++++++++++ .../src/libs/storage/CustomTokenService.ts | 9 + .../bridge-ui-v2/src/libs/storage/services.ts | 6 + 9 files changed, 245 insertions(+), 20 deletions(-) create mode 100644 packages/bridge-ui-v2/src/libs/storage/BridgeTxService.ts create mode 100644 packages/bridge-ui-v2/src/libs/storage/CustomTokenService.ts create mode 100644 packages/bridge-ui-v2/src/libs/storage/services.ts diff --git a/packages/bridge-ui-v2/src/app.config.ts b/packages/bridge-ui-v2/src/app.config.ts index 64e9bd3fb03..d3032b74a9f 100644 --- a/packages/bridge-ui-v2/src/app.config.ts +++ b/packages/bridge-ui-v2/src/app.config.ts @@ -17,3 +17,8 @@ export const bridge = { export const pendingTransaction = { waitTimeout: 300000, }; + +export const storageService = { + bridgeTxPrefix: 'bridge-tx', + customTokenPrefix: 'custom-token', +}; diff --git a/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte b/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte index cc7cd6aac49..3025af946d3 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte @@ -10,10 +10,17 @@ import { OnNetwork } from '$components/OnNetwork'; import { TokenDropdown } from '$components/TokenDropdown'; import { PUBLIC_L1_EXPLORER_URL } from '$env/static/public'; - import { type BridgeArgs, bridges, type ERC20BridgeArgs, type ETHBridgeArgs } from '$libs/bridge'; + import { + type BridgeArgs, + bridges, + type BridgeTransaction, + type ERC20BridgeArgs, + type ETHBridgeArgs, + } from '$libs/bridge'; import type { ERC20Bridge } from '$libs/bridge/ERC20Bridge'; import { chainContractsMap, chains } from '$libs/chain'; import { ApproveError, NoAllowanceRequiredError, SendERC20Error, SendMessageError } from '$libs/error'; + import { bridgeTxService } from '$libs/storage/services'; import { ETHToken, getAddress, isDeployedCrossChain, tokens, TokenType } from '$libs/token'; import { getConnectedWallet } from '$libs/util/getConnectedWallet'; import { type Account, account } from '$stores/account'; @@ -199,6 +206,24 @@ }), ); + // Let's add it to the user's localStorage + const bridgeTx = { + hash: txHash, + from: $account.address, + amount: $enteredAmount, + symbol: $selectedToken.symbol, + decimals: $selectedToken.decimals, + srcChainId: BigInt($network.id), + destChainId: BigInt($destNetwork.id), + + // TODO: do we need something else? we can have + // access to the Transaction object: + // TransactionLegacy, TransactionEIP2930 and + // TransactionEIP1559 + } as BridgeTransaction; + + bridgeTxService.addTxByAddress($account.address, bridgeTx); + // Reset the form amountComponent.clearAmount(); recipientComponent.clearRecipient(); diff --git a/packages/bridge-ui-v2/src/components/Bridge/BridgeTabs.svelte b/packages/bridge-ui-v2/src/components/Bridge/BridgeTabs.svelte index 9541eb57ba7..16707e241c1 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/BridgeTabs.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/BridgeTabs.svelte @@ -3,17 +3,20 @@ import { page } from '$app/stores'; import { LinkButton } from '$components/LinkButton'; - $: isERC20Bridge = $page.route.id === '/' ? true : false; - $: isNFTBridge = $page.route.id === '/nft' ? true : false; - $: classes = `flex-basis-0 mr-2 p-3 rounded-full flex justify-center items-center w-auto sm:w-20 2xl:w-32`; + import { classNames } from '$libs/util/classNames'; + + let classes = classNames('space-x-2', $$props.class); + + $: isERC20Bridge = $page.route.id === '/'; + $: isNFTBridge = $page.route.id === '/nft'; -
- +
+ {$t('nav.token')} - + {$t('nav.nft')}
diff --git a/packages/bridge-ui-v2/src/components/Header/Header.svelte b/packages/bridge-ui-v2/src/components/Header/Header.svelte index 7887db40fcc..9ffee545928 100644 --- a/packages/bridge-ui-v2/src/components/Header/Header.svelte +++ b/packages/bridge-ui-v2/src/components/Header/Header.svelte @@ -6,9 +6,12 @@ import { LogoWithText } from '$components/Logo'; import { drawerToggleId } from '$components/SideNavigation'; import { account } from '$stores/account'; + $: isBridgePage = $page.route.id === '/' || $page.route.id === '/nft'; + +
- {#if isBridgePage} - - {:else} -
- {/if} +
+ {#if isBridgePage} +
-
diff --git a/packages/bridge-ui-v2/src/components/LinkButton/LinkButton.svelte b/packages/bridge-ui-v2/src/components/LinkButton/LinkButton.svelte index a18dff88fca..75fa94bc8c8 100644 --- a/packages/bridge-ui-v2/src/components/LinkButton/LinkButton.svelte +++ b/packages/bridge-ui-v2/src/components/LinkButton/LinkButton.svelte @@ -8,11 +8,10 @@ $: activeClass = active ? 'body-bold bg-primary-interactive hover:bg-primary-interactive-hover' : 'body-regular hover:bg-secondary-interactive-hover'; + + $: classes = classNames('p-3 rounded-full flex justify-start content-center', activeClass, $$props.class); - + diff --git a/packages/bridge-ui-v2/src/libs/bridge/types.ts b/packages/bridge-ui-v2/src/libs/bridge/types.ts index fb45051a8a7..900a59cad96 100644 --- a/packages/bridge-ui-v2/src/libs/bridge/types.ts +++ b/packages/bridge-ui-v2/src/libs/bridge/types.ts @@ -62,13 +62,13 @@ export type RelayerMessage = { export type BridgeTransaction = { hash: Hash; - owner: Address; - status: MessageStatus; + from: Address; amount: bigint; symbol: string; decimals: number; srcChainId: ChainID; destChainId: ChainID; + status?: MessageStatus; receipt?: TransactionReceipt; msgHash?: Hash; message?: Message; diff --git a/packages/bridge-ui-v2/src/libs/storage/BridgeTxService.ts b/packages/bridge-ui-v2/src/libs/storage/BridgeTxService.ts new file mode 100644 index 00000000000..69f6052eac8 --- /dev/null +++ b/packages/bridge-ui-v2/src/libs/storage/BridgeTxService.ts @@ -0,0 +1,175 @@ +import { getContract, waitForTransaction } from '@wagmi/core'; +import type { Address, Hash, TransactionReceipt } from 'viem'; + +import { bridgeABI } from '$abi'; +import { pendingTransaction, storageService } from '$config'; +import { type BridgeTransaction, MessageStatus } from '$libs/bridge'; +import { chainContractsMap, isSupportedChain } from '$libs/chain'; +import { jsonParseWithDefault } from '$libs/util/jsonParseWithDefault'; +import { getLogger } from '$libs/util/logger'; +import { publicClient } from '$libs/wagmi'; + +const log = getLogger('storage:BridgeTxService'); + +export class BridgeTxService { + private readonly storage: Storage; + + private static async _getTransactionReceipt(chainId: number, hash: Hash) { + const client = publicClient({ chainId }); + return client.getTransactionReceipt({ hash }); + } + + private static async _getBridgeMessageSent(userAddress: Address, chainId: number, blockNumber: number) { + // Gets the event MessageSent from the bridge contract + // in the block where the transaction was mined, and find + // our event MessageSent whose owner is the address passed in + + const bridgeAddress = chainContractsMap[chainId].bridgeAddress; + const client = publicClient({ chainId }); + + const filter = await client.createContractEventFilter({ + abi: bridgeABI, + address: bridgeAddress, + eventName: 'MessageSent', + fromBlock: BigInt(blockNumber), + toBlock: BigInt(blockNumber), + }); + + const messageSentEvents = await client.getFilterLogs({ filter }); + + // Filter out those events that are not from the current address + return messageSentEvents.find(({ args }) => args.message?.owner.toLowerCase() === userAddress.toLowerCase()); + } + + private static _getBridgeMessageStatus(msgHash: Hash, chainId: number) { + const bridgeAddress = chainContractsMap[chainId].bridgeAddress; + + const bridgeContract = getContract({ + chainId, + abi: bridgeABI, + address: bridgeAddress, + }); + + return bridgeContract.read.getMessageStatus([msgHash]) as Promise; + } + + constructor(storage: Storage) { + this.storage = storage; + } + + private _getTxFromStorage(address: Address) { + const key = `${storageService.bridgeTxPrefix}:${address}`; + const txs = jsonParseWithDefault(this.storage.getItem(key), []) as BridgeTransaction[]; + return txs; + } + + private async _enhanceTx(tx: BridgeTransaction, address: Address, waitForTx = false) { + // Filters out the transactions that are not from the current address + if (tx.from.toLowerCase() !== address.toLowerCase()) return; + + const bridgeTx: BridgeTransaction = { ...tx }; // prevent mutation + + const { destChainId, srcChainId, hash } = bridgeTx; + + // Ignore transactions from chains not supported by the bridge + if (isSupportedChain(srcChainId)) return; + + let receipt: TransactionReceipt | null = null; + + if (waitForTx) { + // We might want to wait for the transaction to be mined + receipt = await waitForTransaction({ + hash, + chainId: Number(srcChainId), + timeout: pendingTransaction.waitTimeout, + }); + } else { + // Returns the transaction receipt for hash or null + // if the transaction has not been mined. + receipt = await BridgeTxService._getTransactionReceipt(Number(srcChainId), hash); + } + + if (!receipt) { + return bridgeTx; + } + + // We have receipt + bridgeTx.receipt = receipt; + + const messageSentEvent = await BridgeTxService._getBridgeMessageSent( + address, + Number(srcChainId), + Number(receipt.blockNumber), + ); + + if (!messageSentEvent?.args?.msgHash || !messageSentEvent?.args?.message) { + // No message yet, so we can't get more info from this transaction + return bridgeTx; + } + + const { msgHash, message } = messageSentEvent.args; + + // Let's add this new info to the transaction in case something else + // fails, such as the filter for ERC20Sent events + bridgeTx.msgHash = msgHash; + bridgeTx.message = message; + + const status = await BridgeTxService._getBridgeMessageStatus(msgHash, Number(destChainId)); + + bridgeTx.status = status; + } + + async getAllTxByAddress(address: Address) { + const txs = this._getTxFromStorage(address); + + log('Bridge transactions from storage', txs); + + const enhancedTxPromises = txs.map(async (tx) => this._enhanceTx(tx, address)); + + const enhancedTxs = (await Promise.all(enhancedTxPromises)) + // Removes undefined values + .filter((tx) => Boolean(tx)) as BridgeTransaction[]; + + // Place new transactions at the top of the list + enhancedTxs.sort((tx) => (tx.status === MessageStatus.NEW ? -1 : 1)); + + log('Enhanced transactions', [...enhancedTxs]); + + return enhancedTxs; + } + + async getTxByHash(hash: Hash, address: Address) { + const txs = this._getTxFromStorage(address); + + const tx = txs.find((tx) => tx.hash === hash) as BridgeTransaction; + + log('Transaction from storage', { ...tx }); + + const enhancedTx = await this._enhanceTx(tx, address, true); + + log('Enhanced transaction', enhancedTx); + + return enhancedTx; + } + + addTxByAddress(address: Address, tx: BridgeTransaction) { + const txs = this._getTxFromStorage(address); + + txs.unshift(tx); + + log('Adding transaction to storage', tx); + + const key = `${storageService.bridgeTxPrefix}:${address}`; + this.storage.setItem( + key, + // We need to serialize the BigInts as strings + JSON.stringify(txs, (_, value) => (typeof value === 'bigint' ? value.toString() : value)), + ); + } + + updateByAddress(address: Address, txs: BridgeTransaction[]) { + log('Updating storage with transactions', txs); + const key = `${storageService.bridgeTxPrefix}:${address}`; + this.storage.setItem(key, JSON.stringify(txs)); + } +} diff --git a/packages/bridge-ui-v2/src/libs/storage/CustomTokenService.ts b/packages/bridge-ui-v2/src/libs/storage/CustomTokenService.ts new file mode 100644 index 00000000000..0be6a88168a --- /dev/null +++ b/packages/bridge-ui-v2/src/libs/storage/CustomTokenService.ts @@ -0,0 +1,9 @@ +export class CustomTokenService { + private readonly storage: Storage; + + constructor(storage: Storage) { + this.storage = storage; + } + + // TODO +} diff --git a/packages/bridge-ui-v2/src/libs/storage/services.ts b/packages/bridge-ui-v2/src/libs/storage/services.ts new file mode 100644 index 00000000000..15ea11c1a4c --- /dev/null +++ b/packages/bridge-ui-v2/src/libs/storage/services.ts @@ -0,0 +1,6 @@ +import { BridgeTxService } from './BridgeTxService'; +import { CustomTokenService } from './CustomTokenService'; + +export const bridgeTxService = new BridgeTxService(globalThis.localStorage); + +export const customTokenService = new CustomTokenService(globalThis.localStorage); From 116b4e304a4f7eec6864cafa483b5ba075eceae6 Mon Sep 17 00:00:00 2001 From: Korbinian Kasberger Date: Wed, 26 Jul 2023 23:22:27 +0200 Subject: [PATCH 13/75] feat(bridge-ui-v2): wip on activities page, checking for connection status --- .../components/Activities/Activities.svelte | 191 ++++++++++++------ .../src/components/Header/Header.svelte | 2 + .../src/components/Icon/Icon.svelte | 13 ++ .../src/components/Paginator/Paginator.svelte | 61 ++++++ .../src/components/Paginator/index.ts | 1 + packages/bridge-ui-v2/src/i18n/en.json | 7 +- .../src/libs/relayer/RelayerAPIService.ts | 10 +- .../bridge-ui-v2/src/stores/relayerApi.ts | 7 + .../bridge-ui-v2/src/styles/utilities.css | 2 +- 9 files changed, 221 insertions(+), 73 deletions(-) create mode 100644 packages/bridge-ui-v2/src/components/Paginator/Paginator.svelte create mode 100644 packages/bridge-ui-v2/src/components/Paginator/index.ts create mode 100644 packages/bridge-ui-v2/src/stores/relayerApi.ts diff --git a/packages/bridge-ui-v2/src/components/Activities/Activities.svelte b/packages/bridge-ui-v2/src/components/Activities/Activities.svelte index 09f2348c4dc..e2f53d67f46 100644 --- a/packages/bridge-ui-v2/src/components/Activities/Activities.svelte +++ b/packages/bridge-ui-v2/src/components/Activities/Activities.svelte @@ -1,32 +1,53 @@ - -
-
-
From
-
To
-
Amount
-
Status
-
Explorer
-
-
- {#each tx as item (item.hash)} -
-
- {#if Number(item.srcChainId) === sepolia.id} -
- - - - Sepolia +
+ +
+
+
+
{$t('activities.header.from')}
+
{$t('activities.header.to')}
+
{$t('activities.header.amount')}
+
{$t('activities.header.status')}
+
{$t('activities.header.explorer')}
+
+
+
+ {#if transactionsToShow.length && !loadingTxs} + {#each transactionsToShow as item (item.hash)} +
+
+ {#if Number(item.srcChainId) === sepolia.id} +
+ + + + Sepolia +
+ {:else if Number(item.srcChainId) === taikoChain.id} +
+ + + + Taiko +
+ {:else} + {item.srcChainId} + {/if}
- {:else if Number(item.srcChainId) === taikoChain.id} -
- - - - Taiko +
+ {#if Number(item.destChainId) === sepolia.id} +
+ + + + Sepolia +
+ {:else if Number(item.destChainId) === taikoChain.id} +
+ + + + Taiko +
+ {:else} + item.destChainId + {/if}
- {:else} - {item.srcChainId} - {/if} -
-
- {#if Number(item.destChainId) === sepolia.id} -
- - - - Sepolia +
+ {formatEther(item.amount ? item.amount : BigInt(0))} + {item.symbol}
- {:else if Number(item.destChainId) === taikoChain.id} -
- - - - Taiko +
+ {mapStatusToText(item.status)}
- {:else} - item.destChainId - {/if} -
-
- {formatEther(item.amount ? item.amount : BigInt(0))} - {item.symbol} -
-
- {mapStatusToText(item.status)} -
-
- View on Explorer -
-
- {/each} +
+ {$t('activities.link.explorer')} +
+
+ {/each} + {/if} +
+
+ {#if loadingTxs && $account?.isConnected} + {$t('common.loading')}... + {:else if !transactionsToShow.length && $account?.isConnected} + {$t('activities.no_transactions')} + {:else if !$account?.isConnected} + + {/if} +
+ + +
+ (currentPage = detail)} />
- +
diff --git a/packages/bridge-ui-v2/src/components/Header/Header.svelte b/packages/bridge-ui-v2/src/components/Header/Header.svelte index 9ffee545928..6a4ea35f857 100644 --- a/packages/bridge-ui-v2/src/components/Header/Header.svelte +++ b/packages/bridge-ui-v2/src/components/Header/Header.svelte @@ -32,6 +32,8 @@
{#if isBridgePage}
{#if $insufficientBalance} - + {/if} {#if $insufficientAllowance} - + {/if}
diff --git a/packages/bridge-ui-v2/src/i18n/en.json b/packages/bridge-ui-v2/src/i18n/en.json index e3e5abbba16..5daaedaceac 100644 --- a/packages/bridge-ui-v2/src/i18n/en.json +++ b/packages/bridge-ui-v2/src/i18n/en.json @@ -31,7 +31,9 @@ "approve_error": "Failed to approve token", "rejected": "Request to bridge rejected.", "no_allowance_required": "You need to add allowance to bridge this token.", - "unknown_error": "An error occured" + "unknown_error": "An error occured", + "insufficient_balance": "Insufficient balance", + "insufficient_allowance": "Insufficient allowance" }, "button": { "approve": "Approve", @@ -121,18 +123,6 @@ "token_dropdown": { "label": "Select token" }, - "amount_input": { - "label": "Amount", - "balance": "Balance", - "button": { - "max": "Max", - "failed_max": "Coult not estimate max amount to bridge." - } - }, - "error": { - "insufficient_balance": "Insufficient balance", - "insufficient_allowance": "Insufficient allowance" - }, "inputs": { "nft": { "token_id": { @@ -143,7 +133,10 @@ "amount_input": { "label": "Amount", "balance": "Balance", - "button.max": "Max" + "button": { + "max": "Max", + "failed_max": "Coult not estimate max amount to bridge." + } }, "address_input": { "label": "Address", From bf929af9be80828aa93dc501d5473449a47b1157 Mon Sep 17 00:00:00 2001 From: Korbinian Kasberger Date: Fri, 28 Jul 2023 11:40:31 +0200 Subject: [PATCH 17/75] fix(bridge-ui-v2): added return to _enhance in storage service --- .../bridge-ui-v2/src/libs/storage/BridgeTxService.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/bridge-ui-v2/src/libs/storage/BridgeTxService.ts b/packages/bridge-ui-v2/src/libs/storage/BridgeTxService.ts index 69f6052eac8..45b3f546647 100644 --- a/packages/bridge-ui-v2/src/libs/storage/BridgeTxService.ts +++ b/packages/bridge-ui-v2/src/libs/storage/BridgeTxService.ts @@ -117,6 +117,7 @@ export class BridgeTxService { const status = await BridgeTxService._getBridgeMessageStatus(msgHash, Number(destChainId)); bridgeTx.status = status; + return bridgeTx; } async getAllTxByAddress(address: Address) { @@ -124,11 +125,12 @@ export class BridgeTxService { log('Bridge transactions from storage', txs); - const enhancedTxPromises = txs.map(async (tx) => this._enhanceTx(tx, address)); + const enhancedTxPromises = txs.map((tx) => this._enhanceTx(tx, address)); - const enhancedTxs = (await Promise.all(enhancedTxPromises)) - // Removes undefined values - .filter((tx) => Boolean(tx)) as BridgeTransaction[]; + const resolvedTxs = await Promise.all(enhancedTxPromises); + + // Remove any undefined values from the array of resolved transactions + const enhancedTxs = resolvedTxs.filter((tx): tx is BridgeTransaction => Boolean(tx)); // Place new transactions at the top of the list enhancedTxs.sort((tx) => (tx.status === MessageStatus.NEW ? -1 : 1)); From 9be854edbcacd19225c9dc0346a72344376c49a2 Mon Sep 17 00:00:00 2001 From: Korbinian Kasberger Date: Fri, 28 Jul 2023 11:43:43 +0200 Subject: [PATCH 18/75] feat(bridge-ui-v2): optimize releayeApi filter conditions --- .../src/libs/relayer/RelayerAPIService.ts | 47 ++++++++++++------- 1 file changed, 30 insertions(+), 17 deletions(-) diff --git a/packages/bridge-ui-v2/src/libs/relayer/RelayerAPIService.ts b/packages/bridge-ui-v2/src/libs/relayer/RelayerAPIService.ts index 90589068f36..34a23b88845 100644 --- a/packages/bridge-ui-v2/src/libs/relayer/RelayerAPIService.ts +++ b/packages/bridge-ui-v2/src/libs/relayer/RelayerAPIService.ts @@ -34,25 +34,38 @@ export class RelayerAPIService implements RelayerAPI { const uniqueHashes = new Set(); const filteredItems: APIResponseTransaction[] = []; for (const item of items) { - const { bridgeAddress } = chainContractsMap[item.chainID]; // todo: also handle unsupported chain + const { Message, Raw } = item.data || {}; - // Todo: fix - // eslint-disable-next-line no-unsafe-optional-chaining - const { DestChainId, SrcChainId } = item.data?.Message; - // eslint-disable-next-line no-unsafe-optional-chaining - const { transactionHash, address } = item.data?.Raw; - const hasDuplicateHash = uniqueHashes.has(transactionHash); - const wrongBridgeAddress = address?.toLowerCase() !== bridgeAddress?.toLowerCase(); - - // Filter unsupported Chains - const isSupported: boolean = isSupportedChain(BigInt(DestChainId)) && isSupportedChain(BigInt(SrcChainId)); - - // Do not include tx if for whatever reason the properties transactionHash - // and address are not present in the response - const shouldIncludeTx = transactionHash && address && !hasDuplicateHash && !wrongBridgeAddress && isSupported; + // If no data is present, we skip this item + if (!Message || !Raw) { + continue; + } - if (!hasDuplicateHash) uniqueHashes.add(transactionHash); - if (shouldIncludeTx) filteredItems.push(item); + const { bridgeAddress } = chainContractsMap[item.chainID]; // TODO: also handle unsupported chain + const { DestChainId, SrcChainId } = Message; + const { transactionHash, address } = Raw; + + // Check all conditions + const isTransactionHashPresent = Boolean(transactionHash); + const isAddressPresent = Boolean(address); + const isUniqueHash = !uniqueHashes.has(transactionHash); + const isCorrectBridgeAddress = address?.toLowerCase() === bridgeAddress?.toLowerCase(); + const areChainsSupported = isSupportedChain(BigInt(DestChainId)) && isSupportedChain(BigInt(SrcChainId)); + + // If the transaction hash is unique, add it to the set for future checks + if (isUniqueHash) uniqueHashes.add(transactionHash); + + // All these conditions must be true + const satisfiesAllConditions = [ + isTransactionHashPresent, + isAddressPresent, + isUniqueHash, + isCorrectBridgeAddress, + areChainsSupported, + ].every(Boolean); + + // If all conditions are satisfied, add the item to the filtered list + if (satisfiesAllConditions) filteredItems.push(item); } return filteredItems; } From 25f64c71dbe3de89ca13454a67a8dc28851e73c3 Mon Sep 17 00:00:00 2001 From: Korbinian Kasberger Date: Fri, 28 Jul 2023 12:09:38 +0200 Subject: [PATCH 19/75] feat(bridge-ui-v2): merging local-storage and relayer tx --- .../components/Activities/Activities.svelte | 47 +++++++++++++++++-- 1 file changed, 44 insertions(+), 3 deletions(-) diff --git a/packages/bridge-ui-v2/src/components/Activities/Activities.svelte b/packages/bridge-ui-v2/src/components/Activities/Activities.svelte index 3d128b8311b..72a0fbd6319 100644 --- a/packages/bridge-ui-v2/src/components/Activities/Activities.svelte +++ b/packages/bridge-ui-v2/src/components/Activities/Activities.svelte @@ -6,6 +6,7 @@ import { Button } from '$components/Button'; import { Card } from '$components/Card'; + import OnAccount from '$components/OnAccount/OnAccount.svelte'; import { Paginator } from '$components/Paginator'; import { Spinner } from '$components/Spinner'; import { PUBLIC_RELAYER_URL } from '$env/static/public'; @@ -13,11 +14,14 @@ import { web3modal } from '$libs/connect'; import { RelayerAPIService } from '$libs/relayer/RelayerAPIService'; import { bridgeTxService } from '$libs/storage/services'; - import { account } from '$stores/account'; + import { getLogger } from '$libs/util/logger'; + import { type Account,account } from '$stores/account'; import { paginationInfo as paginationStore } from '$stores/relayerApi'; import Transaction from './Transaction.svelte'; + const log = getLogger('Transactions.svelte'); + export const transactions = writable([]); const relayerApi = new RelayerAPIService(PUBLIC_RELAYER_URL); @@ -42,13 +46,43 @@ loadingTxs = false; return; } + + // Transactions from local storage + const localTxs: BridgeTransaction[] = await bridgeTxService.getAllTxByAddress($account.address); + + // Transactions from relayer const { txs, paginationInfo } = await relayerApi.getAllBridgeTransactionByAddress($account.address, { page: 0, size: 100, }); loadingTxs = false; - $transactions = txs; + + // merging local and relayer transactions + // Todo: move to a util + const mergeUniqueTransactions = ( + localTxs: BridgeTransaction[], + relayerTx: BridgeTransaction[], + ): BridgeTransaction[] => { + const keyForTransaction = (tx: BridgeTransaction): string => `${tx.status}-${tx.msgHash}-${tx.hash}`; + + const uniqueTransactionsMap = [...localTxs, ...relayerTx].reduce((map, transaction) => { + const key = keyForTransaction(transaction); + if (!map.has(key)) { + map.set(key, transaction); + } else { + log('duplicate transaction', transaction.hash); + } + return map; + }, new Map()); + + return Array.from(uniqueTransactionsMap.values()); + }; + + $transactions = mergeUniqueTransactions(localTxs, txs); + + log(`merging ${localTxs.length} local and ${txs.length} relayer transactions. New size: ${$transactions.length}`); + paginationStore.set(paginationInfo); }; @@ -68,6 +102,12 @@ function onWalletConnect() { web3modal.openModal(); } + + const onAccountChange = async (newAccount: Account, oldAccount?: Account) => { + if (newAccount?.isConnected) { + await fetchTransactions(); + } + };
@@ -83,7 +123,7 @@
- {#if transactionsToShow.length && !loadingTxs} + {#if transactionsToShow.length && !loadingTxs && $account?.isConnected} {#each transactionsToShow as item (item.hash)} {/each} @@ -107,3 +147,4 @@ (currentPage = detail)} />
+ From 3c399e6a1059c3400bae5ebf49943df2503510ed Mon Sep 17 00:00:00 2001 From: Korbinian Kasberger Date: Fri, 28 Jul 2023 14:25:28 +0200 Subject: [PATCH 20/75] chore(bridge-ui-v2): moved mergeTx function to util --- .../components/Activities/Activities.svelte | 24 +----- .../src/libs/util/mergeTransactions.ts | 22 +++++ .../test/libs/util/mergeTransactions.test.ts | 81 +++++++++++++++++++ 3 files changed, 105 insertions(+), 22 deletions(-) create mode 100644 packages/bridge-ui-v2/src/libs/util/mergeTransactions.ts create mode 100644 packages/bridge-ui-v2/src/test/libs/util/mergeTransactions.test.ts diff --git a/packages/bridge-ui-v2/src/components/Activities/Activities.svelte b/packages/bridge-ui-v2/src/components/Activities/Activities.svelte index 72a0fbd6319..5b2473ded88 100644 --- a/packages/bridge-ui-v2/src/components/Activities/Activities.svelte +++ b/packages/bridge-ui-v2/src/components/Activities/Activities.svelte @@ -15,7 +15,8 @@ import { RelayerAPIService } from '$libs/relayer/RelayerAPIService'; import { bridgeTxService } from '$libs/storage/services'; import { getLogger } from '$libs/util/logger'; - import { type Account,account } from '$stores/account'; + import { mergeUniqueTransactions } from '$libs/util/mergeTransactions'; + import { type Account, account } from '$stores/account'; import { paginationInfo as paginationStore } from '$stores/relayerApi'; import Transaction from './Transaction.svelte'; @@ -58,27 +59,6 @@ loadingTxs = false; - // merging local and relayer transactions - // Todo: move to a util - const mergeUniqueTransactions = ( - localTxs: BridgeTransaction[], - relayerTx: BridgeTransaction[], - ): BridgeTransaction[] => { - const keyForTransaction = (tx: BridgeTransaction): string => `${tx.status}-${tx.msgHash}-${tx.hash}`; - - const uniqueTransactionsMap = [...localTxs, ...relayerTx].reduce((map, transaction) => { - const key = keyForTransaction(transaction); - if (!map.has(key)) { - map.set(key, transaction); - } else { - log('duplicate transaction', transaction.hash); - } - return map; - }, new Map()); - - return Array.from(uniqueTransactionsMap.values()); - }; - $transactions = mergeUniqueTransactions(localTxs, txs); log(`merging ${localTxs.length} local and ${txs.length} relayer transactions. New size: ${$transactions.length}`); diff --git a/packages/bridge-ui-v2/src/libs/util/mergeTransactions.ts b/packages/bridge-ui-v2/src/libs/util/mergeTransactions.ts new file mode 100644 index 00000000000..aded2f59a70 --- /dev/null +++ b/packages/bridge-ui-v2/src/libs/util/mergeTransactions.ts @@ -0,0 +1,22 @@ +import { log } from 'debug'; + +import type { BridgeTransaction } from '$libs/bridge'; + +export const mergeUniqueTransactions = ( + localTxs: BridgeTransaction[], + relayerTx: BridgeTransaction[], +): BridgeTransaction[] => { + const keyForTransaction = (tx: BridgeTransaction): string => `${tx.status}-${tx.msgHash}-${tx.hash}`; + + const uniqueTransactionsMap = [...localTxs, ...relayerTx].reduce((map, transaction) => { + const key = keyForTransaction(transaction); + if (!map.has(key)) { + map.set(key, transaction); + } else { + log('duplicate transaction', transaction.hash); + } + return map; + }, new Map()); + + return Array.from(uniqueTransactionsMap.values()); +}; diff --git a/packages/bridge-ui-v2/src/test/libs/util/mergeTransactions.test.ts b/packages/bridge-ui-v2/src/test/libs/util/mergeTransactions.test.ts new file mode 100644 index 00000000000..00c85f8af08 --- /dev/null +++ b/packages/bridge-ui-v2/src/test/libs/util/mergeTransactions.test.ts @@ -0,0 +1,81 @@ +import type { Address, Hex } from 'viem'; + +import { type BridgeTransaction, MessageStatus } from '$libs/bridge'; +import { mergeUniqueTransactions } from '$libs/util/mergeTransactions'; + +describe('mergeUniqueTransactions', () => { + // Given + const localTxs: BridgeTransaction[] = [ + { + hash: 'hash1' as Hex, + from: 'address1' as Address, + amount: BigInt(1000), + symbol: 'symbol1', + decimals: 2, + srcChainId: BigInt(1), + destChainId: BigInt(2), + status: MessageStatus.DONE, + msgHash: 'msg1' as Hex, + receipt: undefined, + }, + { + hash: 'hash2' as Hex, + from: 'address2' as Address, + amount: BigInt(2000), + symbol: 'symbol2', + decimals: 2, + srcChainId: BigInt(1), + destChainId: BigInt(2), + status: MessageStatus.DONE, + msgHash: 'msg2' as Hex, + receipt: undefined, + }, + ]; + + const relayerTx: BridgeTransaction[] = [ + { + hash: 'hash3' as Hex, + from: 'address3' as Address, + amount: BigInt(3000), + symbol: 'symbol3', + decimals: 2, + srcChainId: BigInt(1), + destChainId: BigInt(2), + status: MessageStatus.DONE, + msgHash: 'msg3' as Hex, + receipt: undefined, + }, + { + hash: 'hash4' as Hex, + from: 'address4' as Address, + amount: BigInt(4000), + symbol: 'symbol4', + decimals: 2, + srcChainId: BigInt(1), + destChainId: BigInt(2), + status: MessageStatus.DONE, + msgHash: 'msg4' as Hex, + receipt: undefined, + }, + ]; + + it('should merge transactions without duplicates', () => { + // When + const result = mergeUniqueTransactions(localTxs, relayerTx); + + // Then + expect(result).toEqual([...localTxs, ...relayerTx]); + }); + + it('should merge transactions and remove duplicates', () => { + // Given + const duplicateTx = relayerTx[1]; + const relayerTxWithDupes = [...relayerTx, duplicateTx]; + + // When + const result = mergeUniqueTransactions(localTxs, relayerTxWithDupes); + + // Then + expect(result).toEqual([...localTxs, ...relayerTx]); + }); +}); From 580caf8f2f4d2e1bc4ba83084a52343f3d44de15 Mon Sep 17 00:00:00 2001 From: Francisco Ramos Date: Fri, 28 Jul 2023 15:37:39 +0200 Subject: [PATCH 21/75] feat(bridge-ui-v2): transaction logic (#14295) --- packages/bridge-ui-v2/src/app.config.ts | 4 + .../bridge/bridgeTxMessageStatusPoller.ts | 127 ++++++++++++++++++ .../src/libs/bridge/isBridgeTxProcessable.ts | 41 ++++++ .../bridge-ui-v2/src/libs/bridge/types.ts | 2 + .../bridge-ui-v2/src/libs/error/errors.ts | 4 + 5 files changed, 178 insertions(+) create mode 100644 packages/bridge-ui-v2/src/libs/bridge/bridgeTxMessageStatusPoller.ts create mode 100644 packages/bridge-ui-v2/src/libs/bridge/isBridgeTxProcessable.ts diff --git a/packages/bridge-ui-v2/src/app.config.ts b/packages/bridge-ui-v2/src/app.config.ts index 372a2d9ace6..dd72f688a30 100644 --- a/packages/bridge-ui-v2/src/app.config.ts +++ b/packages/bridge-ui-v2/src/app.config.ts @@ -24,3 +24,7 @@ export const storageService = { bridgeTxPrefix: 'bridge-tx', customTokenPrefix: 'custom-token', }; + +export const bridgeTransactionPoller = { + interval: 20_000, +}; diff --git a/packages/bridge-ui-v2/src/libs/bridge/bridgeTxMessageStatusPoller.ts b/packages/bridge-ui-v2/src/libs/bridge/bridgeTxMessageStatusPoller.ts new file mode 100644 index 00000000000..29bbd122c5e --- /dev/null +++ b/packages/bridge-ui-v2/src/libs/bridge/bridgeTxMessageStatusPoller.ts @@ -0,0 +1,127 @@ +import { getContract } from '@wagmi/core'; +import { EventEmitter } from 'events'; + +import { bridgeABI } from '$abi'; +import { bridgeTransactionPoller } from '$config'; +import { chainContractsMap } from '$libs/chain'; +import { BridgeTxPollingError } from '$libs/error'; +import { getLogger } from '$libs/util/logger'; +import { nextTick } from '$libs/util/nextTick'; + +import { isBridgeTxProcessable } from './isBridgeTxProcessable'; +import { type BridgeTransaction, MessageStatus } from './types'; + +const log = getLogger('bridge:bridgeTxMessageStatusPoller'); + +export enum PollingEvent { + STOP = 'stop', + STATUS = 'status', // emits MessageStatus + + // Whether or not the tx can be clamied/retried/released + PROCESSABLE = 'processable', +} + +const intervalEmitterMap: Record = {}; + +/** + * @example: + * try { + * const emitter = startPolling(bridgeTx); + * + * if(emitter) { + * emitter.on(PollingEvent.STOP, () => {}); + * emitter.on(PollingEvent.STATUS, (status: MessageStatus) => {}); + * emitter.on(PollingEvent.PROCESSABLE, (isProcessable: boolean) => {}); + * } + * } catch (err) { + * // something really bad with this bridgeTx + * } + */ +export function startPolling(bridgeTx: BridgeTransaction, runImmediately = true): Maybe { + const { destChainId, msgHash, status } = bridgeTx; + + // Without this we cannot poll at all. Let's throw an error + // that can be handled in the UI + if (!msgHash) { + throw new BridgeTxPollingError('missing msgHash'); + } + + // It could happen that the transaction has already been claimed + // by the time we want to start polling, in which case we're already done + if (status === MessageStatus.DONE) return; + + // We want to notify whoever is calling this function of different + // events: PollingEvent + const emitter = new EventEmitter(); + + const stopPolling = () => { + if (bridgeTx.interval) { + log('Stop polling for transaction', bridgeTx); + + // Clean up + clearInterval(bridgeTx.interval); + delete intervalEmitterMap[Number(bridgeTx.interval)] + bridgeTx.interval = null; + + emitter.emit(PollingEvent.STOP); + } + }; + + const pollingFn = async () => { + const isProcessable = await isBridgeTxProcessable(bridgeTx); + + emitter.emit(PollingEvent.PROCESSABLE, isProcessable); + + const destBridgeAddress = chainContractsMap[Number(destChainId)].bridgeAddress; + + const destBridgeContract = getContract({ + address: destBridgeAddress, + abi: bridgeABI, + chainId: Number(destChainId), + }); + + try { + // We want to poll for status changes + const messageStatus: MessageStatus = await destBridgeContract.read.getMessageStatus([msgHash]); + + bridgeTx.status = messageStatus; + + emitter.emit('status', messageStatus); + + if (messageStatus === MessageStatus.DONE) { + log('Poller has picked up the change of status to DONE'); + stopPolling(); + } + } catch (err) { + console.error(err); + + stopPolling(); + + // 😱 UI should handle this error + throw new BridgeTxPollingError('something bad happened while polling for status', { cause: err }); + } + }; + + if (!bridgeTx.interval) { + log('Starting polling for transaction', bridgeTx); + + bridgeTx.interval = setInterval(pollingFn, bridgeTransactionPoller.interval); + + intervalEmitterMap[Number(bridgeTx.interval)] = emitter; + + // setImmediate isn't standard + if (runImmediately) { + // We run the polling function in the next tick so we can + // attach listeners before the polling function is called + nextTick(pollingFn); + } + + return emitter; + } + + log('Already polling for transaction', bridgeTx); + + // We are already polling for this transaction. + // Return the emitter associated to it + return intervalEmitterMap[Number(bridgeTx.interval)]; +} diff --git a/packages/bridge-ui-v2/src/libs/bridge/isBridgeTxProcessable.ts b/packages/bridge-ui-v2/src/libs/bridge/isBridgeTxProcessable.ts new file mode 100644 index 00000000000..ca88c5cd08f --- /dev/null +++ b/packages/bridge-ui-v2/src/libs/bridge/isBridgeTxProcessable.ts @@ -0,0 +1,41 @@ +import { getContract } from '@wagmi/core'; + +import { crossChainSyncABI } from '$abi'; +import { chainContractsMap } from '$libs/chain'; +import { publicClient } from '$libs/wagmi'; + +import { type BridgeTransaction, MessageStatus } from './types'; + +export async function isBridgeTxProcessable(bridgeTx: BridgeTransaction) { + const { receipt, message, status, srcChainId, destChainId } = bridgeTx; + + // Without these guys there is no way we can process this + // bridge transaction. The receipt is needed in order to compare + // the block number with the cross chain block number. + if (!receipt || !message) return false; + + // TODO: Not sure this could ever happens. When we add the + // transaction to the local storage, we don't set the status, + // but when we fetch them, then we query the contract for this status. + if (status !== MessageStatus.NEW) return true; + + const destCrossChainSyncAddress = chainContractsMap[Number(destChainId)].crossChainSyncAddress; + + try { + const destCrossChainSyncContract = getContract({ + address: destCrossChainSyncAddress, + abi: crossChainSyncABI, + chainId: Number(destChainId), + }); + + const blockHash = await destCrossChainSyncContract.read.getCrossChainBlockHash([BigInt(0)]); + + const srcBlock = await publicClient({ chainId: Number(srcChainId) }).getBlock({ + blockHash, + }); + + return srcBlock.number && receipt.blockNumber <= srcBlock.number; + } catch (error) { + return false; + } +} diff --git a/packages/bridge-ui-v2/src/libs/bridge/types.ts b/packages/bridge-ui-v2/src/libs/bridge/types.ts index 43a56cf06c2..756ba623aea 100644 --- a/packages/bridge-ui-v2/src/libs/bridge/types.ts +++ b/packages/bridge-ui-v2/src/libs/bridge/types.ts @@ -73,6 +73,8 @@ export type BridgeTransaction = { receipt?: TransactionReceipt; msgHash?: Hash; message?: Message; + + interval: Maybe>; }; // TokenVault sendERC20(...args) diff --git a/packages/bridge-ui-v2/src/libs/error/errors.ts b/packages/bridge-ui-v2/src/libs/error/errors.ts index 7d786fcc3bb..e1d122a1e7a 100644 --- a/packages/bridge-ui-v2/src/libs/error/errors.ts +++ b/packages/bridge-ui-v2/src/libs/error/errors.ts @@ -65,3 +65,7 @@ export class WrongOwnerError extends Error { export class WrongChainError extends Error { name = 'WrongChainError'; } + +export class BridgeTxPollingError extends Error { + name = 'BridgeTxPollingError'; +} From 563bf3fbac8b12a41f64e49867aef0671528340d Mon Sep 17 00:00:00 2001 From: Korbinian Kasberger Date: Fri, 28 Jul 2023 15:52:01 +0200 Subject: [PATCH 22/75] feat(bridge-ui-v2): updated styling --- packages/bridge-ui-v2/package.json | 1 - .../components/Activities/Activities.svelte | 54 +++++++++++++------ .../src/components/Icon/Icon.svelte | 4 +- .../src/components/Paginator/Paginator.svelte | 32 ++++++----- pnpm-lock.yaml | 32 +++++------ 5 files changed, 75 insertions(+), 48 deletions(-) diff --git a/packages/bridge-ui-v2/package.json b/packages/bridge-ui-v2/package.json index 5fe15156e25..5326872c0ae 100644 --- a/packages/bridge-ui-v2/package.json +++ b/packages/bridge-ui-v2/package.json @@ -57,7 +57,6 @@ "@web3modal/ethereum": "^2.6.2", "@web3modal/html": "^2.6.2", "@zerodevx/svelte-toast": "^0.9.5", - "abitype": "^0.8.2", "debug": "^4.3.4", "svelte-i18n": "^3.6.0", "viem": "^1.4.1" diff --git a/packages/bridge-ui-v2/src/components/Activities/Activities.svelte b/packages/bridge-ui-v2/src/components/Activities/Activities.svelte index 5b2473ded88..5c299c584e3 100644 --- a/packages/bridge-ui-v2/src/components/Activities/Activities.svelte +++ b/packages/bridge-ui-v2/src/components/Activities/Activities.svelte @@ -1,7 +1,7 @@ -
+
-
+
{$t('activities.header.from')}
@@ -102,29 +110,43 @@
{$t('activities.header.explorer')}
-
- {#if transactionsToShow.length && !loadingTxs && $account?.isConnected} + {#if transactionsToShow.length && !loadingTxs && $account?.isConnected} +
{#each transactionsToShow as item (item.hash)} +
{/each} - {/if} -
-
- {#if loadingTxs && $account?.isConnected} +
+ {/if} + {#if loadingTxs && $account?.isConnected} +
{$t('common.loading')}... - {:else if !transactionsToShow.length && $account?.isConnected} +
+ {:else if !transactionsToShow.length && $account?.isConnected} +
{$t('activities.no_transactions')} - {:else if !$account?.isConnected} +
+ {:else if !$account?.isConnected} +
- {/if} -
+
+ {/if}
- (currentPage = detail)} /> + handlePageChange(detail)} />
+ + diff --git a/packages/bridge-ui-v2/src/components/Icon/Icon.svelte b/packages/bridge-ui-v2/src/components/Icon/Icon.svelte index d6aba9ae55f..76779adcfee 100644 --- a/packages/bridge-ui-v2/src/components/Icon/Icon.svelte +++ b/packages/bridge-ui-v2/src/components/Icon/Icon.svelte @@ -87,9 +87,9 @@ clip-rule="evenodd" d="M5.23017 7.20938C5.52875 6.92228 6.00353 6.93159 6.29063 7.23017L10 11.1679L13.7094 7.23017C13.9965 6.93159 14.4713 6.92228 14.7698 7.20938C15.0684 7.49647 15.0777 7.97125 14.7906 8.26983L10.5406 12.7698C10.3992 12.9169 10.204 13 10 13C9.79599 13 9.60078 12.9169 9.45938 12.7698L5.20938 8.26983C4.92228 7.97125 4.93159 7.49647 5.23017 7.20938Z" /> {:else if type === 'chevron-left'} - + {:else if type === 'chevron-right'} - + {:else if type === 'x-close'} startPage + i); + $: totalPages = Math.ceil(totalItems / pageSize); const dispatch = createEventDispatcher<{ pageChange: number }>(); @@ -26,6 +21,8 @@ goToPage(currentPage); } } + + const btnClass = 'btn btn-xs btn-ghost'; {#if totalPages > 1} @@ -33,9 +30,10 @@ We only want to show the buttons if we actually need them. If we can fit all the items in one page, there is no need. --> -