@daimo/pay
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
66 lines (63 loc) • 2.65 kB
JavaScript
import { jsx, jsxs } from 'react/jsx-runtime';
import { ROUTES } from '../../../constants/routes.js';
import { useConnect } from '../../../hooks/useConnect.js';
import { usePayContext } from '../../../hooks/usePayContext.js';
import { walletConfigs } from '../../../wallets/walletConfigs.js';
import { PageContent, ModalContent } from '../../Common/Modal/styles.js';
import { ScrollArea } from '../../Common/ScrollArea/index.js';
import { Container, WalletList, WalletItem, WalletIcon, WalletLabel } from './styles.js';
const MobileConnectors = () => {
const context = usePayContext();
const { paymentState, setRoute } = context;
useConnect();
const walletsIdsToDisplay = Object.keys(walletConfigs).filter((walletId) => {
const wallet = walletConfigs[walletId];
if (!wallet.showInMobileConnectors) return false;
if (wallet.isSolanaOnly && !context.paymentState.showSolanaPaymentMethod)
return false;
return true;
}) ?? [];
const goToWallet = (wallet) => {
if (wallet.getDaimoPayDeeplink == null) {
console.error(`wallet ${wallet.name} has no deeplink`);
return;
}
if (paymentState.isDepositFlow) {
context.paymentState.setSelectedWallet(wallet);
setRoute(ROUTES.SELECT_WALLET_AMOUNT);
} else {
paymentState.openInWalletBrowser(wallet);
}
};
return /* @__PURE__ */ jsx(PageContent, { style: { width: 312 }, children: /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(ModalContent, { style: { paddingBottom: 0 }, children: /* @__PURE__ */ jsx(ScrollArea, { height: 340, children: /* @__PURE__ */ jsx(WalletList, { 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 /* @__PURE__ */ jsxs(
WalletItem,
{
onClick: () => goToWallet(wallet),
style: {
animationDelay: `${i * 50}ms`
},
children: [
/* @__PURE__ */ jsx(WalletIcon, { children: iconConnector ?? icon }),
/* @__PURE__ */ jsx(WalletLabel, { children: shortName ?? name })
]
},
i
);
}) }) }) }) }) });
};
export { MobileConnectors as default };
//# sourceMappingURL=index.js.map