revert nft image fetch, icon flipper update

taikoxyz · Oct 31, 2023 · f7b3759 · f7b3759
1 parent efa63b6
commit f7b3759
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 19 deletions.
diff --git a/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ImportStep.svelte b/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ImportStep.svelte
@@ -322,6 +322,7 @@ Automatic NFT Input
             </Button>
 
             <IconFlipper
+              type="swap-rotate"
               iconType1="list"
               iconType2="cards"
               selectedDefault="cards"

diff --git a/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ReviewStep.svelte b/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ReviewStep.svelte
@@ -108,6 +108,7 @@ NFT List or Card View
     </div>
     <div class="flex gap-2">
       <IconFlipper
+        type="swap-rotate"
         iconType1="list"
         iconType2="cards"
         selectedDefault="list"

diff --git a/packages/bridge-ui-v2/src/components/Icon/IconFlipper.svelte b/packages/bridge-ui-v2/src/components/Icon/IconFlipper.svelte
@@ -11,16 +11,22 @@
 
   export let selectedDefault: IconType = iconType1;
 
+  export let flipped: boolean = false;
+
+  export let type: 'swap-rotate' | 'swap-flip' | '' = '';
+
   const dispatch = createEventDispatcher();
 
   function handleLabelClick() {
     selectedDefault = selectedDefault === iconType1 ? iconType2 : iconType1;
+    flipped = !flipped;
     dispatch('labelclick');
   }
 
-  $: isDefault = selectedDefault === iconType1;
+  // $: isDefault = selectedDefault === iconType1;
+  $: isDefault = !flipped;
 
-  $: classes = classNames('swap swap-rotate btn-neutral', $$props.class);
+  $: classes = classNames('swap  btn-neutral', type, $$props.class);
 </script>
 
 <div role="button" tabindex="0" class={classes} on:click={handleLabelClick} on:keypress={handleLabelClick}>

diff --git a/packages/bridge-ui-v2/src/components/Transactions/StatusFilterDropdown.svelte b/packages/bridge-ui-v2/src/components/Transactions/StatusFilterDropdown.svelte
@@ -8,6 +8,10 @@
 
   export let selectedStatus: MessageStatus | null = null;
 
+  let flipped = false;
+
+  let iconFlipperComponent: IconFlipper;
+
   let menuOpen = false;
 
   const options = [
@@ -25,6 +29,7 @@
 
   const toggleMenu = () => {
     menuOpen = !menuOpen;
+    flipped = !flipped;
   };
 
   $: menuClasses = classNames(
@@ -44,7 +49,13 @@
         ? options.find((option) => option.value === selectedStatus)?.label
         : $t('transactions.filter.all')}
     </span>
-    <IconFlipper iconType1="chevron-left" iconType2="chevron-down" selectedDefault="chevron-left" size={15} />
+    <IconFlipper
+      bind:flipped
+      bind:this={iconFlipperComponent}
+      iconType1="chevron-left"
+      iconType2="chevron-down"
+      selectedDefault="chevron-left"
+      size={15} />
   </button>
 
   {#if menuOpen}

diff --git a/packages/bridge-ui-v2/src/components/Transactions/Transaction.svelte b/packages/bridge-ui-v2/src/components/Transactions/Transaction.svelte
@@ -15,6 +15,7 @@
   import { type NFT, TokenType } from '$libs/token';
   import { fetchNFTImageUrl } from '$libs/token/fetchNFTImageUrl';
   import { getTokenWithInfoFromAddress } from '$libs/token/getTokenWithInfoFromAddress';
+  import { truncateString } from '$libs/util/truncateString';
 
   import ChainSymbolName from './ChainSymbolName.svelte';
   import InsufficientFunds from './InsufficientFunds.svelte';
@@ -192,8 +193,10 @@
         {:else}
           <img alt="nft" src={imgUrl} class="rounded-[10px] min-w-[50px] max-w-[50px] bg-neutral self-center" />
           <div class="f-col text-left">
-            <div class="text-sm">{token?.name}</div>
-            <div class="text-sm text-secondary-content">{token?.metadata?.name}</div>
+            <div class="text-sm">{token?.name ? truncateString(token?.name, 15) : ''}</div>
+            <div class="text-sm text-secondary-content">
+              {token?.metadata?.name ? truncateString(token?.metadata?.name, 15) : ''}
+            </div>
             <div class="text-sm text-secondary-content">{token?.tokenId}</div>
           </div>
         {/if}

diff --git a/packages/bridge-ui-v2/src/libs/token/fetchNFTImageUrl.ts b/packages/bridge-ui-v2/src/libs/token/fetchNFTImageUrl.ts
@@ -1,6 +1,6 @@
 import axios from 'axios';
 
-import { checkForAdblocker } from '$libs/util/checkForAdblock';
+// import { checkForAdblocker } from '$libs/util/checkForAdblock';
 import { extractIPFSCidFromUrl } from '$libs/util/extractIPFSCidFromUrl';
 import { fetchNFTMetadata } from '$libs/util/fetchNFTMetadata';
 import { getFileExtension } from '$libs/util/getFileExtension';
@@ -38,10 +38,6 @@ const useGateway = (url: string, tokenId: number): string | null => {
 
 const fetchImageUrl = async (url: string, tokenId: number): Promise<string> => {
   try {
-    // Check if the URL is blocked by an adblocker
-    const isBlocked = await checkForAdblocker(url);
-    if (isBlocked) throw new Error(`URL is blocked by adblocker: ${url}`);
-
     await axios.get(url);
     return url;
   } catch {
@@ -53,21 +49,15 @@ const fetchImageUrl = async (url: string, tokenId: number): Promise<string> => {
   }
 };
 
+// Main function to fetch NFT image URL
 export const fetchNFTImageUrl = async (token: NFT): Promise<NFT> => {
   try {
-    const metadata = token.metadata || (await fetchNFTMetadata(token));
+    const metadata = token.metadata || (await fetchNFTMetadata(token)); // Assume fetchNFTMetadata is imported
     if (!metadata?.image) throw new Error('No image found');
 
-    const url = safeParseUrl(metadata.image);
+    const url = safeParseUrl(metadata.image); // Assume safeParseUrl is defined elsewhere
     if (!url) throw new Error(`Invalid image URL: ${metadata.image}`);
 
-    // If the URL is blocked by an adblocker, log an error and return the original token
-    const isBlocked = await checkForAdblocker(url);
-    if (isBlocked) {
-      log(`URL is blocked by adblocker: ${url}`);
-      return token;
-    }
-
     const imageUrl = await fetchImageUrl(url, token.tokenId);
     token.metadata = {
       ...metadata,