@coin-voyage/paykit
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
73 lines • 4.89 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Container, WalletIcon, WalletItem, WalletLabel, WalletList, } from "./styles";
import { ModalContent, PageContent } from "../../ui/Modal/styles";
import useLocales from "../../../hooks/useLocales";
import { useWalletConnectModal } from "../../../hooks/useWalletConnectModal";
import { useWallets } from "../../../hooks/useWallets";
import { walletConfigs } from "../../../lib/config/wallet";
import usePayContext from "../../contexts/pay";
import { useWeb3 } from "../../contexts/web3";
import CopyToClipboard from "../../ui/CopyToClipboard";
import { ScrollArea } from "../../ui/ScrollArea";
import { Spinner } from "../../ui/Spinner";
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 context = usePayContext();
const locales = useLocales();
const { connect: { getUri }, } = useWeb3();
const wcUri = getUri();
const { open: openW3M, isOpen: isOpenW3M } = useWalletConnectModal();
const wallets = useWallets();
// filter out installed wallets
const walletsIdsToDisplay = Object.keys(walletConfigs).filter((walletId) => {
const wallet = walletConfigs[walletId];
if (wallets.find((w) => w.connectors.find((c) => c.connector.id === walletId))) {
return false;
}
if (!wallet.getWalletConnectDeeplink) {
return false;
}
return true;
}) ?? [];
const connectWallet = (wallet) => {
const uri = wallet.getWalletConnectDeeplink?.(wcUri);
if (uri) {
window.location.href = uri;
}
//if (uri) window.open(uri, '_blank');
};
return (_jsx(PageContent, { style: { width: 312 }, children: _jsxs(Container, { children: [_jsx(ModalContent, { style: { paddingBottom: 0 }, children: _jsx(ScrollArea, { height: 340, children: _jsxs(WalletList, { "$disabled": !wcUri, 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);
})
.filter((walletId) => !(walletId === "coinbaseWallet" ||
walletId === "com.coinbase.wallet"))
.map((walletId, i) => {
const wallet = walletConfigs[walletId];
const { name, shortName, iconConnector, icon } = wallet;
return (_jsxs(WalletItem, { onClick: () => connectWallet(wallet), style: {
animationDelay: `${i * 50}ms`,
}, children: [_jsx(WalletIcon, { "$outline": true, children: iconConnector ?? icon }), _jsx(WalletLabel, { children: shortName ?? name })] }, i));
}), _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 })] })] }) }) }), context.options?.walletConnectCTA !== "modal" && (_jsx("div", { style: {
display: "flex",
alignItems: "center",
justifyContent: "center",
gap: 14,
paddingTop: 8,
}, children: _jsx(CopyToClipboard, { variant: "button", string: wcUri, children: locales.copyToClipboard }) }))] }) }));
}
//# sourceMappingURL=index.js.map