@coin-voyage/paykit
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
85 lines (84 loc) • 5.19 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ChainType } from "@coin-voyage/shared/types";
import { useCallback } from "react";
import useLocales from "../../../hooks/useLocales";
import { useWalletConnectModal } from "../../../hooks/useWalletConnectModal";
import { useWalletConnectUri } from "../../../hooks/useWalletConnectUri";
import { useWallets } from "../../../hooks/useWallets";
import { walletConfigs } from "../../../lib/config/wallet";
import { ROUTES } from "../../../types/routes";
import usePayContext from "../../contexts/pay";
import { ModalContent, PageContent } from "../../ui/Modal/styles";
import { ScrollArea } from "../../ui/ScrollArea";
import { Spinner } from "../../ui/Spinner";
import { Container, WalletIcon, WalletItem, WalletLabel, WalletList } from "./styles";
const MoreIcon = (_jsx("svg", { width: "60", height: "60", viewBox: "0 0 60 60", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M30 42V19M19 30.5H42", stroke: "var(--ck-body-color-muted)", strokeWidth: "3", strokeLinecap: "round" }) }));
export default function MobileConnectors() {
const { paymentState } = usePayContext();
const { connectorChainType } = paymentState;
const { uri: wcUri } = useWalletConnectUri();
const isEVM = connectorChainType === ChainType.EVM;
const wallets = useWallets();
// filter out installed wallets
const walletsIdsToDisplay = Object.keys(walletConfigs).filter((walletId) => {
const wallet = walletConfigs[walletId];
if (wallet.hideInMobileConnectors)
return false;
if (!wallet.getWalletDeeplink)
return false;
// check if wallet is supports currentChainType
if (connectorChainType && wallet.chainTypes && !wallet.chainTypes.includes(connectorChainType))
return false;
if (wallets.find((w) => w.connectors.find((c) => c.connector.id === walletId)))
return false;
return true;
}) ?? [];
const connectWallet = useCallback((walletId) => {
const wallet = walletConfigs[walletId];
const hasWC = !connectorChainType || [ChainType.EVM].includes(connectorChainType);
let URI = wcUri;
if (!hasWC) {
// I want to open the same page in the app browser, plus pass it the selected chain
URI = `${window.location.href}?initState=${btoa(JSON.stringify({
payOrderId: paymentState.payOrder.id,
chainType: connectorChainType,
open: true,
walletId,
route: ROUTES.CONNECTORS,
}))}`;
}
const uri = wallet.getWalletDeeplink?.(URI, connectorChainType);
if (uri)
window.location.href = uri;
}, [connectorChainType, wcUri, paymentState.payOrder]);
return (_jsx(PageContent, { style: { width: 312 }, children: _jsx(Container, { children: _jsx(ModalContent, { style: { paddingBottom: 0 }, children: _jsx(ScrollArea, { height: 340, children: _jsxs(WalletList, { "$disabled": !wcUri && isEVM, children: [walletsIdsToDisplay
.sort(
// sort by name
(a, b) => {
const walletA = walletConfigs[a];
const walletB = walletConfigs[b];
const nameA = walletA.name ?? walletA.shortName ?? a;
const nameB = walletB.name ?? walletB.shortName ?? b;
return nameA.localeCompare(nameB);
})
.map((walletId, i) => {
const wallet = walletConfigs[walletId];
const { name, shortName, iconConnector, icon } = wallet;
return (_jsxs(WalletItem, { onClick: () => connectWallet(walletId), style: {
animationDelay: `${i * 50}ms`,
}, children: [_jsx(WalletIcon, { "$outline": true, children: iconConnector ?? icon }), _jsx(WalletLabel, { children: shortName ?? name })] }, i));
}), connectorChainType && [ChainType.EVM, ChainType.SOL].includes(connectorChainType) && (_jsx(WalletConnectWalletItem, {}))] }) }) }) }) }));
}
function WalletConnectWalletItem() {
const locales = useLocales();
const { open: openW3M, isOpen: isOpenW3M } = useWalletConnectModal();
return (_jsxs(WalletItem, { onClick: openW3M, "$waiting": isOpenW3M, children: [_jsx(WalletIcon, { style: { background: "var(--ck-body-background-secondary)" }, children: isOpenW3M ? (_jsx("div", { style: {
position: "absolute",
inset: 0,
display: "flex",
alignItems: "center",
justifyContent: "center",
}, children: _jsx("div", { style: {
width: "50%",
}, children: _jsx(Spinner, {}) }) })) : (MoreIcon) }), _jsx(WalletLabel, { children: locales.more })] }));
}