@coin-voyage/paykit 0.1.21 → 0.1.23

package/dist/components/ui/OptionsList/index.d.ts

@@ -1,15 +1,8 @@
-export interface Option {
-    id: string;
-    title: string;
-    subtitle?: string;
-    disabled?: boolean;
-    iconShape?: "squircle" | "circle" | "square";
-    icons: (React.ReactNode | string)[];
-    onClick: () => void;
-}
-declare const OptionsList: ({ options, isLoading, requiredSkeletons, }: {
+import type { Option } from "./types";
+interface OptionsListProps {
     options: Option[];
     isLoading?: boolean;
     requiredSkeletons?: number;
-}) => import("react/jsx-runtime").JSX.Element;
-export default OptionsList;
+}
+export default function OptionsList({ options, isLoading, requiredSkeletons, }: OptionsListProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ui/OptionsList/index.js

@@ -6,7 +6,7 @@ import styled from "../../../styles/styled";
 import usePayContext from "../../contexts/pay";
 import { ScrollArea } from "../ScrollArea";
 import { OptionButton, OptionIcon, OptionLabel, OptionSubtitle, OptionTitle, OptionsContainer, } from "./styles";
-const OptionsList = ({ options, isLoading, requiredSkeletons, }) => {
+export default function OptionsList({ options, isLoading, requiredSkeletons, }) {
     const { triggerResize } = usePayContext();
     const optionsLength = options.length;
     useEffect(() => {
@@ -22,37 +22,36 @@ const OptionsList = ({ options, isLoading, requiredSkeletons, }) => {
                     Array.from({ length: skeletonCount }).map((_, index) => (_jsx(SkeletonOptionItem, {}, index)))] }));
     }
     return (_jsx(ScrollArea, { mobileDirection: "vertical", height: 300, children: _jsx(OptionsContainer, { "$totalResults": options.length, children: options.map((option) => (_jsx(OptionItem, { option: option }, option.id))) }) }));
-};
-export default OptionsList;
+}
 const SkeletonOptionItem = () => {
     return (_jsxs(OptionButton, { type: "button", children: [_jsx(SkeletonIcon, {}), _jsx(SkeletonLabel, {})] }));
 };
-const pulse = keyframes `
-  0% {
-    opacity: 0.6;
-  }
-  50% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0.6;
-  }
+const pulse = keyframes `
+  0% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.6;
+  }
 `;
-const SkeletonIcon = styled.div `
-  position: absolute;
-  right: 20px;
-  width: 32px;
-  height: 32px;
-  border-radius: 22.5%;
-  background-color: rgba(0, 0, 0, 0.1);
-  animation: ${pulse} 1.5s ease-in-out infinite;
+const SkeletonIcon = styled.div `
+  position: absolute;
+  right: 20px;
+  width: 32px;
+  height: 32px;
+  border-radius: 22.5%;
+  background-color: rgba(0, 0, 0, 0.1);
+  animation: ${pulse} 1.5s ease-in-out infinite;
 `;
