@instadapp/avocado-base 0.0.0-dev.a80e59d → 0.0.0-dev.aeaa72b

package/assets/images/icons/check.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="11" viewBox="0 0 16 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 1L5.375 10L1 5.90909" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/assets/images/icons/copy.svg

@@ -1,5 +1,12 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
     xmlns="http://www.w3.org/2000/svg">
-    <path class="copy-path" d="M14.1145 9.94827C14.1816 8.8779 14.2168 7.76883 14.2168 6.63246C14.2168 6.17207 14.211 5.71616 14.1997 5.26549C14.1917 4.94654 14.0882 4.63658 13.8994 4.37941C13.185 3.40646 12.6153 2.80088 11.6777 2.07698C11.4181 1.87657 11.0995 1.76786 10.7717 1.76072C10.4455 1.75361 10.105 1.75 9.74121 1.75C8.63995 1.75 7.75104 1.78308 6.8319 1.84613C6.04346 1.90021 5.41726 2.5279 5.36787 3.31665C5.30084 4.38702 5.26562 5.49608 5.26562 6.63246C5.26562 7.76883 5.30085 8.8779 5.36787 9.94827C5.41726 10.737 6.04346 11.3647 6.8319 11.4188C7.75104 11.4818 8.63995 11.5149 9.74121 11.5149C10.8425 11.5149 11.7314 11.4818 12.6505 11.4188C13.439 11.3647 14.0652 10.737 14.1145 9.94827Z" stroke="#94A3B8" stroke-width="2"/>
-    <path class="copy-path" d="M10.6341 12.6834C10.7011 11.613 10.7363 10.5039 10.7363 9.36756C10.7363 8.90717 10.7306 8.45126 10.7192 8.00059C10.7112 7.68165 10.6078 7.37169 10.4189 7.11452C9.70458 6.14157 9.13488 5.53599 8.19725 4.81209C7.93767 4.61167 7.61907 4.50297 7.29121 4.49582C6.96506 4.48872 6.62448 4.48511 6.26074 4.48511C5.15949 4.48511 4.27057 4.51819 3.35143 4.58123C2.56299 4.63531 1.9368 5.26301 1.88741 6.05176C1.82038 7.12213 1.78516 8.23119 1.78516 9.36756C1.78516 10.5039 1.82038 11.613 1.88741 12.6834C1.9368 13.4721 2.56299 14.0998 3.35143 14.1539C4.27057 14.2169 5.15949 14.25 6.26074 14.25C7.362 14.25 8.25091 14.2169 9.17005 14.1539C9.95849 14.0998 10.5847 13.4721 10.6341 12.6834Z" stroke="#94A3B8" stroke-width="2"/>
+    <g clip-path="url(#clip0_854_51869)">
+        <path d="M13.3333 6H7.33333C6.59695 6 6 6.59695 6 7.33333V13.3333C6 14.0697 6.59695 14.6667 7.33333 14.6667H13.3333C14.0697 14.6667 14.6667 14.0697 14.6667 13.3333V7.33333C14.6667 6.59695 14.0697 6 13.3333 6Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M3.33301 10.0002H2.66634C2.31272 10.0002 1.97358 9.85969 1.72353 9.60964C1.47348 9.35959 1.33301 9.02045 1.33301 8.66683V2.66683C1.33301 2.31321 1.47348 1.97407 1.72353 1.72402C1.97358 1.47397 2.31272 1.3335 2.66634 1.3335H8.66634C9.01996 1.3335 9.3591 1.47397 9.60915 1.72402C9.8592 1.97407 9.99967 2.31321 9.99967 2.66683V3.3335" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    </g>
+    <defs>
+        <clipPath id="clip0_854_51869">
+            <rect width="16" height="16" fill="white"/>
+        </clipPath>
+    </defs>
 </svg>

package/assets/images/icons/hammer.svg

@@ -0,0 +1,5 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M16.0678 8.64793L17.2102 9.79039C17.4404 10.0205 17.4334 10.4006 17.1947 10.6393L14.169 13.6651C13.9302 13.9038 13.5501 13.9108 13.32 13.6806L12.0532 12.4139C11.8231 12.1837 11.83 11.8036 12.0687 11.5649C12.6078 11.0259 12.9103 10.7041 12.4882 9.98816C12.128 9.37711 10.7867 8.04387 9.9829 8.84766L9.026 9.80457C8.79152 10.0391 8.42065 10.0499 8.18946 9.83216C8.18527 9.82822 8.18113 9.8242 8.17704 9.82011C7.60427 9.24734 6.86936 8.69159 6.39943 8.03122C6.20623 7.75971 6.27917 7.35876 6.56293 7.14058C7.13082 6.70394 7.83604 6.05667 7.51626 5.73688C7.00756 5.22819 6.64232 4.84336 6.00502 4.36291C4.84749 3.49024 2.98873 2.86307 1.68669 2.5009C1.49898 2.44869 1.54877 2.11407 1.74553 2.11091C1.74865 2.11086 1.74938 2.1109 1.7525 2.11067C1.8512 2.10361 5.1158 1.87459 7.10771 2.35491C8.41273 2.66961 9.17363 2.87223 10.3122 3.56383C11.7706 4.44979 12.9611 5.54124 13.3465 6.69684C13.732 7.85244 12.8562 8.45813 13.6146 8.8618C14.0693 9.10386 14.6271 9.08774 15.0305 8.72253C15.3277 8.4534 15.7944 8.37456 16.0678 8.64793Z" fill="currentColor"/>
+    <path d="M8.17704 9.82011C8.18113 9.8242 8.18527 9.82822 8.18946 9.83216M8.17704 9.82011L8.18946 9.83216M8.17704 9.82011C7.60427 9.24734 6.86936 8.69159 6.39943 8.03122M8.18946 9.83216C8.42065 10.0499 8.79152 10.0391 9.026 9.80457L9.9829 8.84766C10.7867 8.04387 12.128 9.37711 12.4882 9.98816C12.9103 10.7041 12.6078 11.0259 12.0687 11.5649C11.83 11.8036 11.8231 12.1837 12.0532 12.4139L13.32 13.6806C13.5501 13.9108 13.9302 13.9038 14.169 13.6651L17.1947 10.6393C17.4334 10.4006 17.4404 10.0205 17.2102 9.79039L16.0678 8.64793C15.7944 8.37456 15.3277 8.4534 15.0305 8.72253C14.6271 9.08774 14.0693 9.10386 13.6146 8.8618C12.8562 8.45813 13.732 7.85244 13.3465 6.69684C12.9611 5.54124 11.7706 4.44979 10.3122 3.56383C9.17363 2.87223 8.41273 2.66961 7.10771 2.35492C5.1158 1.87459 1.8512 2.10361 1.7525 2.11067C1.74938 2.1109 1.74865 2.11086 1.74553 2.11091C1.54877 2.11407 1.49898 2.44869 1.68669 2.5009C2.98873 2.86307 4.84749 3.49024 6.00502 4.36291C6.64232 4.84336 7.00756 5.22819 7.51626 5.73688C7.83604 6.05667 7.13082 6.70394 6.56293 7.14058C6.27917 7.35876 6.20623 7.75971 6.39943 8.03122M8.18946 9.83216L2.8021 15.2195C2.47839 15.5432 1.97213 15.6105 1.60516 15.3369C1.46424 15.2318 1.32499 15.1183 1.2164 15.0097C1.1078 14.9011 0.994378 14.7619 0.889279 14.621C0.615587 14.254 0.682904 13.7477 1.00661 13.424L6.39943 8.03122" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/assets/images/icons/info-2.svg

