@daimo/pay
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
69 lines (66 loc) • 3.42 kB
JavaScript
import { jsxs, jsx } from 'react/jsx-runtime';
import { useWallet } from '@solana/wallet-adapter-react';
import { useAccount, injected } from 'wagmi';
import { Ethereum, Solana } from '../../../assets/chains.js';
import defaultTheme from '../../../constants/defaultTheme.js';
import { useConnect } from '../../../hooks/useConnect.js';
import useIsMobile from '../../../hooks/useIsMobile.js';
import { usePayContext } from '../../../hooks/usePayContext.js';
import { useTokenOptions } from '../../../hooks/useTokenOptions.js';
import { PageContent, ModalContent, ModalH1 } from '../../Common/Modal/styles.js';
import { OptionsList } from '../../Common/OptionsList/index.js';
import { OrderHeader } from '../../Common/OrderHeader/index.js';
import SelectAnotherMethodButton from '../../Common/SelectAnotherMethodButton/index.js';
function SelectToken() {
const { isMobile } = useIsMobile();
const isMobileFormat = isMobile || window?.innerWidth < defaultTheme.mobileWidth;
const { paymentState } = usePayContext();
const { tokenMode } = paymentState;
const { optionsList, isLoading } = useTokenOptions(tokenMode);
const { isConnected: isEvmConnected } = useAccount();
const solanaWallets = useWallet();
const isSolConnected = solanaWallets.connected;
const isConnected = isEvmConnected || isSolConnected;
const isAnotherMethodButtonVisible = optionsList.length > 0 && tokenMode !== "all";
return (jsxs(PageContent, { children: [jsx(OrderHeader, { minified: true, show: tokenMode }), jsx(OptionsList, { requiredSkeletons: 4, isLoading: isLoading, options: optionsList, scrollHeight: isAnotherMethodButtonVisible && isMobileFormat ? 225 : 300, orDivider: isAnotherMethodButtonVisible, hideBottomLine: !isAnotherMethodButtonVisible }), !isLoading && isConnected && optionsList.length === 0 && (jsx(InsufficientBalance, {})), !isLoading && !isConnected && tokenMode === "all" && jsx(ConnectButton, {}), isAnotherMethodButtonVisible && jsx(SelectAnotherMethodButton, {})] }));
}
function InsufficientBalance() {
return (jsxs(ModalContent, { style: {
display: "flex",
alignItems: "center",
justifyContent: "center",
paddingTop: 16,
paddingBottom: 16,
}, children: [jsx(ModalH1, { children: "Insufficient balance." }), jsx(SelectAnotherMethodButton, {})] }));
}
function ConnectButton() {
const { connect } = useConnect();
const solanaWallets = useWallet();
// On Android, filter out the Android Intent deeplink fake wallet.
const filteredWallets = solanaWallets.wallets.filter((w) => w.adapter.name !== "Mobile Wallet Adapter");
const hasSolanaWallet = filteredWallets.length > 0;
const icons = [jsx(Ethereum, {}, "ethereum")];
if (hasSolanaWallet) {
icons.push(jsx(Solana, {}, "solana"));
}
const onClick = () => {
connect({
connector: injected(),
});
if (hasSolanaWallet) {
if (solanaWallets.wallet == null) {
solanaWallets.select(solanaWallets.wallets[0].adapter.name);
}
solanaWallets.connect();
}
};
const connectOption = {
id: "connect-wallet",
title: "Connect Wallet",
icons,
onClick,
};
return jsx(OptionsList, { options: [connectOption] });
}
export { SelectToken as default };
//# sourceMappingURL=index.js.map