@xswap-link/sdk 0.3.5 → 0.4.0

package/nodemon.json

@@ -1,5 +1,5 @@
 {
-  "watch": ["src"],
+  "watch": ["src", "xswap.config.ts", "xswap.config.local.ts"],
   "ext": "ts,tsx,css,js",
   "exec": "npm run build"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xswap-link/sdk",
-  "version": "0.3.5",
+  "version": "0.4.0",
   "description": "JavaScript SDK for XSwap platform",
   "homepage": "https://github.com/xswap-link/xswap-sdk",
   "repository": {
@@ -26,20 +26,26 @@
       "require": "./dist/index.js",
       "types": "./dist/index.d.ts",
       "default": "./dist/index.global.js"
-    },
-    "./styles": "./dist/index.css"
+    }
   },
   "dependencies": {
     "@ethersproject/providers": "^5.7.2",
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-regular-svg-icons": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@tanstack/react-query": "^5.35.5",
     "@types/react": "18.2.0",
     "@types/react-dom": "18.2.0",
     "async-retry": "^1.3.3",
     "bignumber.js": "4.0.4",
     "date-fns": "^3.6.0",
-    "ethers": "^5.7.2",
+    "ethers": "5.7.2",
+    "notistack": "^3.0.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-timer-hook": "^3.0.7",
+    "react-virtuoso": "^4.7.12",
     "viem": "2.x",
     "wagmi": "^2.8.5"
   },
@@ -51,13 +57,15 @@
     "@typescript-eslint/eslint-plugin": "^7.1.0",
     "@typescript-eslint/parser": "^7.1.0",
     "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "jest": "^29.7.0",
     "jest-fetch": "^1.1.1",
     "jest-fetch-mock": "^3.0.3",
     "nodemon": "^3.1.0",
+    "postcss-import": "^16.1.0",
+    "postcss-minify": "^1.1.0",
     "tailwindcss": "^3.4.3",
     "ts-jest": "^29.1.2",
-    "ts-node": "^10.9.2",
     "tsup": "^8.1.0",
     "typescript": "^5.3.3"
   },
@@ -71,10 +79,9 @@
     "pino-pretty": "^v7.6.0"
   },
   "scripts": {
-    "build": "tsup src/index.ts --format cjs,esm --dts && pnpm build:cdn",
-    "build:cdn": "tsup src/index.ts --format iife --minify --global-name XPay --env.NODE_ENV production",
-    "watch": "pnpm build && nodemon",
-    "release": "pnpm build && changeset publish",
+    "build": "tsup",
+    "watch": "tsup && nodemon",
+    "release": "tsup && changeset publish",
     "lint": "tsc && eslint . --ext .ts",
     "test": "jest"
   }

package/postcss.config.js

@@ -1,3 +1,10 @@
 module.exports = {
-  plugins: [require("tailwindcss")()],
+  plugins: [
+    // Allows to use @import in CSS
+    require("postcss-import"),
+    // Resolves TailwindCSS
+    require("tailwindcss")(),
+    // Removes comments from CSS and redundant whitespaces
+    require("postcss-minify"),
+  ],
 };

package/src/{components → assets}/icons/ArrowDownIcon.tsx

@@ -4,11 +4,10 @@ export const ArrowDownIcon = () => {
       width="20"
       height="20"
       viewBox="0 0 20 20"
-      fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M12 2.45932L12 12.8957L15.8625 9.15023L18 11.1866L10.5 18.4593L3 11.1866L5.1375 9.15023L9 12.8957L9 2.45932L12 2.45932Z"
+        d="M5 6.81252L0 1.81252L0.895833 0.916687L5 5.04169L9.10417 0.93752L10 1.83335L5 6.81252Z"
         fill="white"
       />
     </svg>

package/src/assets/icons/ArrowDownLongIcon.tsx

@@ -0,0 +1,12 @@
+export const ArrowDownLongIcon = () => {
+  return (
+    <svg
+      width="15"
+      height="17"
+      viewBox="0 0 15 17"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M9 0.459351L9 10.8957L12.8625 7.15026L15 9.18662L7.5 16.4593L-2.79009e-07 9.18662L2.1375 7.15026L6 10.8957L6 0.459351L9 0.459351Z" />
+    </svg>
+  );
+};

package/src/{components → assets}/icons/ArrowLeftIcon.tsx

@@ -4,13 +4,9 @@ export const ArrowLeftIcon = () => {
       width="10"
       height="16"
       viewBox="0 0 10 16"
-      fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <path
-        d="M0.5 8L8.13251 15.5L9.5 14.1562L3.20318 8L9.4682 1.84375L8.10071 0.5L0.5 8Z"
-        fill="white"
-      />
+      <path d="M0.5 8L8.13251 15.5L9.5 14.1562L3.20318 8L9.4682 1.84375L8.10071 0.5L0.5 8Z" />
     </svg>
   );
 };

package/src/{components → assets}/icons/ArrowRightIcon.tsx

@@ -1,10 +1,6 @@
 export const ArrowRightIcon = () => {
   return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 448 512"
-      fill="currentColor"
-    >
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
       <path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z" />
     </svg>
   );

package/src/assets/icons/ArrowUpIcon.tsx

