Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(bridge-ui-v2): fetch cross-chain metadata #15206

Merged
merged 4 commits into from
Nov 27, 2023
Merged

feat(bridge-ui-v2): fetch cross-chain metadata #15206

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
84951ac
squashed changes
KorbinianK Nov 22, 2023
238be53
cleanup
KorbinianK Nov 22, 2023
89ede21
update lock file
KorbinianK Nov 22, 2023
e148207
fix overriding token balance with canonical info
KorbinianK Nov 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 32 additions & 30 deletions packages/bridge-ui-v2/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
8 changes: 6 additions & 2 deletions packages/bridge-ui-v2/src/components/Bridge/NFTBridge.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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];
});
Expand All @@ -179,6 +182,7 @@
// idInputState = IDInputState.VALID;
$selectedToken = token;
await prefetchImage();

nextStep();
})
.catch((err) => {
Expand Down
5 changes: 3 additions & 2 deletions packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ImportStep.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion packages/bridge-ui-v2/src/components/NFTs/NFTCards/NFTCard.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
4 changes: 3 additions & 1 deletion packages/bridge-ui-v2/src/components/NFTs/NFTInfoDialog.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@

export let nft: NFT;

export let srcChainId = $network?.id;

const dispatch = createEventDispatcher();

const selectNFT = () => {
Expand All @@ -31,7 +33,7 @@
modalOpen = false;
};

$: currentChain = $network?.id;
$: currentChain = Number(srcChainId) || $network?.id;

$: imgUrl = nft.metadata?.image || placeholderUrl;
</script>
Expand Down
4 changes: 2 additions & 2 deletions packages/bridge-ui-v2/src/components/NFTs/NFTList/NFTList.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,12 +94,12 @@
{:else}
<NftListItem
{nft}
selectable={!viewOnly}
{multiSelectEnabled}
{checkedAddresses}
{collectionAddress}
{toggleAddressCheckBox}
{selectNFT} />
{selectNFT}
bind:viewOnly />
{/if}
{/each}
</div>
Expand Down
11 changes: 5 additions & 6 deletions packages/bridge-ui-v2/src/components/NFTs/NFTList/NFTListItem.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,15 @@
export let checkedAddresses: Map<string, boolean> = 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;

let modalOpen = false;

const placeholderUrl = 'https://placehold.co/400x400.png';

let imageUrl: string = nft.metadata?.image || placeholderUrl;
$: imageUrl = nft.metadata?.image || placeholderUrl;
let imageLoaded = false;

const handleDialogSelection = () => {
Expand All @@ -41,15 +41,14 @@
</script>

<div class="form-control flex">

<label class="cursor-pointer label my-[8px] space-x-[16px]">
{#if multiSelectEnabled && selectable}
{#if multiSelectEnabled && !viewOnly}
<input
type="checkbox"
class="checkbox checkbox-secondary"
checked={checkedAddresses.get(collectionAddress) || false}
on:change={() => toggleAddressCheckBox(collectionAddress)} />
{:else if selectable}
{:else if !viewOnly}
<input
type="radio"
name="nft-radio"
Expand Down Expand Up @@ -78,7 +77,7 @@
</label>
</div>

<NftInfoDialog {nft} bind:modalOpen on:selected={() => handleDialogSelection()} />
<NftInfoDialog {nft} bind:modalOpen on:selected={() => handleDialogSelection()} bind:viewOnly />

<style>
/* Todo: temporary test, remove or move */
Expand Down
Loading
Loading