From fca07c371030a317623993c2d47a06f7d60f6b6b Mon Sep 17 00:00:00 2001
From: 1emu <github@lemu.sh>
Date: Tue, 23 Apr 2024 13:22:56 -0300
Subject: [PATCH] chore: use icons svg to replace react-crypto-icons

---
 src/components/Icon/Token/Dai.tsx         |  42 +++++++
 src/components/Icon/Token/Eth.tsx         |  22 ++++
 src/components/Icon/Token/Mana.tsx        | 137 ++++++++++++++++++++++
 src/components/Icon/Token/Matic.tsx       |  27 +++++
 src/components/Icon/Token/Usdc.tsx        |  37 ++++++
 src/components/Icon/Token/Usdt.tsx        |  32 +++++
 src/components/Icon/Token/Weth.tsx        |  53 +++++++++
 src/components/Icon/Token/index.tsx       |   8 ++
 src/components/Token/TokenBalanceCard.tsx |  22 +++-
 9 files changed, 379 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Icon/Token/Dai.tsx
 create mode 100644 src/components/Icon/Token/Eth.tsx
 create mode 100644 src/components/Icon/Token/Mana.tsx
 create mode 100644 src/components/Icon/Token/Matic.tsx
 create mode 100644 src/components/Icon/Token/Usdc.tsx
 create mode 100644 src/components/Icon/Token/Usdt.tsx
 create mode 100644 src/components/Icon/Token/Weth.tsx
 create mode 100644 src/components/Icon/Token/index.tsx