-const SkeletonLabel = styled.div `
-  width: 100px;
-  height: 16px;
-  border-radius: 8px;
-  background-color: rgba(0, 0, 0, 0.1);
-  animation: ${pulse} 1.5s ease-in-out infinite;
+const SkeletonLabel = styled.div `
+  width: 100px;
+  height: 16px;
+  border-radius: 8px;
+  background-color: rgba(0, 0, 0, 0.1);
+  animation: ${pulse} 1.5s ease-in-out infinite;
 `;
 const OptionItem = ({ option }) => {
     const hydratedIcons = option.icons.map((icon) => {
@@ -69,44 +68,44 @@ const OptionItem = ({ option }) => {
     })();
     return (_jsxs(OptionButton, { type: "button", onClick: option.onClick, disabled: option.disabled, children: [iconContent, _jsxs(OptionLabel, { children: [_jsx(OptionTitle, { children: option.title }), option.subtitle && _jsx(OptionSubtitle, { children: option.subtitle })] })] }));
 };
-const IconStackContainer = styled(motion.div) `
-  position: absolute;
-  right: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+const IconStackContainer = styled(motion.div) `
+  position: absolute;
+  right: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 `;
-const IconStackItem = styled(motion.div) `
-  display: block;
-  overflow: hidden;
-  user-select: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: ${(props) => props.$marginRight || 0}px;
-  z-index: ${(props) => props.$zIndex || 2};
-  width: 32px;
-  height: 32px;
-  overflow: hidden;
-  svg,
-  img {
-    display: block;
-    position: relative;
-    pointer-events: none;
-    overflow: hidden;
-    width: 100%;
-    height: 100%;
-  }
-  border-radius: 22.5%;
-
-  &[data-shape="squircle"] {
-    border-radius: 22.5%;
-  }
-  &[data-shape="circle"] {
-    border-radius: 100%;
-  }
-  &[data-shape="square"] {
-    border-radius: 0;
-  }
+const IconStackItem = styled(motion.div) `
+  display: block;
+  overflow: hidden;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: ${(props) => props.$marginRight || 0}px;
+  z-index: ${(props) => props.$zIndex || 2};
+  width: 32px;
+  height: 32px;
+  overflow: hidden;
+  svg,
+  img {
+    display: block;
+    position: relative;
+    pointer-events: none;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+  }
+  border-radius: 22.5%;
+
+  &[data-shape="squircle"] {
+    border-radius: 22.5%;
+  }
+  &[data-shape="circle"] {
+    border-radius: 100%;
+  }
+  &[data-shape="square"] {
+    border-radius: 0;
+  }
 `;
 //# sourceMappingURL=index.js.map

package/dist/components/ui/OptionsList/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/ui/OptionsList/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/ui/OptionsList/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAC7C,OAAO,MAAM,MAAM,wBAAwB,CAAA;AAC3C,OAAO,aAAa,MAAM,oBAAoB,CAAA;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EACL,YAAY,EACZ,UAAU,EACV,WAAW,EACX,cAAc,EACd,WAAW,EACX,gBAAgB,GACjB,MAAM,UAAU,CAAA;AASjB,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,OAAO,EACP,SAAS,EACT,iBAAiB,GACA;IACjB,MAAM,EAAE,aAAa,EAAE,GAAG,aAAa,EAAE,CAAA;IACzC,MAAM,aAAa,GAAG,OAAO,CAAC,MAAM,CAAA;IAEpC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,aAAa,GAAG,CAAC,EAAE,CAAC;YACtB,aAAa,EAAE,CAAA;QACjB,CAAC;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAA;IAEnB,IAAI,SAAS,EAAE,CAAC;QACd,MAAM,aAAa,GAAG,iBAAiB;YACrC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,iBAAiB,GAAG,aAAa,EAAE,CAAC,CAAC;YAChD,CAAC,CAAC,CAAC,CAAA;QAEL,OAAO,CACL,MAAC,gBAAgB,qBAAgB,OAAO,CAAC,MAAM,aAC5C,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,KAAC,UAAU,IAAiB,MAAM,EAAE,MAAM,IAAzB,MAAM,CAAC,EAAE,CAAoB,CAC/C,CAAC,EACD,SAAS;oBACR,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CACtD,KAAC,kBAAkB,MAAM,KAAK,CAAI,CACnC,CAAC,IACa,CACpB,CAAA;IACH,CAAC;IAED,OAAO,CACL,KAAC,UAAU,IAAC,eAAe,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,YAClD,KAAC,gBAAgB,qBAAgB,OAAO,CAAC,MAAM,YAC5C,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,KAAC,UAAU,IAAiB,MAAM,EAAE,MAAM,IAAzB,MAAM,CAAC,EAAE,CAAoB,CAC/C,CAAC,GACe,GACR,CACd,CAAA;AACH,CAAC;AAGD,MAAM,kBAAkB,GAAG,GAAG,EAAE;IAC9B,OAAO,CACL,MAAC,YAAY,IAAC,IAAI,EAAC,QAAQ,aACzB,KAAC,YAAY,KAAG,EAChB,KAAC,aAAa,KAAG,IACJ,CAChB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,KAAK,GAAG,SAAS,CAAA;;;;;;;;;;CAUtB,CAAA;AAED,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;eAOhB,KAAK;CACnB,CAAA;AAED,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;eAKjB,KAAK;CACnB,CAAA;AAED,MAAM,UAAU,GAAG,CAAC,EAAE,MAAM,EAAsB,EAAE,EAAE;IACpD,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QAC9C,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;YAC7B,OAAO,cAAK,GAAG,EAAE,IAAI,EAAE,GAAG,EAAC,EAAE,GAAG,CAAA;QAClC,CAAC;QACD,OAAO,IAAI,CAAA;IACb,CAAC,CAAC,CAAA;IAEF,MAAM,WAAW,GAAG,CAAC,GAAG,EAAE;QACxB,IAAI,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC/B,OAAO,CACL,KAAC,UAAU,kBAAa,MAAM,CAAC,SAAS,YACrC,aAAa,CAAC,CAAC,CAAC,GACN,CACd,CAAA;QACH,CAAC;QAED,OAAO,CACL,KAAC,kBAAkB,cAChB,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAClC,KAAC,aAAa,kBACA,MAAM,CAAC,SAAS,kBAEd,KAAK,KAAK,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,aACjD,aAAa,CAAC,MAAM,GAAG,KAAK,YAEpC,IAAI,IAJA,KAAK,CAKI,CACjB,CAAC,GACiB,CACtB,CAAA;IACH,CAAC,CAAC,EAAE,CAAA;IAEJ,OAAO,CACL,MAAC,YAAY,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAC,QAAQ,aAC3E,WAAW,EACZ,MAAC,WAAW,eACV,KAAC,WAAW,cAAE,MAAM,CAAC,KAAK,GAAe,EACxC,MAAM,CAAC,QAAQ,IAAI,KAAC,cAAc,cAAE,MAAM,CAAC,QAAQ,GAAkB,IAC1D,IACD,CAChB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;;CAM5C,CAAA;AAED,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAGtC;;;;;;;kBAOgB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,YAAY,IAAI,CAAC;aACvC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC;;;;;;;;;;;;;;;;;;;;;;;;CAwBzC,CAAA"}

package/dist/components/ui/OptionsList/styles.js

@@ -1,161 +1,161 @@
 import { css } from "styled-components";
 import styled from "../../../styles/styled";
 import { motion } from "framer-motion";
-export const OptionButton = styled(motion.button) `
-  display: block;
-  text-decoration: none;
-  user-select: none;
-  position: relative;
-  display: flex;
-  align-items: center;
-  padding: 0 20px;
-  height: 64px;
-  font-size: 17px;
-  font-weight: var(--ck-primary-button-font-weight, 500);
-  line-height: 22px;
-  text-align: var(--ck-body-button-text-align, left);
-  transition: 180ms ease;
-  transition-property: background, color, box-shadow, transform, opacity;
-  will-change: transform, box-shadow, background-color, color, opacity;
-
-  --fallback-color: var(--ck-primary-button-color);
-  --fallback-background: var(--ck-primary-button-background);
-  --fallback-box-shadow: var(--ck-primary-button-box-shadow);
-  --fallback-border-radius: var(--ck-primary-button-border-radius);
-
-  --color: var(--ck-primary-button-color, var(--fallback-color));
-  --background: var(--ck-primary-button-background, var(--fallback-background));
-  --box-shadow: var(--ck-primary-button-box-shadow, var(--fallback-box-shadow));
-  --border-radius: var(
-    --ck-primary-button-border-radius,
-    var(--fallback-border-radius)
-  );
-
-  --hover-color: var(--ck-primary-button-hover-color, var(--color));
-  --hover-background: var(
-    --ck-primary-button-hover-background,
-    var(--background)
-  );
-  --hover-box-shadow: var(
-    --ck-primary-button-hover-box-shadow,
-    var(--box-shadow)
-  );
-  --hover-border-radius: var(
-    --ck-primary-button-hover-border-radius,
-    var(--border-radius)
-  );
-
-  --active-color: var(--ck-primary-button-active-color, var(--hover-color));
-  --active-background: var(
-    --ck-primary-button-active-background,
-    var(--hover-background)
-  );
-  --active-box-shadow: var(
-    --ck-primary-button-active-box-shadow,
-    var(--hover-box-shadow)
-  );
-  --active-border-radius: var(
-    --ck-primary-button-active-border-radius,
-    var(--hover-border-radius)
-  );
-
-  color: var(--color);
-  background: var(--background);
-  box-shadow: var(--box-shadow);
-  border-radius: var(--border-radius);
-
-  &:disabled {
-    cursor: default;
-    transition: 180ms ease;
-    opacity: 0.4;
-  }
-
-  --bg: var(--background);
-  &:not(:disabled) {
-    &:hover {
-      color: var(--hover-color);
-      background: var(--hover-background);
-      box-shadow: var(--hover-box-shadow);
-      border-radius: var(--hover-border-radius);
-      --bg: var(--hover-background, var(--background));
-    }
-    &:focus-visible {
-      transition-duration: 100ms;
-      color: var(--hover-color);
-      background: var(--hover-background);
-      box-shadow: var(--hover-box-shadow);
-      border-radius: var(--hover-border-radius);
-      --bg: var(--hover-background, var(--background));
-    }
-    &:active {
-      color: var(--active-color);
-      background: var(--active-background);
-      box-shadow: var(--active-box-shadow);
-      border-radius: var(--active-border-radius);
-      --bg: var(--active-background, var(--background));
-    }
-  }
+export const OptionButton = styled(motion.button) `
+  display: block;
+  text-decoration: none;
+  user-select: none;
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  height: 64px;
+  font-size: 17px;
+  font-weight: var(--ck-primary-button-font-weight, 500);
+  line-height: 22px;
+  text-align: var(--ck-body-button-text-align, left);
+  transition: 180ms ease;
+  transition-property: background, color, box-shadow, transform, opacity;
+  will-change: transform, box-shadow, background-color, color, opacity;
+
+  --fallback-color: var(--ck-primary-button-color);
+  --fallback-background: var(--ck-primary-button-background);
+  --fallback-box-shadow: var(--ck-primary-button-box-shadow);
+  --fallback-border-radius: var(--ck-primary-button-border-radius);
+
+  --color: var(--ck-primary-button-color, var(--fallback-color));
+  --background: var(--ck-primary-button-background, var(--fallback-background));
+  --box-shadow: var(--ck-primary-button-box-shadow, var(--fallback-box-shadow));
+  --border-radius: var(
+    --ck-primary-button-border-radius,
+    var(--fallback-border-radius)
+  );
+
+  --hover-color: var(--ck-primary-button-hover-color, var(--color));
+  --hover-background: var(
+    --ck-primary-button-hover-background,
+    var(--background)
+  );
+  --hover-box-shadow: var(
+    --ck-primary-button-hover-box-shadow,
+    var(--box-shadow)
+  );
+  --hover-border-radius: var(
+    --ck-primary-button-hover-border-radius,
+    var(--border-radius)
+  );
+
+  --active-color: var(--ck-primary-button-active-color, var(--hover-color));
+  --active-background: var(
+    --ck-primary-button-active-background,
+    var(--hover-background)
+  );
+  --active-box-shadow: var(
+    --ck-primary-button-active-box-shadow,
+    var(--hover-box-shadow)
+  );
+  --active-border-radius: var(
+    --ck-primary-button-active-border-radius,
+    var(--hover-border-radius)
+  );
+
+  color: var(--color);
+  background: var(--background);
+  box-shadow: var(--box-shadow);
+  border-radius: var(--border-radius);
+
+  &:disabled {
+    cursor: default;
+    transition: 180ms ease;
+    opacity: 0.4;
+  }
+
+  --bg: var(--background);
+  &:not(:disabled) {
+    &:hover {
+      color: var(--hover-color);
+      background: var(--hover-background);
+      box-shadow: var(--hover-box-shadow);
+      border-radius: var(--hover-border-radius);
+      --bg: var(--hover-background, var(--background));
+    }
+    &:focus-visible {
+      transition-duration: 100ms;
+      color: var(--hover-color);
+      background: var(--hover-background);
+      box-shadow: var(--hover-box-shadow);
+      border-radius: var(--hover-border-radius);
+      --bg: var(--hover-background, var(--background));
+    }
+    &:active {
+      color: var(--active-color);
+      background: var(--active-background);
+      box-shadow: var(--active-box-shadow);
+      border-radius: var(--active-border-radius);
+      --bg: var(--active-background, var(--background));
+    }
+  }
 `;
