@daimo/pay
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
109 lines (106 loc) • 5.08 kB
JavaScript
import { jsx, jsxs } from 'react/jsx-runtime';
import { ROUTES } from '../../../constants/routes.js';
import { useConnectors } from '../../../hooks/useConnectors.js';
import useIsMobile from '../../../hooks/useIsMobile.js';
import { usePayContext } from '../../../hooks/usePayContext.js';
import { isInjectedConnector } from '../../../utils/index.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, disableMobileInjector } = context;
const { isAndroid, isIOS } = useIsMobile();
const connectors = useConnectors();
const { parsedConfig } = paymentState.externalPaymentOptions;
const { walletOrder } = parsedConfig;
const availableWalletIds = Object.keys(walletConfigs).filter((walletId) => {
const wallet = walletConfigs[walletId];
if (walletOrder.length === 0 && !wallet.showInMobileConnectors)
return false;
if (isAndroid && wallet.showOnAndroid === false) return false;
if (isIOS && wallet.showOnIOS === false) return false;
return true;
}) ?? [];
let walletsIdsToDisplay = availableWalletIds;
if (walletOrder.length > 0) {
const hasInjected = !disableMobileInjector && connectors.some((c) => {
if (!isInjectedConnector(c.type)) return false;
if (c.name?.toLowerCase().includes("walletconnect")) return false;
return walletOrder.some(
(filterName) => c.name?.toLowerCase().includes(filterName.toLowerCase()) || c.id.toLowerCase().includes(filterName.toLowerCase())
);
});
const totalWallets = walletOrder.length;
const injectedCount = hasInjected ? 1 : 0;
const maxNonInjectedInMain = totalWallets > 3 ? 2 : Math.min(3 - injectedCount, totalWallets);
const shownInMain = walletOrder.slice(0, maxNonInjectedInMain);
const filtered = availableWalletIds.filter((walletId) => {
const wallet = walletConfigs[walletId];
return walletOrder.some((optionId) => {
const optionLower = optionId.toLowerCase();
const name = wallet.name?.toLowerCase() || wallet.shortName?.toLowerCase() || "";
return name === optionLower || name.includes(optionLower) || walletId.toLowerCase() === optionLower || walletId.toLowerCase().includes(optionLower);
});
});
const excludedWallets = shownInMain.map((name) => name.toLowerCase());
const remaining = filtered.filter((walletId) => {
const wallet = walletConfigs[walletId];
const walletName = wallet.name?.toLowerCase() || wallet.shortName?.toLowerCase() || "";
return !excludedWallets.some(
(excluded) => walletName.includes(excluded) || excluded.includes(walletName)
);
});
const ordered = [];
for (const optionId of walletOrder) {
const walletId = remaining.find((id) => {
const wallet = walletConfigs[id];
const optionLower = optionId.toLowerCase();
const name = wallet.name?.toLowerCase() || wallet.shortName?.toLowerCase() || "";
return name === optionLower || name.includes(optionLower) || id.toLowerCase() === optionLower || id.toLowerCase().includes(optionLower);
});
if (walletId && !ordered.includes(walletId)) {
ordered.push(walletId);
}
}
walletsIdsToDisplay = ordered;
}
const goToWallet = async (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 if (!isIOS && !isAndroid && wallet.id) {
context.setPendingConnectorId(wallet.id);
setRoute(ROUTES.CONNECT);
} else {
await 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.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