@coin-voyage/paykit 0.1.21 → 0.1.22

package/dist/components/Pages/SelectMethod/index.js

@@ -1,86 +1,32 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useConfig as useBigmiConfig } from "@bigmi/react";
 import { useAccount, useAccountDisconnect } from "@coin-voyage/crypto/hooks";
-import { ChainType, PayOrderMode } from "@coin-voyage/shared/common";
 import { useIsMobile } from "@coin-voyage/shared/hooks";
-import { shortenAddress } from "@coin-voyage/shared/utils";
-import { useWallets } from "@mysten/dapp-kit";
-import { useWallet } from "@solana/wallet-adapter-react";
-import { useConfig as useWagmiConfig } from "wagmi";
-import Logos from "../../../assets/chains";
-import { MetaMask } from "../../../assets/logos";
+import { useMethodOptions } from "../../../hooks/useMethodOptions";
 import { ROUTES } from "../../../types/routes";
 import usePayContext from "../../contexts/pay";
-import { SquircleIcon } from "../../ui/Icon";
 import { PageContent } from "../../ui/Modal/styles";
 import OptionsList from "../../ui/OptionsList";
 import { OrderHeader } from "../../ui/OrderHeader";
 import PoweredByFooter from "../../ui/PoweredByFooter";
-function getTitle(subject, isDeposit) {
-    return `${isDeposit ? "Deposit from" : "Pay on"} ${subject}`;
-}
 export default function SelectMethod() {
     const isMobile = useIsMobile();
-    const suiWallets = useWallets();
-    const evmConfig = useWagmiConfig();
-    const utxoConfig = useBigmiConfig();
-    const { wallets: solanaWallets } = useWallet();
     const { setRoute, paymentState } = usePayContext();
     const disconnect = useAccountDisconnect();
-    const isDeposit = paymentState.payOrder?.mode === PayOrderMode.DEPOSIT;
     const { account } = useAccount({
         selectedWallet: paymentState.selectedWallet,
         chainType: paymentState.connectorChainType,
     });
-    const { senderEnsName } = paymentState;
-    const displayName = senderEnsName ??
-        (account?.address ? shortenAddress(account.address) : "wallet");
     const handleClick = (chainType) => {
         if (account)
             disconnect(account);
         paymentState.setConnectorChainType(chainType);
         setRoute(ROUTES.CONNECTORS);
     };
-    const isConnected = account?.isConnected;
-    const options = [
-        ...(isConnected ? [{
-                id: "connectedWallet",
-                title: `Pay with ${displayName}`,
-                icons: [
-                    account?.connector?.icon ? (_jsx(SquircleIcon, { icon: account.connector.icon, alt: account.connector.name })) : (_jsx(MetaMask, {})),
-                ],
-                onClick: () => {
-                    paymentState.setConnectorChainType(account.chainType);
-                    setRoute(ROUTES.SELECT_TOKEN);
-                },
-            }] : []),
-        ...(evmConfig.connectors.length > 0 ? [{
-                id: "evm",
-                title: getTitle("Ethereum", isDeposit),
-                subtitle: "Ethereum Mainnet, Base, Arbitrum ...",
-                iconShape: "circle",
-                icons: [_jsx(Logos.Ethereum, {}), _jsx(Logos.Base, {}), _jsx(Logos.Arbitrum, {})],
-                onClick: () => handleClick(ChainType.EVM)
-            }] : []),
-        ...(solanaWallets ? [{
-                id: "solana",
-                title: getTitle("Solana", isDeposit),
-                icons: [_jsx(Logos.Solana, {})],
-                onClick: () => handleClick(ChainType.SOL)
-            }] : []),
-        ...(suiWallets ? [{
-                id: "sui",
-                title: getTitle("Sui", isDeposit),
-                icons: [_jsx(Logos.Sui, {})],
-                onClick: () => handleClick(ChainType.SUI),
-            }] : []),
-        ...(utxoConfig.connectors.length > 0 ? [{
-                id: "bitcoin",
-                title: getTitle("Bitcoin", isDeposit),
-                icons: [_jsx(Logos.Bitcoin, {})],
-                onClick: () => handleClick(ChainType.UTXO),
-            }] : []),
-    ];
-    return (_jsxs(PageContent, { children: [_jsx(OrderHeader, {}), _jsx(OptionsList, { requiredSkeletons: isMobile ? 4 : 3, options: options }), _jsx(PoweredByFooter, {})] }));
+    const { options } = useMethodOptions({
+        account,
+        mode: paymentState.payOrder?.mode,
+        onClick: handleClick,
+    });
+    return (_jsxs(PageContent, { children: [_jsx(OrderHeader, {}), _jsx(OptionsList, { requiredSkeletons: isMobile ? 3 : 4, options: options }), _jsx(PoweredByFooter, {})] }));
 }
 //# sourceMappingURL=index.js.map