diff --git a/src/components/Icon/Token/Dai.tsx b/src/components/Icon/Token/Dai.tsx
new file mode 100644
index 0000000..0319423
--- /dev/null
+++ b/src/components/Icon/Token/Dai.tsx
@@ -0,0 +1,42 @@
+export default function Dai({ size = 45 }: { size?: number }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlSpace="preserve"
+      id="dai"
+      enableBackground="new 0 0 500 500"
+      width={size}
+      height={size}
+      viewBox="0 0 500 500"
+    >
+      <linearGradient id="a" x1={73.223} x2={426.777} y1={73.223} y2={426.777} gradientUnits="userSpaceOnUse">
+        <stop
+          offset={0}
+          style={{
+            stopColor: '#f9af1a',
+          }}
+        />
+        <stop
+          offset={1}
+          style={{
+            stopColor: '#fbc349',
+          }}
+        />
+      </linearGradient>
+      <circle
+        cx={250}
+        cy={250}
+        r={250}
+        style={{
+          fill: 'url(#a)',
+        }}
+      />
+      <path
+        d="M398.7 209.2H369c-16.6-45-59.8-77.1-110.6-77.1H155.3v77.1h-32.8v27h32.8v28.9h-32.8v27h32.8v75.8h103.1c50.3 0 93.2-31.5 110.1-75.8h30.2v-27h-23.4c.6-4.9 1-10 1-15.1 0-4.7-.3-9.3-.8-13.8h23.3v-27zm-216.4-51.3h75c35.9 0 66.8 21 81.3 51.3H182.3v-51.3zm75 184.2h-75v-50H338c-14.7 29.6-45.3 50-80.7 50zm90.1-94.1v4.1c0 4.4-.3 8.8-.9 13H182.3v-28.9h164.3c.5 3.9.8 7.8.8 11.8z"
+        style={{
+          fill: '#fff',
+        }}
+      />
+    </svg>
+  )
+}
diff --git a/src/components/Icon/Token/Eth.tsx b/src/components/Icon/Token/Eth.tsx
new file mode 100644
index 0000000..cb0a790
--- /dev/null
+++ b/src/components/Icon/Token/Eth.tsx
@@ -0,0 +1,22 @@
+export default function Eth({ size = 45 }: { size?: number }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlSpace="preserve"
+      id="eth"
+      x={0}
+      y={0}
+      enableBackground="new 0 0 500 500"
+      width={size}
+      height={size}
+      viewBox="0 0 500 500"
+    >
+      <path fill="#2F3030" d="M249.982 6.554 397.98 251.112l-147.45-63.02z" />
+      <path fill="#828384" d="M102.39 251.112 249.982 6.554l.548 181.538z" />
+      <path fill="#343535" d="M249.982 341.285 102.39 251.112l148.14-63.02z" />
+      <path fill="#131313" d="m397.98 251.112-147.45-63.02-.548 153.193z" />
+      <path fill="#2F3030" d="m249.982 372.329 147.998-87.732L249.982 493.13z" />
+      <path fill="#828384" d="M249.982 372.329 102.39 284.597 249.982 493.13z" />
+    </svg>
+  )
+}
diff --git a/src/components/Icon/Token/Mana.tsx b/src/components/Icon/Token/Mana.tsx
new file mode 100644
index 0000000..94dd6bb
--- /dev/null
+++ b/src/components/Icon/Token/Mana.tsx
@@ -0,0 +1,137 @@
+export default function Mana({ size = 45 }: { size?: number }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlSpace="preserve"
+      id="mana"
+      x={0}
+      y={0}
+      enableBackground="new 0 0 500 500"
+      width={size}
+      height={size}
+      viewBox="0 0 500 500"
+    >
+      <style>{'.st2,.st7{fill-rule:evenodd;clip-rule:evenodd;fill:#fff}.st7{fill:#ffc95b}'}</style>
+      <linearGradient
+        id="SVGID_1_"
+        x1={-386.964}
+        x2={-387.841}
+        y1={762.161}
+        y2={761.284}
+        gradientTransform="matrix(400 0 0 -400 155211 304939)"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop
+          offset={0}
+          style={{
+            stopColor: '#ff2d55',
+          }}
+        />
+        <stop
+          offset={1}
+          style={{
+            stopColor: '#ffbc5b',
+          }}
+        />
+      </linearGradient>
+      <circle
+        cx={250}
+        cy={250}
+        r={247.9}
+        style={{
+          fillRule: 'evenodd',
+          clipRule: 'evenodd',
+          fill: 'url(#SVGID_1_)',
+        }}
+      />
+      <linearGradient
+        id="SVGID_2_"
+        x1={-384.98}
+        x2={-384.98}
+        y1={761.038}
+        y2={759.799}
+        gradientTransform="matrix(125 0 0 -150 48377.7 114319)"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop
+          offset={0}
+          style={{
+            stopColor: '#a524b3',
+          }}
+        />
+        <stop
+          offset={1}
+          style={{
+            stopColor: '#ff2d55',
+          }}
+        />
+      </linearGradient>
+      <path
+        d="M177.7 163.3v185.9h154.9L177.7 163.3z"
+        style={{
+          fillRule: 'evenodd',
+          clipRule: 'evenodd',
+          fill: 'url(#SVGID_2_)',
+        }}
+      />
+      <path d="M22.8 349.1h154.9V163.3L22.8 349.1z" fill="#FFFFFF" />
+      <path
+        d="M51.7 398.7c14.1 18.7 30.9 35.4 49.6 49.6h297.4c18.7-14.1 35.4-30.9 49.6-49.6H51.7z"
+        style={{
+          fillRule: 'evenodd',
+          clipRule: 'evenodd',
+          fill: '#fc9965',
+        }}
+      />
+      <path
+        d="M101.3 448.3c41.4 31.1 92.9 49.6 148.7 49.6s107.3-18.5 148.7-49.6H101.3z"
+        style={{
+          fillRule: 'evenodd',
+          clipRule: 'evenodd',
+          fill: '#ff2d55',
+        }}
+      />
+      <linearGradient
+        id="SVGID_3_"
+        x1={-383.415}
+        x2={-383.415}
+        y1={760.151}
+        y2={758.912}
+        gradientTransform="matrix(91.7 0 0 -110 35550.598 83879)"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop
+          offset={0}
+          style={{
+            stopColor: '#a524b3',
+          }}
+        />
+        <stop
+          offset={1}
+          style={{
+            stopColor: '#ff2d55',
+          }}
+        />
+      </linearGradient>
+      <path
+        d="M334.6 262.4v136.3h113.6L334.6 262.4z"
+        style={{
+          fillRule: 'evenodd',
+          clipRule: 'evenodd',
+          fill: 'url(#SVGID_3_)',
+        }}
+      />
+      <path
+        d="M334.6 349.1H22.8c7.7 17.7 17.5 34.3 28.9 49.6h283.1v-49.6h-.2z"
+        style={{
+          fillRule: 'evenodd',
+          clipRule: 'evenodd',
+          fill: '#ffbc5b',
+        }}
+      />
+      <path d="M221.1 398.7h113.5V262.4L221.1 398.7z" fill="#FFFFFF" />
+      <circle cx={334.6} cy={163.3} r={62} className="st7" />
+      <circle cx={177.7} cy={95.1} r={31} className="st7" />
+    </svg>
+  )
+}
diff --git a/src/components/Icon/Token/Matic.tsx b/src/components/Icon/Token/Matic.tsx
new file mode 100644
index 0000000..31de694
--- /dev/null
+++ b/src/components/Icon/Token/Matic.tsx
@@ -0,0 +1,27 @@
+export default function Matic({ size = 45 }: { size?: number }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlSpace="preserve"
+      id="matic"
+      x={0}
+      y={0}
+      enableBackground="new 0 0 500 500"
+      width={size}
+      height={size}
+      viewBox="0 0 500 500"
+    >
+      <style>{'.st1{fill:#2b6def}.st2{fill:#2891f9}'}</style>
+      <path
+        d="M331.9 195.9v-95.3l83.3-46.1 80.3 46.9V396l-79.6 46.1-83.3-46.9V290.3L250.8 338l-83.3-48.4v105.6l-81.1 46.9-82.6-47.6V102.1l82.6-46.8z"
+        style={{
+          fill: '#2bbdf7',
+        }}
+      />
+      <path d="m495.5 101.4-80.7 47-82.9-47.8 83.3-46.1z" className="st1" />
+      <path d="M415.9 442.1V148.4l-84-47.8.7 294.6z" className="st2" />
+      <path d="m86.4 55.3 245.5 140.6-81.2 47.6L3.8 102.1z" className="st1" />
+      <path d="M86.4 442.1 3.8 394.5V102.1l246.9 141.4.1 94.5-165.7-95.7z" className="st2" />
+    </svg>
+  )
+}
diff --git a/src/components/Icon/Token/Usdc.tsx b/src/components/Icon/Token/Usdc.tsx
new file mode 100644
index 0000000..4bde4ec
--- /dev/null
+++ b/src/components/Icon/Token/Usdc.tsx
@@ -0,0 +1,37 @@
+export default function Usdc({ size = 45 }: { size?: number }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlSpace="preserve"
+      id="usdc"
+      x={0}
+      y={0}
+      enableBackground="new 0 0 500 500"
+      width={size}
+      height={size}
+      viewBox="0 0 500 500"
+    >
+      <style>{'.st1{fill:#fff}'}</style>
+      <circle
+        cx={250}
+        cy={250}
+        r={248.3}
+        style={{
+          fill: '#2775ca',
+        }}
+      />
+      <path
+        d="M203.4 422.7c0 5.8-4.7 9.1-10.1 7.4C118.1 406 63.8 335.7 63.8 252.5c0-83 54.3-153.4 129.6-177.5 5.6-1.7 10.1 1.6 10.1 7.4v14.5c0 3.9-2.9 8.3-6.6 9.7-59.6 21.9-102 79.1-102 145.9 0 66.9 42.5 124 102 145.7 3.7 1.4 6.6 5.8 6.6 9.7v14.8z"
+        fill="#FFFFFF"
+      />
+      <path
+        d="M265.5 368.9c0 4.3-3.5 7.8-7.8 7.8h-15.5c-4.3 0-7.8-3.5-7.8-7.8v-24.4c-33.9-4.7-50.4-23.5-54.9-49.5-.8-4.5 2.7-8.3 7.2-8.3h17.7c3.7 0 6.8 2.7 7.6 6.2 3.3 15.3 12.2 27.2 39.4 27.2 20 0 34.3-11.3 34.3-27.9 0-16.7-8.3-23.1-37.8-27.9-43.5-5.8-64-19-64-53 0-26.2 20-46.8 50.6-51v-24.1c0-4.3 3.5-7.8 7.8-7.8h15.5c4.3 0 7.8 3.5 7.8 7.8v24.6c25 4.5 40.9 18.6 46.2 42.3 1 4.5-2.5 8.5-7.2 8.5h-16.3c-3.5 0-6.4-2.3-7.4-5.6-4.5-14.9-15.1-21.5-33.8-21.5-20.6 0-31.2 9.9-31.2 23.9 0 14.7 6 22.1 37.6 26.6 42.7 5.8 64.8 18 64.8 54.3 0 27.5-20.6 49.9-52.6 54.9V369h-.2z"
+        fill="#FFFFFF"
+      />
+      <path
+        d="M306.6 430c-5.6 1.7-10.1-1.6-10.1-7.4v-14.5c0-4.3 2.5-8.3 6.6-9.7 59.4-21.7 102-79 102-145.7 0-66.9-42.5-124-102-145.7-3.7-1.4-6.6-5.8-6.6-9.7V82.8c0-5.8 4.7-9.1 10.1-7.4 75.3 23.7 129.6 94.1 129.6 177.1 0 83.2-54.3 153.5-129.6 177.5z"
+        fill="#FFFFFF"
+      />
+    </svg>
+  )
+}
diff --git a/src/components/Icon/Token/Usdt.tsx b/src/components/Icon/Token/Usdt.tsx
new file mode 100644
index 0000000..7b73c30
--- /dev/null
+++ b/src/components/Icon/Token/Usdt.tsx
@@ -0,0 +1,32 @@
+export default function Usdt({ size = 45 }: { size?: number }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlSpace="preserve"
+      id="usdt"
+      x={0}
+      y={0}
+      enableBackground="new 0 0 500 500"
+      width={size}
+      height={size}
+      viewBox="0 0 500 500"
+    >
+      <path
+        d="M91.5 34.7.4 226.2c-.7 1.5-.4 3.2.8 4.3l246.2 235.9c1.5 1.4 3.7 1.4 5.2 0l246.2-235.9c1.2-1.1 1.5-2.9.8-4.3L408.5 34.7c-.6-1.3-1.9-2.2-3.4-2.2H94.9c-1.4 0-2.7.8-3.4 2.2z"
+        style={{
+          fillRule: 'evenodd',
+          clipRule: 'evenodd',
+          fill: '#50af95',
+        }}
+      />
+      <path
+        d="M281.6 245.8c-1.8.1-10.9.7-31.3.7-16.2 0-27.7-.5-31.7-.7-62.6-2.8-109.4-13.7-109.4-26.7 0-13.1 46.7-23.9 109.4-26.7V235c4.1.3 15.8 1 32 1 19.4 0 29.2-.8 30.9-1v-42.6c62.5 2.8 109.1 13.7 109.1 26.7s-46.5 23.9-109 26.7zm0-57.8v-38.1h87.2V91.8H131.4v58.1h87.2V188c-70.9 3.3-124.2 17.3-124.2 34.1s53.3 30.8 124.2 34.1v122.1h63V256.2c70.7-3.3 123.9-17.3 123.9-34.1s-53.1-30.8-123.9-34.1zm0 0z"
+        style={{
+          fillRule: 'evenodd',
+          clipRule: 'evenodd',
+          fill: '#fff',
+        }}
+      />
+    </svg>
+  )
+}
diff --git a/src/components/Icon/Token/Weth.tsx b/src/components/Icon/Token/Weth.tsx
new file mode 100644
index 0000000..09ffa8d
--- /dev/null
+++ b/src/components/Icon/Token/Weth.tsx
@@ -0,0 +1,53 @@
+export default function Weth({ size = 45 }: { size?: number }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlSpace="preserve"
+      id="weth"
+      x={0}
+      y={0}
+      enableBackground="new 0 0 64 64"
+      width={size}
+      height={size}
+      viewBox="0 0 64 64"
+    >
+      <title>{'weth'}</title>
+      <g fill="none" fillRule="evenodd">
+        <path
+          fill="#000"
+          fillRule="nonzero"
+          d="M17.942 63.475c16.086 0 16.086-.24 18.814-1.049 3.564-1.058-10.064-10.492-18.814-10.492s-15.844 2.584-15.844 5.77c0 3.188 7.094 5.771 15.844 5.771Z"
+        />
+        <path
+          fill="#000"
+          fillRule="nonzero"
+          d="m54.47 14.405.74.797-.647.874c-20.98 28.367-33.066 41.21-38.194 39.488-3.123-1.05-6.255-4.205-9.388-8.787a64.713 64.713 0 0 1-3.075-4.994 54.367 54.367 0 0 1-1.431-2.726c-.351-.737-.5-1.19-.617-1.786l-.014-.072a6.09 6.09 0 0 0-.103-.471 28.63 28.63 0 0 1-.954-7.351c0-15.79 12.8-28.59 28.59-28.59 4.947 0 9.714 1.259 13.939 3.622l.109.068c3.459 2.409 7.138 5.718 11.045 9.928ZM41.979 6.667A25.841 25.841 0 0 0 29.377 3.41C15.036 3.41 3.41 15.036 3.41 29.377c0 2.279.293 4.518.866 6.678.057.214.083.335.143.644l.012.064c.076.384.156.63.411 1.165a51.97 51.97 0 0 0 1.355 2.578 62.126 62.126 0 0 0 2.95 4.79c2.83 4.14 5.636 6.968 8.058 7.781 3.229 1.085 15.386-11.784 34.598-37.682-3.488-3.681-6.765-6.59-9.824-8.728Z"
+        />
+        <path
+          fill="#EC1C79"
+          fillRule="nonzero"
+          d="M41.979 6.667A25.841 25.841 0 0 0 29.377 3.41C15.036 3.41 3.41 15.036 3.41 29.377c0 2.279.293 4.518.866 6.678.057.214.083.335.143.644l.012.064c.076.384.156.63.411 1.165a51.97 51.97 0 0 0 1.355 2.578 62.126 62.126 0 0 0 2.95 4.79c2.83 4.14 5.636 6.968 8.058 7.781 3.229 1.085 15.386-11.784 34.598-37.682-3.488-3.681-6.765-6.59-9.824-8.728Z"
+        />
+        <path
+          fill="#000"
+          fillRule="nonzero"
+          d="M34.623 63.213c-15.79 0-28.59-12.8-28.59-28.59s12.8-28.59 28.59-28.59 28.59 12.8 28.59 28.59-12.8 28.59-28.59 28.59Zm0-2.623c14.341 0 25.967-11.626 25.967-25.967S48.964 8.656 34.623 8.656 8.656 20.282 8.656 34.623 20.282 60.59 34.623 60.59Z"
+        />
+        <path
+          fill="#FFF"
+          fillRule="nonzero"
+          d="M34.623 60.59c14.341 0 25.967-11.626 25.967-25.967S48.964 8.656 34.623 8.656 8.656 20.282 8.656 34.623 20.282 60.59 34.623 60.59Z"
+        />
+        <path
+          fill="#000"
+          d="m15.198 39.942-3.437-10.355h3.011l1.792 5.949 1.983-5.978H21l1.983 5.978 1.792-5.95h2.953L24.29 39.943h-2.483l-2.07-5.92-2.057 5.92h-2.483Zm13.66-.073V29.587h8.27v2.423H31.68v1.557h4.935v2.248H31.68v1.63h5.523v2.424h-8.343Zm12.31 0v-7.785h-3.085v-2.497h9.019v2.497h-3.085v7.785h-2.85Zm7.182 0V29.587h2.85v3.848h3.657v-3.848h2.85v10.282h-2.85v-3.907H51.2v3.907h-2.85Z"
+        />
+        <path
+          fill="#000"
+          fillRule="nonzero"
+          d="M2.49 26.494a1.469 1.469 0 1 1 1.314-2.627l4.197 2.098a1.469 1.469 0 0 1-1.314 2.627l-4.196-2.098ZM2.007 33.453a1.469 1.469 0 0 1 1.231-2.668l4.197 1.937a1.469 1.469 0 0 1-1.23 2.668l-4.198-1.937Z"
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/src/components/Icon/Token/index.tsx b/src/components/Icon/Token/index.tsx
new file mode 100644
index 0000000..6404022
--- /dev/null
+++ b/src/components/Icon/Token/index.tsx
@@ -0,0 +1,8 @@
+// src/Icon/Token/index.ts
+export { default as Dai } from './Dai'
+export { default as Eth } from './Eth'
+export { default as Mana } from './Mana'
+export { default as Matic } from './Matic'
+export { default as Usdc } from './Usdc'
+export { default as Usdt } from './Usdt'
+export { default as Weth } from './Weth'
diff --git a/src/components/Token/TokenBalanceCard.tsx b/src/components/Token/TokenBalanceCard.tsx
index b42ec81..4b90376 100644
--- a/src/components/Token/TokenBalanceCard.tsx
+++ b/src/components/Token/TokenBalanceCard.tsx
@@ -4,6 +4,7 @@ import { Header } from 'decentraland-ui/dist/components/Header/Header'
 
 import useFormatMessage from '../../hooks/useFormatMessage'
 import { AggregatedTokenBalance } from '../../types/transparency'
+import { Dai, Eth, Mana, Matic, Usdc, Usdt, Weth } from '../Icon/Token'
 
 import './TokenBalanceCard.css'
 import TokensPerWalletPopup from './TokensPerWalletPopup'
@@ -12,6 +13,25 @@ export type TokenBalanceCardProps = React.HTMLAttributes<HTMLDivElement> & {
   aggregatedTokenBalance: AggregatedTokenBalance
 }
 
+function getIcon(tokenSymbol: string) {
+  switch (tokenSymbol) {
+    case 'mana':
+      return <Mana />
+    case 'dai':
+      return <Dai />
+    case 'eth':
+      return <Eth />
+    case 'matic':
+      return <Matic />
+    case 'usdc':
+      return <Usdc />
+    case 'usdt':
+      return <Usdt />
+    case 'weth':
+      return <Weth />
+  }
+}
+
 export default function TokenBalanceCard({ aggregatedTokenBalance }: TokenBalanceCardProps) {
   const t = useFormatMessage()
   const [openPopup, setOpenPopup] = useState(false)
@@ -27,7 +47,7 @@ export default function TokenBalanceCard({ aggregatedTokenBalance }: TokenBalanc
   return (
     <div className="TokenBalanceCard" onClick={handleClick}>
       {/* TODO: Lib doesn't work with Vite. Get icons directly from repo as svgs */}
-      {/* <Icon name={aggregatedTokenBalance.tokenTotal.symbol.toLowerCase()} size={45} /> */}
+      {getIcon(aggregatedTokenBalance.tokenTotal.symbol.toLowerCase())}
       <div className="TokenBalanceCard_description">
         <div className="TokenBalanceCard__Header">
           <Header sub className="TokenBalanceCard__Symbol">