feat(icons components): move necessary icons to transaction builder

safe-global · Sep 25, 2024 · 7c79a60 · 7c79a60
1 parent c1dff3f
commit 7c79a60
Show file tree

Hide file tree

Showing 103 changed files with 3,195 additions and 0 deletions.
diff --git a/apps/tx-builder/src/assets/fonts/DMSans700.woff2 b/apps/tx-builder/src/assets/fonts/DMSans700.woff2
diff --git a/apps/tx-builder/src/assets/fonts/DMSansRegular.woff2 b/apps/tx-builder/src/assets/fonts/DMSansRegular.woff2
diff --git a/apps/tx-builder/src/components/FixedIcon/images/arrowReceived.tsx b/apps/tx-builder/src/components/FixedIcon/images/arrowReceived.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+
+const icon = (
+  <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10">
+    <path
+      fill="#008C73"
+      fillRule="evenodd"
+      d="M3.431 7.99h2.6c.554 0 1.004.45 1.004 1.005C7.035 9.55 6.585 10 6.03 10H1.005c-.277 0-.529-.112-.71-.294C.111 9.524 0 9.272 0 8.995V3.97c0-.555.45-1.005 1.005-1.005.555 0 1.005.45 1.005 1.005v2.599L8.284.294c.393-.392 1.03-.392 1.422 0 .392.393.392 1.03 0 1.422L3.43 7.99z"
+    />
+  </svg>
+)
+
+export default icon
diff --git a/apps/tx-builder/src/components/FixedIcon/images/arrowReceivedWhite.tsx b/apps/tx-builder/src/components/FixedIcon/images/arrowReceivedWhite.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+
+const icon = (
+  <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10">
+    <path
+      fill="#FFFFFF"
+      fillRule="evenodd"
+      d="M3.431 7.99h2.6c.554 0 1.004.45 1.004 1.005C7.035 9.55 6.585 10 6.03 10H1.005c-.277 0-.529-.112-.71-.294C.111 9.524 0 9.272 0 8.995V3.97c0-.555.45-1.005 1.005-1.005.555 0 1.005.45 1.005 1.005v2.599L8.284.294c.393-.392 1.03-.392 1.422 0 .392.393.392 1.03 0 1.422L3.43 7.99z"
+    />
+  </svg>
+)
+
+export default icon
diff --git a/apps/tx-builder/src/components/FixedIcon/images/arrowSent.tsx b/apps/tx-builder/src/components/FixedIcon/images/arrowSent.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+
+const icon = (
+  <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10">
+    <path
+      fill="#F02525"
+      fillRule="evenodd"
+      d="M6.569 2.01h-2.6c-.554 0-1.004-.45-1.004-1.005C2.965.45 3.415 0 3.97 0h5.025c.277 0 .529.112.71.294.183.182.295.434.295.711V6.03c0 .555-.45 1.005-1.005 1.005-.555 0-1.005-.45-1.005-1.005V3.431L1.716 9.706c-.393.392-1.03.392-1.422 0-.392-.393-.392-1.03 0-1.422L6.57 2.01z"
+    />
+  </svg>
+)
+
+export default icon
diff --git a/apps/tx-builder/src/components/FixedIcon/images/arrowSentWhite.tsx b/apps/tx-builder/src/components/FixedIcon/images/arrowSentWhite.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+
+const icon = (
+  <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10">
+    <path
+      fill="#FFFFFF"
+      fillRule="evenodd"
+      d="M6.569 2.01h-2.6c-.554 0-1.004-.45-1.004-1.005C2.965.45 3.415 0 3.97 0h5.025c.277 0 .529.112.71.294.183.182.295.434.295.711V6.03c0 .555-.45 1.005-1.005 1.005-.555 0-1.005-.45-1.005-1.005V3.431L1.716 9.706c-.393.392-1.03.392-1.422 0-.392-.393-.392-1.03 0-1.422L6.57 2.01z"
+    />
+  </svg>
+)
+
+export default icon
diff --git a/apps/tx-builder/src/components/FixedIcon/images/arrowSort.tsx b/apps/tx-builder/src/components/FixedIcon/images/arrowSort.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+
+const icon = (
+  <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
+    <path
+      fill="#5D6D74"
+      fillRule="evenodd"
+      d="M4.984 4.608l1.302-1.322c.384-.384 1.024-.384 1.408 0 .384.384.384 1.024 0 1.408L4.728 7.702C4.537 7.893 4.28 8 4.024 8c-.256 0-.511-.107-.704-.298L.29 4.694c-.426-.427-.383-1.152.13-1.515.404-.298.98-.213 1.322.15l1.13 1.108.129.022V.982C3 .427 3.447 0 3.98 0c.577 0 1.004.448 1.004.982v3.626z"
+    />
+  </svg>
+)
+
+export default icon
diff --git a/apps/tx-builder/src/components/FixedIcon/images/bullit.tsx b/apps/tx-builder/src/components/FixedIcon/images/bullit.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+
+const icon = (
+  <svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" viewBox="0 0 6 6">
+    <path
+      fill="#008C73"
+      fillRule="evenodd"
+      d="M3 0C1.347 0 0 1.347 0 3s1.347 3 3 3 3-1.347 3-3-1.347-3-3-3z"
+    />
+  </svg>
+)
+
+export default icon
diff --git a/apps/tx-builder/src/components/FixedIcon/images/chevronDown.tsx b/apps/tx-builder/src/components/FixedIcon/images/chevronDown.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+
+const icon = (
+  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="7" viewBox="0 0 12 7">
+    <path
+      fill="#B2B5B2"
+      fillRule="evenodd"
+      d="M6.709 6.709c-.195.195-.452.292-.71.29-.257.002-.514-.095-.71-.29l-.046-.05L.292 1.706c-.39-.39-.39-1.025 0-1.414.389-.39 1.025-.39 1.414 0l4.293 4.294L10.293.292c.389-.39 1.025-.39 1.414 0 .389.389.389 1.025 0 1.414L6.763 6.649l-.054.06z"
+    />
+  </svg>
+)
+
+export default icon
diff --git a/apps/tx-builder/src/components/FixedIcon/images/chevronLeft.tsx b/apps/tx-builder/src/components/FixedIcon/images/chevronLeft.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+
+const icon = (
+  <svg xmlns="http://www.w3.org/2000/svg" width="7" height="12" viewBox="0 0 7 12">
+    <path
+      fill="#B2B5B2"
+      fillRule="evenodd"
+      d="M.291 5.29l.06-.054L5.294.292c.389-.39 1.025-.39 1.414 0 .389.389.389 1.025 0 1.414L2.414 6l4.294 4.293c.389.389.389 1.025 0 1.414s-1.025.389-1.414 0L.341 6.756l-.05-.047c-.195-.195-.292-.452-.291-.71-.001-.257.096-.514.291-.71z"
+    />
+  </svg>
+)
+
+export default icon
diff --git a/apps/tx-builder/src/components/FixedIcon/images/chevronRight.tsx b/apps/tx-builder/src/components/FixedIcon/images/chevronRight.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+
+const icon = (
+  <svg xmlns="http://www.w3.org/2000/svg" width="7" height="12" viewBox="0 0 7 12">
+    <path
+      fill="#B2B5B2"
+      fillRule="evenodd"
+      d="M6.709 5.29l-.06-.054L1.706.292c-.39-.39-1.025-.39-1.414 0-.39.389-.39 1.025 0 1.414L4.586 6 .292 10.293c-.39.389-.39 1.025 0 1.414.389.389 1.025.389 1.414 0l4.953-4.951.05-.047c.195-.195.292-.452.29-.71.002-.257-.095-.514-.29-.71"
+    />
+  </svg>
+)
+
+export default icon
diff --git a/apps/tx-builder/src/components/FixedIcon/images/chevronUp.tsx b/apps/tx-builder/src/components/FixedIcon/images/chevronUp.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+
+const icon = (
+  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="7" viewBox="0 0 12 7">
+    <path
+      fill="#B2B5B2"
+      fillRule="evenodd"
+      d="M6.709.291l.054.06 4.944 4.943c.389.389.389 1.025 0 1.414-.39.389-1.025.389-1.414 0L5.999 2.414 1.706 6.708c-.39.389-1.025.389-1.414 0-.39-.389-.39-1.025 0-1.414L5.242.341l.048-.05c.195-.195.452-.292.709-.291.258-.001.515.096.71.291z"
+    />
+  </svg>
+)
+
+export default icon
diff --git a/apps/tx-builder/src/components/FixedIcon/images/connectedRinkeby.tsx b/apps/tx-builder/src/components/FixedIcon/images/connectedRinkeby.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+
+const icon = (
+  <svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" viewBox="0 0 9 9">
+    <path
+      fill="#E8673C"
+      d="M4.5 9C6.985 9 9 6.985 9 4.5S6.985 0 4.5 0 0 2.015 0 4.5 2.015 9 4.5 9zm0-2C3.12 7 2 5.88 2 4.5S3.12 2 4.5 2 7 3.12 7 4.5 5.88 7 4.5 7z"
+    />
+  </svg>
+)
+
+export default icon
diff --git a/apps/tx-builder/src/components/FixedIcon/images/connectedWallet.tsx b/apps/tx-builder/src/components/FixedIcon/images/connectedWallet.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+
+const icon = (
+  <svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" viewBox="0 0 9 9">
+    <path
+      fill="#008C73"
+      d="M4.5 9C6.985 9 9 6.985 9 4.5S6.985 0 4.5 0 0 2.015 0 4.5 2.015 9 4.5 9zm0-2C3.12 7 2 5.88 2 4.5S3.12 2 4.5 2 7 3.12 7 4.5 5.88 7 4.5 7z"
+    />
+  </svg>
+)
+
+export default icon
diff --git a/apps/tx-builder/src/components/FixedIcon/images/creatingInProgress.tsx b/apps/tx-builder/src/components/FixedIcon/images/creatingInProgress.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+
+const icon = (
+  <svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 34 34">
+    <g fill="none" fillRule="evenodd">
+      <circle cx="17" cy="17" r="17" fill="#008C73" />
+      <path
+        fill="#FFF"
+        fillRule="nonzero"
+        d="M17 27c5.523 0 10-4.477 10-10S22.523 7 17 7c-5.462 0-9.911 4.382-9.999 9.836-.009.553.432 1.007.984 1.016.552.01 1.007-.431 1.016-.984C9.071 12.506 12.631 9 17 9c4.418 0 8 3.582 8 8s-3.582 8-8 8c-.552 0-1 .448-1 1s.448 1 1 1z"
+      />
+    </g>
+  </svg>
+)
+
+export default icon
diff --git a/apps/tx-builder/src/components/FixedIcon/images/dropdownArrowSmall.tsx b/apps/tx-builder/src/components/FixedIcon/images/dropdownArrowSmall.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+
+const icon = (
+  <svg xmlns="http://www.w3.org/2000/svg" width="9" height="5" viewBox="0 0 9 5">
+    <path
+      fill="#5D6D74"
+      d="M3.858 4.754c.355.328.93.328 1.284 0l3.59-3.32C9.305.906 8.899 0 8.09 0H.91C.101 0-.305.907.268 1.436l3.59 3.319z"
+    />
+  </svg>
+)
+
+export default icon
diff --git a/apps/tx-builder/src/components/FixedIcon/images/networkError.tsx b/apps/tx-builder/src/components/FixedIcon/images/networkError.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+
+const icon = (
+  <svg xmlns="http://www.w3.org/2000/svg" width="90" height="90" viewBox="0 0 90 90">
+    <g fill="none" fillRule="evenodd">
+      <circle cx="45" cy="45" r="45" fill="#E8E7E6" />
+      <path
+        fill="#B2B5B2"
+        fillRule="nonzero"
+        d="M26.24 62c-.57 0-1.13-.15-1.623-.437a3.254 3.254 0 0 1-1.18-4.44l18.76-32.501a3.234 3.234 0 0 1 5.606 0l18.761 32.501c.286.495.436 1.057.436 1.628A3.244 3.244 0 0 1 63.76 62H26.24z"
+      />
+      <path fill="#E8E7E6" fillRule="nonzero" d="M47 49h-4V36h4zM47 55h-4v-4h4z" />
+      <circle
+        cx="78"
+        cy="78"
+        r="11"
+        fill="#FFC05F"
+        fillRule="nonzero"
+        stroke="#F6F7F8"
+        strokeWidth="4"
+      />
+    </g>
+  </svg>
+)
+
+export default icon
diff --git a/apps/tx-builder/src/components/FixedIcon/images/notConnected.tsx b/apps/tx-builder/src/components/FixedIcon/images/notConnected.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+
+const icon = (
+  <svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <circle id="ca7p6cg2da" cx="20" cy="20" r="20" />
+    </defs>
+    <g fill="none" fillRule="evenodd">
+      <circle cx="20" cy="20" r="20" transform="matrix(1, 0, 0, 1, 0, 0)" fill="#E8E7E6" />
+      <path
+        fill="#B2B5B2"
+        d="M 18.02 29.05 L 22.894 29.05 C 23.384 29.05 23.783 28.652 23.783 28.161 C 23.783 28.113 23.779 28.066 23.771 28.018 L 22.519 20.313 C 24.103 19.553 25.203 17.958 25.203 16.104 C 25.203 13.524 23.079 11.429 20.458 11.429 C 17.84 11.429 15.714 13.524 15.714 16.104 C 15.711 17.96 16.81 19.554 18.397 20.314 L 17.143 28.018 C 17.064 28.503 17.393 28.959 17.878 29.038 C 17.925 29.046 17.973 29.05 18.021 29.05 Z"
+      />
+    </g>
+  </svg>
+)
+
+export default icon
diff --git a/apps/tx-builder/src/components/FixedIcon/images/notOwner.tsx b/apps/tx-builder/src/components/FixedIcon/images/notOwner.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+
+const icon = (
+  <svg xmlns="http://www.w3.org/2000/svg" width="108" height="96" viewBox="0 0 108 96">
+    <g fill="none" fillRule="evenodd">
+      <path d="M0 0H108V96H0z" opacity=".557" />
+      <g>
+        <path
+          fill="#F6F7F8"
+          d="M49 0c25.405 0 46 20.595 46 46S74.405 92 49 92 3 71.405 3 46 23.595 0 49 0"
+          transform="translate(5 4)"
+        />
+        <path
+          fill="#F02525"
+          d="M42.12 36.726c0-3.675 2.99-6.665 6.665-6.665s6.665 2.99 6.665 6.665-2.99 6.664-6.665 6.664-6.664-2.989-6.664-6.664m26.26 20.668c-3.41-6.652-8.073-10.436-14.173-11.5 3.132-1.86 5.242-5.269 5.242-9.168 0-5.88-4.784-10.665-10.665-10.665-5.88 0-10.664 4.784-10.664 10.665 0 4.317 2.584 8.035 6.282 9.711-9.101 2.803-12.981 11.934-15.353 20.066-.31 1.06.3 2.17 1.36 2.48.187.055.375.081.56.081.867 0 1.665-.567 1.92-1.442 3.69-12.652 8.945-18.05 17.57-18.053 6.424.001 10.987 3.067 14.362 9.65.502.983 1.706 1.372 2.692.866.983-.504 1.37-1.709.867-2.69"
+          transform="translate(5 4)"
+        />
+        <path
+          fill="#B2B5B2"
+          d="M21.496 37.329c-3.675 0-6.665-2.99-6.665-6.665S17.82 24 21.496 24s6.664 2.989 6.664 6.664-2.99 6.665-6.664 6.665m14.07 15.289c.872-1.088 1.829-2.099 2.908-2.984-3.065-5.177-7.032-8.329-12.003-9.544 3.379-1.791 5.689-5.342 5.689-9.426C32.16 24.784 27.376 20 21.496 20c-5.881 0-10.665 4.784-10.665 10.664 0 4.077 2.302 7.623 5.672 9.418C6.632 42.477 2.543 51.998.08 60.442c-.31 1.06.3 2.17 1.36 2.48.187.054.375.081.56.081.867 0 1.665-.568 1.92-1.442 3.69-12.652 8.945-18.052 17.57-18.054 6.228.001 10.729 2.906 14.075 9.111M76.083 37.329c-3.675 0-6.664-2.99-6.664-6.665S72.408 24 76.083 24s6.664 2.989 6.664 6.664-2.99 6.665-6.664 6.665M97.49 60.442c-2.462-8.443-6.55-17.962-16.417-20.359 3.37-1.794 5.674-5.341 5.674-9.419 0-5.88-4.784-10.664-10.664-10.664s-10.664 4.784-10.664 10.664c0 4.078 2.303 7.625 5.674 9.419-4.448 1.082-8.075 3.714-10.981 7.955 1.135.665 2.203 1.464 3.205 2.404 3.18-4.716 7.27-6.934 12.763-6.935 8.625.002 13.88 5.402 17.57 18.054.255.874 1.053 1.442 1.919 1.442.186 0 .374-.027.56-.081 1.06-.31 1.67-1.42 1.36-2.48"
+          transform="translate(5 4)"
+        />
+        <path
+          fill="#F02525"
+          fillRule="nonzero"
+          d="M76.5 61C83.956 61 90 67.044 90 74.5S83.956 88 76.5 88 63 81.956 63 74.5 69.044 61 76.5 61zm8.026 8.415l-13.111 13.11C72.885 83.46 74.629 84 76.5 84c5.247 0 9.5-4.253 9.5-9.5 0-1.87-.54-3.615-1.474-5.085zM76.5 65c-5.247 0-9.5 4.253-9.5 9.5 0 1.929.575 3.723 1.562 5.221l13.159-13.159C80.223 65.575 78.429 65 76.5 65z"
+          transform="translate(5 4)"
+        />
+      </g>
+    </g>
+  </svg>
+)
+
+export default icon
diff --git a/apps/tx-builder/src/components/FixedIcon/images/options.tsx b/apps/tx-builder/src/components/FixedIcon/images/options.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+
+const icon = (
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="4" viewBox="0 0 16 4">
+    <g fill="#B2B5B2" fillRule="evenodd">
+      <circle cx="2" cy="2" r="2" />
+      <circle cx="8" cy="2" r="2" />
+      <circle cx="14" cy="2" r="2" />
+    </g>
+  </svg>
+)
+
+export default icon
diff --git a/apps/tx-builder/src/components/FixedIcon/images/plus.tsx b/apps/tx-builder/src/components/FixedIcon/images/plus.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+
+const icon = (
+  <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10">
+    <path
+      fill="#B2B5B2"
+      fillRule="evenodd"
+      d="M6 4h3c.552 0 1 .448 1 1s-.448 1-1 1H6v3c0 .552-.448 1-1 1s-1-.448-1-1V6H1c-.552 0-1-.448-1-1s.448-1 1-1h3V1c0-.552.448-1 1-1s1 .448 1 1v3z"
+    />
+  </svg>
+)
+
+export default icon
diff --git a/apps/tx-builder/src/components/FixedIcon/images/settingsChange.tsx b/apps/tx-builder/src/components/FixedIcon/images/settingsChange.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+
+const icon = (
+  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
+    <path
+      fill="#B2B5B2"
+      fillRule="evenodd"
+      d="M7 10c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3-1.346 3-3 3m6.068-4.209l-.3-.03c-.683-.068-1-.437-1.137-.67-.068-.255-.11-.74.316-1.286l.199-.242c.54-.607.354-.963-.035-1.352l-.322-.32c-.39-.39-.744-.576-1.353-.037l-.235.192c-.535.44-1.025.397-1.285.328-.232-.135-.609-.45-.677-1.14l-.03-.3C8.16.12 7.777 0 7.228 0h-.456c-.55 0-.932.121-.98.933l-.03.31c-.084.686-.458 1-.686 1.133-.261.068-.747.105-1.277-.33l-.235-.192c-.609-.539-.964-.353-1.353.036l-.322.321c-.389.39-.575.745-.035 1.352l.2.242c.424.545.383 1.031.315 1.286-.137.233-.454.602-1.137.67l-.3.03c-.811.05-.932.431-.932.981v.456c0 .55.121.933.932.98l.31.03c.686.085 1 .458 1.133.686.068.262.105.748-.33 1.278l-.192.235c-.539.607-.353.963.036 1.352l.322.32c.39.39.744.576 1.353.037l.242-.2c.539-.421 1.02-.384 1.277-.317.229.135.596.449.679 1.128l.03.31c.048.812.43.933.98.933h.456c.55 0 .932-.121.981-.932l.03-.301c.067-.683.437-1 .67-1.137.255-.067.741-.11 1.285.316l.242.2c.609.539.964.354 1.353-.036l.322-.321c.389-.39.575-.745.036-1.352l-.192-.235c-.435-.53-.398-1.016-.33-1.278.133-.228.447-.601 1.133-.686l.31-.03c.811-.047.932-.43.932-.98v-.456c0-.55-.121-.932-.932-.98"
+    />
+  </svg>
+)
+
+export default icon
diff --git a/apps/tx-builder/src/components/FixedIcon/images/threeDots.tsx b/apps/tx-builder/src/components/FixedIcon/images/threeDots.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+
+const icon = (
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="4" viewBox="0 0 20 4">
+    <g fill="#B2B5B2" fillRule="evenodd">
+      <rect width="4" height="4" x="16" rx="2" />
+      <rect width="4" height="4" x="8" rx="2" />
+      <rect width="4" height="4" rx="2" />
+    </g>
+  </svg>
+)
+
+export default icon
diff --git a/apps/tx-builder/src/components/FixedIcon/index.tsx b/apps/tx-builder/src/components/FixedIcon/index.tsx
@@ -0,0 +1,63 @@
+import React from 'react'
+
+import arrowSort from './images/arrowSort'
+import connectedRinkeby from './images/connectedRinkeby'
+import connectedWallet from './images/connectedWallet'
+import bullit from './images/bullit'
+import dropdownArrowSmall from './images/dropdownArrowSmall'
+import arrowReceived from './images/arrowReceived'
+import arrowReceivedWhite from './images/arrowReceivedWhite'
+import arrowSent from './images/arrowSent'
+import arrowSentWhite from './images/arrowSentWhite'
+import threeDots from './images/threeDots'
+import options from './images/options'
+import plus from './images/plus'
+import chevronRight from './images/chevronRight'
+import chevronLeft from './images/chevronLeft'
+import chevronUp from './images/chevronUp'
+import chevronDown from './images/chevronDown'
+import settingsChange from './images/settingsChange'
+import creatingInProgress from './images/creatingInProgress'
+import notOwner from './images/notOwner'
+import notConnected from './images/notConnected'
+import networkError from './images/networkError'
+
+const icons = {
+  arrowSort,
+  connectedRinkeby,
+  connectedWallet,
+  bullit,
+  dropdownArrowSmall,
+  arrowReceived,
+  arrowReceivedWhite,
+  arrowSent,
+  arrowSentWhite,
+  threeDots,
+  options,
+  plus,
+  chevronRight,
+  chevronLeft,
+  chevronUp,
+  chevronDown,
+  settingsChange,
+  creatingInProgress,
+  notOwner,
+  notConnected,
+  networkError,
+}
+
+export type IconType = typeof icons
+export type IconTypes = keyof IconType
+
+type Props = {
+  type: IconTypes
+}
+
+/**
+ * The `FixedIcon` renders an icon
+ */
+function FixedIcon({ type }: Props): React.ReactElement {
+  return <span>{icons[type]}</span>
+}
+
+export default FixedIcon