package/dist/components/Pages/SelectMethod/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Pages/SelectMethod/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Pages/SelectMethod/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAA;AAE5E,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAA;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAA;AAC9C,OAAO,aAAa,MAAM,oBAAoB,CAAA;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACnD,OAAO,WAAW,MAAM,sBAAsB,CAAA;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAClD,OAAO,eAAe,MAAM,0BAA0B,CAAA;AAEtD,MAAM,CAAC,OAAO,UAAU,YAAY;IAClC,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAA;IAC9B,MAAM,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAG,aAAa,EAAE,CAAA;IAClD,MAAM,UAAU,GAAG,oBAAoB,EAAE,CAAC;IAC1C,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC;QAC7B,cAAc,EAAE,YAAY,CAAC,cAAc;QAC3C,SAAS,EAAE,YAAY,CAAC,kBAAkB;KAC3C,CAAC,CAAA;IAEF,MAAM,WAAW,GAAG,CAAC,SAAoB,EAAE,EAAE;QAC3C,IAAI,OAAO;YAAE,UAAU,CAAC,OAAO,CAAC,CAAA;QAChC,YAAY,CAAC,qBAAqB,CAAC,SAAS,CAAC,CAAA;QAC7C,QAAQ,CAAC,MAAM,CAAC,UAAU,CAAC,CAAA;IAC7B,CAAC,CAAA;IAED,MAAM,EAAE,OAAO,EAAE,GAAG,gBAAgB,CAAC;QACnC,OAAO;QACP,IAAI,EAAE,YAAY,CAAC,QAAQ,EAAE,IAAI;QACjC,OAAO,EAAE,WAAW;KACrB,CAAC,CAAA;IAEF,OAAO,CACL,MAAC,WAAW,eACV,KAAC,WAAW,KAAG,EACf,KAAC,WAAW,IACV,iBAAiB,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACnC,OAAO,EAAE,OAAO,GAChB,EACF,KAAC,eAAe,KAAG,IACP,CACf,CAAA;AACH,CAAC"}

package/dist/components/Pages/SelectMethod/styles.js

@@ -2,260 +2,260 @@ import { keyframes } from "styled-components";
 import styled from "../../../styles/styled";
 import { motion } from "framer-motion";
 import { ModalBody } from "../../ui/Modal/styles";
-const Shimmer = keyframes `
-  0%{ transform: translate(-100%) rotate(-45deg); }
-  100%{ transform: translate(100%) rotate(-80deg); }
+const Shimmer = keyframes `
+  0%{ transform: translate(-100%) rotate(-45deg); }
+  100%{ transform: translate(100%) rotate(-80deg); }
 `;
-export const InfoBox = styled.div `
-  padding: 24px 24px 28px;
-  border-radius: var(--ck-tertiary-border-radius, 24px);
-  box-shadow: var(--ck-tertiary-box-shadow, none);
-  background: var(--ck-body-background-tertiary);
-  ${ModalBody} {
-    max-width: none;
-  }
+export const InfoBox = styled.div `
+  padding: 24px 24px 28px;
+  border-radius: var(--ck-tertiary-border-radius, 24px);
+  box-shadow: var(--ck-tertiary-box-shadow, none);
+  background: var(--ck-body-background-tertiary);
+  ${ModalBody} {
+    max-width: none;
+  }
 `;
