@xswap-link/sdk 0.3.5 → 0.4.0

package/src/utils/parseWeb3Error.ts

@@ -7,15 +7,19 @@ import { ethers } from "ethers";
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function parseWeb3Error(error: any): string {
-  const errorMessage =
+  let errorMessage =
     typeof error === "string"
       ? error
       : error?.message || "An unknown error occurred";
 
+  // attach contract's errors like "insufficient funds for gas * price + value"
+  errorMessage += error?.data?.message || "";
+
   // User rejected the transaction
   if (
-    errorMessage.includes("User denied transaction signature") ||
-    errorMessage.includes("User rejected the request")
+    errorMessage.match(/User denied transaction signature/i) ||
+    errorMessage.match(/User rejected the request/i) ||
+    errorMessage.match(/User rejected transaction/i)
   ) {
     return "Transaction was cancelled.";
   }

package/tailwind.config.js

@@ -1,20 +1,29 @@
 /** @type {import("tailwindcss").Config} */
 export default {
-  content: ["./src/components/**/*.{js,ts,jsx,tsx,mdx}"],
+  content: ["src/components/**/*.{ts,tsx}"],
   theme: {
+    fontFamily: {
+      body: ["'Satoshi-Medium'", "Tahoma", "Verdana", "ui-sans-serif"],
+      sans: ["Satoshi-Medium", "Tahoma", "Verdana", "ui-sans-serif"],
+    },
     extend: {
       colors: {
         x_alert: "rgb(255,183,77)",
         x_alert_light: "rgb(255,226,183)",
         x_blue: "#3396FF",
         x_green: "#66bb6a",
+        x_orange: "#ffa726",
         x_grey: "#ffffff80",
         x_error_background: "rgba(255,202,40,0.1)",
+        x_skeleton_background: "rgba(255,255,255,0.13)",
         x_error_border: "rgba(255,111,0,1)",
         x_blue_light: "rgba(54,129,198,1)",
         x_blue_dark: "rgba(43,74,157,1)",
         x_green_light: "rgba(43,74,157,1)",
         x_green_dark: "rgba(46,125,50,1)",
+        x_swap_primary: "#e0e7fa",
+        x_swap_secondary: "#1a2b6b",
+        x_swap_secondary_active: "#e0e7fa",
 
         x_gray_100: "#D1D3D4",
         x_gray_200: "#90A4AE",
@@ -55,9 +64,11 @@ export default {
         x_orange_500: "#FF6F00",
         x_orange_600: "#795548",
       },
-      width: {
-        x_desktop: "600px",
-        x_mobile: "360px",
+      minWidth: {
+        x_modal: "360px",
+      },
+      maxWidth: {
+        x_modal: "480px",
       },
       animation: {
         "spin-slow": "spin 3s linear infinite",
@@ -65,5 +76,4 @@ export default {
     },
   },
   plugins: [],
-  prefix: "xpay-",
 };

package/tsconfig.json

@@ -1,21 +1,21 @@
 {
   "compilerOptions": {
+    "target": "es2021",
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "allowJs": true,
     "esModuleInterop": true,
+    "strict": true,
     "skipLibCheck": true,
-    "target": "es2021",
     "verbatimModuleSyntax": false,
-    "allowJs": true,
-    "resolveJsonModule": true,
     "moduleDetection": "force",
-    "strict": true,
     "noUncheckedIndexedAccess": true,
     "moduleResolution": "Bundler",
-    "module": "ESNext",
+    "resolveJsonModule": true,
+    "noImplicitAny": false,
     "noEmit": true,
-    "jsx": "react-jsx",
     "paths": {
       "@src/*": ["./src/*"],
-      "@src/global.css": ["./src/components/global.css"]
     }
   }
 }

package/tsup.config.ts

@@ -0,0 +1,61 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig(() => {
+  return [
+    // Main build configuration
+    {
+      entry: ["src/index.ts"],
+      format: ["cjs", "esm"],
+      dts: true,
+      clean: true,
+      minify: true,
+      splitting: false,
+      sourcemap: true,
+      noExternal: ["ethers"],
+      outDir: "dist",
+      esbuildOptions(options) {
+        options.loader = {
+          ...options.loader,
+          ".ttf": "dataurl",
+          ".eot": "dataurl",
+          ".woff": "dataurl",
+          ".woff2": "dataurl",
+        };
+      },
+      loader: {
+        ".css": "text",
+        ".eot": "file",
+        ".ttf": "file",
+        ".woff": "file",
+        ".woff2": "file",
+      },
+    },
+    // CDN build configuration
+    {
+      entry: ["src/index.ts"],
+      format: ["iife"],
+      globalName: "XPay",
+      minify: true,
+      splitting: false,
+      sourcemap: true,
+      // bundle: true,
+      outDir: "dist",
+      esbuildOptions(options) {
+        options.loader = {
+          ...options.loader,
+          ".ttf": "dataurl",
+          ".eot": "dataurl",
+          ".woff": "dataurl",
+          ".woff2": "dataurl",
+        };
+      },
+      loader: {
+        ".css": "text",
+        ".eot": "file",
+        ".ttf": "file",
+        ".woff": "file",
+        ".woff2": "file",
+      },
+    },
+  ];
+});

package/xswap.config.ts

@@ -2,6 +2,7 @@ import { XSwapConfig } from "@src/models";
 
 const xSwapConfig: XSwapConfig = {
   apiUrl: "https://xswap.link/api",
+  localCss: false,
 };
 
 let xSwapConfigLocal = {};

package/dist/index.css

@@ -1 +0,0 @@
-*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.xpay-global-border{border:1px solid rgba(255,255,255,.1)}.xpay-fixed{position:fixed}.xpay-absolute{position:absolute}.xpay-relative{position:relative}.xpay-bottom-0{bottom:0}.xpay-bottom-5{bottom:1.25rem}.xpay-left-0{left:0}.xpay-right-0{right:0}.xpay-right-2{right:.5rem}.xpay-right-4{right:1rem}.xpay-right-\[50\%\]{right:50%}.xpay-top-0{top:0}.xpay-top-10{top:2.5rem}.xpay-top-4{top:1rem}.xpay-top-\[46px\]{top:46px}.xpay-z-10{z-index:10}.xpay-z-20{z-index:20}.xpay-z-50{z-index:50}.xpay-z-\[1\]{z-index:1}.xpay-z-\[999\]{z-index:999}.xpay-mx-0{margin-left:0;margin-right:0}.xpay-mx-1\.5{margin-left:.375rem;margin-right:.375rem}.xpay-mx-2{margin-left:.5rem;margin-right:.5rem}.xpay-mx-\[-24px\]{margin-left:-24px;margin-right:-24px}.xpay-mx-auto{margin-left:auto;margin-right:auto}.xpay-my-0{margin-top:0;margin-bottom:0}.xpay-my-3{margin-top:.75rem;margin-bottom:.75rem}.xpay-my-4{margin-top:1rem;margin-bottom:1rem}.xpay--mb-6{margin-bottom:-1.5rem}.xpay--mt-7{margin-top:-1.75rem}.xpay-mb-1{margin-bottom:.25rem}.xpay-mb-2{margin-bottom:.5rem}.xpay-mb-4{margin-bottom:1rem}.xpay-ml-1{margin-left:.25rem}.xpay-ml-2{margin-left:.5rem}.xpay-ml-2\.5{margin-left:.625rem}.xpay-mr-1{margin-right:.25rem}.xpay-mt-1{margin-top:.25rem}.xpay-mt-4{margin-top:1rem}.xpay-box-border{box-sizing:border-box}.xpay-block{display:block}.xpay-flex{display:flex}.xpay-inline-flex{display:inline-flex}.xpay-h-10{height:2.5rem}.xpay-h-14{height:3.5rem}.xpay-h-3{height:.75rem}.xpay-h-3\.5{height:.875rem}.xpay-h-4{height:1rem}.xpay-h-5{height:1.25rem}.xpay-h-6{height:1.5rem}.xpay-h-7{height:1.75rem}.xpay-h-8{height:2rem}.xpay-h-9{height:2.25rem}.xpay-h-96{height:24rem}.xpay-h-\[2px\]{height:2px}.xpay-h-\[30vh\]{height:30vh}.xpay-h-\[36px\]{height:36px}.xpay-h-\[41px\]{height:41px}.xpay-h-\[70\%\]{height:70%}.xpay-h-\[9px\]{height:9px}.xpay-h-full{height:100%}.xpay-h-px{height:1px}.xpay-max-h-\[40vh\]{max-height:40vh}.xpay-max-h-\[70\%\]{max-height:70%}.xpay-min-h-\[26px\]{min-height:26px}.xpay-w-1\/2{width:50%}.xpay-w-10{width:2.5rem}.xpay-w-12{width:3rem}.xpay-w-14{width:3.5rem}.xpay-w-20{width:5rem}.xpay-w-3\.5{width:.875rem}.xpay-w-4{width:1rem}.xpay-w-5{width:1.25rem}.xpay-w-6{width:1.5rem}.xpay-w-7{width:1.75rem}.xpay-w-8{width:2rem}.xpay-w-9{width:2.25rem}.xpay-w-\[100\%\+48px\]{width:100%+48px}.xpay-w-\[100px\]{width:100px}.xpay-w-\[15px\]{width:15px}.xpay-w-\[310px\]{width:310px}.xpay-w-\[452px\]{width:452px}.xpay-w-full{width:100%}.xpay-w-px{width:1px}.xpay-w-screen{width:100vw}.xpay-min-w-60{min-width:15rem}.xpay-min-w-\[26px\]{min-width:26px}.xpay-max-w-full{max-width:100%}.xpay-grow{flex-grow:1}.xpay-translate-x-1\/2{--tw-translate-x: 50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.xpay-translate-x-\[12px\]{--tw-translate-x: 12px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.xpay-translate-y-\[-4px\]{--tw-translate-y: -4px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.xpay-translate-y-\[-60\%\]{--tw-translate-y: -60%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes xpay-pulse{50%{opacity:.5}}.xpay-animate-pulse{animation:xpay-pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes xpay-spin{to{transform:rotate(360deg)}}.xpay-animate-spin{animation:xpay-spin 1s linear infinite}.xpay-cursor-pointer{cursor:pointer}.xpay-flex-col{flex-direction:column}.xpay-flex-wrap{flex-wrap:wrap}.xpay-items-start{align-items:flex-start}.xpay-items-end{align-items:flex-end}.xpay-items-center{align-items:center}.xpay-justify-end{justify-content:flex-end}.xpay-justify-center{justify-content:center}.xpay-justify-between{justify-content:space-between}.xpay-gap-1{gap:.25rem}.xpay-gap-2{gap:.5rem}.xpay-gap-2\.5{gap:.625rem}.xpay-gap-3{gap:.75rem}.xpay-gap-4{gap:1rem}.xpay-overflow-auto{overflow:auto}.xpay-overflow-hidden{overflow:hidden}.xpay-overflow-scroll{overflow:scroll}.xpay-overflow-x-hidden{overflow-x:hidden}.xpay-overflow-y-scroll{overflow-y:scroll}.xpay-overflow-ellipsis,.xpay-text-ellipsis{text-overflow:ellipsis}.xpay-whitespace-nowrap{white-space:nowrap}.xpay-rounded{border-radius:.25rem}.xpay-rounded-2xl{border-radius:1rem}.xpay-rounded-3xl{border-radius:1.5rem}.xpay-rounded-full{border-radius:9999px}.xpay-rounded-lg{border-radius:.5rem}.xpay-rounded-xl{border-radius:.75rem}.xpay-border{border-width:1px}.xpay-border-2{border-width:2px}.xpay-border-solid{border-style:solid}.xpay-border-none{border-style:none}.xpay-border-\[rgba\(255\,255\,255\,0\.1\)\]{border-color:#ffffff1a}.xpay-border-\[rgba\(255\,255\,255\,0\.2\)\]{border-color:#fff3}.xpay-border-\[rgba\(54\,129\,198\,1\)\]{border-color:#3681c6}.xpay-border-\[rgba\(82\,82\,82\,1\)\]{border-color:#525252}.xpay-border-transparent{border-color:transparent}.xpay-border-x_alert{--tw-border-opacity: 1;border-color:rgb(255 183 77 / var(--tw-border-opacity))}.xpay-border-x_blue_dark{border-color:#2b4a9d}.xpay-border-x_error_border{border-color:#ff6f00}.xpay-border-x_green_dark{border-color:#2e7d32}.xpay-bg-\[\#272e40\]{--tw-bg-opacity: 1;background-color:rgb(39 46 64 / var(--tw-bg-opacity))}.xpay-bg-\[rgb\(15\,15\,15\)\]{--tw-bg-opacity: 1;background-color:rgb(15 15 15 / var(--tw-bg-opacity))}.xpay-bg-\[rgb\(35\,35\,35\)\]{--tw-bg-opacity: 1;background-color:rgb(35 35 35 / var(--tw-bg-opacity))}.xpay-bg-\[rgba\(0\,0\,0\,0\.8\)\]{background-color:#000c}.xpay-bg-\[rgba\(15\,15\,15\,1\)\]{background-color:#0f0f0f}.xpay-bg-\[rgba\(2\,2\,2\,1\)\]{background-color:#020202}.xpay-bg-\[rgba\(255\,255\,255\,0\.1\)\]{background-color:#ffffff1a}.xpay-bg-\[rgba\(255\,255\,255\,0\.15\)\]{background-color:#ffffff26}.xpay-bg-\[rgba\(255\,255\,255\,0\.3\)\]{background-color:#ffffff4d}.xpay-bg-\[rgba\(39\,39\,39\,1\)\]{background-color:#272727}.xpay-bg-black{--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity))}.xpay-bg-gray-700{--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity))}.xpay-bg-transparent{background-color:transparent}.xpay-bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.xpay-bg-x_blue{--tw-bg-opacity: 1;background-color:rgb(51 150 255 / var(--tw-bg-opacity))}.xpay-bg-x_error_background{background-color:#ffca281a}.xpay-bg-gradient-to-l{background-image:linear-gradient(to left,var(--tw-gradient-stops))}.xpay-bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.xpay-from-\[\#3681c6\]{--tw-gradient-from: #3681c6 var(--tw-gradient-from-position);--tw-gradient-to: rgb(54 129 198 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.xpay-from-\[rgba\(54\,129\,198\,0\.2\)\]{--tw-gradient-from: rgba(54,129,198,.2) var(--tw-gradient-from-position);--tw-gradient-to: rgba(54, 129, 198, 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.xpay-from-\[rgba\(54\,129\,198\,1\)\]{--tw-gradient-from: rgba(54,129,198,1) var(--tw-gradient-from-position);--tw-gradient-to: rgba(54, 129, 198, 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.xpay-from-\[rgba\(76\,175\,80\,0\.2\)\]{--tw-gradient-from: rgba(76,175,80,.2) var(--tw-gradient-from-position);--tw-gradient-to: rgba(76, 175, 80, 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.xpay-from-x_blue_300_20{--tw-gradient-from: #3681C633 var(--tw-gradient-from-position);--tw-gradient-to: rgb(54 129 198 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.xpay-from-x_blue_light{--tw-gradient-from: rgba(54,129,198,1) var(--tw-gradient-from-position);--tw-gradient-to: rgba(54, 129, 198, 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.xpay-to-\[\#2b4a9d\]{--tw-gradient-to: #2b4a9d var(--tw-gradient-to-position)}.xpay-to-\[rgba\(43\,74\,157\,0\.2\)\]{--tw-gradient-to: rgba(43,74,157,.2) var(--tw-gradient-to-position)}.xpay-to-\[rgba\(43\,74\,157\,1\)\]{--tw-gradient-to: rgba(43,74,157,1) var(--tw-gradient-to-position)}.xpay-to-\[rgba\(46\,125\,50\,0\.2\)\]{--tw-gradient-to: rgba(46,125,50,.2) var(--tw-gradient-to-position)}.xpay-to-x_blue_400_20{--tw-gradient-to: #2B4A9D33 var(--tw-gradient-to-position)}.xpay-to-x_blue_dark{--tw-gradient-to: rgba(43,74,157,1) var(--tw-gradient-to-position)}.xpay-bg-clip-text{background-clip:text}.xpay-fill-\[rgba\(54\,129\,198\,1\)\]{fill:#3681c6}.xpay-p-0{padding:0}.xpay-p-2{padding:.5rem}.xpay-p-3{padding:.75rem}.xpay-p-4{padding:1rem}.xpay-p-5{padding:1.25rem}.xpay-p-6{padding:1.5rem}.xpay-p-\[5px\]{padding:5px}.xpay-px-0{padding-left:0;padding-right:0}.xpay-px-12{padding-left:3rem;padding-right:3rem}.xpay-px-2{padding-left:.5rem;padding-right:.5rem}.xpay-px-3{padding-left:.75rem;padding-right:.75rem}.xpay-px-4{padding-left:1rem;padding-right:1rem}.xpay-px-\[24px\]{padding-left:24px;padding-right:24px}.xpay-py-0{padding-top:0;padding-bottom:0}.xpay-py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.xpay-py-1{padding-top:.25rem;padding-bottom:.25rem}.xpay-py-2{padding-top:.5rem;padding-bottom:.5rem}.xpay-py-4{padding-top:1rem;padding-bottom:1rem}.xpay-pl-9{padding-left:2.25rem}.xpay-pt-2{padding-top:.5rem}.xpay-text-left{text-align:left}.xpay-text-center{text-align:center}.xpay-text-right{text-align:right}.xpay-align-middle{vertical-align:middle}.xpay-text-2xl{font-size:1.5rem;line-height:2rem}.xpay-text-\[10px\]{font-size:10px}.xpay-text-\[11px\]{font-size:11px}.xpay-text-\[15px\]{font-size:15px}.xpay-text-base{font-size:1rem;line-height:1.5rem}.xpay-text-sm{font-size:.875rem;line-height:1.25rem}.xpay-text-xl{font-size:1.25rem;line-height:1.75rem}.xpay-text-xs{font-size:.75rem;line-height:1rem}.xpay-font-bold{font-weight:700}.xpay-font-light{font-weight:300}.xpay-font-medium{font-weight:500}.xpay-font-normal{font-weight:400}.xpay-leading-8{line-height:2rem}.xpay-leading-\[10px\]{line-height:10px}.xpay-leading-\[16px\]{line-height:16px}.xpay-leading-\[41px\]{line-height:41px}.xpay-leading-none{line-height:1}.xpay-text-\[\#888\]{--tw-text-opacity: 1;color:rgb(136 136 136 / var(--tw-text-opacity))}.xpay-text-\[\#e0e7fa\]{--tw-text-opacity: 1;color:rgb(224 231 250 / var(--tw-text-opacity))}.xpay-text-\[\#ffa726\]{--tw-text-opacity: 1;color:rgb(255 167 38 / var(--tw-text-opacity))}.xpay-text-\[rgb\(100\,200\,100\)\]{--tw-text-opacity: 1;color:rgb(100 200 100 / var(--tw-text-opacity))}.xpay-text-\[rgb\(158\,158\,158\)\]{--tw-text-opacity: 1;color:rgb(158 158 158 / var(--tw-text-opacity))}.xpay-text-\[rgb\(250\,200\,100\)\]{--tw-text-opacity: 1;color:rgb(250 200 100 / var(--tw-text-opacity))}.xpay-text-\[rgb\(255\,100\,100\)\]{--tw-text-opacity: 1;color:rgb(255 100 100 / var(--tw-text-opacity))}.xpay-text-\[rgba\(255\,255\,255\,0\.2\)\]{color:#fff3}.xpay-text-\[rgba\(255\,255\,255\,0\.6\)\]{color:#fff9}.xpay-text-\[rgba\(54\,129\,198\,1\)\]{color:#3681c6}.xpay-text-black{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity))}.xpay-text-gray-200{--tw-text-opacity: 1;color:rgb(229 231 235 / var(--tw-text-opacity))}.xpay-text-transparent{color:transparent}.xpay-text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.xpay-text-x_alert_light{--tw-text-opacity: 1;color:rgb(255 226 183 / var(--tw-text-opacity))}.xpay-text-x_blue_dark{color:#2b4a9d}.xpay-text-x_green{--tw-text-opacity: 1;color:rgb(102 187 106 / var(--tw-text-opacity))}.xpay-text-x_grey{color:#ffffff80}.xpay-underline{text-decoration-line:underline}.xpay-no-underline{text-decoration-line:none}.xpay-opacity-50{opacity:.5}.xpay-opacity-60{opacity:.6}.xpay-shadow-sm{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.xpay-outline-none{outline:2px solid transparent;outline-offset:2px}.xpay-transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.xpay{*{scrollbar-width:thin;scrollbar-color:#252525 #000}*::-webkit-scrollbar{width:4px}*::-webkit-scrollbar-track{background:#000;border-radius:4px}*::-webkit-scrollbar-thumb{background-color:#252525;border-radius:4px}}.placeholder\:xpay-text-sm::placeholder{font-size:.875rem;line-height:1.25rem}.placeholder\:xpay-text-\[rgba\(255\,255\,255\,0\.2\)\]::placeholder{color:#fff3}.last\:xpay-mb-0:last-child{margin-bottom:0}.visited\:xpay-text-white:visited{color:#fff}.hover\:xpay-cursor-pointer:hover{cursor:pointer}.hover\:xpay-bg-\[rgb\(25\,25\,25\)\]:hover{--tw-bg-opacity: 1;background-color:rgb(25 25 25 / var(--tw-bg-opacity))}.hover\:xpay-text-white:hover{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.focus\:xpay-outline-none:focus{outline:2px solid transparent;outline-offset:2px}.disabled\:xpay-opacity-25:disabled{opacity:.25}@media (min-width: 640px){.sm\:xpay-w-\[190px\]{width:190px}.sm\:xpay-w-\[520px\]{width:520px}.sm\:xpay-w-x_desktop{width:600px}.sm\:xpay-flex-row{flex-direction:row}.sm\:xpay-gap-5{gap:1.25rem}.sm\:xpay-p-4{padding:1rem}.sm\:xpay-text-3xl{font-size:1.875rem;line-height:2.25rem}.sm\:xpay-text-base{font-size:1rem;line-height:1.5rem}.sm\:xpay-text-sm{font-size:.875rem;line-height:1.25rem}.sm\:xpay-text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width: 768px){.md\:xpay-p-4{padding:1rem}}@media (prefers-color-scheme: dark){.dark\:xpay-text-gray-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity))}}

package/src/components/TxConfigForm/BalanceComponent.tsx

@@ -1,52 +0,0 @@
-import { MINIMUM_DISPLAYED_TOKEN_AMOUNT } from "@src/constants";
-import { Token, TokenBalances } from "@src/models";
-import { weiToHumanReadable } from "@src/utils";
-import BigNumber from "bignumber.js";
-import { FC, useMemo } from "react";
-
-interface Props {
-  srcToken: Token | undefined;
-  balances: TokenBalances | undefined;
-}
-
-export const BalanceComponent: FC<Props> = ({ srcToken, balances }) => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const balanceText = useMemo(() => {
-    if (!balances || !srcToken) return "0";
-    if (balances[srcToken.address]?.toString() === "0") return "0";
-    const fullHumanReadable = weiToHumanReadable({
-      amount: balances[srcToken.address]?.toString() || "0",
-      decimals: srcToken.decimals,
-      precisionFractionalPlaces: srcToken.decimals,
-    });
-
-    if (
-      new BigNumber(fullHumanReadable).lt(
-        MINIMUM_DISPLAYED_TOKEN_AMOUNT.toString(),
-      )
-    )
-      return `<${MINIMUM_DISPLAYED_TOKEN_AMOUNT}`;
-
-    return weiToHumanReadable({
-      amount: balances[srcToken.address]?.toString() || "0",
-      decimals: srcToken.decimals,
-      precisionFractionalPlaces: 5,
-    });
-  }, [srcToken, balances]);
-
-  return (
-    <>
-      Balance:{" "}
-      {srcToken && balances
-        ? weiToHumanReadable({
-            amount: balances[srcToken.address]?.toString() || "0",
-            decimals: srcToken.decimals,
-            precisionFractionalPlaces: 4,
-          })
-        : 0}
-      <span className="xpay-bg-gradient-to-r xpay-from-x_blue_light xpay-to-x_blue_dark xpay-bg-clip-text xpay-text-transparent">
-        Max
-      </span>
-    </>
-  );
-};

package/src/components/TxConfigForm/Button.tsx

@@ -1,20 +0,0 @@
-import { FC, ReactNode } from "react";
-
-interface Props {
-  children: ReactNode;
-  onClick?: () => void;
-  type?: "submit" | "reset" | "button";
-  disabled?: boolean;
-}
-export const Button: FC<Props> = ({ children, onClick, type, disabled }) => {
-  return (
-    <button
-      className="xpay-text-white xpay-border-none xpay-rounded-2xl xpay-text-xl xpay-py-4 xpay-cursor-pointer xpay-w-full xpay-bg-gradient-to-r xpay-from-[#3681c6] xpay-to-[#2b4a9d] disabled:xpay-opacity-25"
-      onClick={onClick}
-      type={type}
-      disabled={disabled}
-    >
-      {children}
-    </button>
-  );
-};

package/src/components/TxConfigForm/ChainListElement.tsx

@@ -1,36 +0,0 @@
-import { FC } from "react";
-import { Chain } from "@src/models";
-
-interface Props {
-  chain: Chain;
-  index: number;
-  length: number;
-  setSrcChain: (chain: Chain) => void;
-  setChainListShown: (x: boolean) => void;
-}
-
-export const ChainListElement: FC<Props> = ({
-  chain,
-  setSrcChain,
-  setChainListShown,
-  index,
-  length,
-}) => {
-  return (
-    <div key={`${chain.ecosystem}-${chain.chainId}`}>
-      <li
-        className="xpay-bg-transparent xpay-border-none xpay-flex xpay-gap-1 xpay-items-center xpay-cursor-pointer xpay-py-2 xpay-w-full"
-        onClick={() => {
-          setSrcChain(chain);
-          setChainListShown(false);
-        }}
-      >
-        <img width={12} height={12} src={chain.image} alt={chain.displayName} />
-        {chain.displayName}
-      </li>
-      {index !== length - 1 && (
-        <div className="xpay-h-px xpay-mx-2 xpay-bg-[rgba(255,255,255,0.15)]"></div>
-      )}
-    </div>
-  );
-};

package/src/components/TxConfigForm/ConfirmationAmount.tsx

@@ -1,91 +0,0 @@
-import { FC, useEffect, useMemo, useState } from "react";
-import { weiToHumanReadable } from "@src/utils";
-import { Chain, Token, TokenPrices } from "@src/models";
-import { UsdPrice } from "@src/components/TxConfigForm/UsdPrice";
-import { getPrices } from "@src/services";
-import { UnknownTokenLogo } from "../UnknownTokenLogo/UnknownTokenLogo";
-
-interface Props {
-  amount: string;
-  token?: Token;
-  chain?: Chain;
-  type: "src" | "dst";
-}
-
-export const ConfirmationAmount: FC<Props> = ({
-  amount,
-  token,
-  chain,
-  type,
-}) => {
-  const [prices, setPrices] = useState<TokenPrices>();
-
-  const amountReadable = useMemo(() => {
-    return weiToHumanReadable({
-      amount: amount || "0",
-      decimals: token?.decimals || 18,
-      precisionFractionalPlaces: 8,
-    });
-  }, [amount, token]);
-
-  useEffect(() => {
-    if (chain) {
-      getPrices({ chainId: chain.chainId, currency: "USD" }).then((prices) =>
-        setPrices(prices),
-      );
-    }
-  }, [chain]);
-
-  return (
-    <div className="xpay-flex xpay-flex-col xpay-globalBorder xpay-rounded-xl xpay-bg-gradient-to-r xpay-from-x_blue_300_20 xpay-to-x_blue_400_20 xpay-p-4 xpay-relative">
-      <div className="xpay-flex xpay-justify-between">
-        <div className="xpay-flex xpay-flex-col xpay-gap-1">
-          <p className="xpay-text-white xpay-opacity-60 xpay-text-xs sm:xpay-text-sm xpay-font-medium">
-            {type === "src" ? "You pay" : "You receive"}
-          </p>
-          <div
-            className={`xpay-flex xpay-gap-2 xpay-items-center  xpay-text-xl sm:xpay-text-3xl ${
-              type === "dst"
-                ? "xpay-text-[rgba(54,129,198,1)]"
-                : "xpay-text-white"
-            }`}
-          >
-            {amountReadable}
-          </div>
-
-          <UsdPrice
-            prices={prices}
-            token={token}
-            amount={amountReadable}
-            loading={false}
-          />
-        </div>
-        <div className="xpay-flex  xpay-gap-2 xpay-text-sm xpay-justify-center xpay-items-center">
-          <div className="xpay-flex xpay-flex-col xpay-justify-center xpay-items-end xpay-gap-1">
-            <p className="xpay-text-base sm:xpay-text-xl">{token?.name}</p>
-            <div className="xpay-flex xpay-justify-center xpay-items-center xpay-gap-1">
-              <p className="xpay-text-[rgba(255,255,255,0.6)] xpay-text-xs xpay-text-right">
-                {chain?.displayName}
-              </p>
-            </div>
-          </div>
-
-          <div className="xpay-w-10 xpay-h-10">
-            {token?.image ? (
-              <img
-                className="xpay-w-10 xpay-h-10"
-                src={token?.image}
-                alt={token?.name}
-              />
-            ) : (
-              <UnknownTokenLogo
-                tokenName={"?"}
-                className="xpay-w-10 xpay-h-10"
-              />
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/components/TxConfigForm/ConfirmationView/ErrorView.tsx

@@ -1,38 +0,0 @@
-import { CloseIcon, ErrorIcon } from "@src/components/icons";
-import { parseWeb3Error } from "@src/utils";
-import React from "react";
-
-type Props = {
-  txError: string | null;
-  onClose: () => void;
-};
-export const ErrorView = ({ txError, onClose }: Props) => {
-  return (
-    <div>
-      <div className="xpay-flex xpay-w-full xpay-justify-end xpay-items-center xpay-mx-auto xpay-p-2">
-        <div className="xpay-cursor-pointer xpay-text-white" onClick={onClose}>
-          <CloseIcon />
-        </div>
-      </div>
-
-      <div className="xpay-flex xpay-flex-col xpay-w-full xpay-justify-center xpay-items-center xpay-mx-auto xpay-p-2 xpay-gap-4">
-        <div>
-          <ErrorIcon />
-        </div>
-
-        <div className="xpay-flex xpay-flex-col">
-          <div>
-            <p className="xpay-text-2xl xpay-font-bold xpay-leading-8 xpay-text-center xpay-text-white">
-              Transaction error!
-            </p>
-          </div>
-          <div>
-            <p className="xpay-text-sm xpay-text-center xpay-text-white xpay-opacity-50">
-              {parseWeb3Error(txError)}
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/components/TxConfigForm/ConfirmationView/SuccessView.tsx

@@ -1,159 +0,0 @@
-import {
-  ArrowRightIcon,
-  ArrowUpRightIcon,
-  CloseIcon,
-  SuccessIcon,
-} from "@src/components/icons";
-import { UnknownTokenLogo } from "@src/components/UnknownTokenLogo/UnknownTokenLogo";
-import { weiToHumanReadable } from "@src/utils";
-import { CCIP_EXPLORER } from "@src/constants";
-import React, { useMemo } from "react";
-import { Chain, Route, Token } from "@src/models";
-
-type Props = {
-  onClose: () => void;
-  txSuccessHash?: string;
-  srcChain?: Chain;
-  dstChain?: Chain;
-  isExpressDelivery: boolean;
-  srcToken?: Token;
-  amount: string;
-  dstDisplayToken?: Token;
-  dstToken?: Token;
-  route?: Route;
-  supportedChains: Chain[];
-};
-export const SuccessView = ({
-  onClose,
-  srcChain,
-  dstChain,
-  isExpressDelivery,
-  srcToken,
-  amount,
-  dstDisplayToken,
-  dstToken,
-  route,
-  txSuccessHash,
-  supportedChains,
-}: Props) => {
-  const dstTokenToDisplay = useMemo(() => {
-    return dstDisplayToken ? dstDisplayToken : dstToken;
-  }, [dstDisplayToken, dstToken]);
-
-  return (
-    <div>
-      <div className="xpay-flex xpay-w-full xpay-justify-end xpay-items-center xpay-mx-auto xpay-p-2">
-        <div className="xpay-cursor-pointer xpay-text-white" onClick={onClose}>
-          <CloseIcon />
-        </div>
-      </div>
-
-      <div className="xpay-flex xpay-flex-col xpay-w-full xpay-justify-center xpay-items-center xpay-mx-auto xpay-p-2 xpay-gap-4">
-        <div>
-          <SuccessIcon />
-        </div>
-        <div className="xpay-flex xpay-flex-col">
-          <div>
-            <p className="xpay-text-2xl xpay-font-bold xpay-leading-8 xpay-text-center xpay-text-white">
-              Transaction success!
-            </p>
-          </div>
-          {srcChain?.chainId !== dstChain?.chainId ? (
-            <div>
-              <p className="xpay-text-sm xpay-text-center xpay-text-white xpay-opacity-50">
-                Approximated time of delivery:{" "}
-                {isExpressDelivery ? "30 seconds" : "30 minutes"}
-              </p>
-            </div>
-          ) : (
-            <></>
-          )}
-        </div>
-
-        <div className="xpay-flex xpay-gap-4 xpay-items-center">
-          <div className="xpay-flex xpay-gap-2">
-            <div className="xpay-w-10 xpay-h-10">
-              {srcToken?.image ? (
-                <img
-                  className="xpay-w-10 xpay-h-10"
-                  src={srcToken?.image}
-                  alt={srcToken?.name}
-                />
-              ) : (
-                <UnknownTokenLogo
-                  tokenName={"?"}
-                  className="xpay-w-10 xpay-h-10"
-                />
-              )}
-            </div>
-            <div className="xpay-flex xpay-flex-col xpay-items-start">
-              <div className="xpay-flex">{`${amount} ${srcToken?.symbol}`}</div>
-              <div className="xpay-text-sm xpay-text-center xpay-text-white xpay-opacity-50">
-                {srcChain?.displayName}
-              </div>
-            </div>
-          </div>
-
-          <div className="xpay-w-3.5 xpay-h-3.5">
-            <ArrowRightIcon />
-          </div>
-
-          <div className="xpay-flex xpay-gap-2">
-            <div className="xpay-w-10 xpay-h-10">
-              {dstTokenToDisplay?.image ? (
-                <img
-                  className="xpay-w-10 xpay-h-10"
-                  src={dstTokenToDisplay?.image}
-                  alt={dstTokenToDisplay?.name}
-                />
-              ) : (
-                <UnknownTokenLogo
-                  tokenName={"?"}
-                  className="xpay-w-10 xpay-h-10"
-                />
-              )}
-            </div>
-            <div className="xpay-flex xpay-flex-col xpay-items-start">
-              <div className="xpay-flex">
-                {weiToHumanReadable({
-                  amount: route?.estAmountOut || "0",
-                  decimals: dstTokenToDisplay?.decimals || 18,
-                  precisionFractionalPlaces: 4,
-                })}{" "}
-                {dstTokenToDisplay?.symbol}
-              </div>
-              <div className="xpay-text-sm xpay-text-center xpay-text-white xpay-opacity-50">
-                {dstChain?.displayName}
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div>
-          <a
-            href={
-              srcChain?.chainId !== dstChain?.chainId
-                ? `${CCIP_EXPLORER}/tx/${txSuccessHash}`
-                : `${
-                    supportedChains.find(
-                      (chain) => chain.chainId === srcChain?.chainId,
-                    )?.transactionExplorer
-                  }/${txSuccessHash}`
-            }
-            target="_blank"
-            rel="noreferrer"
-            className="xpay-flex xpay-items-center xpay-gap-2 xpay-font-bold xpay-no-underline xpay-cursor-pointer xpay-text-center"
-            aria-label="Show the transaction in the chain explorer"
-          >
-            <p className="xpay-bg-gradient-to-r xpay-from-x_blue_light xpay-to-x_blue_dark xpay-bg-clip-text xpay-text-transparent xpay-underline">
-              View details on Explorer
-            </p>
-            <div className="xpay-w-3.5 xpay-h-3.5 xpay-bg-gradient-to-r xpay-text-x_blue_dark">
-              <ArrowUpRightIcon />
-            </div>
-          </a>
-        </div>
-      </div>
-    </div>
-  );
-};