@@ -0,0 +1,12 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_13856_490518)">
+<path d="M7 -6.11959e-07C3.13401 -9.49935e-07 9.49935e-07 3.13401 6.11959e-07 7C2.73984e-07 10.866 3.13401 14 7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 -2.73984e-07 7 -6.11959e-07Z" fill="currentColor"/>
+<path d="M7.00391 9.72217L7.00391 7.38883" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.00391 4.27783L6.99391 4.27783" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_13856_490518">
+<rect width="14" height="14" fill="white" transform="translate(14 14) rotate(-180)"/>
+</clipPath>
+</defs>
+</svg>

package/assets/images/icons/stars.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.3112 1.14526L12.8087 5.19216L16.8556 6.68965L12.8087 8.18714L11.3112 12.234L9.8137 8.18714L5.76681 6.68965L9.8137 5.19216L11.3112 1.14526Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.38071 10.3859L5.68884 12.312L7.61493 13.6201L5.68884 14.9283L4.38071 16.8544L3.07258 14.9283L1.14648 13.6201L3.07258 12.312L4.38071 10.3859Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/components/ActionLogo.vue

@@ -1,18 +1,20 @@
 <script setup lang="ts">
-import RefreshSVG from '~/assets/images/icons/refresh.svg'
-import BridgeSVG from '~/assets/images/icons/bridge.svg'
-import CrossTransferSVG from '~/assets/images/icons/cross-transfer.svg'
-import TransferSVG from '~/assets/images/icons/transfer.svg'
-import PlusCircleSVG from '~/assets/images/icons/plus-circle.svg'
-import Trash2SVG from '~/assets/images/icons/trash-2.svg'
-import ChangeThresholdSVG from '~/assets/images/icons/change-threshold.svg'
-import DappSVG from '~/assets/images/icons/dapp.svg'
-import DeploySVG from '~/assets/images/icons/deploy.svg'
-import GasSVG from '~/assets/images/icons/gas.svg'
-import InstadappProSVG from '~/assets/images/icons/instadapp-pro.svg'
-import PermitSignSVG from '~/assets/images/icons/permit-sign.svg'
-import RejectProposalSVG from '~/assets/images/icons/reject-proposal.svg'
-import UpgradeSVG from '~/assets/images/icons/upgrade.svg'
+import BridgeSVG from '../assets/images/icons/bridge.svg'
+import ChangeThresholdSVG from '../assets/images/icons/change-threshold.svg'
+import CrossTransferSVG from '../assets/images/icons/cross-transfer.svg'
+import DappSVG from '../assets/images/icons/dapp.svg'
+import DeploySVG from '../assets/images/icons/deploy.svg'
+import GasSVG from '../assets/images/icons/gas.svg'
+import HammerSVG from '../assets/images/icons/hammer.svg'
+import InstadappProSVG from '../assets/images/icons/instadapp-pro.svg'
+import PermitSignSVG from '../assets/images/icons/permit-sign.svg'
+import PlusCircleSVG from '../assets/images/icons/plus-circle.svg'
+import RefreshSVG from '../assets/images/icons/refresh.svg'
+import RejectProposalSVG from '../assets/images/icons/reject-proposal.svg'
+import StarsSVG from '../assets/images/icons/stars.svg'
+import TransferSVG from '../assets/images/icons/transfer.svg'
+import Trash2SVG from '../assets/images/icons/trash-2.svg'
+import UpgradeSVG from '../assets/images/icons/upgrade.svg'
 
 defineProps<{
   action: MetadataTypes
@@ -21,18 +23,20 @@ defineProps<{
 </script>
 
 <template>
-    <RefreshSVG class="text-primary" v-if="action === 'swap'"/>
-    <BridgeSVG class="text-primary" v-else-if="action === 'bridge'"/>
-    <CrossTransferSVG class="text-primary" v-else-if="action === 'cross-transfer'"/>
-    <TransferSVG class="text-primary" v-else-if="action === 'transfer'"/>
-    <PlusCircleSVG class="text-primary" v-else-if="action === 'add-signers' || (action === 'auth' && !remove)"/>
-    <Trash2SVG class="text-[#EB5757]" v-else-if="action === 'remove-signers' || (action === 'auth' && remove)"/>
-    <RejectProposalSVG class="text-[#EB5757]" v-else-if="action === 'rejection'"/>
-    <ChangeThresholdSVG v-else-if="action === 'change-threshold'"/>
-    <DappSVG v-else-if="action === 'dapp'"/>
-    <DeploySVG v-else-if="action === 'deploy'"/>
-    <GasSVG v-else-if="action === 'gas-topup'"/>
-    <InstadappProSVG v-else-if="action === 'instadapp-pro'"/>
-    <PermitSignSVG v-else-if="action === 'permit2'"/>
-    <UpgradeSVG v-else-if="action === 'upgrade'"/>
-</template>
+  <RefreshSVG v-if="action === 'swap'" class="text-primary" />
+  <BridgeSVG v-else-if="action === 'bridge'" class="text-primary" />
+  <CrossTransferSVG v-else-if="action === 'cross-transfer'" class="text-primary" />
+  <TransferSVG v-else-if="action === 'transfer'" class="text-primary" />
+  <PlusCircleSVG v-else-if="action === 'add-signers' || (action === 'auth' && !remove)" class="text-primary" />
+  <Trash2SVG v-else-if="action === 'remove-signers' || (action === 'auth' && remove)" class="text-[#EB5757]" />
+  <RejectProposalSVG v-else-if="action === 'rejection'" class="text-[#EB5757]" />
+  <ChangeThresholdSVG v-else-if="action === 'change-threshold'" />
+  <DappSVG v-else-if="action === 'dapp'" />
+  <DeploySVG v-else-if="action === 'deploy'" />
+  <GasSVG v-else-if="action === 'gas-topup'" />
+  <InstadappProSVG v-else-if="action === 'instadapp-pro'" />
+  <PermitSignSVG v-else-if="action === 'permit2'" />
+  <UpgradeSVG v-else-if="action === 'upgrade'" />
+  <HammerSVG v-else-if="action === 'tx-builder'" />
+  <StarsSVG v-else-if="action === 'mass'" />
+</template>

package/components/ActionMetadata.vue

@@ -3,15 +3,14 @@ const props = defineProps<{
   metadata: {
     type: MetadataTypes
     [key: string]: any
-  };
-  chain_id: number | string;
-  compact?: boolean;
-  tokens?: ITokenPrice[];
-}>();
-
-provide('compact', props.compact);
-provide('tokens', props.tokens);
+  }
+  chain_id: number | string
+  compact?: boolean
+  tokens?: ITokenPrice[]
+}>()
 