-export const OptionLabel = styled.span `
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 2px;
-  width: 100%;
-  overflow: hidden;
-  padding: 2px 0;
-  padding-right: 38px;
+export const OptionLabel = styled.span `
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  width: 100%;
+  overflow: hidden;
+  padding: 2px 0;
+  padding-right: 38px;
 `;
-export const OptionTitle = styled.span `
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  width: 100%;
+export const OptionTitle = styled.span `
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  width: 100%;
 `;
-export const OptionSubtitle = styled(motion.span) `
-  font-size: 14px;
-  opacity: 0.6;
-  font-weight: 400;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  width: 100%;
+export const OptionSubtitle = styled(motion.span) `
+  font-size: 14px;
+  opacity: 0.6;
+  font-weight: 400;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  width: 100%;
 `;
-export const OptionIcon = styled(motion.div) `
-  position: absolute;
-  right: 21px;
-  width: 32px;
-  height: 32px;
-  overflow: hidden;
-  svg, img {
-    display: block;
-    position: relative;
-    pointer-events: none;
-    overflow: hidden;
-    width: 100%;
-    height: 100%;
-  }
-
-  &[data-shape="squircle"] {
-    border-radius: 22.5%;
-  }
-  &[data-shape="circle"] {
-    border-radius: 100%;
-  }
-  &[data-shape="square"] {
-    border-radius: 0;
-  }
+export const OptionIcon = styled(motion.div) `
+  position: absolute;
+  right: 21px;
+  width: 32px;
+  height: 32px;
+  overflow: hidden;
+  svg, img {
+    display: block;
+    position: relative;
+    pointer-events: none;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+  }
+
+  &[data-shape="squircle"] {
+    border-radius: 22.5%;
+  }
+  &[data-shape="circle"] {
+    border-radius: 100%;
+  }
+  &[data-shape="square"] {
+    border-radius: 0;
+  }
 `;
