@coin-voyage/paykit
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
86 lines • 3.99 kB
JavaScript
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 { 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, {})] }));
}
//# sourceMappingURL=index.js.map