@@ -0,0 +1,12 @@
+export const ArrowUpIcon = () => {
+  return (
+    <svg
+      width="9"
+      height="5"
+      viewBox="0 0 9 5"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M-1 5L4 0L9 5H-1Z" fill="#4CAF50" />
+    </svg>
+  );
+};

package/src/{components → assets}/icons/ArrowUpRightIcon.tsx

@@ -1,10 +1,6 @@
 export const ArrowUpRightIcon = () => {
   return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 512 512"
-      fill="currentColor"
-    >
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
       <path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z" />
     </svg>
   );

package/src/assets/icons/CashbacklIcon.tsx

@@ -0,0 +1,28 @@
+export const CashbackIcon = () => {
+  return (
+    <svg
+      width="22"
+      height="22"
+      viewBox="0 0 22 22"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M11 22C9.13333 22 7.41667 21.575 5.85 20.725C4.28333 19.875 3 18.7417 2 17.325V20H0V14H6V16H3.525C4.325 17.2 5.37917 18.1667 6.6875 18.9C7.99583 19.6333 9.43333 20 11 20C12.25 20 13.4208 19.7625 14.5125 19.2875C15.6042 18.8125 16.5542 18.1708 17.3625 17.3625C18.1708 16.5542 18.8125 15.6042 19.2875 14.5125C19.7625 13.4208 20 12.25 20 11H22C22 12.5167 21.7125 13.9417 21.1375 15.275C20.5625 16.6083 19.775 17.775 18.775 18.775C17.775 19.775 16.6083 20.5625 15.275 21.1375C13.9417 21.7125 12.5167 22 11 22ZM10.1 18V16.7C9.31667 16.5167 8.67917 16.1792 8.1875 15.6875C7.69583 15.1958 7.33333 14.55 7.1 13.75L8.75 13.1C8.95 13.7833 9.2625 14.2958 9.6875 14.6375C10.1125 14.9792 10.6 15.15 11.15 15.15C11.7 15.15 12.1708 15.0208 12.5625 14.7625C12.9542 14.5042 13.15 14.1 13.15 13.55C13.15 13.0667 12.9458 12.675 12.5375 12.375C12.1292 12.075 11.4 11.7333 10.35 11.35C9.36667 11 8.64583 10.5833 8.1875 10.1C7.72917 9.61667 7.5 8.98333 7.5 8.2C7.5 7.51667 7.7375 6.89583 8.2125 6.3375C8.6875 5.77917 9.33333 5.41667 10.15 5.25V4H11.9V5.25C12.5 5.3 13.0458 5.54167 13.5375 5.975C14.0292 6.40833 14.3667 6.91667 14.55 7.5L12.95 8.15C12.8167 7.76667 12.6 7.44583 12.3 7.1875C12 6.92917 11.5833 6.8 11.05 6.8C10.4667 6.8 10.0208 6.925 9.7125 7.175C9.40417 7.425 9.25 7.76667 9.25 8.2C9.25 8.63333 9.44167 8.975 9.825 9.225C10.2083 9.475 10.9 9.76667 11.9 10.1C13.1 10.5333 13.9 11.0417 14.3 11.625C14.7 12.2083 14.9 12.85 14.9 13.55C14.9 14.0333 14.8167 14.4583 14.65 14.825C14.4833 15.1917 14.2625 15.5042 13.9875 15.7625C13.7125 16.0208 13.3917 16.2292 13.025 16.3875C12.6583 16.5458 12.2667 16.6667 11.85 16.75V18H10.1ZM0 11C0 9.48333 0.2875 8.05833 0.8625 6.725C1.4375 5.39167 2.225 4.225 3.225 3.225C4.225 2.225 5.39167 1.4375 6.725 0.8625C8.05833 0.2875 9.48333 0 11 0C12.8667 0 14.5833 0.425 16.15 1.275C17.7167 2.125 19 3.25833 20 4.675V2H22V8H16V6H18.475C17.675 4.8 16.6208 3.83333 15.3125 3.1C14.0042 2.36667 12.5667 2 11 2C9.75 2 8.57917 2.2375 7.4875 2.7125C6.39583 3.1875 5.44583 3.82917 4.6375 4.6375C3.82917 5.44583 3.1875 6.39583 2.7125 7.4875C2.2375 8.57917 2 9.75 2 11H0Z"
+        fill="url(#paint0_linear_1297_6795)"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_1297_6795"
+          x1="0"
+          y1="0"
+          x2="23.1958"
+          y2="1.34279"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#3681C6" />
+          <stop offset="1" stopColor="#2B4A9D" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};

package/src/{components → assets}/icons/CheckIcon.tsx

@@ -1,10 +1,6 @@
 export const CheckIcon = () => {
   return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 448 512"
-      fill="currentColor"
-    >
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
       <path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" />
     </svg>
   );

package/src/assets/icons/ChevronDownIcon.tsx

@@ -0,0 +1,12 @@
+export const ChevronDownIcon = () => {
+  return (
+    <svg
+      width="12"
+      height="12"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512"
+    >
+      <path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"></path>
+    </svg>
+  );
+};

package/src/assets/icons/ChevronUpIcon.tsx

@@ -0,0 +1,7 @@
+export const ChevronUpIcon = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+      <path d="M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z"></path>
+    </svg>
+  );
+};

package/src/{components → assets}/icons/CircularProgressIcon.tsx

