@coin-voyage/paykit
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
81 lines • 4.85 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ROUTES } from "../../../types/routes";
import { ConnectorButton, ConnectorIcon, ConnectorLabel, ConnectorsContainer, RecentlyUsedTag, } from "./styles";
import Alert from "../Alert";
import { ScrollArea } from "../ScrollArea";
import { useUniversalConnect } from "@coin-voyage/crypto/hooks";
import { getConnectorId } from "@coin-voyage/crypto/lib/utils/connector";
import { isWalletInstalled } from "@coin-voyage/crypto/lib/utils/is-wallet-installed";
import { useIsMobile } from "@coin-voyage/shared/hooks";
import { detectBrowser } from "@coin-voyage/shared/utils";
import { useLastConnector } from "../../../hooks/useLastConnector";
import { useWallets } from "../../../hooks/useWallets";
import { walletConfigs } from "../../../lib/config/wallet";
import { isCoinbaseWalletConnector, isWalletConnectConnector, } from "../../../utils";
import usePayContext from "../../contexts/pay";
import { useWeb3 } from "../../contexts/web3";
const ConnectorList = () => {
const context = usePayContext();
const isMobile = useIsMobile();
const installedWallets = useWallets();
const { lastConnectorId } = useLastConnector();
const walletsToDisplay = context.options?.hideRecentBadge || lastConnectorId === "walletConnect" // do not hoist walletconnect to top of list
? installedWallets
: [
// move last used wallet to top of list
// using .filter and spread to avoid mutating original array order with .sort
...installedWallets.filter((wallet) => lastConnectorId === wallet.id),
...installedWallets.filter((wallet) => lastConnectorId !== wallet.id),
];
return (_jsxs(ScrollArea, { mobileDirection: "horizontal", children: [walletsToDisplay.length === 0 && _jsx(Alert, { error: true, children: "No wallets found." }), walletsToDisplay.length > 0 && (_jsx(ConnectorsContainer, { "$mobile": isMobile, "$totalResults": walletsToDisplay.length, children: walletsToDisplay.map((wallet) => (_jsx(ConnectorItem, { wallet: wallet, isRecent: wallet.id === lastConnectorId }, wallet.id))) }))] }));
};
export default ConnectorList;
const ConnectorItem = ({ wallet, isRecent, }) => {
const { connect: { getUri }, } = useWeb3();
const uri = getUri();
const isMobile = useIsMobile();
const { route, setRoute, options, paymentState } = usePayContext();
const { updateLastConnectorId } = useLastConnector();
const { connect } = useUniversalConnect({
onSuccess: (_, variables) => {
if (variables?.connector) {
updateLastConnectorId(getConnectorId(variables.connector));
setRoute(ROUTES.SELECT_TOKEN);
}
},
onError: (error) => {
if (error.message && error.message.includes("User rejected request")) {
return;
}
}
});
const walletConfig = walletConfigs[wallet.id];
let deeplink = !isWalletInstalled(wallet.id) && isMobile && walletConfig
? walletConfig.getWalletConnectDeeplink?.(uri ?? "")
: undefined;
const redirectToMoreWallets = isMobile && isWalletConnectConnector(wallet.id);
// Safari requires opening popup on user gesture, so we connect immediately here
const shouldConnectImmediately = (detectBrowser() === "safari" || detectBrowser() === "ios") &&
isCoinbaseWalletConnector(wallet.id);
if (redirectToMoreWallets || shouldConnectImmediately) {
deeplink = undefined; // mobile redirects to more wallets page
}
return (_jsxs(ConnectorButton, { type: "button", as: deeplink ? "a" : undefined, href: deeplink ? deeplink : undefined, disabled: route !== ROUTES.CONNECTORS, onClick: deeplink
? undefined
: () => {
if (redirectToMoreWallets) {
setRoute(ROUTES.MOBILECONNECTORS);
}
else {
if (shouldConnectImmediately) {
const walletConnector = wallet.connectors.find(w => w.chainType === paymentState.connectorChainType);
if (!walletConnector)
return;
connect({ walletConnector: walletConnector });
}
setRoute(ROUTES.CONNECT);
paymentState.setSelectedWallet(wallet);
}
}, children: [_jsx(ConnectorIcon, { "data-small": wallet.iconShouldShrink, "data-shape": wallet.iconShape, children: wallet.iconConnector ?? wallet.icon }), _jsxs(ConnectorLabel, { children: [isMobile ? (wallet.shortName ?? wallet.name) : wallet.name, !options?.hideRecentBadge && isRecent && (_jsx(RecentlyUsedTag, { children: _jsx("span", { children: "Recent" }) }))] })] }));
};
//# sourceMappingURL=index.js.map