-export const InfoBoxButtons = styled.div `
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 16px;
-  margin: 5px -8px -12px;
-  button {
-  }
+export const InfoBoxButtons = styled.div `
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  margin: 5px -8px -12px;
+  button {
+  }
 `;
-export const LearnMoreContainer = styled(motion.div) `
-  text-align: center;
-  margin-top: 16px;
-  margin-bottom: -6px;
+export const LearnMoreContainer = styled(motion.div) `
+  text-align: center;
+  margin-top: 16px;
+  margin-bottom: -6px;
 `;
-export const LearnMoreButton = styled(motion.button) `
-  appearance: none;
-  user-select: none;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  height: 42px;
-  padding: 0 16px;
-  border-radius: 6px;
-  background: none;
-  color: var(--ck-body-color-muted);
-  font-size: 15px;
-  line-height: 18px;
-  font-weight: 500;
-  /* will-change: transform; */
-  transition:
-    color 200ms ease,
-    transform 100ms ease;
-  svg {
-    transition: all 100ms ease-out;
-    display: block;
-    position: relative;
-    top: 2px;
-    left: 2px;
-    transform: translateZ(0px);
-    path,
-    circle {
-      transition: all 100ms ease-out;
-    }
-    path:last-of-type {
-      transform-origin: 0 0;
-      transform: scaleX(1.3) skewY(-12deg);
-      opacity: 0;
-    }
-    circle {
-      transform: translate(20%, -15%);
-    }
-  }
-  &:hover {
-    color: var(--ck-body-color-muted-hover);
-    svg {
-      path,
-      circle {
-        opacity: 1;
-        transform: none;
-      }
-    }
-  }
-  &:active {
-    transform: scale(0.96);
-  }
+export const LearnMoreButton = styled(motion.button) `
+  appearance: none;
+  user-select: none;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  height: 42px;
+  padding: 0 16px;
+  border-radius: 6px;
+  background: none;
+  color: var(--ck-body-color-muted);
+  font-size: 15px;
+  line-height: 18px;
+  font-weight: 500;
+  /* will-change: transform; */
+  transition:
+    color 200ms ease,
+    transform 100ms ease;
+  svg {
+    transition: all 100ms ease-out;
+    display: block;
+    position: relative;
+    top: 2px;
+    left: 2px;
+    transform: translateZ(0px);
+    path,
+    circle {
+      transition: all 100ms ease-out;
+    }
+    path:last-of-type {
+      transform-origin: 0 0;
+      transform: scaleX(1.3) skewY(-12deg);
+      opacity: 0;
+    }
+    circle {
+      transform: translate(20%, -15%);
+    }
+  }
+  &:hover {
+    color: var(--ck-body-color-muted-hover);
+    svg {
+      path,
+      circle {
+        opacity: 1;
+        transform: none;
+      }
+    }
+  }
+  &:active {
+    transform: scale(0.96);
+  }
 `;
-export const ConnectorsContainer = styled(motion.div) `
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding: 0 0 16px;
-  overflow-y: scroll;
-  max-height: 20rem;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
+export const ConnectorsContainer = styled(motion.div) `
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 0 0 16px;
+  overflow-y: scroll;
+  max-height: 20rem;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 `;
-export const ConnectorButton = styled(motion.button) `
-  cursor: pointer;
-  user-select: none;
-  position: relative;
-  display: flex;
-  align-items: center;
-  padding: 0 20px;
-  width: 100%;
-  height: 64px;
-  font-size: 17px;
-  font-weight: var(--ck-primary-button-font-weight, 500);
-  line-height: 20px;
-  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 {
-    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 ConnectorButton = styled(motion.button) `
+  cursor: pointer;
+  user-select: none;
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  width: 100%;
+  height: 64px;
+  font-size: 17px;
+  font-weight: var(--ck-primary-button-font-weight, 500);
+  line-height: 20px;
+  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 {
+    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 ConnectorRecentlyUsed = styled(motion.span) `
-  position: relative;
-  top: var(--ck-recent-badge-top-offset, 0.5px);
-  display: inline-block;
-  padding: 10px 7px;
-  line-height: 0;
-  font-size: 13px;
-  font-weight: 400;
-  border-radius: var(--ck-recent-badge-border-radius, var(--border-radius));
-  color: var(
-    --ck-recent-badge-color,
-    var(--ck-accent-color, var(--ck-body-color-muted, currentColor))
-  );
-  background: var(--ck-recent-badge-background, transparent);
-  overflow: hidden;
-  span {
-    display: inline-block;
-    position: relative;
-  }
-  &:before {
-    z-index: 1;
-    content: "";
-    position: absolute;
-    inset: 0;
-    opacity: 0.4;
-    box-shadow: var(--ck-recent-badge-box-shadow, inset 0 0 0 1px currentColor);
-    border-radius: inherit;
-  }
-  &:after {
-    z-index: 2;
-    content: "";
-    position: absolute;
-    inset: -10%;
-    top: -110%;
-    aspect-ratio: 1/1;
-    opacity: 0.7;
-    background: linear-gradient(
-      170deg,
-      transparent 10%,
-      var(--ck-recent-badge-background, var(--bg)) 50%,
-      transparent 90%
-    );
-    animation: ${Shimmer} 2s linear infinite;
-  }
+export const ConnectorRecentlyUsed = styled(motion.span) `
+  position: relative;
+  top: var(--ck-recent-badge-top-offset, 0.5px);
+  display: inline-block;
+  padding: 10px 7px;
+  line-height: 0;
+  font-size: 13px;
+  font-weight: 400;
+  border-radius: var(--ck-recent-badge-border-radius, var(--border-radius));
+  color: var(
+    --ck-recent-badge-color,
+    var(--ck-accent-color, var(--ck-body-color-muted, currentColor))
+  );
+  background: var(--ck-recent-badge-background, transparent);
+  overflow: hidden;
+  span {
+    display: inline-block;
+    position: relative;
+  }
+  &:before {
+    z-index: 1;
+    content: "";
+    position: absolute;
+    inset: 0;
+    opacity: 0.4;
+    box-shadow: var(--ck-recent-badge-box-shadow, inset 0 0 0 1px currentColor);
+    border-radius: inherit;
+  }
+  &:after {
+    z-index: 2;
+    content: "";
+    position: absolute;
+    inset: -10%;
+    top: -110%;
+    aspect-ratio: 1/1;
+    opacity: 0.7;
+    background: linear-gradient(
+      170deg,
+      transparent 10%,
+      var(--ck-recent-badge-background, var(--bg)) 50%,
+      transparent 90%
+    );
+    animation: ${Shimmer} 2s linear infinite;
+  }
 `;
-export const ConnectorLabel = styled(motion.span) `
-  display: flex;
-  align-items: center;
-  gap: 9px;
-  width: 100%;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  padding: 2px 0;
-  padding-right: 38px;
+export const ConnectorLabel = styled(motion.span) `
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  padding: 2px 0;
+  padding-right: 38px;
 `;
-export const ConnectorIcon = styled(motion.div) `
-  position: absolute;
-  right: 21px;
-  overflow: hidden;
-  svg, img {
-    display: block;
-    position: relative;
-    pointer-events: none;
-    overflow: hidden;
-    border-radius: 27.5%;
-    width: 100%;
-    height: 100%;
-  }
+export const ConnectorIcon = styled(motion.div) `
+  position: absolute;
+  right: 21px;
+  overflow: hidden;
+  svg, img {
+    display: block;
+    position: relative;
+    pointer-events: none;
+    overflow: hidden;
+    border-radius: 27.5%;
+    width: 100%;
+    height: 100%;
+  }
 `;
 //# sourceMappingURL=styles.js.map