Merge pull request #6 from RealWagmi/asset-logo

Asset logo

.gitignore

@@ -11,4 +11,6 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 storybook-static
-build-storybook.log
+build-storybook.log
+
+.idea

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@real-wagmi/uikit",
-  "version": "1.0.10",
+  "version": "1.0.8",
   "description": "",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -34,7 +34,8 @@
     "@storybook/react-vite": "^7.0.12",
     "@storybook/testing-library": "^0.0.14-next.2",
     "@testing-library/jest-dom": "^5.11.6",
-    "@testing-library/react": "^14.1.0",
+    "@testing-library/react": "^12.1.3",
+    "@testing-library/react-hooks": "8.0.1",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
     "@types/react-router-dom": "^5.1.7",
@@ -56,11 +57,11 @@
     "vitest": "^0.27.2"
   },
   "dependencies": {
+    "@ethersproject/address": "5.7.0",
     "@popperjs/core": "^2.11.8",
     "@reach/portal": "^0.18.0",
     "@real-wagmi/sdk": "^1.1.6",
     "@storybook/addon-themes": "^7.5.3",
-    "@types/node": "^13.13.5",
     "@types/styled-system": "^5.1.15",
     "framer-motion": "10.11.2",
     "react": "^18.2.0",

src/components/Button/index.stories.tsx

@@ -3,7 +3,7 @@ import Button from "./index";
 import { BrowserRouter } from "react-router-dom";
 import { Box, Grid } from "../Box";
 import Text from "../Text";
-import { InfoIcon, QuestionIcon } from "../Svg";
+import { InfoIcon, QuestionIcon } from "../Svg/Icons";
 import Tooltip from "../Tooltip";
 
 export default {

src/components/RadioButton/index.stories.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import RadioButton from "./index";
 import { Box, Grid } from "../Box";
-import { QuestionIcon } from "../Svg";
+import { QuestionIcon } from "../Svg/Icons";
 import Tooltip from "../Tooltip";
 
 export default {

src/components/Svg/Icons/ArrowDownIcon.tsx → src/components/Svg/Icons/components/ArrowDownIcon.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import Svg from "../Svg";
-import { SvgProps } from "../types";
+import Svg from "../../Svg";
+import { SvgProps } from "../../types";
 
 const Icon: React.FC<React.PropsWithChildren<SvgProps>> = (props) => (
   <Svg viewBox="0 0 16 16" {...props} fill="none">

src/components/Svg/Icons/ArrowLeftIcon.tsx → src/components/Svg/Icons/components/ArrowLeftIcon.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import Svg from "../Svg";
-import { SvgProps } from "../types";
+import Svg from "../../Svg";
+import { SvgProps } from "../../types";
 
 const Icon: React.FC<React.PropsWithChildren<SvgProps>> = (props) => (
   <Svg viewBox="0 0 16 16" {...props} fill="none">

src/components/Svg/Icons/InfoIcon.tsx → src/components/Svg/Icons/components/InfoIcon.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import Svg from "../Svg";
-import { SvgProps } from "../types";
+import Svg from "../../Svg";
+import { SvgProps } from "../../types";
 
 const Icon: React.FC<React.PropsWithChildren<SvgProps>> = (props) => (
   <Svg viewBox="0 0 14 14" {...props} stroke="none">

src/components/Svg/Icons/QuestionIcon.tsx → src/components/Svg/Icons/components/QuestionIcon.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import Svg from "../Svg";
-import { SvgProps } from "../types";
+import Svg from "../../Svg";
+import { SvgProps } from "../../types";
 
 const Icon: React.FC<React.PropsWithChildren<SvgProps>> = (props) => (
   <Svg viewBox="0 0 18 18" {...props} stroke="none">

src/components/Svg/index.stories.tsx → src/components/Svg/Icons/index.stories.tsx

@@ -1,14 +1,14 @@
-import Flex from "../Box/Flex";
-import Svg from "./Svg";
+import Flex from "../../Box/Flex";
+import Svg from "../Svg";
 
 export default {
-  title: "Components/Svg Icons",
+  title: "Components/Svg/Icons",
   component: Svg,
   argTypes: {},
 };
 
 // @ts-ignore
-const modules = import.meta.glob("./Icons/*.tsx", { eager: true });
+const modules = import.meta.glob("./components/*.tsx", { eager: true });
 const components: { [key: string]: any } = Object.keys(modules).reduce((accum, path) => {
   const file = path.substring(2).replace(".tsx", "");
   return {

src/components/Svg/Icons/index.tsx

@@ -0,0 +1,4 @@
+export { default as ArrowLeftIcon } from "./components/ArrowLeftIcon";
+export { default as QuestionIcon } from "./components/QuestionIcon";
+export { default as InfoIcon } from "./components/InfoIcon";
+export { default as ArrowDownIcon } from "./components/ArrowDownIcon";

src/components/Svg/Networks/components/Arbitrum.tsx

@@ -0,0 +1,24 @@
+import { FC, ReactElement, PropsWithChildren, memo } from "react";
+import Svg from "../../Svg";
+import { SvgProps } from "../../types";
+
+const Item: FC<PropsWithChildren<SvgProps>> = (props): ReactElement => (
+  <Svg viewBox="0 0 32 32" {...props} fill="none" stroke="none">
+    <rect width="32" height="32" rx="6" fill="url(#paint0_radial_5123_101455)"/>
+    <rect x="0.5" y="0.5" width="31" height="31" rx="5.5" stroke="white" strokeOpacity="0.2"/>
+    <path d="M18.4101 15.0803L20.0844 12.3388L24.5976 19.1216L24.5997 20.4233L24.585 11.466C24.5743 11.247 24.4538 11.0467 24.2616 10.9286L16.1362 6.4187C15.9463 6.32852 15.7051 6.32957 15.5154 6.42155C15.4898 6.43388 15.4656 6.44738 15.4427 6.46211L15.4143 6.47928L7.52741 10.8894L7.49684 10.9028C7.45749 10.9202 7.41766 10.9424 7.38038 10.9682C7.2308 11.0717 7.13153 11.2247 7.09941 11.3963C7.09457 11.4223 7.091 11.4488 7.08936 11.4756L7.10175 18.7749L11.3055 12.4878C11.8348 11.6542 12.9879 11.3856 14.0584 11.4002L15.3148 11.4322L7.91198 22.8878L8.78462 23.3725L16.276 11.4439L19.5873 11.4323L12.1152 23.6619L15.229 25.3901L15.6011 25.5966C15.7584 25.6583 15.944 25.6614 16.1026 25.6061L24.3422 20.9986L22.7669 21.8794L18.4101 15.0803ZM19.0488 23.9585L15.9039 19.1956L17.8237 16.0521L21.9541 22.334L19.0488 23.9585Z" fill="#2D374B"/>
+    <path d="M15.9038 19.1956L19.0487 23.9586L21.954 22.334L17.8236 16.0521L15.9038 19.1956Z" fill="#28A0F0"/>
+    <path d="M24.5998 20.4233L24.5977 19.1216L20.0845 12.3387L18.4102 15.0803L22.767 21.8793L24.3422 20.9985C24.4968 20.8774 24.5903 20.6997 24.6001 20.508L24.5998 20.4233Z" fill="#28A0F0"/>
+    <path d="M5.6875 21.6508L7.91202 22.8877L15.3148 11.4322L14.0584 11.4002C12.9879 11.3856 11.8348 11.6542 11.3055 12.4878L7.10175 18.7749L5.6875 20.8717V21.6508Z" fill="white"/>
+    <path d="M19.5873 11.4323L16.2761 11.4439L8.78467 23.3725L11.4032 24.8272L12.1152 23.6619L19.5873 11.4323Z" fill="white"/>
+    <path d="M25.9952 11.4158C25.9675 10.7476 25.5925 10.1359 25.0052 9.77976L16.7733 5.21186C16.1924 4.92959 15.4666 4.92923 14.8846 5.21167C14.8158 5.24516 6.87934 9.68655 6.87934 9.68655C6.76949 9.73739 6.66369 9.79793 6.56418 9.86667C6.0399 10.2292 5.72033 10.7927 5.6875 11.4117V20.8717L7.10175 18.775L7.0894 11.4756C7.09104 11.4489 7.09452 11.4226 7.09945 11.3967C7.13143 11.225 7.2308 11.0718 7.38042 10.9682C7.41775 10.9424 15.4898 6.43389 15.5155 6.42152C15.7052 6.32958 15.9464 6.32849 16.1363 6.41867L24.2617 10.9285C24.4539 11.0466 24.5744 11.2469 24.5851 11.4659V20.508C24.5753 20.6997 24.4967 20.8774 24.3422 20.9985L22.767 21.8793L21.9541 22.3339L19.0489 23.9585L16.1027 25.606C15.944 25.6613 15.7585 25.6582 15.6011 25.5964L12.1152 23.6618L11.4031 24.8272L14.5358 26.5675C14.6394 26.6244 14.7316 26.6748 14.8074 26.7158C14.9247 26.7792 15.0046 26.8217 15.0328 26.8349C15.2555 26.9393 15.5758 27 15.8645 27C16.1292 27 16.3873 26.9531 16.6315 26.8608L25.1891 22.0787C25.6802 21.7115 25.9692 21.1577 25.9952 20.5578V11.4158Z" fill="#96BEDC"/>
+    <defs>
+      <radialGradient id="paint0_radial_5123_101455" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(16 16) rotate(90) scale(16)">
+        <stop stopColor="#464352"/>
+        <stop offset="1" stopColor="#212936"/>
+      </radialGradient>
+    </defs>
+  </Svg>
+);
+
+export default memo(Item);

src/components/Svg/Networks/components/Avalanche.tsx

@@ -0,0 +1,19 @@
+import { FC, ReactElement, PropsWithChildren, memo } from "react";
+import Svg from "../../Svg";
+import { SvgProps } from "../../types";
+
+const Item: FC<PropsWithChildren<SvgProps>> = (props): ReactElement => (
+  <Svg viewBox="0 0 32 32" {...props} fill="none" stroke="none">
+    <rect width="32" height="32" rx="6" fill="url(#paint0_radial_5123_101536)"/>
+    <rect x="0.5" y="0.5" width="31" height="31" rx="5.5" stroke="white" strokeOpacity="0.2"/>
+    <path d="M20.4811 18.0324C20.9212 17.2722 21.6314 17.2722 22.0715 18.0324L24.8122 22.8436C25.2523 23.6038 24.8922 24.2239 24.012 24.2239H18.4906C17.6204 24.2239 17.2603 23.6038 17.6904 22.8436L20.4811 18.0324ZM15.1798 8.77015C15.6199 8.00997 16.3201 8.00997 16.7602 8.77015L17.3703 9.87042L18.8107 12.401C19.1608 13.1212 19.1608 13.9714 18.8107 14.6916L13.9795 23.0637C13.5394 23.7438 12.8092 24.1739 11.999 24.2239H7.98803C7.10782 24.2239 6.74773 23.6138 7.18784 22.8436L15.1798 8.77015Z" fill="white"/>
+    <defs>
+      <radialGradient id="paint0_radial_5123_101536" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(16 16) rotate(90) scale(16)">
+        <stop stopColor="#D74F49"/>
+        <stop offset="1" stopColor="#E84142"/>
+      </radialGradient>
+    </defs>
+  </Svg>
+);
+
+export default memo(Item);

src/components/Svg/Networks/components/Bnb-chain.tsx

@@ -0,0 +1,27 @@
+import { FC, ReactElement, PropsWithChildren, memo } from "react";
+import Svg from "../../Svg";
+import { SvgProps } from "../../types";
+
+const Item: FC<PropsWithChildren<SvgProps>> = (props): ReactElement => (
+  <Svg viewBox="0 0 32 32" {...props} fill="none" stroke="none">
+    <g clipPath="url(#clip0_5149_102609)">
+      <rect width="32" height="32" rx="6" fill="url(#paint0_radial_5149_102609)"/>
+      <rect x="0.5" y="0.5" width="31" height="31" rx="5.5" stroke="white" strokeOpacity="0.2"/>
+      <path d="M8.79379 16L8.80532 20.2308L12.4002 22.3461V24.8231L6.70148 21.4808V14.7628L8.79379 16ZM8.79379 11.7692V14.2346L6.7002 12.9961V10.5308L8.79379 9.2923L10.8976 10.5308L8.79379 11.7692ZM13.9015 10.5308L15.9951 9.2923L18.0989 10.5308L15.9951 11.7692L13.9015 10.5308Z" fill="white"/>
+      <path d="M10.3066 19.3538V16.8769L12.4002 18.1154V20.5808L10.3066 19.3538ZM13.9015 23.2333L15.9951 24.4718L18.0989 23.2333V25.6987L15.9951 26.9372L13.9015 25.6987V23.2333ZM21.1015 10.5308L23.1951 9.2923L25.2989 10.5308V12.9961L23.1951 14.2346V11.7692L21.1015 10.5308ZM23.1951 20.2308L23.2066 16L25.3002 14.7615V21.4795L19.6015 24.8218V22.3449L23.1951 20.2308Z" fill="white"/>
+      <path d="M21.6937 19.3538L19.6001 20.5807V18.1154L21.6937 16.8769V19.3538Z" fill="white"/>
+      <path d="M21.6938 12.6461L21.7054 15.1231L18.1002 17.2384V21.4795L16.0066 22.7064L13.913 21.4795V17.2384L10.3079 15.1231V12.6461L12.4105 11.4077L15.9938 13.5333L19.5989 11.4077L21.7028 12.6461H21.6938ZM10.3066 8.41665L15.9951 5.06281L21.6938 8.41665L19.6002 9.65511L15.9951 7.52947L12.4002 9.65511L10.3066 8.41665Z" fill="white"/>
+    </g>
+    <defs>
+      <radialGradient id="paint0_radial_5149_102609" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(16 16) rotate(90) scale(16)">
+        <stop stopColor="#FFE184"/>
+        <stop offset="1" stopColor="#F0B90B"/>
+      </radialGradient>
+      <clipPath id="clip0_5149_102609">
+        <rect width="32" height="32" fill="white"/>
+      </clipPath>
+    </defs>
+  </Svg>
+);
+
+export default memo(Item);

src/components/Svg/Networks/components/Ethereum.tsx

@@ -0,0 +1,28 @@
+import { FC, ReactElement, PropsWithChildren, memo } from "react";
+import Svg from "../../Svg";
+import { SvgProps } from "../../types";
+
+const Item: FC<PropsWithChildren<SvgProps>> = (props): ReactElement => (
+  <Svg viewBox="0 0 32 32" {...props} fill="none" stroke="none">
+    <g clipPath="url(#clip0_5043_3360)">
+      <rect width="32" height="32" rx="6" fill="url(#paint0_radial_5043_3360)"/>
+      <rect x="0.5" y="0.5" width="31" height="31" rx="5.5" stroke="white" strokeOpacity="0.2"/>
+      <path opacity="0.7" d="M15.9984 13.2783L9.125 16.4043L15.9984 20.4651L22.8691 16.4043L15.9984 13.2783Z" fill="white"/>
+      <path opacity="0.5" d="M9.125 16.4044L15.9984 20.4652V5L9.125 16.4044Z" fill="white"/>
+      <path opacity="0.8" d="M15.999 5V20.4652L22.8697 16.4044L15.999 5Z" fill="white"/>
+      <path opacity="0.5" d="M9.125 17.7068L15.9984 27.3902V21.7677L9.125 17.7068Z" fill="white"/>
+      <path opacity="0.8" d="M15.999 21.7677V27.3902L22.8752 17.7068L15.999 21.7677Z" fill="white"/>
+    </g>
+    <defs>
+      <radialGradient id="paint0_radial_5043_3360" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(16 16) rotate(90) scale(16)">
+        <stop stopColor="#B2BFE2"/>
+        <stop offset="1" stopColor="#6474A2"/>
+      </radialGradient>
+      <clipPath id="clip0_5043_3360">
+        <rect width="32" height="32" fill="white"/>
+      </clipPath>
+    </defs>
+  </Svg>
+);
+
+export default memo(Item);

src/components/Svg/Networks/components/Fantom.tsx

@@ -0,0 +1,26 @@
+import { FC, ReactElement, PropsWithChildren, memo } from "react";
+import Svg from "../../Svg";
+import { SvgProps } from "../../types";
+
+const Item: FC<PropsWithChildren<SvgProps>> = (props): ReactElement => (
+  <Svg viewBox="0 0 32 32" {...props} fill="none" stroke="none">
+    <g clipPath="url(#clip0_5123_101581)">
+      <rect width="32" height="32" rx="6" fill="url(#paint0_radial_5123_101581)"/>
+      <rect x="0.5" y="0.5" width="31" height="31" rx="5.5" stroke="white" strokeOpacity="0.2"/>
+      <path d="M15.0298 5.08814C15.5688 4.80395 16.389 4.80395 16.9281 5.08814L22.4286 7.98798C22.7533 8.15912 22.9316 8.41416 22.9635 8.67744H22.9688V23.2534C22.9616 23.5406 22.7816 23.8259 22.4286 24.012L16.9281 26.9119C16.389 27.196 15.5688 27.196 15.0298 26.9119L9.52926 24.012C9.17773 23.8267 9.00903 23.5394 9.00068 23.2534C8.99982 23.2241 8.99974 23.1999 9.00065 23.18L9.00068 8.77558C8.99986 8.75532 8.99985 8.73514 9.00066 8.71506L9.00068 8.67744H9.00313C9.02756 8.41125 9.19777 8.16273 9.52926 7.98798L15.0298 5.08814ZM22.0938 16.7812L16.9264 19.5144C16.3881 19.7991 15.5691 19.7991 15.0308 19.5144L9.875 16.7873V23.2084L15.0308 25.921C15.3355 26.084 15.6523 26.2428 15.9608 26.2498L15.9786 26.25C16.2865 26.251 16.5854 26.0945 16.8885 25.9462L22.0938 23.185V16.7812ZM8.13824 22.9375C8.13824 23.4963 8.20261 23.8635 8.33041 24.1223C8.43634 24.3367 8.59527 24.5006 8.88548 24.7L8.90204 24.7113C8.96573 24.7547 9.03589 24.8001 9.12129 24.8534L9.222 24.9156L9.53125 25.1039L9.0877 25.8438L8.74156 25.6328L8.68338 25.5968C8.5833 25.5344 8.50035 25.4809 8.42298 25.4283C7.59589 24.8657 7.28743 24.2523 7.28134 22.9764L7.28125 22.9375H8.13824ZM15.5625 12.9062C15.5225 12.92 15.485 12.936 15.4508 12.9541L9.95864 15.8632C9.95288 15.8663 9.94738 15.8693 9.94215 15.8723L9.9375 15.875L9.94612 15.88L9.95864 15.8868L15.4508 18.7959C15.485 18.814 15.5225 18.83 15.5625 18.8438V12.9062ZM16.4375 12.9062V18.8438C16.4776 18.83 16.5151 18.814 16.5493 18.7959L22.0413 15.8868C22.0471 15.8837 22.0526 15.8807 22.0578 15.8777L22.0625 15.875L22.0539 15.87L22.0413 15.8632L16.5493 12.9541C16.5151 12.936 16.4776 12.92 16.4375 12.9062ZM22.0938 9.71875L17.1562 12.3125L22.0938 14.9062V9.71875ZM9.875 9.71875V14.9062L14.8125 12.3125L9.875 9.71875ZM16.5445 5.86335C16.2586 5.71222 15.7414 5.71222 15.4556 5.86335L9.95866 8.76949C9.95289 8.77255 9.94739 8.77556 9.94215 8.77856L9.9375 8.78125L9.94613 8.78619L9.95866 8.793L15.4556 11.6991C15.7414 11.8503 16.2586 11.8503 16.5445 11.6991L22.0413 8.793C22.0471 8.78994 22.0526 8.78694 22.0578 8.78396L22.0625 8.78125L22.0539 8.77631L22.0413 8.76949L16.5445 5.86335ZM22.9123 6.15625L23.2584 6.36716L23.3166 6.4032C23.4167 6.46553 23.4996 6.51908 23.577 6.57171C24.4041 7.1343 24.7126 7.74766 24.7187 9.02363L24.7188 9.0625H23.8618C23.8618 8.5037 23.7974 8.13647 23.6696 7.87771C23.5637 7.66328 23.4047 7.49939 23.1145 7.29998L23.098 7.28865C23.0343 7.24533 22.9641 7.19994 22.8787 7.14661L22.778 7.08438L22.4688 6.89609L22.9123 6.15625Z" fill="white"/>
+    </g>
+    <defs>
+      <radialGradient id="paint0_radial_5123_101581" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(16 16) rotate(90) scale(16)">
+        <stop stopColor="#8AB3FF"/>
+        <stop offset="1" stopColor="#1969FF"/>
+      </radialGradient>
+      <clipPath id="clip0_5123_101581">
+        <rect width="32" height="32" fill="white"/>
+      </clipPath>
+    </defs>
+  </Svg>
+);
+
+Item.displayName = 'Fantom';
+
+export default memo(Item);

src/components/Svg/Networks/components/Kava-evm.tsx

@@ -0,0 +1,25 @@
+import { FC, ReactElement, PropsWithChildren, memo } from "react";
+import Svg from "../../Svg";
+import { SvgProps } from "../../types";
+
+const Item: FC<PropsWithChildren<SvgProps>> = (props): ReactElement => (
+  <Svg viewBox="0 0 32 32" {...props} fill="none" stroke="none">
+    <g clipPath="url(#clip0_5149_102647)">
+      <rect width="32" height="32" rx="6" fill="url(#paint0_radial_5149_102647)"/>
+      <rect x="0.5" y="0.5" width="31" height="31" rx="5.5" stroke="white" strokeOpacity="0.2"/>
+      <path d="M8.6001 6.39996H12.0001V25.4H8.6001V6.39996Z" fill="white"/>
+      <path d="M20.6302 6.59996L13.5874 15.7811L13.8383 16.1023L13.8338 16.108L20.8464 25.3485H24.9716L25.062 25.2792L17.8242 15.8439L24.862 6.66936L24.7716 6.59996H20.6302Z" fill="white"/>
+    </g>
+    <defs>
+      <radialGradient id="paint0_radial_5149_102647" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(16 16) rotate(90) scale(16)">
+        <stop stopColor="#F93D35"/>
+        <stop offset="1" stopColor="#FF564F"/>
+      </radialGradient>
+      <clipPath id="clip0_5149_102647">
+        <rect width="32" height="32" fill="white"/>
+      </clipPath>
+    </defs>
+  </Svg>
+);
+
+export default memo(Item);

src/components/Svg/Networks/components/Optimism.tsx

@@ -0,0 +1,25 @@
+import { FC, ReactElement, PropsWithChildren, memo } from "react";
+import Svg from "../../Svg";
+import { SvgProps } from "../../types";
+
+const Item: FC<PropsWithChildren<SvgProps>> = (props): ReactElement => (
+  <Svg viewBox="0 0 32 32" {...props} fill="none" stroke="none">
+    <g clipPath="url(#clip0_5149_102631)">
+      <rect width="32" height="32" rx="6" fill="url(#paint0_radial_5149_102631)"/>
+      <rect x="0.5" y="0.5" width="31" height="31" rx="5.5" stroke="white" strokeOpacity="0.2"/>
+      <path d="M11.3346 20.2496C10.381 20.2496 9.60024 20.0256 8.99224 19.5776C8.39064 19.1232 8.08984 18.4704 8.08984 17.632C8.08984 17.4528 8.10904 17.2416 8.14744 16.9856C8.24984 16.4096 8.39704 15.7184 8.58904 14.9056C9.13304 12.704 10.541 11.6032 12.8066 11.6032C13.421 11.6032 13.9778 11.7056 14.4642 11.9168C14.9506 12.1152 15.3346 12.4224 15.6162 12.832C15.8978 13.2352 16.0386 13.7152 16.0386 14.272C16.0386 14.4384 16.0194 14.6496 15.981 14.9056C15.8594 15.616 15.7186 16.3136 15.5458 16.9856C15.2642 18.08 14.7842 18.9056 14.093 19.4496C13.4082 19.9872 12.4866 20.2496 11.3346 20.2496ZM11.5074 18.5216C11.9554 18.5216 12.333 18.3872 12.6466 18.1248C12.9666 17.8624 13.197 17.4592 13.3314 16.9088C13.517 16.1536 13.6578 15.5008 13.7538 14.9376C13.7858 14.7712 13.805 14.5984 13.805 14.4192C13.805 13.6896 13.4274 13.3248 12.6658 13.3248C12.2178 13.3248 11.8338 13.4592 11.5138 13.7216C11.2002 13.984 10.9762 14.3872 10.8418 14.9376C10.6946 15.4752 10.5538 16.128 10.4066 16.9088C10.3746 17.0688 10.3554 17.2352 10.3554 17.4144C10.349 18.1568 10.7394 18.5216 11.5074 18.5216Z" fill="white"/>
+      <path d="M16.5952 20.1344C16.5056 20.1344 16.4416 20.1088 16.3904 20.0512C16.352 19.9872 16.3392 19.9168 16.352 19.8336L18.0096 12.0256C18.0224 11.936 18.0672 11.8656 18.144 11.808C18.2144 11.7504 18.2912 11.7248 18.3744 11.7248H21.568C22.4576 11.7248 23.168 11.9104 23.7056 12.2752C24.2496 12.6464 24.5248 13.1776 24.5248 13.8752C24.5248 14.0736 24.4992 14.2848 24.4544 14.5024C24.256 15.424 23.8528 16.1024 23.2384 16.544C22.6368 16.9856 21.8112 17.2032 20.7616 17.2032H19.1424L18.592 19.8336C18.5728 19.9232 18.5344 19.9936 18.4576 20.0512C18.3872 20.1088 18.3104 20.1344 18.2272 20.1344H16.5952ZM20.8448 15.5456C21.184 15.5456 21.472 15.456 21.7216 15.2704C21.9776 15.0848 22.144 14.8224 22.2272 14.4768C22.2528 14.3424 22.2656 14.2208 22.2656 14.1184C22.2656 13.888 22.1952 13.7088 22.0608 13.5872C21.9264 13.4592 21.6896 13.3952 21.3632 13.3952H19.9232L19.4688 15.5456H20.8448Z" fill="white"/>
+    </g>
+    <defs>
+      <radialGradient id="paint0_radial_5149_102631" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(16 16) rotate(90) scale(16)">
+        <stop stopColor="#CB2436"/>
+        <stop offset="1" stopColor="#FF0420"/>
+      </radialGradient>
+      <clipPath id="clip0_5149_102631">
+        <rect width="32" height="32" fill="white"/>
+      </clipPath>
+    </defs>
+  </Svg>
+);
+
+export default memo(Item);