+provide('compact', props.compact)
+provide('tokens', props.tokens)
 </script>
 
 <template>
@@ -20,15 +19,23 @@ provide('tokens', props.tokens);
     <MetadataCrossTransfer v-if="metadata.type === 'cross-transfer'" :metadata="metadata" :chain_id="chain_id" />
     <MetadataGasTopup v-if="metadata.type === 'gas-topup'" :metadata="metadata" :chain_id="chain_id" />
     <MetadataSwap v-if="metadata.type === 'swap'" :metadata="metadata" :chain_id="chain_id" />
-    <MetadataBridge v-if="metadata.type === 'bridge'" :metadata="metadata" :chain_id="chain_id" />
+    <MetadataBridge v-if="metadata.type === 'bridge' || metadata.type === 'bridge-v2'" :metadata="metadata" :chain_id="chain_id" />
     <MetadataPermit2 v-if="metadata.type === 'permit2'" :metadata="metadata" :chain_id="chain_id" />
 
+    <div v-if="metadata.type === 'mass'">
+      Chain Agnostic Payments
+    </div>
+
+    <div v-if="metadata.type === 'import'" class="text-left w-fit capitalize">
+      Import from {{ metadata.protocol }} ({{ (formatUsd(fromWei(metadata.valueInUsd, 10))) }})
+    </div>
+
     <div v-if="metadata.type === 'upgrade'" class="self-start">
       Wallet upgraded to {{ metadata?.version }}
     </div>
     <div v-if="metadata.type === 'dapp'" class="self-start flex items-center gap-2 text-primary">
       <a :href="metadata?.url" target="_blank" rel="noopener noreferrer">{{
-        metadata?.name
+        metadata?.name || metadata?.url
       }}</a>
       <SvgoExternalLink />
     </div>
@@ -37,36 +44,45 @@ provide('tokens', props.tokens);
     </div>
     <div v-if="metadata.type === 'auth'" class="self-start capitalize flex gap-3">
       Authority {{ metadata.remove ? 'Removed' : 'Added' }}:
-       <a
-          class="text-primary break-all"
-          :href="getExplorerUrl(metadata.chainId, `/address/${metadata.address}`)"
-          target="_blank"
-          >
-          {{ shortenHash(metadata.address) }}
-        </a>
-        <div class="flex gap-3">
-           <ChainLogo class="w-5 h-5" :chain="metadata.chainId"/>
-            {{ chainIdToName(metadata.chainId) }}
-        </div>
+      <a
+        class="text-primary break-all" :href="getExplorerUrl(metadata.chainId, `/address/${metadata.address}`)"
+        target="_blank"
+      >
+        {{ shortenHash(metadata.address) }}
+      </a>
+      <div class="flex gap-3">
+        <ChainLogo class="w-5 h-5" :chain="metadata.chainId" />
+        {{ chainIdToName(metadata.chainId) }}
+      </div>
+    </div>
+    <div v-if="metadata.type === 'tx-builder'" class="self-start capitalize flex gap-3">
+      <span v-if="!compact">
+        Transaction Builder
+      </span> ({{ metadata?.actionCount }} {{ toBN(metadata?.actionCount).lt(2) ? 'action' : 'actions' }})
     </div>
     <div v-if="metadata.type === 'instadapp-pro'" class="self-start capitalize flex gap-3">
       Instadapp Pro |
       {{ metadata?.castDetails }}
     </div>
 
-    <MetadataSigners v-if="metadata.type === 'add-signers' || metadata.type === 'remove-signers'" :metadata="metadata" :compact="compact" />
+    <MetadataSigners
+      v-if="metadata.type === 'add-signers' || metadata.type === 'remove-signers'"
+      :chain_id="chain_id" :metadata="metadata"
+      :compact="compact"
+    />
 
-     <div v-if="metadata.type === 'change-threshold'" class="text-left w-fit" >
-     Change Threshold to {{ metadata.count }}
+    <div v-if="metadata.type === 'change-threshold'" class="text-left w-fit">
+      Change Threshold to {{ metadata.count }}
     </div>
 
-    <div v-tippy="{
+    <div
+      v-if="metadata.type === 'rejection'" v-tippy="{
         content: metadata.id,
         maxWidth: 'none',
         interactive: true,