-export const OptionsContainer = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding-bottom: 6px;
-
+export const OptionsContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding-bottom: 6px;
+
   ${(props) => props.$disabled &&
-    css `
-      pointer-events: none;
-      opacity: 0.4;
-    `}
+    css `
+      pointer-events: none;
+      opacity: 0.4;
+    `}
 `;
 //# sourceMappingURL=styles.js.map

package/dist/components/ui/OptionsList/types.d.ts

@@ -0,0 +1,9 @@
+export interface Option {
+    id: string;
+    title: string;
+    subtitle?: string;
+    disabled?: boolean;
+    iconShape?: "squircle" | "circle" | "square";
+    icons: (React.ReactNode | string)[];
+    onClick: () => void;
+}

package/dist/components/ui/OptionsList/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/components/ui/OptionsList/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/ui/OptionsList/types.ts"],"names":[],"mappings":""}

package/dist/components/ui/OrderHeader/index.js

@@ -42,12 +42,12 @@ export const OrderHeader = ({ minified = false, showConnectedWallet = false }) =
     }
     return (_jsxs(_Fragment, { children: [_jsx(TitleAmount, { children: _jsx(TitleAmountContent, {}) }), _jsxs(AnyChainAnyCoinContainer, { children: [showConnectedWallet ? _jsx(ConnectedWallet, {}) : _jsx(CoinLogos, {}), _jsx(Subtitle, { children: "1000+ tokens accepted" })] })] }));
 };
-const TitleAmount = styled(motion.h1) `
-  margin: 0;
-  padding: 0;
-  line-height: 50px;
-  font-size: 48px;
-  font-weight: var(--ck-modal-h1-font-weight, 600);
+const TitleAmount = styled(motion.h1) `
+  margin: 0;
+  padding: 0;
+  line-height: 50px;
+  font-size: 48px;
+  font-weight: var(--ck-modal-h1-font-weight, 600);
   color: ${(props) => {
     if (props.$error) {
         return "var(--ck-body-color-danger)";
@@ -56,75 +56,75 @@ const TitleAmount = styled(motion.h1) `
         return "var(--ck-body-color-valid)";
     }
     return "var(--ck-body-color)";