@@ -1,11 +1,10 @@
 export const CircularProgressIcon = () => {
   return (
     <svg
-      className="animate-spin-slow xpay-text-white"
+      className="animate-spin-slow text-white"
       width="33"
       height="33"
       viewBox="0 0 33 33"
-      fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
       <circle

package/src/assets/icons/CloseIcon.tsx

@@ -0,0 +1,15 @@
+import { FC } from "react";
+
+export const CloseIcon: FC<{ className?: string }> = ({ className }) => {
+  return (
+    <svg
+      height="18"
+      width="18"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 10.312 8.319"
+      className={className || ""}
+    >
+      <path d="M6.073 4.078 10.151 0H9.093A1.87 1.87 0 0 0 7.77.548L5.157 3.162 2.543.548A1.87 1.87 0 0 0 1.22 0H.161L4.24 4.078 0 8.318h1.058a1.87 1.87 0 0 0 1.322-.547l2.777-2.777 2.776 2.777a1.869 1.869 0 0 0 1.322.548h1.058Z" />
+    </svg>
+  );
+};

package/src/{components → assets}/icons/CoinsIcon.tsx

@@ -4,12 +4,10 @@ export const CoinsIcon = () => {
       width="24"
       height="24"
       viewBox="0 0 24 24"
-      fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
         d="M15 20C12.7667 20 10.875 19.225 9.325 17.675C7.775 16.125 7 14.2333 7 12C7 9.76667 7.775 7.875 9.325 6.325C10.875 4.775 12.7667 4 15 4C17.2333 4 19.125 4.775 20.675 6.325C22.225 7.875 23 9.76667 23 12C23 14.2333 22.225 16.125 20.675 17.675C19.125 19.225 17.2333 20 15 20ZM7 19.75C5.23333 19.2833 3.79167 18.3333 2.675 16.9C1.55833 15.4667 1 13.8333 1 12C1 10.1667 1.55833 8.53333 2.675 7.1C3.79167 5.66667 5.23333 4.71667 7 4.25V6.35C5.8 6.76667 4.83333 7.49167 4.1 8.525C3.36667 9.55833 3 10.7167 3 12C3 13.2833 3.36667 14.4417 4.1 15.475C4.83333 16.5083 5.8 17.2333 7 17.65V19.75ZM15 18C16.6667 18 18.0833 17.4167 19.25 16.25C20.4167 15.0833 21 13.6667 21 12C21 10.3333 20.4167 8.91667 19.25 7.75C18.0833 6.58333 16.6667 6 15 6C13.3333 6 11.9167 6.58333 10.75 7.75C9.58333 8.91667 9 10.3333 9 12C9 13.6667 9.58333 15.0833 10.75 16.25C11.9167 17.4167 13.3333 18 15 18Z"
-        fill="white"
         fillOpacity="0.6"
       />
     </svg>

package/src/assets/icons/CopyIcon.tsx

@@ -0,0 +1,15 @@
+import { FC } from "react";
+
+export const CopyIcon: FC<{ className?: string }> = ({ className }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24"
+      viewBox="0 -960 960 960"
+      width="24"
+      className={className || ""}
+    >
+      <path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z" />
+    </svg>
+  );
+};

package/src/assets/icons/DotGreenIcon.tsx

@@ -0,0 +1,12 @@
+export const DotGreenIcon = () => {
+  return (
+    <svg
+      width="6"
+      height="7"
+      viewBox="0 0 6 7"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="3" cy="3.91418" r="3" fill="#4CAF50" />
+    </svg>
+  );
+};

package/src/{components → assets}/icons/DownArrorIcon.tsx

@@ -4,12 +4,10 @@ export const DownArrowIcon = () => {
       width={16}
       height={16}
       viewBox="0 0 16 16"
-      fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
         d="M8.00008 9.76921L5.06421 6.83334H10.9359L8.00008 9.76921Z"
-        fill="white"
         fillOpacity="0.2"
       />
     </svg>

package/src/{components → assets}/icons/ErrorIcon.tsx

@@ -4,7 +4,6 @@ export const ErrorIcon = () => {
       width="81"
       height="80"
       viewBox="0 0 81 80"
-      fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
       <g id="error_FILL0_wght400_GRAD0_opsz24 1">

package/src/assets/icons/ErrorModalStatusIcon.tsx

@@ -0,0 +1,31 @@
+export const ErrorModalStatusIcon = () => {
+  return (
+    <svg
+      width="81"
+      height="80"
+      viewBox="0 0 81 80"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g id="error_FILL0_wght400_GRAD0_opsz24 1">
+        <path
+          id="Vector"
+          d="M40.5001 56.6667C41.4445 56.6667 42.2362 56.3473 42.8751 55.7084C43.514 55.0695 43.8334 54.2779 43.8334 53.3334C43.8334 52.389 43.514 51.5973 42.8751 50.9584C42.2362 50.3195 41.4445 50.0001 40.5001 50.0001C39.5556 50.0001 38.764 50.3195 38.1251 50.9584C37.4862 51.5973 37.1667 52.389 37.1667 53.3334C37.1667 54.2779 37.4862 55.0695 38.1251 55.7084C38.764 56.3473 39.5556 56.6667 40.5001 56.6667ZM37.1667 43.3334H43.8334V23.3334H37.1667V43.3334ZM40.5001 73.3334C35.889 73.3334 31.5556 72.4584 27.5001 70.7084C23.4445 68.9584 19.9167 66.5834 16.9167 63.5834C13.9167 60.5834 11.5417 57.0556 9.79175 53.0001C8.04175 48.9445 7.16675 44.6112 7.16675 40.0001C7.16675 35.389 8.04175 31.0556 9.79175 27.0001C11.5417 22.9445 13.9167 19.4167 16.9167 16.4167C19.9167 13.4167 23.4445 11.0417 27.5001 9.29175C31.5556 7.54175 35.889 6.66675 40.5001 6.66675C45.1112 6.66675 49.4445 7.54175 53.5001 9.29175C57.5556 11.0417 61.0834 13.4167 64.0834 16.4167C67.0834 19.4167 69.4584 22.9445 71.2084 27.0001C72.9584 31.0556 73.8334 35.389 73.8334 40.0001C73.8334 44.6112 72.9584 48.9445 71.2084 53.0001C69.4584 57.0556 67.0834 60.5834 64.0834 63.5834C61.0834 66.5834 57.5556 68.9584 53.5001 70.7084C49.4445 72.4584 45.1112 73.3334 40.5001 73.3334ZM40.5001 66.6667C47.9445 66.6667 54.2501 64.0834 59.4167 58.9167C64.5834 53.7501 67.1667 47.4445 67.1667 40.0001C67.1667 32.5556 64.5834 26.2501 59.4167 21.0834C54.2501 15.9167 47.9445 13.3334 40.5001 13.3334C33.0556 13.3334 26.7501 15.9167 21.5834 21.0834C16.4167 26.2501 13.8334 32.5556 13.8334 40.0001C13.8334 47.4445 16.4167 53.7501 21.5834 58.9167C26.7501 64.0834 33.0556 66.6667 40.5001 66.6667Z"
+          fill="url(#paint0_linear_230_166)"
+        />
+      </g>
+      <defs>
+        <linearGradient
+          id="paint0_linear_230_166"
+          x1="7.16675"
+          y1="6.66675"
+          x2="77.4571"
+          y2="10.7358"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#F44336" />
+          <stop offset="1" stopColor="#C62828" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};

package/src/assets/icons/HelpIcon.tsx

@@ -0,0 +1,21 @@
+import { forwardRef } from "react";
+
+const HelpIcon = forwardRef<SVGSVGElement, { className?: string }>(
+  ({ className }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        height="24px"
+        viewBox="0 -960 960 960"
+        width="24px"
+        className={className || ""}
+      >
+        <path d="M478-240q21 0 35.5-14.5T528-290q0-21-14.5-35.5T478-340q-21 0-35.5 14.5T428-290q0 21 14.5 35.5T478-240Zm-36-154h74q0-33 7.5-52t42.5-52q26-26 41-49.5t15-56.5q0-56-41-86t-97-30q-57 0-92.5 30T342-618l66 26q5-18 22.5-39t53.5-21q32 0 48 17.5t16 38.5q0 20-12 37.5T506-526q-44 39-54 59t-10 73Zm38 314q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" />
+      </svg>
+    );
+  },
+);
+
+HelpIcon.displayName = "HelpIcon";
+export { HelpIcon };

package/src/assets/icons/HistoryGradientBgIcon.tsx

@@ -0,0 +1,32 @@
+export const HistoryGradientBgIcon = () => {
+  return (
+    <svg
+      width="29"
+      height="28"
+      viewBox="0 0 29 28"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        x="0.5"
+        width="28"
+        height="28"
+        rx="14"
+        fill="url(#paint0_linear_952_1017)"
+      />
+      <path d="M14.3979 21.5C12.5771 21.5 10.9905 20.8646 9.63805 19.5938C8.28562 18.3229 7.51045 16.7361 7.31253 14.8333H8.93545C9.12017 16.2778 9.73041 17.4722 10.7662 18.4167C11.8019 19.3611 13.0125 19.8333 14.3979 19.8333C15.9417 19.8333 17.2512 19.2674 18.3266 18.1354C19.4019 17.0035 19.9396 15.625 19.9396 14C19.9396 12.375 19.4019 10.9965 18.3266 9.86458C17.2512 8.73264 15.9417 8.16667 14.3979 8.16667C13.4875 8.16667 12.6365 8.38889 11.8448 8.83333C11.0532 9.27778 10.3868 9.88889 9.84587 10.6667H12.0229V12.3333H7.27295V7.33333H8.85628V9.29167C9.5292 8.40278 10.3506 7.71528 11.3203 7.22917C12.2901 6.74306 13.316 6.5 14.3979 6.5C15.3875 6.5 16.3144 6.69792 17.1787 7.09375C18.0429 7.48958 18.795 8.02431 19.4349 8.69792C20.0749 9.37153 20.5828 10.1632 20.9589 11.0729C21.3349 11.9826 21.5229 12.9583 21.5229 14C21.5229 15.0417 21.3349 16.0174 20.9589 16.9271C20.5828 17.8368 20.0749 18.6285 19.4349 19.3021C18.795 19.9757 18.0429 20.5104 17.1787 20.9062C16.3144 21.3021 15.3875 21.5 14.3979 21.5ZM16.6146 17.5L13.6063 14.3333V9.83333H15.1896V13.6667L17.7229 16.3333L16.6146 17.5Z" />
+      <defs>
+        <linearGradient
+          id="paint0_linear_952_1017"
+          x1="0.5"
+          y1="0"
+          x2="30.022"
+          y2="1.709"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#3681C6" />
+          <stop offset="1" stopColor="#2B4A9D" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};

package/src/assets/icons/HistoryIcon.tsx

@@ -0,0 +1,12 @@
+export const HistoryIcon = () => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M9.98413 17.5C8.1633 17.5 6.57667 16.8646 5.22424 15.5938C3.8718 14.3229 3.09663 12.7361 2.89871 10.8333H4.52163C4.70635 12.2778 5.3166 13.4722 6.35236 14.4167C7.38812 15.3611 8.59871 15.8333 9.98413 15.8333C11.5279 15.8333 12.8374 15.2674 13.9128 14.1354C14.9881 13.0035 15.5258 11.625 15.5258 10C15.5258 8.375 14.9881 6.99653 13.9128 5.86458C12.8374 4.73264 11.5279 4.16667 9.98413 4.16667C9.07371 4.16667 8.22267 4.38889 7.43101 4.83333C6.63934 5.27778 5.97302 5.88889 5.43205 6.66667H7.60913V8.33333H2.85913V3.33333H4.44246V5.29167C5.11538 4.40278 5.93673 3.71528 6.90653 3.22917C7.87632 2.74306 8.90219 2.5 9.98413 2.5C10.9737 2.5 11.9006 2.69792 12.7649 3.09375C13.6291 3.48958 14.3812 4.02431 15.0211 4.69792C15.661 5.37153 16.169 6.16319 16.5451 7.07292C16.9211 7.98264 17.1091 8.95833 17.1091 10C17.1091 11.0417 16.9211 12.0174 16.5451 12.9271C16.169 13.8368 15.661 14.6285 15.0211 15.3021C14.3812 15.9757 13.6291 16.5104 12.7649 16.9062C11.9006 17.3021 10.9737 17.5 9.98413 17.5ZM12.2008 13.5L9.19246 10.3333V5.83333H10.7758V9.66667L13.3091 12.3333L12.2008 13.5Z" />
+    </svg>
+  );
+};

package/src/{components → assets}/icons/HourGlassIcon.tsx

@@ -1,10 +1,6 @@
 export const HourGlassIcon = () => {
   return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 384 512"
-      fill="currentColor"
-    >
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
       <path d="M0 32C0 14.3 14.3 0 32 0H64 320h32c17.7 0 32 14.3 32 32s-14.3 32-32 32V75c0 42.4-16.9 83.1-46.9 113.1L237.3 256l67.9 67.9c30 30 46.9 70.7 46.9 113.1v11c17.7 0 32 14.3 32 32s-14.3 32-32 32H320 64 32c-17.7 0-32-14.3-32-32s14.3-32 32-32V437c0-42.4 16.9-83.1 46.9-113.1L146.7 256 78.9 188.1C48.9 158.1 32 117.4 32 75V64C14.3 64 0 49.7 0 32zM96 64V75c0 25.5 10.1 49.9 28.1 67.9L192 210.7l67.9-67.9c18-18 28.1-42.4 28.1-67.9V64H96zm0 384H288V437c0-25.5-10.1-49.9-28.1-67.9L192 301.3l-67.9 67.9c-18 18-28.1 42.4-28.1 67.9v11z" />
     </svg>
   );

package/src/assets/icons/Icon.tsx

@@ -0,0 +1,5 @@
+// export const Icon = () => {
+//   return (
+//
+//   );
+// };

package/src/{components → assets}/icons/InfoIcon.tsx

@@ -5,7 +5,6 @@ export const InfoIcon = () => {
       height="28"
       viewBox="0 0 28 28"
       xmlns="http://www.w3.org/2000/svg"
-      fill="currentColor"
     >
       <path d="M12.6667 20.6666H15.3334V12.6666H12.6667V20.6666ZM14.0001 9.99996C14.3779 9.99996 14.6945 9.87218 14.9501 9.61663C15.2056 9.36107 15.3334 9.0444 15.3334 8.66663C15.3334 8.28885 15.2056 7.97218 14.9501 7.71663C14.6945 7.46107 14.3779 7.33329 14.0001 7.33329C13.6223 7.33329 13.3056 7.46107 13.0501 7.71663C12.7945 7.97218 12.6667 8.28885 12.6667 8.66663C12.6667 9.0444 12.7945 9.36107 13.0501 9.61663C13.3056 9.87218 13.6223 9.99996 14.0001 9.99996ZM14.0001 27.3333C12.1556 27.3333 10.4223 26.9833 8.80008 26.2833C7.17786 25.5833 5.76675 24.6333 4.56675 23.4333C3.36675 22.2333 2.41675 20.8222 1.71675 19.2C1.01675 17.5777 0.666748 15.8444 0.666748 14C0.666748 12.1555 1.01675 10.4222 1.71675 8.79996C2.41675 7.17774 3.36675 5.76663 4.56675 4.56663C5.76675 3.36663 7.17786 2.41663 8.80008 1.71663C10.4223 1.01663 12.1556 0.666626 14.0001 0.666626C15.8445 0.666626 17.5779 1.01663 19.2001 1.71663C20.8223 2.41663 22.2334 3.36663 23.4334 4.56663C24.6334 5.76663 25.5834 7.17774 26.2834 8.79996C26.9834 10.4222 27.3334 12.1555 27.3334 14C27.3334 15.8444 26.9834 17.5777 26.2834 19.2C25.5834 20.8222 24.6334 22.2333 23.4334 23.4333C22.2334 24.6333 20.8223 25.5833 19.2001 26.2833C17.5779 26.9833 15.8445 27.3333 14.0001 27.3333ZM14.0001 24.6666C16.9779 24.6666 19.5001 23.6333 21.5667 21.5666C23.6334 19.5 24.6667 16.9777 24.6667 14C24.6667 11.0222 23.6334 8.49996 21.5667 6.43329C19.5001 4.36663 16.9779 3.33329 14.0001 3.33329C11.0223 3.33329 8.50008 4.36663 6.43341 6.43329C4.36675 8.49996 3.33341 11.0222 3.33341 14C3.33341 16.9777 4.36675 19.5 6.43341 21.5666C8.50008 23.6333 11.0223 24.6666 14.0001 24.6666Z" />
     </svg>

package/src/assets/icons/LinkExternalIcon.tsx

@@ -0,0 +1,15 @@
+export const LinkExternalIcon = () => {
+  return (
+    <svg
+      width="19"
+      height="19"
+      viewBox="0 0 19 19"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M2.5 18.5C1.95 18.5 1.47917 18.3042 1.0875 17.9125C0.695833 17.5208 0.5 17.05 0.5 16.5V2.5C0.5 1.95 0.695833 1.47917 1.0875 1.0875C1.47917 0.695833 1.95 0.5 2.5 0.5H9.5V2.5H2.5V16.5H16.5V9.5H18.5V16.5C18.5 17.05 18.3042 17.5208 17.9125 17.9125C17.5208 18.3042 17.05 18.5 16.5 18.5H2.5ZM7.2 13.2L5.8 11.8L15.1 2.5H11.5V0.5H18.5V7.5H16.5V3.9L7.2 13.2Z"
+        fill="#3681C6"
+      />
+    </svg>
+  );
+};

package/src/{components → assets}/icons/PercentageIcon.tsx

@@ -4,7 +4,6 @@ export const PercentageIcon = () => {
       width="12"
       height="12"
       viewBox="0 0 12 12"
-      fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path

package/src/assets/icons/RankIcon.tsx

@@ -0,0 +1,28 @@
+export const RankIcon = () => {
+  return (
+    <svg
+      width="20"
+      height="18"
+      viewBox="0 0 20 18"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M2 16H6V8H2V16ZM8 16H12V2H8V16ZM14 16H18V10H14V16ZM0 18V6H6V0H14V8H20V18H0Z"
+        fill="url(#paint0_linear_1297_6782)"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_1297_6782"
+          x1="0"
+          y1="0"
+          x2="21.0706"
+          y2="1.35529"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#3681C6" />
+          <stop offset="1" stopColor="#2B4A9D" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};

package/src/assets/icons/SettingsGradientBgIcon.tsx

@@ -0,0 +1,32 @@
+export const SettingsGradientBgIcon = () => {
+  return (
+    <svg
+      width="29"
+      height="28"
+      viewBox="0 0 29 28"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        x="0.5"
+        width="28"
+        height="28"
+        rx="14"
+        fill="url(#paint0_linear_952_1014)"
+      />
+      <path d="M12.0373 22.5L11.6791 19.78C11.4851 19.7092 11.3022 19.6242 11.1306 19.525C10.959 19.4258 10.791 19.3196 10.6269 19.2063L7.96269 20.2688L5.5 16.2312L7.80597 14.5738C7.79104 14.4746 7.78358 14.379 7.78358 14.2869V13.7131C7.78358 13.621 7.79104 13.5254 7.80597 13.4262L5.5 11.7688L7.96269 7.73125L10.6269 8.79375C10.791 8.68042 10.9627 8.57417 11.1418 8.475C11.3209 8.37583 11.5 8.29083 11.6791 8.22L12.0373 5.5H16.9627L17.3209 8.22C17.5149 8.29083 17.6978 8.37583 17.8694 8.475C18.041 8.57417 18.209 8.68042 18.3731 8.79375L21.0373 7.73125L23.5 11.7688L21.194 13.4262C21.209 13.5254 21.2164 13.621 21.2164 13.7131V14.2869C21.2164 14.379 21.2015 14.4746 21.1716 14.5738L23.4776 16.2312L21.0149 20.2688L18.3731 19.2063C18.209 19.3196 18.0373 19.4258 17.8582 19.525C17.6791 19.6242 17.5 19.7092 17.3209 19.78L16.9627 22.5H12.0373ZM14.5448 16.975C15.4104 16.975 16.1493 16.6846 16.7612 16.1038C17.3731 15.5229 17.6791 14.8217 17.6791 14C17.6791 13.1783 17.3731 12.4771 16.7612 11.8963C16.1493 11.3154 15.4104 11.025 14.5448 11.025C13.6642 11.025 12.9216 11.3154 12.3172 11.8963C11.7127 12.4771 11.4104 13.1783 11.4104 14C11.4104 14.8217 11.7127 15.5229 12.3172 16.1038C12.9216 16.6846 13.6642 16.975 14.5448 16.975ZM14.5448 15.275C14.1716 15.275 13.8545 15.151 13.5933 14.9031C13.3321 14.6552 13.2015 14.3542 13.2015 14C13.2015 13.6458 13.3321 13.3448 13.5933 13.0969C13.8545 12.849 14.1716 12.725 14.5448 12.725C14.9179 12.725 15.2351 12.849 15.4963 13.0969C15.7575 13.3448 15.8881 13.6458 15.8881 14C15.8881 14.3542 15.7575 14.6552 15.4963 14.9031C15.2351 15.151 14.9179 15.275 14.5448 15.275ZM13.6045 20.8H15.3731L15.6866 18.5475C16.1493 18.4342 16.5784 18.2677 16.9739 18.0481C17.3694 17.8285 17.7313 17.5629 18.0597 17.2513L20.2761 18.1225L21.1493 16.6775L19.2239 15.2963C19.2985 15.0979 19.3507 14.889 19.3806 14.6694C19.4104 14.4498 19.4254 14.2267 19.4254 14C19.4254 13.7733 19.4104 13.5502 19.3806 13.3306C19.3507 13.111 19.2985 12.9021 19.2239 12.7038L21.1493 11.3225L20.2761 9.8775L18.0597 10.77C17.7313 10.4442 17.3694 10.1715 16.9739 9.95188C16.5784 9.73229 16.1493 9.56583 15.6866 9.4525L15.3955 7.2H13.6269L13.3134 9.4525C12.8507 9.56583 12.4216 9.73229 12.0261 9.95188C11.6306 10.1715 11.2687 10.4371 10.9403 10.7488L8.72388 9.8775L7.85075 11.3225L9.77612 12.6825C9.70149 12.895 9.64925 13.1075 9.6194 13.32C9.58955 13.5325 9.57463 13.7592 9.57463 14C9.57463 14.2267 9.58955 14.4462 9.6194 14.6588C9.64925 14.8713 9.70149 15.0837 9.77612 15.2963L7.85075 16.6775L8.72388 18.1225L10.9403 17.23C11.2687 17.5558 11.6306 17.8285 12.0261 18.0481C12.4216 18.2677 12.8507 18.4342 13.3134 18.5475L13.6045 20.8Z" />
+      <defs>
+        <linearGradient
+          id="paint0_linear_952_1014"
+          x1="0.5"
+          y1="0"
+          x2="30.022"
+          y2="1.709"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#3681C6" />
+          <stop offset="1" stopColor="#2B4A9D" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};

package/src/assets/icons/SettingsIcon.tsx

@@ -0,0 +1,12 @@
+export const SettingsIcon = () => {
+  return (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M6.62325 17.5L6.26504 14.78C6.07101 14.7092 5.88818 14.6242 5.71653 14.525C5.54489 14.4258 5.37698 14.3196 5.2128 14.2063L2.54862 15.2688L0.0859375 11.2312L2.39191 9.57375C2.37698 9.47458 2.36952 9.37896 2.36952 9.28687V8.71313C2.36952 8.62104 2.37698 8.52542 2.39191 8.42625L0.0859375 6.76875L2.54862 2.73125L5.2128 3.79375C5.37698 3.68042 5.54862 3.57417 5.72773 3.475C5.90683 3.37583 6.08594 3.29083 6.26504 3.22L6.62325 0.5H11.5486L11.9068 3.22C12.1009 3.29083 12.2837 3.37583 12.4553 3.475C12.627 3.57417 12.7949 3.68042 12.9591 3.79375L15.6233 2.73125L18.0859 6.76875L15.78 8.42625C15.7949 8.52542 15.8024 8.62104 15.8024 8.71313V9.28687C15.8024 9.37896 15.7874 9.47458 15.7576 9.57375L18.0635 11.2312L15.6009 15.2688L12.9591 14.2063C12.7949 14.3196 12.6233 14.4258 12.4441 14.525C12.265 14.6242 12.0859 14.7092 11.9068 14.78L11.5486 17.5H6.62325ZM9.13071 11.975C9.99639 11.975 10.7352 11.6846 11.3471 11.1038C11.9591 10.5229 12.265 9.82167 12.265 9C12.265 8.17833 11.9591 7.47708 11.3471 6.89625C10.7352 6.31542 9.99639 6.025 9.13071 6.025C8.25012 6.025 7.50758 6.31542 6.9031 6.89625C6.29862 7.47708 5.99639 8.17833 5.99639 9C5.99639 9.82167 6.29862 10.5229 6.9031 11.1038C7.50758 11.6846 8.25012 11.975 9.13071 11.975ZM9.13071 10.275C8.75758 10.275 8.44042 10.151 8.17922 9.90312C7.91803 9.65521 7.78743 9.35417 7.78743 9C7.78743 8.64583 7.91803 8.34479 8.17922 8.09688C8.44042 7.84896 8.75758 7.725 9.13071 7.725C9.50385 7.725 9.82101 7.84896 10.0822 8.09688C10.3434 8.34479 10.474 8.64583 10.474 9C10.474 9.35417 10.3434 9.65521 10.0822 9.90312C9.82101 10.151 9.50385 10.275 9.13071 10.275ZM8.19042 15.8H9.95907L10.2725 13.5475C10.7352 13.4342 11.1643 13.2677 11.5598 13.0481C11.9553 12.8285 12.3173 12.5629 12.6456 12.2513L14.8621 13.1225L15.7352 11.6775L13.8098 10.2963C13.8844 10.0979 13.9367 9.88896 13.9665 9.66938C13.9964 9.44979 14.0113 9.22667 14.0113 9C14.0113 8.77333 13.9964 8.55021 13.9665 8.33063C13.9367 8.11104 13.8844 7.90208 13.8098 7.70375L15.7352 6.3225L14.8621 4.8775L12.6456 5.77C12.3173 5.44417 11.9553 5.17146 11.5598 4.95188C11.1643 4.73229 10.7352 4.56583 10.2725 4.4525L9.98146 2.2H8.2128L7.89937 4.4525C7.43668 4.56583 7.00758 4.73229 6.61206 4.95188C6.21653 5.17146 5.85459 5.43708 5.52624 5.74875L3.30982 4.8775L2.43668 6.3225L4.36206 7.6825C4.28743 7.895 4.23519 8.1075 4.20534 8.32C4.17549 8.5325 4.16056 8.75917 4.16056 9C4.16056 9.22667 4.17549 9.44625 4.20534 9.65875C4.23519 9.87125 4.28743 10.0837 4.36206 10.2963L2.43668 11.6775L3.30982 13.1225L5.52624 12.23C5.85459 12.5558 6.21653 12.8285 6.61206 13.0481C7.00758 13.2677 7.43668 13.4342 7.89937 13.5475L8.19042 15.8Z" />
+    </svg>
+  );
+};

package/src/{components → assets}/icons/SignIcon.tsx

@@ -4,12 +4,10 @@ export const SignIcon = () => {
       width="24"
       height="24"
       viewBox="0 0 24 24"
-      fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
         d="M4 21V16.75L17.175 3.6C17.375 3.4 17.6 3.25 17.85 3.15C18.1 3.05 18.35 3 18.6 3C18.8667 3 19.1208 3.05 19.3625 3.15C19.6042 3.25 19.8167 3.4 20 3.6L21.4 5C21.6 5.18333 21.75 5.39583 21.85 5.6375C21.95 5.87917 22 6.13333 22 6.4C22 6.65 21.95 6.9 21.85 7.15C21.75 7.4 21.6 7.625 21.4 7.825L8.25 21H4ZM6 19H7.4L17.225 9.2L16.525 8.475L15.8 7.775L6 17.6V19ZM16.525 8.475L15.8 7.775L17.225 9.2L16.525 8.475ZM14 21C15.2333 21 16.375 20.6917 17.425 20.075C18.475 19.4583 19 18.6 19 17.5C19 16.9 18.8417 16.3833 18.525 15.95C18.2083 15.5167 17.7833 15.1417 17.25 14.825L15.775 16.3C16.1583 16.4667 16.4583 16.65 16.675 16.85C16.8917 17.05 17 17.2667 17 17.5C17 17.8833 16.6958 18.2292 16.0875 18.5375C15.4792 18.8458 14.7833 19 14 19C13.7167 19 13.4792 19.0958 13.2875 19.2875C13.0958 19.4792 13 19.7167 13 20C13 20.2833 13.0958 20.5208 13.2875 20.7125C13.4792 20.9042 13.7167 21 14 21ZM4.575 13.35L6.075 11.85C5.74167 11.7167 5.47917 11.5792 5.2875 11.4375C5.09583 11.2958 5 11.15 5 11C5 10.8 5.15 10.6 5.45 10.4C5.75 10.2 6.38333 9.89167 7.35 9.475C8.81667 8.84167 9.79167 8.26667 10.275 7.75C10.7583 7.23333 11 6.65 11 6C11 5.08333 10.6333 4.35417 9.9 3.8125C9.16667 3.27083 8.2 3 7 3C6.25 3 5.57917 3.13333 4.9875 3.4C4.39583 3.66667 3.94167 3.99167 3.625 4.375C3.44167 4.59167 3.36667 4.83333 3.4 5.1C3.43333 5.36667 3.55833 5.58333 3.775 5.75C3.99167 5.93333 4.23333 6.00833 4.5 5.975C4.76667 5.94167 4.99167 5.83333 5.175 5.65C5.40833 5.41667 5.66667 5.25 5.95 5.15C6.23333 5.05 6.58333 5 7 5C7.68333 5 8.1875 5.1 8.5125 5.3C8.8375 5.5 9 5.73333 9 6C9 6.23333 8.85417 6.44583 8.5625 6.6375C8.27083 6.82917 7.6 7.16667 6.55 7.65C5.21667 8.23333 4.29167 8.7625 3.775 9.2375C3.25833 9.7125 3 10.3 3 11C3 11.5333 3.14167 11.9875 3.425 12.3625C3.70833 12.7375 4.09167 13.0667 4.575 13.35Z"
-        fill="white"
         fillOpacity="0.5"
       />
     </svg>

package/src/{components → assets}/icons/SuccessIcon.tsx

@@ -4,7 +4,6 @@ export const SuccessIcon = () => {
       width="86"
       height="85"
       viewBox="0 0 86 85"
-      fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path