-      }" 
-      v-if="metadata.type === 'rejection'" class="text-left w-fit">
-     {{ shortenHash(metadata.id) }}
+      }" class="text-left w-fit"
+    >
+      {{ shortenHash(metadata.id) }}
     </div>
   </div>
-</template>
+</template>

package/components/Address.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import type { Address } from 'viem'
+
+const props = defineProps<{
+  address: Address | string
+  hideContact?: boolean
+  hideCopy?: boolean
+  showFull?: boolean
+  to?: string
+}>()
+
+const nuxtApp = useNuxtApp()
+
+console.log()
+
+// @ts-expect-error
+const contacts = computed(() => nuxtApp.$contacts?.value)
+
+const contactName = computed(() => {
+  if (!contacts?.value)
+    return null
+
+  return contacts.value.find(
+    // @ts-expect-error
+    contract => contract.address?.toLowerCase() === props.address.toLowerCase(),
+  )?.name
+})
+
+function onMouseEnter() {
+  const elements = document.querySelectorAll(`[data-highlight-target="${props.address}"]`)
+
+  elements.forEach((element) => {
+    element.classList.add('address-active')
+  })
+}
+
+function onMouseLeave() {
+  const elements = document.querySelectorAll(`[data-highlight-target="${props.address}"]`)
+
+  elements.forEach((element) => {
+    element.classList.remove('address-active')
+  })
+}
+
+const NuxtLink = resolveComponent('NuxtLink')
+</script>
+
+<template>
+  <div class="flex items-center leading-[1.3339em]">
+    <Component
+      :is="props.to ? NuxtLink : 'span'"
+      v-tippy="{ content: showFull ? undefined : address, maxWidth: 'none', placement: 'bottom' }"
+      :external="props.to ? true : undefined"
+      :target="props.to ? '_blank' : undefined"
+      :to="props.to ? props.to : undefined"
+      :class="props.to ? 'text-primary' : ''"
+      class="px-1 border border-dashed border-opacity-0 -ml-1 border-yellow-500" :data-highlight-target="address"
+      @mouseenter="onMouseEnter" @mouseleave="onMouseLeave"
+    >
+      {{ showFull ? address : shortenHash(address) }}
+    </Component>
+    <span v-if="contactName && !hideContact" class="leading-[inherit]">
+      ({{ contactName }})
+    </span>
+    <CopyClipboard v-if="!hideCopy" class="ml-1.5" :text="address" />
+  </div>
+</template>
+
+<style>
+.address-active {
+    @apply border-opacity-100 bg-yellow-500/10;
+    border-radius: 0.375rem;
+}
+</style>

package/components/AuthorityAvatar.vue

@@ -1,9 +1,22 @@
 <script setup lang="ts">
+// @ts-expect-error
+import * as XXH from 'xxhashjs'
+
 defineProps<{
   address: string
-}>();
+}>()
+
+const randomId = Math.random().toString(36).substr(2, 9)
+
+function generateColor(address: string): string {
+  const hash = XXH.h32(address, 0xABCD).toNumber()
+
+  const hue = hash % 360
+  const saturation = 80 + (hash % 30)
+  const lightness = 70 + (hash % 20)
 
-const randomId = Math.random().toString(36).substr(2, 9);
+  return `hsl(${hue}, ${saturation}%, ${lightness}%)`
+}
 </script>
 
 <template>

package/components/ChainLogo.vue