-}};
-  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
-    font-size: 64px;
-  }
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
+}};
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    font-size: 64px;
+  }
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
 `;
-const Subtitle = styled(motion.div) `
-  font-size: 18px;
-  font-weight: 500;
-  line-height: 21px;
-  color: var(--ck-body-color-muted);
+const Subtitle = styled(motion.div) `
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 21px;
+  color: var(--ck-body-color-muted);
 `;
-const MinifiedTitleAmount = styled(motion.div) `
-  font-size: 32px;
-  font-weight: var(--ck-modal-h1-font-weight, 600);
-  line-height: 36px;
-  color: var(--ck-body-color);
-  display: flex;
-  align-items: center;
-  justify-content: start;
-  gap: 8px;
+const MinifiedTitleAmount = styled(motion.div) `
+  font-size: 32px;
+  font-weight: var(--ck-modal-h1-font-weight, 600);
+  line-height: 36px;
+  color: var(--ck-body-color);
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  gap: 8px;
 `;
-const MinifiedContainer = styled(motion.div) `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  margin-bottom: 24px;
+const MinifiedContainer = styled(motion.div) `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  margin-bottom: 24px;
 `;
-const AnyChainAnyCoinContainer = styled(motion.div) `
-  display: flex;
-  vertical-align: middle;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  gap: 8px;
-  margin: 24px 0;
+const AnyChainAnyCoinContainer = styled(motion.div) `
+  display: flex;
+  vertical-align: middle;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: 8px;
+  margin: 24px 0;
 `;
-const LogoContainer = styled(motion.div) `
-  display: block;
-  overflow: hidden;
-  user-select: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-left: ${(props) => props.$marginLeft || 0}px;
-  z-index: ${(props) => props.$zIndex || 2};
-  width: ${(props) => props.$size}px;
-  height: ${(props) => props.$size}px;
-  border-radius: 9999px;
-  svg {
-    display: block;
-    width: 100%;
-    height: auto;
-  }
+const LogoContainer = styled(motion.div) `
+  display: block;
+  overflow: hidden;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: ${(props) => props.$marginLeft || 0}px;
+  z-index: ${(props) => props.$zIndex || 2};
+  width: ${(props) => props.$size}px;
+  height: ${(props) => props.$size}px;
+  border-radius: 9999px;
+  svg {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
 `;
-const Logos = styled(motion.div) `
-  display: flex;
-  align-items: center;
-  justify-content: center;
+const Logos = styled(motion.div) `
+  display: flex;
+  align-items: center;
+  justify-content: center;
 `;
-const SubtitleContainer = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 8px;
+const SubtitleContainer = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
 `;
 const CoinLogos = ({ $size = 24 }) => {
     const logos = [