From 16c455dfbf2d6ff8f8e3572e4cf6d0585e32b74f Mon Sep 17 00:00:00 2001
From: Korbinian <korbiniank@outlook.de>
Date: Thu, 26 Oct 2023 12:33:01 +0200
Subject: [PATCH] paddings, explorer links, fix crosschainaddress for 1155

---
 .../Bridge/NFTBridgeSteps/ReviewStep.svelte   |  4 +-
 .../components/NFTs/NFTCards/NFTCard.svelte   |  6 +-
 .../NFTs/NFTCards/NFTCardGrid.svelte          | 56 +++++++++----------
 .../src/components/NFTs/NFTDisplay.svelte     |  2 +-
 .../src/components/NFTs/NFTInfoDialog.svelte  | 14 ++++-
 .../components/NFTs/NFTList/NFTList.svelte    |  6 +-
 .../src/libs/token/getCrossChainAddress.ts    | 17 +++++-
 7 files changed, 65 insertions(+), 40 deletions(-)

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 0a1af579d92..e4b8f5ed1aa 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ReviewStep.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ReviewStep.svelte
@@ -55,7 +55,7 @@
               <li>
                 <a
                   class="flex justify-start link"
-                  href={`${chainConfig[$destinationChain?.id].urls.explorer}`}
+                  href={`${chainConfig[currentChain].urls.explorer}/token/${nft.addresses[currentChain]}`}
                   target="_blank">
                   {shortenAddress(nft.addresses[currentChain], 8, 12)}
                   <!-- <Icon type="arrow-top-right" fillClass="fill-primary-link" /> -->
@@ -88,7 +88,7 @@
 <!-- 
 NFT List or Card View
 -->
-<section class="space-y-2">
+<section class="space-y-[16px]">
   <div class="flex justify-between items-center w-full">
     <div class="flex items-center gap-2">
       <span>{$t('bridge.nft.step.review.your_tokens')}</span>
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 71724689d19..179e8f7cfbb 100644
--- a/packages/bridge-ui-v2/src/components/NFTs/NFTCards/NFTCard.svelte
+++ b/packages/bridge-ui-v2/src/components/NFTs/NFTCards/NFTCard.svelte
@@ -45,12 +45,12 @@
           <Icon type="check-circle" class="f-center " fillClass="fill-primary-brand" width={40} height={40} />
         </div>
       {/if}
-      <div role="button" tabindex="0" class="h-[125px]" on:click={handleImageClick} on:keydown={handleImageClick}>
-        <img alt={nft.name} src={imageUrl} class="rounded-t-[10px] h-[124px]" />
+      <div role="button" tabindex="0" class="h-[124px]" on:click={handleImageClick} on:keydown={handleImageClick}>
+        <img alt={nft.name} src={imageUrl} class="rounded-t-[10px] h-[125px]" />
       </div>
     </label>
   {:else}
-    <img alt={nft.name} src={imageUrl} class="rounded-t-[10px] h-[124px]" />
+    <img alt={nft.name} src={imageUrl} class="rounded-t-[10px] h-[125px]" />
   {/if}
 
   <button
diff --git a/packages/bridge-ui-v2/src/components/NFTs/NFTCards/NFTCardGrid.svelte b/packages/bridge-ui-v2/src/components/NFTs/NFTCards/NFTCardGrid.svelte
index 5827850af88..f868b56e7de 100644
--- a/packages/bridge-ui-v2/src/components/NFTs/NFTCards/NFTCardGrid.svelte
+++ b/packages/bridge-ui-v2/src/components/NFTs/NFTCards/NFTCardGrid.svelte
@@ -25,34 +25,34 @@
       if ($selectedNFTs) $selectedToken = $selectedNFTs[0];
     }
   };
+
+  $: collections = groupNFTByCollection(nfts);
 </script>
 