@@ -1,228 +1,26 @@
-<template>
-  <svg v-if="chain == 137" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-    <rect width="22" height="22" x="1" y="1" :fill="generateID('polygon', true)" rx="11" />
-    <path fill="#fff"
-      d="M15.086 9.927a.791.791 0 0 0-.752 0L12.58 10.97l-1.191.665-1.723 1.045a.791.791 0 0 1-.752 0l-1.347-.823a.773.773 0 0 1-.376-.665V9.61c0-.253.125-.506.376-.664l1.347-.792a.791.791 0 0 1 .752 0l1.347.823c.22.127.376.38.376.665v1.045l1.19-.697V8.914a.782.782 0 0 0-.375-.665L9.697 6.762a.791.791 0 0 0-.752 0L6.376 8.28A.697.697 0 0 0 6 8.914v2.975c0 .254.125.507.376.665l2.538 1.488c.22.126.501.126.752 0l1.723-1.013 1.19-.697 1.724-1.012a.791.791 0 0 1 .752 0l1.347.79c.22.128.376.38.376.666v1.582a.782.782 0 0 1-.376.665l-1.316.791a.791.791 0 0 1-.752 0l-1.347-.791a.773.773 0 0 1-.376-.665v-1.013l-1.19.697v1.044c0 .253.125.507.375.665l2.538 1.487c.22.127.502.127.752 0l2.538-1.487a.773.773 0 0 0 .376-.665V12.08a.782.782 0 0 0-.376-.665l-2.538-1.487Z" />
-    <rect v-if="stroke" :class="strokeClass" width="22" height="22" x="1" y="1" rx="11" />
-    <defs>
-      <linearGradient :id="generateID('polygon')" x1="12" x2="12" y1="2" y2="22" gradientUnits="userSpaceOnUse">
-        <stop stop-color="#A177FA" />
-        <stop offset="1" stop-color="#7A4ADD" />
-      </linearGradient>
-    </defs>
-  </svg>
-  <svg v-else-if="chain == 42161" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-    <rect width="22" height="22" x="1" y="1" :fill="generateID('arb', true)" rx="11" />
-    <path fill="#28A0F0"
-      d="m12.031 13.969 1.704 2.673 1.574-.912-2.238-3.526-1.04 1.765ZM16.743 14.658v-.73l-2.445-3.808-.907 1.539 2.36 3.817.853-.495a.378.378 0 0 0 .14-.275v-.048Z" />
-    <path fill="#fff"
-      d="m6.5 15.347 1.205.694 4.01-6.43-.68-.018c-.58-.008-1.205.142-1.492.61l-2.277 3.53L6.5 14.91v.437ZM14.023 9.61l-1.793.007-4.058 6.696 1.418.817.386-.654 4.047-6.865Z" />
-    <path fill="#96BEDC"
-      d="M17.5 9.602a1.143 1.143 0 0 0-.536-.919l-4.46-2.564a1.16 1.16 0 0 0-1.022 0c-.037.019-4.336 2.512-4.336 2.512a1.146 1.146 0 0 0-.646.968v5.31l.766-1.176-.007-4.098a.377.377 0 0 1 .158-.285 2599 2599 0 0 1 4.406-2.552.388.388 0 0 1 .337-.002l4.401 2.532c.104.066.17.179.175.302v5.076a.37.37 0 0 1-.131.275l-.854.494-.44.255-1.574.912-1.595.925a.387.387 0 0 1-.272-.005l-1.888-1.086-.386.654 1.697.977a43.674 43.674 0 0 0 .27.15c.12.059.293.093.45.093.143 0 .283-.026.415-.078l4.635-2.685c.266-.206.423-.517.437-.854V9.602Z" />
-    <rect v-if="stroke" :class="strokeClass" width="22" height="22" x="1" y="1" rx="11" />
-    <defs>
-      <linearGradient :id="generateID('arb')" x1="12" x2="12" y1="2" y2="22" gradientUnits="userSpaceOnUse">
-        <stop stop-color="#495775" />
-        <stop offset="1" stop-color="#2D374B" />
-      </linearGradient>
-    </defs>
-  </svg>
-
-  <svg v-else-if="chain == 43114" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-    <rect width="22" height="22" x="1" y="1" :fill="generateID('avax', true)" rx="11" />
-    <path fill="#fff" fill-rule="evenodd"
-      d="M12.447 6.96c-.259-.447-.67-.447-.93 0l-4.696 8.27c-.258.453-.047.812.47.812H9.65c.476-.03.905-.283 1.164-.682l2.839-4.92a1.545 1.545 0 0 0 0-1.346l-.847-1.487-.358-.647Zm3.121 5.443c-.259-.447-.676-.447-.934 0l-1.64 2.827c-.253.447-.042.811.47.811h3.244c.518 0 .73-.364.47-.81l-1.61-2.828Z"
-      clip-rule="evenodd" />
-    <rect v-if="stroke" :class="strokeClass" width="22" height="22" x="1" y="1" rx="11" />
-    <defs>
-      <linearGradient :id="generateID('avax')" x1="12" x2="12" y1="2" y2="22" gradientUnits="userSpaceOnUse">
-        <stop stop-color="#FF8585" />
-        <stop offset="1" stop-color="#EB5757" />
-      </linearGradient>
-    </defs>
-  </svg>
-
-  <svg v-else-if="chain == 1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-    <rect width="22" height="22" x="1" y="1" :fill="generateID('eth', true)" rx="11" />
-    <path fill="#fff" d="M8 12.111 11.998 6v.003L12 6l3.998 6.11.002.001-3.998 2.177h-.002L8 12.111Z" />
-    <path fill="#fff" d="M11.998 17.997V18L8 12.81l3.998 2.176H12L16 12.81 12 18l-.002-.003Z" />
-    <rect v-if="stroke" :class="strokeClass" width="22" height="22" x="1" y="1" rx="11" />
-    <defs>
-      <linearGradient :id="generateID('eth')" x1="12" x2="12" y1="2" y2="22" gradientUnits="userSpaceOnUse">
-        <stop stop-color="#8E90FF" />
-        <stop offset="1" stop-color="#5D5FEF" />
-      </linearGradient>
-    </defs>
-  </svg>
-
-  <svg v-else-if="chain == 10" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-    <rect width="22" height="22" x="1" y="1" :fill="generateID('opt', true)" rx="11" />
-    <path fill="#fff"
-      d="M9.084 14.656c-.596 0-1.084-.14-1.464-.42-.376-.284-.564-.692-.564-1.216 0-.112.012-.244.036-.404a24.3 24.3 0 0 1 .276-1.3c.34-1.376 1.22-2.064 2.636-2.064.384 0 .732.064 1.036.196a1.532 1.532 0 0 1 .984 1.472c0 .104-.012.236-.036.396-.076.444-.164.88-.272 1.3-.176.684-.476 1.2-.908 1.54-.428.336-1.004.5-1.724.5Zm.108-1.08c.28 0 .516-.084.712-.248.2-.164.344-.416.428-.76.116-.472.204-.88.264-1.232.02-.104.032-.212.032-.324 0-.456-.236-.684-.712-.684a1.1 1.1 0 0 0-.72.248c-.196.164-.336.416-.42.76-.092.336-.18.744-.272 1.232-.02.1-.032.204-.032.316-.004.464.24.692.72.692ZM12.372 14.584c-.056 0-.096-.016-.128-.052-.024-.04-.032-.084-.024-.136l1.036-4.88a.2.2 0 0 1 .084-.136.22.22 0 0 1 .144-.052h1.996c.556 0 1 .116 1.336.344.34.232.512.564.512 1 0 .124-.016.256-.044.392-.124.576-.376 1-.76 1.276-.376.276-.892.412-1.548.412h-1.012l-.344 1.644a.215.215 0 0 1-.084.136.22.22 0 0 1-.144.052h-1.02Zm2.656-2.868a.886.886 0 0 0 .548-.172.822.822 0 0 0 .316-.496c.016-.084.024-.16.024-.224 0-.144-.044-.256-.128-.332-.084-.08-.232-.12-.436-.12h-.9l-.284 1.344h.86Z" />
-    <rect v-if="stroke" :class="strokeClass" width="22" height="22" x="1" y="1" rx="11" />
-    <defs>
-      <linearGradient :id="generateID('opt')" x1="12" x2="12" y1="2" y2="22" gradientUnits="userSpaceOnUse">
-        <stop stop-color="#FF697A" />
-        <stop offset="1" stop-color="#FF0420" />
-      </linearGradient>
-    </defs>
-  </svg>
-
-  <svg v-else-if="chain == 100" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-    <rect width="22" height="22" x="1" y="1" :fill="generateID('gnosis', true)" rx="11" />
-    <g fill="#fff" clip-path="url(#clip0_1_911)">
-      <path
-        d="M9.527 12.833c.345 0 .681-.115.953-.325L8.293 10.32c-.527.68-.4 1.662.28 2.19.276.207.61.322.954.322ZM16.032 11.271c0-.345-.115-.681-.325-.953l-2.187 2.187a1.559 1.559 0 0 0 2.512-1.234Z" />
-      <path
-        d="m17.134 8.89-.968.968a2.204 2.204 0 0 1-3.103 3.104L12 14.024l-1.06-1.06a2.204 2.204 0 0 1-3.104-3.103l-.496-.497-.47-.473A6 6 0 1 0 18 12a5.985 5.985 0 0 0-.866-3.11Z" />
-      <path
-        d="M16.34 7.859a5.997 5.997 0 0 0-9.1.49L12 13.114l4.76-4.763a5.804 5.804 0 0 0-.42-.491ZM12 6.785c1.402 0 2.708.541 3.69 1.528L12 12.003l-3.69-3.69A5.157 5.157 0 0 1 12 6.785Z" />
-    </g>
-    <rect v-if="stroke" :class="strokeClass" width="22" height="22" x="1" y="1" rx="11" />
-    <defs>
-      <linearGradient :id="generateID('gnosis')" x1="12" x2="12" y1="2" y2="22" gradientUnits="userSpaceOnUse">
-        <stop stop-color="#2BA889" />
-        <stop offset="1" stop-color="#04795C" />
-      </linearGradient>
-      <clipPath id="clip0_1_911">
-        <path fill="#fff" d="M6 6h12v12H6z" />
-      </clipPath>
-    </defs>
-  </svg>
-
-  <svg v-else-if="chain == 56" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-    <rect width="22" height="22" x="1" y="1" :fill="generateID('bsc', true)" rx="11" />
-    <path fill="#fff"
-      d="M13.13 15.965v1.346L11.983 18l-1.113-.69v-1.345l1.113.69 1.145-.69ZM7 11.31l1.113.69v2.308l1.916 1.173v1.346L7 14.997V11.31Zm9.967 0v3.693l-3.061 1.83v-1.346l1.916-1.174v-2.307l1.145-.696ZM13.9 9.481l1.146.69v1.345l-1.917 1.174v2.34l-1.113.69-1.107-.69v-2.346l-1.987-1.173v-1.346l1.145-.69 1.917 1.174L13.9 9.48Zm-4.978 2.997 1.113.69v1.345l-1.113-.69v-1.345Zm6.124 0v1.346l-1.113.69v-1.346l1.113-.69Zm-6.933-4.17 1.145.69-1.145.689v1.345L7 10.342V8.998l1.113-.69Zm7.742 0 1.145.69v1.345l-1.146.69V9.686l-1.112-.69 1.112-.69Zm-3.871 0 1.145.69-1.145.689-1.113-.69 1.113-.69Zm0-2.308 3.062 1.83-1.113.689-1.917-1.173-1.954 1.173-1.113-.69L11.984 6Z" />
-    <rect v-if="stroke" :class="strokeClass" width="22" height="22" x="1" y="1" rx="11" />
-    <defs>
-      <linearGradient :id="generateID('bsc')" x1="12" x2="12" y1="2" y2="22" gradientUnits="userSpaceOnUse">
-        <stop stop-color="#FFD97C" />
-        <stop offset="1" stop-color="#F3BA2F" />
-      </linearGradient>
-    </defs>
-  </svg>
-  <svg v-else-if="chain == 1101" width="24" height="24" viewBox="0 0 24 24" fill="none"
-    xmlns="http://www.w3.org/2000/svg">
-    <rect x="1" y="1" width="22" height="22" rx="11" :fill="generateID('zkevm', true)" />
-    <g clip-path="url(#clip0_0_68)">
-      <path
-        d="M16.4587 8.44406L12.8483 6.35851C12.5897 6.21032 12.2968 6.13235 11.9988 6.13235C11.7007 6.13235 11.4079 6.21032 11.1493 6.35851L7.53885 8.44406C7.28051 8.59322 7.06599 8.80775 6.91687 9.06611C6.76774 9.32446 6.68927 9.61753 6.68934 9.91583V14.0954C6.6915 14.3916 6.77102 14.682 6.92004 14.9379C7.06905 15.1939 7.28237 15.4064 7.53885 15.5545L11.1493 17.64C11.4076 17.7891 11.7005 17.8676 11.9988 17.8676C12.297 17.8676 12.59 17.7891 12.8483 17.64L16.4587 15.5545C16.7171 15.4053 16.9316 15.1908 17.0807 14.9324C17.2298 14.6741 17.3083 14.381 17.3082 14.0827V9.90309C17.3061 9.60696 17.2265 9.31652 17.0775 9.06058C16.9285 8.80467 16.7152 8.59213 16.4587 8.44406ZM7.53885 9.91583C7.53864 9.7665 7.57778 9.61975 7.65234 9.49037C7.72693 9.36098 7.83428 9.25356 7.9636 9.1789L11.574 7.09546C11.703 7.02038 11.8496 6.98082 11.9988 6.98082C12.148 6.98082 12.2946 7.02038 12.4235 7.09546L16.034 9.1789C16.1614 9.25247 16.2676 9.3579 16.3421 9.48485C16.4165 9.6118 16.4567 9.75594 16.4587 9.90309V10.3278C16.4576 10.6585 16.3256 10.9753 16.0916 11.2089C15.8576 11.4425 15.5406 11.5739 15.2099 11.5745H8.78763C8.33748 11.5734 7.89916 11.7188 7.53885 11.9886V9.91583ZM16.4587 14.0827C16.4589 14.232 16.4198 14.3788 16.3452 14.5082C16.2706 14.6375 16.1633 14.745 16.034 14.8196L12.4235 16.9031C12.2944 16.9776 12.1479 17.0169 11.9988 17.0169C11.8497 17.0169 11.7032 16.9776 11.574 16.9031L7.9636 14.8196C7.83613 14.7461 7.72997 14.6406 7.65551 14.5137C7.58105 14.3867 7.54084 14.2426 7.53885 14.0954V13.6707C7.53998 13.34 7.67196 13.0233 7.90597 12.7896C8.13999 12.556 8.45697 12.4246 8.78763 12.424H15.2099C15.6601 12.4251 16.0984 12.2797 16.4587 12.0099V14.0827Z"
-        fill="white" />
-      <path
-        d="M10.026 9.70346H10.85V10.9374H11.6995V9.70346C11.6995 9.47816 11.61 9.26208 11.4507 9.10276C11.2914 8.94345 11.0753 8.85395 10.85 8.85395H10.026C9.80068 8.85395 9.58461 8.94345 9.42528 9.10276C9.26597 9.26208 9.17647 9.47816 9.17647 9.70346V10.9374H10.026V9.70346Z"
-        fill="white" />
-      <path
-        d="M10.85 14.295H10.026V13.0611H9.17647V14.295C9.17647 14.5203 9.26597 14.7364 9.42528 14.8957C9.58461 15.055 9.80068 15.1445 10.026 15.1445H10.85C11.0753 15.1445 11.2914 15.055 11.4507 14.8957C11.61 14.7364 11.6995 14.5203 11.6995 14.295V13.0611H10.85V14.295Z"
-        fill="white" />
-      <path
-        d="M13.3707 9.70346H14.1968V10.9374H15.0463V9.70346C15.0463 9.47816 14.9568 9.26208 14.7975 9.10276C14.6382 8.94345 14.4221 8.85395 14.1968 8.85395H13.3707C13.1454 8.85395 12.9293 8.94345 12.77 9.10276C12.6106 9.26208 12.5211 9.47816 12.5211 9.70346V10.9374H13.3707V9.70346Z"
-        fill="white" />
-      <path
-        d="M14.1968 14.295H13.3707V13.0611H12.5211V14.295C12.5211 14.5203 12.6106 14.7364 12.77 14.8957C12.9293 15.055 13.1454 15.1445 13.3707 15.1445H14.1968C14.4221 15.1445 14.6382 15.055 14.7975 14.8957C14.9568 14.7364 15.0463 14.5203 15.0463 14.295V13.0611H14.1968V14.295Z"
-        fill="white" />
-    </g>
-    <rect x="1" y="1" width="22" height="22" rx="11" v-if="stroke" :class="strokeClass" />
-    <defs>
-      <linearGradient :id="generateID('zkevm')" x1="12" y1="2" x2="12" y2="22" gradientUnits="userSpaceOnUse">
-        <stop stop-color="#A177FA" />
-        <stop offset="1" stop-color="#7A4ADD" />
-      </linearGradient>
-      <clipPath id="clip0_0_68">
-        <rect width="12" height="12" fill="white" transform="translate(6 6)" />
-      </clipPath>
-    </defs>
-  </svg>
-
-  <svg v-else-if="chain == 1313161554" width="24" height="24" viewBox="0 0 24 24" fill="none"
-    xmlns="http://www.w3.org/2000/svg">
-    <rect x="1" y="1" width="22" height="22" rx="11" :fill="generateID('aurora', true)" />
-    <path
-      d="M11.9961 7.26624C12.4182 7.26624 12.8014 7.505 12.9902 7.88257L16.1114 14.1291C16.3835 14.6788 16.1614 15.3451 15.6116 15.6172C15.4561 15.6949 15.2894 15.7338 15.1173 15.7338H8.87486C8.26395 15.7338 7.76411 15.234 7.76411 14.6233C7.76411 14.4511 7.80299 14.279 7.88074 14.1291L11.0019 7.88257C11.1908 7.49944 11.574 7.26069 11.9961 7.26624ZM11.9961 6.5C11.2852 6.5 10.6354 6.89978 10.3188 7.53831L7.19763 13.7848C6.73667 14.7121 7.10877 15.8337 8.03624 16.3001C8.29727 16.4278 8.58607 16.5 8.87486 16.5H15.1228C16.1558 16.5 17 15.6616 17 14.6288C17 14.3401 16.9334 14.0514 16.8001 13.7904L13.6733 7.53831C13.3567 6.89978 12.707 6.5 11.9961 6.5Z"
-      fill="white" />
-    <rect x="1" y="1" width="22" height="22" rx="11" stroke-width="2" v-if="stroke" :class="strokeClass" />
-    <defs>
-      <linearGradient :id="generateID('aurora')" x1="12" y1="2" x2="12" y2="22" gradientUnits="userSpaceOnUse">
-        <stop stop-color="#8EEF6B" />
-        <stop offset="1" stop-color="#70D44B" />
-      </linearGradient>
-    </defs>
-  </svg>
-
-  <svg v-else-if="chain == 250" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <rect x="1" y="1" width="22" height="22" rx="11" :fill="generateID('fantom', true)" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-      d="M12.75 10.0625L15 8.75V11.375L12.75 10.0625ZM15 15.6875L12 17.4375L9 15.6875V12.625L12 14.375L15 12.625V15.6875ZM9 8.75L11.25 10.0625L9 11.375V8.75ZM12.375 10.6875L14.625 12L12.375 13.3125V10.6875ZM11.625 13.3125L9.375 12L11.625 10.6875V13.3125ZM14.625 8.125L12 9.625L9.375 8.125L12 6.5625L14.625 8.125ZM8.25 7.875V16.0625L12 18.1875L15.75 16.0625V7.875L12 5.75L8.25 7.875Z"
-      fill="white" />
-    <rect x="1" y="1" width="22" height="22" rx="11" stroke-width="2" v-if="stroke" :class="strokeClass" />
-    <defs>
-      <linearGradient :id="generateID('fantom')" x1="12" y1="2" x2="12" y2="22" gradientUnits="userSpaceOnUse">
-        <stop stop-color="#51D3FF" />
-        <stop offset="1" stop-color="#13B5EC" />
-      </linearGradient>
-    </defs>
-  </svg>
+<script lang="ts" setup>
+const props = defineProps<{
+  chain?: ChainId | number | string
+  stroke?: boolean
+}>()
 
