Add chain icons

scope-sh · May 2, 2024 · 0f50dfa · 0f50dfa
1 parent 91c0fb4
commit 0f50dfa
Show file tree

Hide file tree

Showing 6 changed files with 162 additions and 6 deletions.
diff --git a/src/components/IconArbitrum.vue b/src/components/IconArbitrum.vue
@@ -0,0 +1,38 @@
+<template>
+  <svg
+    width="500"
+    height="500"
+    viewBox="0 0 500 500"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M44.7722 151.974V348.026C44.7722 360.503 51.4198 372.06 62.2605 378.298L232.029 476.273C242.87 482.512 256.165 482.512 267.006 476.273L436.775 378.298C447.615 372.06 454.263 360.503 454.263 348.026V151.974C454.263 139.497 447.615 127.94 436.775 121.702L267.006 23.7267C256.165 17.4882 242.87 17.4882 232.029 23.7267L62.2605 121.702C51.5221 127.94 44.7722 139.497 44.7722 151.974Z"
+      fill="#213147"
+    />
+    <path
+      d="M286.642 287.993L262.404 354.367C261.688 356.208 261.688 358.253 262.404 360.094L304.028 474.33L352.197 446.512L294.415 287.993C293.085 284.311 287.971 284.311 286.642 287.993Z"
+      fill="#12AAFF"
+    />
+    <path
+      d="M335.118 176.314C333.789 172.632 328.675 172.632 327.346 176.314L303.107 242.688C302.392 244.528 302.392 246.574 303.107 248.415L371.322 435.467L419.491 407.65L335.118 176.314Z"
+      fill="#12AAFF"
+    />
+    <path
+      d="M249.518 30.9879C250.745 30.9879 251.87 31.2947 252.995 31.9084L436.673 137.963C438.82 139.19 440.15 141.44 440.15 143.894V356.003C440.15 358.458 438.82 360.708 436.673 361.935L252.995 468.092C251.972 468.705 250.745 469.012 249.518 469.012C248.29 469.012 247.165 468.705 246.04 468.092L62.4651 362.037C60.3174 360.81 58.9879 358.56 58.9879 356.106V143.894C58.9879 141.44 60.3174 139.19 62.4651 137.963L246.143 31.9084C247.165 31.2947 248.393 30.9879 249.518 30.9879ZM249.518 0C242.972 0 236.427 1.7386 230.598 5.11352L46.92 111.168C35.2612 117.918 28 130.395 28 143.894V356.003C28 369.503 35.2612 382.082 46.92 388.832L230.598 494.886C236.427 498.261 242.972 500 249.518 500C256.063 500 262.608 498.261 268.438 494.886L452.115 388.832C463.876 382.082 471.035 369.605 471.035 356.003V143.894C471.035 130.395 463.774 117.815 452.115 111.066L268.54 5.11352C262.608 1.7386 256.063 0 249.518 0Z"
+      fill="#9DCCED"
+    />
+    <path
+      d="M128.123 435.672L144.997 389.446L178.951 417.672L147.247 446.717L128.123 435.672Z"
+      fill="#213147"
+    />
+    <path
+      d="M234.075 128.758H187.542C184.065 128.758 180.894 130.906 179.769 134.179L79.9534 407.854L128.123 435.672L238.063 134.281C238.984 131.622 237.041 128.758 234.075 128.758Z"
+      fill="white"
+    />
+    <path
+      d="M315.585 128.758H269.051C265.574 128.758 262.404 130.906 261.279 134.179L147.247 446.717L195.417 474.535L319.471 134.383C320.493 131.622 318.448 128.758 315.585 128.758Z"
+      fill="white"
+    />
+  </svg>
+</template>
diff --git a/src/components/IconBase.vue b/src/components/IconBase.vue
@@ -0,0 +1,14 @@
+<template>
+  <svg
+    width="500"
+    height="500"
+    viewBox="0 0 500 500"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M249.564 500C387.877 500 500 388.072 500 250C500 111.929 387.877 0 249.564 0C118.342 0 10.6913 100.748 0 228.986H331.019V271.014H1.79786e-06C10.6913 399.252 118.342 500 249.564 500Z"
+      fill="#2151F5"
+    />
+  </svg>
+</template>
diff --git a/src/components/IconEthereum.vue b/src/components/IconEthereum.vue
@@ -0,0 +1,34 @@
+<template>
+  <svg
+    width="500"
+    height="500"
+    viewBox="0 0 500 500"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M249.453 0L246.102 11.3934V342.005L249.453 345.351L402.908 254.637L249.453 0Z"
+      fill="#343434"
+    />
+    <path
+      d="M249.454 0L96 254.637L249.454 345.352V184.883V0Z"
+      fill="#8C8C8C"
+    />
+    <path
+      d="M249.453 374.409L247.564 376.711V494.482L249.453 500L402.999 283.741L249.453 374.409Z"
+      fill="#3C3C3B"
+    />
+    <path
+      d="M249.454 499.998V374.407L96 283.739L249.454 499.998Z"
+      fill="#8C8C8C"
+    />
+    <path
+      d="M249.453 345.35L402.905 254.638L249.453 184.884V345.35Z"
+      fill="#141414"
+    />
+    <path
+      d="M96.001 254.638L249.453 345.35V184.884L96.001 254.638Z"
+      fill="#393939"
+    />
+  </svg>
+</template>
diff --git a/src/components/IconOptimism.vue b/src/components/IconOptimism.vue
@@ -0,0 +1,22 @@
+<template>
+  <svg
+    width="500"
+    height="500"
+    viewBox="0 0 500 500"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M250 500C388.071 500 500 388.071 500 250C500 111.929 388.071 0 250 0C111.929 0 0 111.929 0 250C0 388.071 111.929 500 250 500Z"
+      fill="#EA3431"
+    />
+    <path
+      d="M177.133 316.446C162.247 316.446 150.051 312.943 140.544 305.938C131.162 298.808 126.471 288.676 126.471 275.541C126.471 272.789 126.784 269.411 127.409 265.408C129.036 256.402 131.35 245.581 134.352 232.947C142.858 198.547 164.812 181.347 200.213 181.347C209.845 181.347 218.476 182.973 226.107 186.225C233.738 189.352 239.742 194.106 244.12 200.486C248.498 206.74 250.688 214.246 250.688 223.002C250.688 225.629 250.375 228.944 249.749 232.947C247.873 244.08 245.621 254.901 242.994 265.408C238.616 282.546 231.048 295.368 220.29 303.874C209.532 312.255 195.147 316.446 177.133 316.446ZM179.76 289.426C186.766 289.426 192.707 287.362 197.586 283.234C202.59 279.106 206.155 272.789 208.281 264.283C211.158 252.524 213.348 242.266 214.849 233.51C215.349 230.883 215.599 228.194 215.599 225.441C215.599 214.058 209.657 208.366 197.774 208.366C190.768 208.366 184.764 210.43 179.76 214.558C174.882 218.687 171.379 225.004 169.253 233.51C167.001 241.891 164.749 252.149 162.498 264.283C161.997 266.784 161.747 269.411 161.747 272.163C161.747 283.672 167.752 289.426 179.76 289.426Z"
+      fill="white"
+    />
+    <path
+      d="M259.303 314.57C257.927 314.57 256.863 314.132 256.113 313.256C255.487 312.255 255.3 311.13 255.55 309.879L281.444 187.914C281.694 186.538 282.382 185.412 283.508 184.536C284.634 183.661 285.822 183.223 287.073 183.223H336.985C350.87 183.223 362.003 186.1 370.384 191.854C378.891 197.609 383.144 205.927 383.144 216.81C383.144 219.937 382.769 223.19 382.018 226.567C378.891 240.953 372.574 251.586 363.067 258.466C353.685 265.346 340.8 268.786 324.413 268.786H299.082L290.451 309.879C290.2 311.255 289.512 312.38 288.387 313.256C287.261 314.132 286.072 314.57 284.822 314.57H259.303ZM325.727 242.892C330.98 242.892 335.546 241.453 339.424 238.576C343.427 235.699 346.054 231.571 347.305 226.192C347.68 224.065 347.868 222.189 347.868 220.563C347.868 216.935 346.805 214.183 344.678 212.307C342.551 210.305 338.924 209.305 333.795 209.305H311.278L304.148 242.892H325.727Z"
+      fill="white"
+    />
+  </svg>
+</template>
diff --git a/src/components/IconPolygon.vue b/src/components/IconPolygon.vue
@@ -0,0 +1,14 @@
+<template>
+  <svg
+    width="500"
+    height="500"
+    viewBox="0 0 500 500"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M377.306 162.822C368.081 157.14 356.088 157.14 345.941 162.822L273.985 206.376L225.092 234.782L153.136 278.339C143.912 284.02 131.919 284.02 121.771 278.339L64.5757 244.252C55.3506 238.571 48.8929 228.155 48.8929 216.792V149.565C48.8929 138.203 54.428 127.788 64.5757 122.107L120.849 88.9663C130.074 83.2851 142.066 83.2851 152.214 88.9663L208.487 122.107C217.712 127.788 224.169 138.203 224.169 149.565V193.121L273.062 163.768V120.213C273.062 108.85 267.528 98.435 257.38 92.7538L153.136 30.2609C143.912 24.5797 131.919 24.5797 121.771 30.2609L15.6827 92.7538C5.53506 98.435 0 108.85 0 120.213V246.146C0 257.507 5.53506 267.923 15.6827 273.604L121.771 336.097C130.996 341.779 142.99 341.779 153.136 336.097L225.092 293.488L273.985 264.136L345.941 221.527C355.166 215.846 367.159 215.846 377.306 221.527L433.579 254.668C442.805 260.349 449.262 270.764 449.262 282.126V349.353C449.262 360.715 443.727 371.131 433.579 376.812L377.306 410.9C368.081 416.581 356.088 416.581 345.941 410.9L289.668 377.759C280.442 372.078 273.985 361.663 273.985 350.3V306.745L225.092 336.097V379.653C225.092 391.015 230.627 401.43 240.775 407.111L346.864 469.605C356.088 475.286 368.081 475.286 378.228 469.605L484.318 407.111C493.542 401.43 500 391.015 500 379.653V253.72C500 242.358 494.465 231.943 484.318 226.262L377.306 162.822Z"
+      fill="#7950DD"
+    />
+  </svg>
+</template>
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
@@ -1,12 +1,23 @@
 <template>
   <div class="page">
     <div class="content">
