@daimo/pay
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
231 lines (228 loc) • 9.11 kB
JavaScript
import { jsxs, jsx } from 'react/jsx-runtime';
import { ROUTES } from '../../../constants/routes.js';
import { usePayContext } from '../../../hooks/usePayContext.js';
import { PageContent } from '../../Common/Modal/styles.js';
import { getAddressContraction } from '@daimo/pay-common';
import { useWallet } from '@solana/wallet-adapter-react';
import { useAccount, useDisconnect } from 'wagmi';
import { Ethereum, Solana, Tron, Base } from '../../../assets/chains.js';
import { MetaMask, Trust, Rainbow, Phantom, Rabby, WalletIcon } from '../../../assets/logos.js';
import useIsMobile from '../../../hooks/useIsMobile.js';
import useLocales from '../../../hooks/useLocales.js';
import { flattenChildren } from '../../../utils/index.js';
import { walletConfigs } from '../../../wallets/walletConfigs.js';
import { OptionsList } from '../../Common/OptionsList/index.js';
import { OrderHeader } from '../../Common/OrderHeader/index.js';
import PoweredByFooter from '../../Common/PoweredByFooter/index.js';
import WalletChainLogo from '../../Common/WalletChainLogo/index.js';
function SelectMethod() {
const locales = useLocales();
const payWithString = flattenChildren(locales.payWith).join("");
const { isMobile, isIOS, isAndroid } = useIsMobile();
const {
address,
chain,
isConnected: isEthConnected,
connector
} = useAccount();
const {
connected: isSolanaConnected,
wallet: solanaWallet,
disconnect: disconnectSolana,
publicKey
} = useWallet();
const { setRoute, paymentState, log, disableMobileInjector } = usePayContext();
const { showSolanaPaymentMethod } = paymentState;
const { disconnectAsync } = useDisconnect();
const { externalPaymentOptions, senderEnsName } = paymentState;
const showConnectedEth = isEthConnected && (!isMobile || !disableMobileInjector);
const showConnectedSolana = isSolanaConnected && (!isMobile || !disableMobileInjector);
const getConnectedWalletOptions = () => {
const showChainLogo = isEthConnected && isSolanaConnected && showSolanaPaymentMethod;
const connectedOptions = [];
if (showConnectedEth) {
const ethWalletDisplayName = senderEnsName ?? (address ? getAddressContraction(address) : "wallet");
let walletIcon;
const matchedConfig = Object.values(walletConfigs).find((cfg) => {
if (!cfg.name || !connector?.name) return false;
const cfgName = cfg.name.toLowerCase();
const connName = connector.name.toLowerCase();
return cfgName.includes(connName) || connName.includes(cfgName);
});
if (matchedConfig?.icon) {
walletIcon = typeof matchedConfig.icon === "string" ? /* @__PURE__ */ jsx("img", { src: matchedConfig.icon, alt: matchedConfig.name }) : matchedConfig.icon;
} else if (connector?.icon) {
walletIcon = /* @__PURE__ */ jsx("div", { style: { borderRadius: "22.5%", overflow: "hidden" }, children: /* @__PURE__ */ jsx("img", { src: connector.icon, alt: connector.name }) });
} else {
walletIcon = /* @__PURE__ */ jsx(WalletIcon, {});
}
const connectedEthWalletOption = {
id: "connectedWallet",
title: `${payWithString} ${ethWalletDisplayName}`,
icons: [
/* @__PURE__ */ jsx(
WalletChainLogo,
{
walletIcon,
walletName: connector?.name || "Wallet",
chainLogo: showChainLogo ? /* @__PURE__ */ jsx(Ethereum, {}) : null
},
"eth"
)
],
onClick: () => {
paymentState.setTokenMode("evm");
setRoute(ROUTES.SELECT_TOKEN, {
event: "click-wallet",
walletId: connector?.id,
chainId: chain?.id,
address
});
}
};
connectedOptions.push(connectedEthWalletOption);
}
if (showConnectedSolana && showSolanaPaymentMethod) {
const solWalletDisplayName = getAddressContraction(
publicKey?.toBase58() ?? ""
);
let solWalletIcon;
const solMatchedConfig = Object.values(walletConfigs).find((cfg) => {
if (!cfg.name) return false;
const cfgName = cfg.name.toLowerCase();
const solName = solanaWallet?.adapter.name.toLowerCase() || "";
return cfgName.includes(solName) || solName.includes(cfgName);
});
if (solMatchedConfig?.icon) {
solWalletIcon = typeof solMatchedConfig.icon === "string" ? /* @__PURE__ */ jsx("img", { src: solMatchedConfig.icon, alt: solMatchedConfig.name }) : solMatchedConfig.icon;
} else if (solanaWallet?.adapter.icon) {
solWalletIcon = solanaWallet.adapter.icon;
} else {
solWalletIcon = /* @__PURE__ */ jsx(Solana, {});
}
const connectedSolWalletOption = {
id: "connectedSolanaWallet",
title: `${payWithString} ${solWalletDisplayName}`,
icons: [
/* @__PURE__ */ jsx(
WalletChainLogo,
{
walletIcon: solWalletIcon,
walletName: solanaWallet?.adapter.name || "Wallet",
chainLogo: showChainLogo && /* @__PURE__ */ jsx(Solana, {})
},
"sol-wallet"
)
],
onClick: () => {
paymentState.setTokenMode("solana");
setRoute(ROUTES.SELECT_TOKEN, {
event: "click-wallet",
walletId: solanaWallet?.adapter.name,
chainId: "solana",
address: publicKey?.toBase58()
});
}
};
connectedOptions.push(connectedSolWalletOption);
}
return connectedOptions;
};
const connectedWalletOptions = getConnectedWalletOptions();
const unconnectedWalletOption = {
id: "unconnectedWallet",
title: isEthConnected || isSolanaConnected ? locales.payWithAnotherWallet : locales.payWithWallet,
icons: getBestUnconnectedWalletIcons(connector, isMobile),
onClick: async () => {
await disconnectAsync();
await disconnectSolana();
setRoute(ROUTES.CONNECTORS);
}
};
const options = [];
options.push(...connectedWalletOptions);
options.push(unconnectedWalletOption);
log(
`[SELECT_METHOD] loading: ${externalPaymentOptions.loading}, options: ${JSON.stringify(
externalPaymentOptions.options
)}`
);
const exchangeOptions = externalPaymentOptions.options.get("exchange") ?? [];
const showExchangePaymentMethod = exchangeOptions.length > 0;
if (showExchangePaymentMethod) {
options.push({
id: "exchange",
title: locales.payWithExchange,
icons: exchangeOptions.slice(0, 3).map((option) => option.logoURI),
onClick: () => {
setRoute(ROUTES.SELECT_EXCHANGE, {
event: "click-option",
option: "exchange"
});
}
});
}
const depositAddressOption = getDepositAddressOption(setRoute, locales);
options.push(depositAddressOption);
const zkp2pOptions = externalPaymentOptions.options.get("zkp2p") ?? [];
const showZkp2pPaymentMethod = !isMobile && zkp2pOptions.length > 0;
if (showZkp2pPaymentMethod) {
options.push({
id: "ZKP2P",
title: locales.payViaPaymentApp,
icons: zkp2pOptions.slice(0, 2).map((option) => option.logoURI),
onClick: () => {
setRoute(ROUTES.SELECT_ZKP2P);
}
});
}
options.sort((a, b) => (a.disabled ? 1 : 0) - (b.disabled ? 1 : 0));
return /* @__PURE__ */ jsxs(PageContent, { children: [
/* @__PURE__ */ jsx(OrderHeader, {}),
/* @__PURE__ */ jsx(
OptionsList,
{
requiredSkeletons: isMobile ? 3 : 4,
isLoading: externalPaymentOptions.loading,
options: externalPaymentOptions.loading ? [] : options
}
),
/* @__PURE__ */ jsx(PoweredByFooter, {})
] });
}
function getBestUnconnectedWalletIcons(connector, isMobile) {
const icons = [];
const strippedId = connector?.id.toLowerCase();
const [isRainbow, isPhantom, isRabby, isMetaMask] = [
strippedId?.includes("rainbow"),
strippedId?.includes("trust"),
strippedId?.includes("phantom"),
strippedId?.includes("coinbase"),
strippedId?.includes("metamask"),
strippedId?.includes("rabby"),
strippedId?.includes("metamask")
];
if (isMobile) {
icons.push(/* @__PURE__ */ jsx(MetaMask, {}));
icons.push(/* @__PURE__ */ jsx(Trust, { background: true }));
icons.push(/* @__PURE__ */ jsx(Rainbow, {}));
} else {
if (!isMetaMask) icons.push(/* @__PURE__ */ jsx(MetaMask, {}));
if (!isRainbow) icons.push(/* @__PURE__ */ jsx(Rainbow, {}));
if (!isPhantom) icons.push(/* @__PURE__ */ jsx(Phantom, {}));
if (!isRabby && icons.length < 3) icons.push(/* @__PURE__ */ jsx(Rabby, {}));
}
return icons;
}
function getDepositAddressOption(setRoute, locales) {
return {
id: "depositAddress",
title: locales.payToAddress,
icons: [/* @__PURE__ */ jsx(Ethereum, {}, "eth"), /* @__PURE__ */ jsx(Tron, {}, "tron"), /* @__PURE__ */ jsx(Base, {}, "base")],
onClick: () => {
setRoute(ROUTES.SELECT_DEPOSIT_ADDRESS_CHAIN);
}
};
}
export { SelectMethod as default };
//# sourceMappingURL=index.js.map