-  <svg v-else-if="chain == 634 || chain == 63400" width="24" height="24" viewBox="0 0 24 24" fill="none"
-    xmlns="http://www.w3.org/2000/svg">
-    <rect x="1" y="1" width="22" height="22" rx="11" :fill="generateID('avo', true)" />
-    <path
-      d="M11.9999 17.4052C11.9999 17.7497 12.2787 18.0322 12.6197 17.997C15.6422 17.6854 18 15.1194 18 12C18 8.88061 15.6422 6.31462 12.6197 6.00299C12.2787 5.96765 11.9999 6.25038 11.9999 6.59486V8.25799C11.9999 8.60246 12.2806 8.87521 12.6167 8.94319C14.0353 9.2307 15.1035 10.4899 15.1035 12C15.1035 13.5101 14.0353 14.7693 12.6167 15.0569C12.2806 15.1248 11.9999 15.3978 11.9999 15.7421V17.4052ZM10.1378 7.12664C10.1378 6.70254 9.7247 6.4036 9.34642 6.59132C7.36369 7.57527 6 9.62756 6 12C6 14.3725 7.36369 16.4248 9.34642 17.4087C9.7247 17.5964 10.1378 17.2975 10.1378 16.8734V7.12685V7.12664Z"
-      fill="white" />
-    <rect x="1" y="1" width="22" height="22" rx="11" stroke="black" stroke-width="2" v-if="stroke" :class="strokeClass" />
-    <defs>
-      <linearGradient :id="generateID('avo')" x1="12" y1="2" x2="12" y2="22" gradientUnits="userSpaceOnUse">
-        <stop stop-color="#6ED578" />
-        <stop offset="1" stop-color="#4CA054" />
-      </linearGradient>
-    </defs>
-  </svg>
+const isNetworkNotAvailable = computed(() => !networks.some(network => String(network.chainId) === String(props.chain)))
+</script>
 
