diff --git a/packages/bridge-ui-v2/package.json b/packages/bridge-ui-v2/package.json index dfbf451cc27..b7f605ef0c6 100644 --- a/packages/bridge-ui-v2/package.json +++ b/packages/bridge-ui-v2/package.json @@ -21,52 +21,54 @@ "export:config": "pnpm ./scripts/exportJsonToEnv.js" }, "devDependencies": { - "@playwright/test": "^1.28.1", - "@sveltejs/adapter-auto": "^2.1.0", - "@sveltejs/adapter-static": "^2.0.2", - "@sveltejs/kit": "^1.22.3", - "@types/debug": "^4.1.7", - "@typescript-eslint/eslint-plugin": "^6.6.0", - "@typescript-eslint/parser": "^6.7.0", + "@playwright/test": "^1.39.0", + "@sveltejs/adapter-auto": "^2.1.1", + "@sveltejs/adapter-static": "^2.0.3", + "@sveltejs/kit": "^1.27.4", + "@types/debug": "^4.1.12", + "@types/object-hash": "^3.0.6", + "@typescript-eslint/eslint-plugin": "^6.10.0", + "@typescript-eslint/parser": "^6.10.0", "@vitest/coverage-v8": "^0.33.0", - "@wagmi/cli": "^1.0.1", - "abitype": "^0.8.7", - "autoprefixer": "^10.4.14", + "@wagmi/cli": "^1.5.2", + "abitype": "^0.8.11", + "ajv": "^8.12.0", + "autoprefixer": "^10.4.16", "daisyui": "3.1.7", "dotenv": "^16.3.1", - "eslint": "^8.28.0", - "eslint-config-prettier": "^8.5.0", + "eslint": "^8.53.0", + "eslint-config-prettier": "^8.10.0", "eslint-plugin-simple-import-sort": "^10.0.0", - "eslint-plugin-svelte": "^2.26.0", + "eslint-plugin-svelte": "^2.35.0", "ethereum-address": "^0.0.4", "jsdom": "^22.1.0", - "ajv": "^8.6.4", "lokijs": "^1.5.12", - "postcss": "^8.4.24", - "prettier": "^3.0.0", - "prettier-plugin-svelte": "^3.0.0", - "svelte": "^4.1.0", - "svelte-check": "^3.4.6", - "tailwindcss": "^3.3.2", + "postcss": "^8.4.31", + "prettier": "^3.0.3", + "prettier-plugin-svelte": "^3.1.0", + "svelte": "^4.2.3", + "svelte-check": "^3.6.0", + "tailwindcss": "^3.3.5", "ts-morph": "^19.0.0", - "tslib": "^2.4.1", - "typescript": "^5.1.6", - "vite": "^4.4.9", + "tslib": "^2.6.2", + "typescript": "^5.2.2", + "vite": "^4.5.0", "vite-tsconfig-paths": "^4.2.1", - "vitest": "^0.32.2", + "vitest": "^0.32.4", "vitest-fetch-mock": "^0.2.2" }, "type": "module", "dependencies": { - "@wagmi/core": "^1.3.6", - "@web3modal/ethereum": "^2.6.2", - "@web3modal/html": "^2.6.2", + "@wagmi/core": "^1.4.6", + "@web3modal/ethereum": "^2.7.1", + "@web3modal/html": "^2.7.1", "@zerodevx/svelte-toast": "^0.9.5", - "axios": "^1.4.0", + "axios": "^1.6.1", "buffer": "^6.0.3", "debug": "^4.3.4", "events": "^3.3.0", - "svelte-i18n": "^3.6.0", - "viem": "^1.4.1" + "object-hash": "^3.0.0", + "svelte-i18n": "^3.7.4", + "viem": "^1.18.9" } } diff --git a/packages/bridge-ui-v2/src/components/Bridge/NFTBridge.svelte b/packages/bridge-ui-v2/src/components/Bridge/NFTBridge.svelte index ec150ac1dcf..318de2b7018 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/NFTBridge.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/NFTBridge.svelte @@ -45,7 +45,7 @@ function onNetworkChange(newNetwork: Network, oldNetwork: Network) { updateForm(); - activeStep = NFTSteps.CONFIRM; + activeStep = NFTSteps.IMPORT; if (newNetwork) { const destChainId = $destinationChain?.id; if (!$destinationChain?.id) return; @@ -150,12 +150,15 @@ }; const prefetchImage = async () => { + const srcChainId = $network?.id; + const destChainId = $destinationChain?.id; + if (!srcChainId || !destChainId) throw new Error('both src and dest chain id must be defined'); await Promise.all( nftIdArray.map(async (id) => { const token = $selectedToken as NFT; if (token) { token.tokenId = id; - fetchNFTImageUrl(token).then((nftWithUrl) => { + fetchNFTImageUrl(token, srcChainId, destChainId).then((nftWithUrl) => { $selectedToken = nftWithUrl; $selectedNFTs = [nftWithUrl]; }); @@ -179,6 +182,7 @@ // idInputState = IDInputState.VALID; $selectedToken = token; await prefetchImage(); + nextStep(); }) .catch((err) => { diff --git a/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ImportStep.svelte b/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ImportStep.svelte index 0c8d4548507..9c8be6f84f2 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ImportStep.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ImportStep.svelte @@ -85,8 +85,9 @@ $selectedNFTs = []; const accountAddress = $account?.address; const srcChainId = $network?.id; - if (!accountAddress || !srcChainId) return; - const nftsFromAPIs = await fetchNFTs(accountAddress, BigInt(srcChainId)); + const destChainId = $destinationChain?.id; + if (!accountAddress || !srcChainId || !destChainId) return; + const nftsFromAPIs = await fetchNFTs(accountAddress, srcChainId, destChainId); foundNFTs = nftsFromAPIs.nfts; scanning = false; scanned = true; diff --git a/packages/bridge-ui-v2/src/components/NFTs/NFTCards/NFTCard.svelte b/packages/bridge-ui-v2/src/components/NFTs/NFTCards/NFTCard.svelte index cf353edd0f0..bafea07354b 100644 --- a/packages/bridge-ui-v2/src/components/NFTs/NFTCards/NFTCard.svelte +++ b/packages/bridge-ui-v2/src/components/NFTs/NFTCards/NFTCard.svelte @@ -10,7 +10,7 @@ const placeholderUrl = 'https://placehold.co/400x400.png'; - let imageUrl: string = nft.metadata?.image || placeholderUrl; + $: imageUrl = nft.metadata?.image || placeholderUrl; let isChecked = false; diff --git a/packages/bridge-ui-v2/src/components/NFTs/NFTInfoDialog.svelte b/packages/bridge-ui-v2/src/components/NFTs/NFTInfoDialog.svelte index 3354a674230..674f7c5dbad 100644 --- a/packages/bridge-ui-v2/src/components/NFTs/NFTInfoDialog.svelte +++ b/packages/bridge-ui-v2/src/components/NFTs/NFTInfoDialog.svelte @@ -20,6 +20,8 @@ export let nft: NFT; + export let srcChainId = $network?.id; + const dispatch = createEventDispatcher(); const selectNFT = () => { @@ -31,7 +33,7 @@ modalOpen = false; }; - $: currentChain = $network?.id; + $: currentChain = Number(srcChainId) || $network?.id; $: imgUrl = nft.metadata?.image || placeholderUrl; diff --git a/packages/bridge-ui-v2/src/components/NFTs/NFTList/NFTList.svelte b/packages/bridge-ui-v2/src/components/NFTs/NFTList/NFTList.svelte index 7c246c7bb6c..d85d8fcc95c 100644 --- a/packages/bridge-ui-v2/src/components/NFTs/NFTList/NFTList.svelte +++ b/packages/bridge-ui-v2/src/components/NFTs/NFTList/NFTList.svelte @@ -94,12 +94,12 @@ {:else} + {selectNFT} + bind:viewOnly /> {/if} {/each} diff --git a/packages/bridge-ui-v2/src/components/NFTs/NFTList/NFTListItem.svelte b/packages/bridge-ui-v2/src/components/NFTs/NFTList/NFTListItem.svelte index e21b729964c..5e44ec03d7a 100644 --- a/packages/bridge-ui-v2/src/components/NFTs/NFTList/NFTListItem.svelte +++ b/packages/bridge-ui-v2/src/components/NFTs/NFTList/NFTListItem.svelte @@ -14,7 +14,7 @@ export let checkedAddresses: Map = new Map(); export let selectNFT: (nft: NFT) => void; export let toggleAddressCheckBox: (collectionAddress: string) => void = noop; - export let selectable = false; + export let viewOnly: boolean; let selected: boolean = false; @@ -22,7 +22,7 @@ const placeholderUrl = 'https://placehold.co/400x400.png'; - let imageUrl: string = nft.metadata?.image || placeholderUrl; + $: imageUrl = nft.metadata?.image || placeholderUrl; let imageLoaded = false; const handleDialogSelection = () => { @@ -41,15 +41,14 @@
-
- handleDialogSelection()} /> + handleDialogSelection()} bind:viewOnly />