diff --git a/packages/bridge-ui-v2/src/components/Bridge/NFTBridge.svelte b/packages/bridge-ui-v2/src/components/Bridge/NFTBridge.svelte
index 7abf6aa4fa..05f5285f63 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/NFTBridge.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/NFTBridge.svelte
@@ -325,6 +325,7 @@
// idInputState = IDInputState.VALID;
$selectedToken = token;
await prefetchImage();
+ nextStep();
})
.catch((err) => {
console.error(err);
@@ -332,7 +333,6 @@
// idInputState = IDInputState.INVALID;
// invalidToken = true;
});
- nextStep();
};
// Whenever the user switches bridge types, we should reset the forms
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 312f5a0641..6cda53093d 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ImportStep.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ImportStep.svelte
@@ -21,13 +21,13 @@
import { ChainSelectorWrapper } from '$components/ChainSelector';
import { IconFlipper } from '$components/Icon';
import RotatingIcon from '$components/Icon/RotatingIcon.svelte';
- import { LoadingMask } from '$components/LoadingMask';
- import { NFTCardGrid } from '$components/NFTCard';
- import { NFTList } from '$components/NFTList';
+ import { NFTDisplay } from '$components/NFTs';
+ import { NFTView } from '$components/NFTs/types';
import { fetchNFTs } from '$libs/bridge/fetchNFTs';
import { detectContractType, type NFT, TokenType } from '$libs/token';
import { checkOwnership } from '$libs/token/checkOwnership';
import { getTokenWithInfoFromAddress } from '$libs/token/getTokenWithInfoFromAddress';
+ import { noop } from '$libs/util/noop';
import { account } from '$stores/account';
import { network } from '$stores/network';
@@ -39,6 +39,8 @@
export let validating: boolean = false;
export let contractAddress: Address | string = '';
+ export const prefetchImage = () => noop();
+
let enteredIds: string = '';
let scanning: boolean;
@@ -56,6 +58,8 @@
let nftIdInputComponent: IdInput;
let amountComponent: Amount;
+ let nftView: NFTView = NFTView.LIST;
+
const reset = () => {
nftView = NFTView.LIST;
enteredIds = '';
@@ -64,12 +68,6 @@
detectedTokenType = null;
};
- enum NFTView {
- CARDS,
- LIST,
- }
- let nftView: NFTView = NFTView.LIST;
-
const changeNFTView = () => {
if (nftView === NFTView.CARDS) {
nftView = NFTView.LIST;
@@ -158,7 +156,8 @@
detectedTokenType = token.type;
idInputState = IDInputState.VALID;
$selectedToken = token;
- // await prefetchImage();
+ $selectedNFTs = [token as NFT];
+ await prefetchImage();
})
.catch((err) => {
console.error(err);
@@ -313,17 +312,7 @@ Automatic NFT Input
-
-
- {#if scanning}
-
- {:else if nftView === NFTView.LIST}
-
- {:else if nftView === NFTView.CARDS}
-
- {/if}
-
-
+
diff --git a/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ReviewStep.svelte b/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ReviewStep.svelte
index 80938612da..19f85e63c8 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ReviewStep.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ReviewStep.svelte
@@ -7,9 +7,7 @@
import { destNetwork as destinationChain, selectedNFTs } from '$components/Bridge/state';
import { ChainSelector } from '$components/ChainSelector';
import { Icon, IconFlipper } from '$components/Icon';
- import { NFTCard } from '$components/NFTCard';
- import { NFTList } from '$components/NFTList';
- import { noop } from '$libs/util/noop';
+ import { NFTDisplay } from '$components/NFTs';
import { shortenAddress } from '$libs/util/shortenAddress';
import { network } from '$stores/network';
@@ -101,13 +99,5 @@ NFT List or Card View
- {#if nftView === NFTView.LIST}
-
- {:else if nftView === NFTView.CARDS}
-
- {#each nftsToDisplay as nft}
-
- {/each}
-
- {/if}
+
diff --git a/packages/bridge-ui-v2/src/components/NFTCard/NFTCard.svelte b/packages/bridge-ui-v2/src/components/NFTCard/NFTCard.svelte
deleted file mode 100644
index 74a0dc0c55..0000000000
--- a/packages/bridge-ui-v2/src/components/NFTCard/NFTCard.svelte
+++ /dev/null
@@ -1,77 +0,0 @@
-
-
-
-
selectNFT(nft)} />
- {#if !viewOnly}
- {#if isChecked}
-
-
-
- {/if}
-
-
-
-
- {:else}
-
-
-
- {/if}
-
- {nft.tokenId}
-
-
-
-
- handleDialogSelection()} viewOnly />
-
-
diff --git a/packages/bridge-ui-v2/src/components/NFTList/index.ts b/packages/bridge-ui-v2/src/components/NFTList/index.ts
deleted file mode 100644
index 90148dfb10..0000000000
--- a/packages/bridge-ui-v2/src/components/NFTList/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as NFTList } from './NFTList.svelte';
diff --git a/packages/bridge-ui-v2/src/components/NFTs/NFTCards/NFTCard.svelte b/packages/bridge-ui-v2/src/components/NFTs/NFTCards/NFTCard.svelte
new file mode 100644
index 0000000000..71724689d1
--- /dev/null
+++ b/packages/bridge-ui-v2/src/components/NFTs/NFTCards/NFTCard.svelte
@@ -0,0 +1,79 @@
+
+
+
+ {#if !viewOnly}
+
+ {:else}
+
+ {/if}
+
+
+
+
+ handleDialogSelection()} {viewOnly} />
+
+
diff --git a/packages/bridge-ui-v2/src/components/NFTCard/NFTCardGrid.svelte b/packages/bridge-ui-v2/src/components/NFTs/NFTCards/NFTCardGrid.svelte
similarity index 92%
rename from packages/bridge-ui-v2/src/components/NFTCard/NFTCardGrid.svelte
rename to packages/bridge-ui-v2/src/components/NFTs/NFTCards/NFTCardGrid.svelte
index 4d99b370cc..70a9825822 100644
--- a/packages/bridge-ui-v2/src/components/NFTCard/NFTCardGrid.svelte
+++ b/packages/bridge-ui-v2/src/components/NFTs/NFTCards/NFTCardGrid.svelte
@@ -2,14 +2,13 @@
import { get } from 'svelte/store';
import { selectedNFTs } from '$components/Bridge/state';
+ import { NFTCard } from '$components/NFTs/NFTCards';
import type { NFT } from '$libs/token';
import { groupNFTByCollection } from '$libs/util/groupNFTByCollection';
import { network } from '$stores/network';
- import { NFTCard } from '.';
-
export let nfts: NFT[] = [];
- // export let selectedNFT: NFT[] | null = [];
+ export let viewOnly = false;
const selectNFT = (nft: NFT) => {
const currentChainId = get(network)?.id;
@@ -44,7 +43,7 @@
{#if collectionAddress === undefined}
TODO: Address for {nft.name} is undefined
{:else}
-
+
{/if}
{/each}
diff --git a/packages/bridge-ui-v2/src/components/NFTCard/index.ts b/packages/bridge-ui-v2/src/components/NFTs/NFTCards/index.ts
similarity index 100%
rename from packages/bridge-ui-v2/src/components/NFTCard/index.ts
rename to packages/bridge-ui-v2/src/components/NFTs/NFTCards/index.ts
diff --git a/packages/bridge-ui-v2/src/components/NFTs/NFTDisplay.svelte b/packages/bridge-ui-v2/src/components/NFTs/NFTDisplay.svelte
new file mode 100644
index 0000000000..df23555423
--- /dev/null
+++ b/packages/bridge-ui-v2/src/components/NFTs/NFTDisplay.svelte
@@ -0,0 +1,31 @@
+
+
+
+
+ {#if loading}
+
+ {:else if nftView === NFTView.LIST && nfts}
+
+ {:else if nftView === NFTView.CARDS && nfts}
+
+ {/if}
+
+
diff --git a/packages/bridge-ui-v2/src/components/NFTList/NFTInfoDialog.svelte b/packages/bridge-ui-v2/src/components/NFTs/NFTInfoDialog.svelte
similarity index 100%
rename from packages/bridge-ui-v2/src/components/NFTList/NFTInfoDialog.svelte
rename to packages/bridge-ui-v2/src/components/NFTs/NFTInfoDialog.svelte
diff --git a/packages/bridge-ui-v2/src/components/NFTList/NFTList.svelte b/packages/bridge-ui-v2/src/components/NFTs/NFTList/NFTList.svelte
similarity index 100%
rename from packages/bridge-ui-v2/src/components/NFTList/NFTList.svelte
rename to packages/bridge-ui-v2/src/components/NFTs/NFTList/NFTList.svelte
diff --git a/packages/bridge-ui-v2/src/components/NFTList/NFTListItem.svelte b/packages/bridge-ui-v2/src/components/NFTs/NFTList/NFTListItem.svelte
similarity index 97%
rename from packages/bridge-ui-v2/src/components/NFTList/NFTListItem.svelte
rename to packages/bridge-ui-v2/src/components/NFTs/NFTList/NFTListItem.svelte
index 30462753d4..88ba3932fb 100644
--- a/packages/bridge-ui-v2/src/components/NFTList/NFTListItem.svelte
+++ b/packages/bridge-ui-v2/src/components/NFTs/NFTList/NFTListItem.svelte
@@ -4,11 +4,10 @@
import { selectedNFTs } from '$components/Bridge/state';
import { Icon } from '$components/Icon';
+ import NftInfoDialog from '$components/NFTs/NFTInfoDialog.svelte';
import { type NFT, TokenType } from '$libs/token';
import { noop } from '$libs/util/noop';
- import NftInfoDialog from './NFTInfoDialog.svelte';
-
export let nft: NFT;
export let collectionAddress: Address;
export let multiSelectEnabled = false;
diff --git a/packages/bridge-ui-v2/src/components/NFTs/NFTList/index.ts b/packages/bridge-ui-v2/src/components/NFTs/NFTList/index.ts
new file mode 100644
index 0000000000..7582eb19aa
--- /dev/null
+++ b/packages/bridge-ui-v2/src/components/NFTs/NFTList/index.ts
@@ -0,0 +1,2 @@
+export { default as NFTList } from './NFTList.svelte';
+export { default as NFTListItem } from './NFTListItem.svelte';
diff --git a/packages/bridge-ui-v2/src/components/NFTs/index.ts b/packages/bridge-ui-v2/src/components/NFTs/index.ts
new file mode 100644
index 0000000000..d082898d7a
--- /dev/null
+++ b/packages/bridge-ui-v2/src/components/NFTs/index.ts
@@ -0,0 +1 @@
+export { default as NFTDisplay } from './NFTDisplay.svelte';
diff --git a/packages/bridge-ui-v2/src/components/NFTs/types.ts b/packages/bridge-ui-v2/src/components/NFTs/types.ts
new file mode 100644
index 0000000000..5fd8178f4d
--- /dev/null
+++ b/packages/bridge-ui-v2/src/components/NFTs/types.ts
@@ -0,0 +1,4 @@
+export enum NFTView {
+ CARDS,
+ LIST,
+}