-  <svg v-else-if="chain == 8453" width="24" height="24" viewBox="0 0 24 24" fill="none"
-    xmlns="http://www.w3.org/2000/svg">
-    <rect x="1" y="1" width="22" height="22" rx="11" :fill="generateID('base', true)" />
+<template>
+  <svg v-if="isNetworkNotAvailable" v-bind="$attrs" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+    <rect width="20" height="20" fill="#334155" rx="10" />
     <path
-      d="M11.9896 18C15.3091 18 18 15.3137 18 12C18 8.68628 15.3091 6 11.9896 6C8.84021 6 6.2566 8.41794 6 11.4956H13.9445V12.5043H6C6.2566 15.582 8.84021 18 11.9896 18Z"
-      fill="white" />
-    <rect v-if="stroke" :class="strokeClass" x="1" y="1" width="22" height="22" rx="11" stroke="#111827"
-      stroke-width="2" />
-    <defs>
-      <linearGradient :id="generateID('base')" x1="12" y1="2" x2="12" y2="22" gradientUnits="userSpaceOnUse">
-        <stop stop-color="#427FFF" />
-        <stop offset="1" stop-color="#0052FF" />
-      </linearGradient>
-    </defs>
-  </svg>
-
-
-  <template v-else>
-    <svg v-bind="$attrs" class="dark:hidden block" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
-      <rect width="20" height="20" fill="#CBD5E1" rx="10" />
-      <path fill="#fff" fill-rule="evenodd"
-        d="M10 3.999A6 6 0 1 0 10 16a6 6 0 0 0 0-12.001Zm0 10.8a4.8 4.8 0 1 1 0-9.6 4.8 4.8 0 0 1 0 9.6ZM6.399 9.67A3.6 3.6 0 0 1 9.68 6.4a.3.3 0 0 1 .318.318v.6a.294.294 0 0 1-.264.282A2.4 2.4 0 0 0 7.6 9.735a.294.294 0 0 1-.3.264h-.6a.312.312 0 0 1-.222-.096.336.336 0 0 1-.078-.234Z"
-        clip-rule="evenodd" />
-    </svg>
-    <svg v-bind="$attrs" class="dark:block hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
-      <rect width="20" height="20" fill="#334155" rx="10" />
-      <path fill="#97A2B7" fill-rule="evenodd"
-        d="M10 3.999A6 6 0 1 0 10 16a6 6 0 0 0 0-12.001Zm0 10.8a4.8 4.8 0 1 1 0-9.6 4.8 4.8 0 0 1 0 9.6ZM6.399 9.67A3.6 3.6 0 0 1 9.68 6.4a.3.3 0 0 1 .318.318v.6a.294.294 0 0 1-.264.282A2.4 2.4 0 0 0 7.6 9.735a.294.294 0 0 1-.3.264h-.6a.312.312 0 0 1-.222-.096.336.336 0 0 1-.078-.234Z"
-        clip-rule="evenodd" />
-    </svg>
-  </template>
+      fill="#97A2B7" fill-rule="evenodd"
+      d="M10 3.999A6 6 0 1 0 10 16a6 6 0 0 0 0-12.001Zm0 10.8a4.8 4.8 0 1 1 0-9.6 4.8 4.8 0 0 1 0 9.6ZM6.399 9.67A3.6 3.6 0 0 1 9.68 6.4a.3.3 0 0 1 .318.318v.6a.294.294 0 0 1-.264.282A2.4 2.4 0 0 0 7.6 9.735a.294.294 0 0 1-.3.264h-.6a.312.312 0 0 1-.222-.096.336.336 0 0 1-.078-.234Z"
+      clip-rule="evenodd"
+    />
+  </svg>
+  <span
+    v-else-if="stroke"
+    class="outline stroke-color outline-[#161E2D]  outline-2 shrink-0 outline outline-offset-[-1.5px] rounded-full"
+  >
+    <img class="w-full h-full" :src="`https://cdn.instadapp.io/avocado/networks/${chain}.svg`">
+  </span>
+  <img v-else :src="`https://cdn.instadapp.io/avocado/networks/${chain}.svg`">
 </template>
-
-<script lang="ts" setup>
-defineProps<{
-  chain: ChainId | number | string;
-  stroke?: boolean;
-}>();
-
-const randomId = Math.random().toString(36).substr(2, 9);
-
-const generateID = (prefix: string, wrapURL = false) => {
-  const merged = `${prefix}-${randomId}`;
-  return wrapURL ? `url(#${merged})` : merged;
-};
-
-const strokeClass = "dark:stroke-gray-900 stroke-slate-50 stroke-2";
-</script>