@instadapp/avocado-base 0.0.50 → 0.0.52

package/components/metadata/Bridge.vue

@@ -15,6 +15,17 @@ const toToken = asyncComputed(() =>
   }
 );
 
+const fromToken = asyncComputed(() =>
+{
+   if (Array.isArray(tokens) && !tokens.length) return null;
+    return  fetchTokenByAddress(props.metadata?.fromToken, props.chain_id, tokens)
+  }
+);
+
+const isTokensSame = computed(() => {
+  return toToken.value?.symbol === fromToken.value?.symbol
+})
+
 const bridgeAmountFormatted = computed(() =>
   formatDecimal(
     fromWei(props.metadata?.amount, toToken?.value?.decimals).toFixed()
@@ -23,18 +34,23 @@ const bridgeAmountFormatted = computed(() =>
 </script>
 
 <template>
-  <div v-if="!toToken" class="rounded-5 w-24 h-4 loading-box" />
+  <div v-if="!toToken || !fromToken" class="rounded-5 w-24 h-4 loading-box" />
   <div
     class="flex gap-5 items-center"
-    v-if="metadata.type === 'bridge' && toToken"
+    v-if="toToken && fromToken"
   >
     <span v-if="!compact" class="capitalize text-xs sm:text-sm">{{ metadata.type }}</span>
     <span class="inline-flex gap-2.5 items-center">
-      <img width="20" height="20" class="w-5 h-5" :src="toToken.logo_url" />
+      <img width="20" height="20" class="w-5 h-5" :src="fromToken.logo_url" />
       {{ bridgeAmountFormatted }}
-      <span class="uppercase">{{ toToken?.symbol }}</span>
+      <span class="uppercase">{{ fromToken?.symbol }}</span>
       <SvgoBridge class="text-slate-400 w-4 h-4" />
+      <template v-if="!isTokensSame">
+        <img width="20" height="20" class="w-5 h-5" :src="toToken.logo_url" />
+        <span class="uppercase">{{ toToken?.symbol }}</span>
+      </template>
       <span class="flex items-center gap-2.5">
+        on
         <ChainLogo class="w-5" :chain="metadata.toChainId" />
         <span>{{ chainIdToName(metadata.toChainId) }}</span>
       </span>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instadapp/avocado-base",
-  "version": "0.0.50",
+  "version": "0.0.52",
   "type": "module",
   "main": "./nuxt.config.ts",
   "types": "global.d.ts",
@@ -26,7 +26,7 @@
   "dependencies": {
     "@vueuse/nuxt": "^10.2.0",
     "bignumber.js": "^9.1.1",
-    "ethers": "^5.7.2",
-    "xxhashjs": "^0.2.2"
+    "crypto-js": "^4.1.1",
+    "ethers": "^5.7.2"
   }
 }

package/utils/helper.ts

@@ -1,4 +1,4 @@
-import * as XXH from 'xxhashjs';
+import * as CryptoJS from 'crypto-js';
 
 export const indexSorter = (aIndex: number, bIndex: number) => {
   if (aIndex === -1 && bIndex === -1) {
@@ -62,12 +62,12 @@ export function formatMultipleAddresses(addresses: string[], shorten = true) {
   return formattedString
 }
 
-export function generateColor(address: string): string {
-  const hash = XXH.h32(address, 0xABCD).toNumber()
+export function generateColor(address: string) {
+  const hash = parseInt(CryptoJS.MD5(address).toString().substr(0, 8), 16);
 
-  const hue = hash % 360
-  const saturation = 80 + (hash % 30)
-  const lightness = 70 + (hash % 20)
+  const hue = hash % 360;
+  const saturation = 80 + (hash % 30);
+  const lightness = 70 + (hash % 20);
 
-  return `hsl(${hue}, ${saturation}%, ${lightness}%)`
+  return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
 }