-      <form @submit.prevent="handleSubmit">
-        <input
-          v-model="query"
-          placeholder="Enter UserOp hash"
-        />
-      </form>
+      <div class="header">
+        <form @submit.prevent="handleSubmit">
+          <input
+            v-model="query"
+            placeholder="Enter UserOp hash"
+          />
+        </form>
+        <div class="chain-list">
+          <IconArbitrum class="chain" />
+          <IconBase class="chain" />
+          <IconEthereum class="chain" />
+          <IconOptimism class="chain" />
+          <IconPolygon class="chain" />
+          <span>& testnets</span>
+        </div>
+      </div>
+
       <TableOpFeed
         :ops="opRows"
         :per-page="20"
@@ -22,6 +33,11 @@ import { Address } from 'viem';
 import { computed, onMounted, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 
+import IconArbitrum from '@/components/IconArbitrum.vue';
+import IconBase from '@/components/IconBase.vue';
+import IconEthereum from '@/components/IconEthereum.vue';
+import IconOptimism from '@/components/IconOptimism.vue';
+import IconPolygon from '@/components/IconPolygon.vue';
 import TableOpFeed, { UserOp as UserOpRow } from '@/components/TableOpFeed.vue';
 import useEnv from '@/composables/useEnv';
 import useLabels from '@/composables/useLabels';
@@ -134,4 +150,22 @@ input {
     background: var(--color-background-quaternary);
   }
 }
+
+.header {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  color: var(--color-text-secondary);
+  font-size: 14px;
+}
+
+.chain-list {
+  display: flex;
+  gap: 8px;
+}
+
+.chain {
+  width: 16px;
+  height: 16px;
+}
 </style>