-<div class="">
-  {#each Object.entries(groupNFTByCollection(nfts)) as [address, nftsGroup] (address)}
-    {@const chainId = $network?.id}
-    <div class="">
-      {#if nftsGroup.length > 0 && chainId}
-        <div class="collection-header">
-          <span class="font-bold text-primary-content">
-            {nftsGroup[0].name}
-          </span>
-          <span class="badge badge-primary badge-outline badge-xs px-[10px] h-[24px] ml-[10px]"
-            ><span class="text-xs">{nftsGroup[0].type}</span></span>
-        </div>
-        <div class="token-ids my-[16px] grid grid-cols-3 gap-4">
-          {#each nftsGroup as nft}
-            {@const collectionAddress = nft.addresses[chainId]}
-            {#if collectionAddress === undefined}
-              <div>TODO: Address for {nft.name} is undefined</div>
-            {:else}
-              <NFTCard {nft} {selectNFT} {viewOnly} />
-            {/if}
-          {/each}
-        </div>
-        {#if nfts.length > 1}
-          <div class="h-sep my-[30px]" />
-        {/if}
+{#each Object.entries(collections) as [address, nftsGroup] (address)}
+  {@const chainId = $network?.id}
+  <div class="">
+    {#if nftsGroup.length > 0 && chainId}
+      <div class="collection-header">
+        <span class="font-bold text-primary-content">
+          {nftsGroup[0].name}
+        </span>
+        <span class="badge badge-primary badge-outline badge-xs px-[10px] h-[24px] ml-[10px]"
+          ><span class="text-xs">{nftsGroup[0].type}</span></span>
+      </div>
+      <div class="token-ids mt-[16px] grid gap-4 grid-3">
+        {#each nftsGroup as nft}
+          {@const collectionAddress = nft.addresses[chainId]}
+          {#if collectionAddress === undefined}
+            <div>TODO: Address for {nft.name} is undefined</div>
+          {:else}
+            <NFTCard {nft} {selectNFT} {viewOnly} />
+          {/if}
+        {/each}
+      </div>
+      {#if Object.keys(collections).length > 1 || nfts.length > 3}
+        <div class="h-sep my-[30px]" />
       {/if}
-    </div>
-  {/each}
-</div>
+    {/if}
+  </div>
+{/each}
diff --git a/packages/bridge-ui-v2/src/components/NFTs/NFTDisplay.svelte b/packages/bridge-ui-v2/src/components/NFTs/NFTDisplay.svelte
index 769a33fee10..8e597b3af1b 100644
--- a/packages/bridge-ui-v2/src/components/NFTs/NFTDisplay.svelte
+++ b/packages/bridge-ui-v2/src/components/NFTs/NFTDisplay.svelte
@@ -20,7 +20,7 @@
   $: size = nfts?.length && nfts?.length > 3 ? 'max-h-[350px] min-h-[350px]' : 'max-h-[249px] min-h-[249px]';
 
   $: outerClasses = 'relative m bg-neutral rounded-[20px] overflow-hidden ' + size;
-  $: innerClasses = 'overflow-y-auto py-2 px-[20px] ' + size;
+  $: innerClasses = 'overflow-y-auto p-[24px] ' + size;
 </script>
 
 <div class={outerClasses}>
diff --git a/packages/bridge-ui-v2/src/components/NFTs/NFTInfoDialog.svelte b/packages/bridge-ui-v2/src/components/NFTs/NFTInfoDialog.svelte
index a340fc47062..3cd30c27aeb 100644
--- a/packages/bridge-ui-v2/src/components/NFTs/NFTInfoDialog.svelte
+++ b/packages/bridge-ui-v2/src/components/NFTs/NFTInfoDialog.svelte
@@ -2,8 +2,10 @@
   import { createEventDispatcher } from 'svelte';
   import { t } from 'svelte-i18n';
 
+  import { chainConfig } from '$chainConfig';
   import { Button } from '$components/Button';
   import { CloseButton } from '$components/CloseButton';
+  import { Icon } from '$components/Icon';
   import type { NFT } from '$libs/token';
   import { shortenAddress } from '$libs/util/shortenAddress';
   import { uid } from '$libs/util/uid';
@@ -28,6 +30,8 @@
   const closeModal = () => {
     modalOpen = false;
   };
+
+  $: currentChain = $network?.id;
 </script>
 
 <dialog id={dialogId} class="modal modal-bottom md:modal-middle" class:modal-open={modalOpen}>
@@ -46,7 +50,15 @@
         <div class="f-between-center">
           <div class="text-secondary-content">{$t('common.contract_address')}</div>
           <div class="text-primary-content">
-            {$network?.id ? shortenAddress(nft.addresses[$network?.id], 10, 13) : ''}
+            {#if currentChain}
+              <a
+                class="flex justify-start link"
+                href={`${chainConfig[currentChain].urls.explorer}/token/${nft.addresses[currentChain]}`}
+                target="_blank">
+                {shortenAddress(nft.addresses[currentChain], 10, 13)}
+                <Icon type="arrow-top-right" fillClass="fill-primary-link" />
+              </a>
+            {/if}
           </div>
         </div>
 
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 7b09895c8ab..7c246c7bb6c 100644
--- a/packages/bridge-ui-v2/src/components/NFTs/NFTList/NFTList.svelte
+++ b/packages/bridge-ui-v2/src/components/NFTs/NFTList/NFTList.svelte
@@ -54,6 +54,8 @@
       return collectionAddress && checkedAddresses.get(collectionAddress);
     });
   };
+
+  $: collections = groupNFTByCollection(nfts);
 </script>
 
 {#if nfts.length > 0}
@@ -74,7 +76,7 @@
     {#if !chainId}
       Select a chain
     {:else}
-      {#each Object.entries(groupNFTByCollection(nfts)) as [address, nftsGroup] (address)}
+      {#each Object.entries(collections) as [address, nftsGroup] (address)}
         <div>
           {#if nftsGroup.length > 0}
             <div class="collection-header">
@@ -101,7 +103,7 @@
                 {/if}
               {/each}
             </div>
-            {#if nfts.length > 1}
+            {#if Object.keys(collections).length > 1 || nfts.length > 3}
               <div class="h-sep my-[30px]" />
             {/if}
           {/if}
diff --git a/packages/bridge-ui-v2/src/libs/token/getCrossChainAddress.ts b/packages/bridge-ui-v2/src/libs/token/getCrossChainAddress.ts
index 13c1fbcaddb..83918b3470d 100644
--- a/packages/bridge-ui-v2/src/libs/token/getCrossChainAddress.ts
+++ b/packages/bridge-ui-v2/src/libs/token/getCrossChainAddress.ts
@@ -1,7 +1,7 @@
 import { type Address, getContract } from '@wagmi/core';
 import { type Abi, zeroAddress } from 'viem';
 
-import { erc20VaultABI, erc721VaultABI } from '$abi';
+import { erc20VaultABI, erc721VaultABI, erc1155VaultABI } from '$abi';
 import { routingContractsMap } from '$bridgeConfig';
 import { chains } from '$libs/chain';
 import { getLogger } from '$libs/util/logger';
@@ -32,8 +32,19 @@ export async function getCrossChainAddress({
     return token.addresses[destChainId];
   }
 
-  const vaultABI = token.type === TokenType.ERC721 ? erc721VaultABI : erc20VaultABI;
-  const vaultAddressKey = token.type === TokenType.ERC721 ? 'erc721VaultAddress' : 'erc20VaultAddress';
+  const vaultABI =
+    token.type === TokenType.ERC721
+      ? erc721VaultABI
+      : token.type === TokenType.ERC1155
+      ? erc1155VaultABI
+      : erc20VaultABI;
+
+  const vaultAddressKey =
+    token.type === TokenType.ERC721
+      ? 'erc721VaultAddress'
+      : token.type === TokenType.ERC1155
+      ? 'erc1155VaultAddress'
+      : 'erc20VaultAddress';
 
   // it could be that we don't have the token address on the current chain, but we might it on another chain
   if (!existsOnSourceChain) {