@instadapp/avocado-base 0.0.0-dev.aceef3f → 0.0.0-dev.b0ffe91

package/components/ChainLogo.vue

@@ -1,431 +1,29 @@
 <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>
-
-  <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"
-    >
+  <template v-if="isNetworkNotAvailable">
+    <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"
+      <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"
-      />
+        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"
-    >
+    <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"
+      <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"
-      />
+        clip-rule="evenodd" />
     </svg>
   </template>
+  <span v-else-if="stroke" class="outline stroke-color dark:outline-[#161E2D] outline-[#F8FAFC]  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;
+const props = 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";
+const isNetworkNotAvailable = computed(() => !networks.some((network) => String(network.chainId) === String(props.chain)))
 </script>

package/components/CopyClipboard.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import CopySVG from '~/assets/images/icons/copy.svg'
+import CheckCircle from '~/assets/images/icons/check-circle.svg'
+
+defineProps<{
+  text: string
+  iconOnly?: boolean
+  successText?: string
+}>()
+const { copy, copied } = useClipboard()
+const slots = useSlots()
+</script>
+
+<template>
+  <button
+    class="text-slate-400 font-semibold inline-flex items-center gap-2.5"
+    @click.stop="copy(text)"
+  >
+    <Transition mode="out-in" name="slide-left">
+      <span v-if="copied && !iconOnly"> {{ successText || 'Copied' }}  </span>
+      <span v-else-if="slots.content">
+        <slot name="content" />
+      </span>
+    </Transition>
+
+    <Transition mode="out-in" name="slide">
+      <CheckCircle
+        v-if="copied"
+        class="w-4 h-4 shrink-0 dark:text-slate-900 text-white svg-circle"
+      />
+      <slot v-else-if="slots.copy" name="copy" />
+      <slot v-else name="copy-icon">
+        <CopySVG />
+      </slot>
+    </Transition>
+  </button>
+</template>
+
+<style scoped>
+.slide-left-enter-active,
+.slide-left-leave-active {
+  transition: all 0.1s ease-out;
+}
+
+.slide-left-enter-from {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+.slide-left-leave-to {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.slide-enter-active,
+.slide-leave-active {
+  transition: opacity 0.1s ease;
+}
+
+.slide-enter-from,
+.slide-leave-to {
+  opacity: 0;
+}
+</style>

package/components/metadata/Bridge.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+
+const props = defineProps<{
+  metadata: any;
+  chain_id: number | string
+}>();
+
+const compact = inject('compact');
+const tokens = inject<ITokenPrice[]>('tokens');
+
+const toToken = asyncComputed(() =>
+{
+   if (Array.isArray(tokens) && !tokens.length) return null;
+    return  fetchTokenByAddress(props.metadata?.toToken, props.metadata?.toChainId, tokens)
+  }
+);
+
+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, fromToken?.value?.decimals).toFixed()
+  )
+);
+</script>
+
+<template>
+  <div v-if="!toToken || !fromToken" class="rounded-5 w-24 h-4 loading-box" />
+  <div
+    class="flex gap-5 items-center"
+    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="fromToken.logo_url" />
+      {{ bridgeAmountFormatted }}
+      <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>
+    </span>
+  </div>
+</template>

package/components/metadata/CrossTransfer.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+
+const props = defineProps<{
+  metadata: any;
+  chain_id: number | string
+}>();
+
+const compact = inject('compact');
+const tokens = inject<ITokenPrice[]>('tokens');
+
+const fromToken = asyncComputed(() => {
+  if (!props?.chain_id) return null;
+
+  if (Array.isArray(tokens) && !tokens.length) return null;
+
+  return fetchTokenByAddress(
+    props.metadata?.fromToken,
+    props?.chain_id,
+    tokens
+  );
+});
+
+const toToken = asyncComputed(() => {
+  if (!props?.metadata?.toChainId) return null;
+
+  if (Array.isArray(tokens) && !tokens.length) return null;
+
+  return fetchTokenByAddress(props.metadata?.toToken, props?.metadata?.toChainId, tokens);
+});
+
+const formattedToAmount = computed(() =>
+  formatDecimal(
+    fromWei(props.metadata?.amount, toToken?.value?.decimals).toFixed()
+  )
+);
+</script>
+
+<template>
+  <div class="h-[60px]" v-if="!fromToken">
+    <div class="rounded-5 w-24 h-4 loading-box" />
+  </div>
+  <div class="flex gap-5 flex-col" v-else>
+    <div class="flex items-center gap-5">
+      <span v-if="!compact" class="capitalize text-xs sm:text-sm">Cross-chain send</span>
+      <span class="inline-flex gap-2.5 items-center">
+        <img width="20" height="20" class="w-5 h-5" :src="fromToken?.logo_url" />
+        {{ formattedToAmount }}
+        <span class="uppercase">{{ fromToken?.symbol }}</span>
+      </span>
+    </div>
+
+    <div class="flex items-center gap-2.5">
+      <span class="flex items-center gap-2.5">
+        <ChainLogo class="w-5" :chain="chain_id" />
+        <span>{{ chainIdToName(chain_id) }}</span>
+      </span>
+
+      <SvgoArrowRight class="w-4 h-4 text-slate-400" />
+
+      <span class="flex items-center gap-2.5">
+        <ChainLogo class="w-5" :chain="metadata?.toChainId" />
+
+        <a
+          target="_blank"
+          class="text-primary"
+          :href="
+            getExplorerUrl(
+              metadata?.toChainId,
+              `/address/${metadata.receiver}`
+            )
+          "
+          >{{ shortenHash(metadata.receiver) }}</a
+        >
+        on
+        <span>{{ chainIdToName(metadata?.toChainId) }}</span>
+      </span>
+    </div>
+  </div>
+</template>

package/components/metadata/GasTopup.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+
+const props = defineProps<{
+  metadata: any;
+  chain_id: number | string
+}>();
+
+const tokens = inject<ITokenPrice[]>('tokens');
+
+const token = asyncComputed(() =>
+{
+  if (Array.isArray(tokens) && !tokens.length) return null;
+
+  return fetchTokenByAddress(props.metadata?.token, props?.chain_id, tokens)
+ }
+);
+
+const compact = inject('compact');
+
+const formattedAmount = computed(() =>
+  formatDecimal(
+    fromWei(props.metadata?.amount, token?.value?.decimals).toFixed()
+  )
+);
+</script>
+
+<template>
+  <div v-if="!token" class="rounded-5 w-24 h-4 loading-box" />
+  <div class="flex items-center gap-5" v-else>
+    <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="token?.logo_url" />
+      {{ formattedAmount }}
+      <span class="uppercase">{{ token?.symbol }}</span>
+      <SvgoGas class="w-4 h-4 text-slate-400 mx-2" />
+      <span>{{ shortenHash(metadata.onBehalf) }}</span>
+    </span>
+  </div>
+</template>