@0xsequence/connect/dist/cjs/components/SocialLink/SocialLink.js

Connect package for Sequence Web SDK

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SocialLink = SocialLink;
const jsx_runtime_1 = require("react/jsx-runtime");
const design_system_1 = require("@0xsequence/design-system");
const google_1 = require("@react-oauth/google");
const ethers_1 = require("ethers");
const react_1 = require("react");
const react_apple_signin_auth_1 = __importDefault(require("react-apple-signin-auth"));
const localStorage_js_1 = require("../../constants/localStorage.js");
const useSequenceWaaS_js_1 = require("../../hooks/useSequenceWaaS.js");
const useStorage_js_1 = require("../../hooks/useStorage.js");
const useEmailAuth_js_1 = require("../../utils/useEmailAuth.js");
const AccountName_js_1 = require("./AccountName.js");
function SocialLink() {
    const toast = (0, design_system_1.useToast)();
    const [currentAccount, setCurrentAccount] = (0, react_1.useState)();
    const [accounts, setAccounts] = (0, react_1.useState)();
    const [loading, setLoading] = (0, react_1.useState)(true);
    const [error, setError] = (0, react_1.useState)();
    const [email, setEmail] = (0, react_1.useState)('');
    const inputRef = (0, react_1.useRef)(null);
    const isEmailValid = inputRef.current?.validity.valid;
    const [showEmailWarning, setEmailWarning] = (0, react_1.useState)(false);
    const [code, setCode] = (0, react_1.useState)([]);
    const sequenceWaaS = (0, useSequenceWaaS_js_1.useSequenceWaaS)();
    const { data: googleClientId } = (0, useStorage_js_1.useStorageItem)(localStorage_js_1.LocalStorageKey.WaasGoogleClientID);
    const { data: appleClientId } = (0, useStorage_js_1.useStorageItem)(localStorage_js_1.LocalStorageKey.WaasAppleClientID);
    const { inProgress: emailAuthInProgress, loading: emailAuthLoading, initiateAuth: initiateEmailAuth, sendChallengeAnswer } = (0, useEmailAuth_js_1.useEmailAuth)({
        sessionName: randomName(),
        onSuccess: async ({ wallet }) => {
            console.log(`Wallet address: ${wallet}`);
        },
        linkAccount: true
    });
    const removeAccount = async (id) => {
        setLoading(true);
        setAccounts(undefined);
        try {
            await sequenceWaaS.removeAccount(id);
            const response = await sequenceWaaS.listAccounts();
            setAccounts(response.accounts);
        }
        catch (e) {
            setError(getMessageFromUnknownError(e));
            const response = await sequenceWaaS.listAccounts();
            setAccounts(response.accounts);
        }
        setLoading(false);
    };
    const handleGoogleLogin = async (tokenResponse) => {
        const challenge = await sequenceWaaS.initAuth({ idToken: tokenResponse.credential });
        try {
            const linkResponse = await sequenceWaaS.linkAccount(challenge);
            setAccounts(accounts => [...(accounts || []), linkResponse.account]);
        }
        catch (e) {
            if ((0, useEmailAuth_js_1.isAccountAlreadyLinkedError)(e)) {
                toast({
                    title: 'Account already linked',
                    description: 'This account is already linked to another wallet',
                    variant: 'error'
                });
            }
        }
    };
    const appleRedirectUri = 'https://' + window.location.host;
    const handleAppleLogin = async (response) => {
        const challenge = await sequenceWaaS.initAuth({ idToken: response.authorization.id_token });
        try {
            const linkResponse = await sequenceWaaS.linkAccount(challenge);
            setAccounts(accounts => [...(accounts || []), linkResponse.account]);
        }
        catch (e) {
            if ((0, useEmailAuth_js_1.isAccountAlreadyLinkedError)(e)) {
                toast({
                    title: 'Account already linked',
                    description: 'This account is already linked to another wallet',
                    variant: 'error'
                });
            }
        }
    };
    (0, react_1.useEffect)(() => {
        sequenceWaaS
            .listAccounts()
            .then(response => {
            setAccounts(response.accounts);
            if (response.currentAccountId) {
                setCurrentAccount(response.accounts.find(account => account.id === response.currentAccountId));
            }
            setLoading(false);
        })
            .catch((e) => {
            setError(getMessageFromUnknownError(e));
            setLoading(false);
        });
    }, [emailAuthInProgress]);
    return ((0, jsx_runtime_1.jsxs)("div", { className: "p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4 mb-5", children: [(0, jsx_runtime_1.jsx)(design_system_1.Text, { variant: "normal", color: "text100", fontWeight: "bold", children: "Your connected (linked) accounts" }), accounts && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: accounts.map(a => ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-row items-center gap-2", children: [(0, jsx_runtime_1.jsx)(design_system_1.Text, { variant: "normal", color: "text100", children: (0, jsx_runtime_1.jsx)(AccountName_js_1.AccountName, { acc: a }) }), a.id !== currentAccount?.id && (0, jsx_runtime_1.jsx)(design_system_1.Button, { size: "xs", label: "Remove", onClick: () => removeAccount(a.id) }), a.id === currentAccount?.id && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(design_system_1.Text, { variant: "small", color: "text100", children: "(Account you logged in with)" }) }))] }, a.id))) })), loading && (0, jsx_runtime_1.jsx)(design_system_1.Spinner, {})] }), (0, jsx_runtime_1.jsx)(design_system_1.Divider, {}), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2 w-full", children: [(0, jsx_runtime_1.jsx)(design_system_1.Text, { variant: "large", color: "text100", fontWeight: "bold", className: "mb-5", children: "Connect (link) another login method" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col w-fit gap-2", children: [googleClientId && (0, jsx_runtime_1.jsx)(google_1.GoogleLogin, { onSuccess: handleGoogleLogin, shape: "circle", width: "100%" }), appleClientId && (
                            // @ts-ignore
                            (0, jsx_runtime_1.jsx)(react_apple_signin_auth_1.default, { authOptions: {
                                    clientId: appleClientId,
                                    scope: 'openid email',
                                    redirectURI: appleRedirectUri,
                                    usePopup: true
                                }, onError: (error) => console.error(error), onSuccess: handleAppleLogin, uiType: "dark" }))] }), (0, jsx_runtime_1.jsx)(design_system_1.Divider, {}), (0, jsx_runtime_1.jsx)("div", { className: "mt-2", children: (0, jsx_runtime_1.jsx)(design_system_1.Text, { variant: "normal", color: "text100", fontWeight: "bold", children: "Email" }) }), sendChallengeAnswer ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [(0, jsx_runtime_1.jsx)("div", { className: "mt-3", children: (0, jsx_runtime_1.jsx)(design_system_1.Text, { className: "mt-5", variant: "normal", color: "text80", children: "Enter code received in email." }) }), (0, jsx_runtime_1.jsx)("div", { className: "mt-4", children: (0, jsx_runtime_1.jsx)(design_system_1.PINCodeInput, { value: code, digits: 6, onChange: setCode }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex gap-2 my-4", children: emailAuthLoading ? ((0, jsx_runtime_1.jsx)(design_system_1.Spinner, {})) : ((0, jsx_runtime_1.jsx)(design_system_1.Button, { variant: "primary", disabled: code.includes(''), label: "Verify", onClick: () => sendChallengeAnswer(code.join('')), "data-id": "verifyButton" })) })] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "mb-4", children: [(0, jsx_runtime_1.jsxs)(design_system_1.Text, { variant: "normal", color: "text80", children: ["Enter your email to recieve a code to login and create your wallet. ", (0, jsx_runtime_1.jsx)("br", {}), "Please check your spam folder if you don't see it in your inbox."] }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-6", children: [(0, jsx_runtime_1.jsx)(design_system_1.TextInput, { name: "email", type: "email", onChange: (ev) => {
                                            setEmail(ev.target.value);
                                        }, ref: inputRef, onKeyDown: (ev) => {
                                            if (email && ev.key === 'Enter') {
                                                initiateEmailAuth(email);
                                            }
                                        }, onBlur: () => setEmailWarning(!!email && !isEmailValid), value: email, placeholder: "hello@example.com", required: true, "data-id": "loginEmail" }), showEmailWarning && ((0, jsx_runtime_1.jsx)(design_system_1.Text, { variant: "small", color: "negative", className: "my-2 text-red-500", children: "Invalid email address" }))] }), (0, jsx_runtime_1.jsx)("div", { className: "flex gap-2 my-4 items-center justify-center", children: emailAuthLoading ? ((0, jsx_runtime_1.jsx)(design_system_1.Spinner, {})) : ((0, jsx_runtime_1.jsx)(design_system_1.Button, { variant: "primary", disabled: !isEmailValid, label: "Continue", onClick: () => initiateEmailAuth(email), "data-id": "continueButton" })) })] }))] }), error && ((0, jsx_runtime_1.jsxs)(design_system_1.Text, { variant: "normal", color: "text100", fontWeight: "bold", children: ["Error loading accounts: ", error] }))] }));
}
const DEVICE_EMOJIS = [
    // 256 emojis for unsigned byte range 0 - 255
    ...'🐶🐱🐭🐹🐰🦊🐻🐼🐨🐯🦁🐮🐷🐽🐸🐵🙈🙉🙊🐒🐔🐧🐦🐤🐣🐥🦆🦅🦉🦇🐺🐗🐴🦄🐝🐛🦋🐌🐞🐜🦟🦗🕷🕸🦂🐢🐍🦎🦖🦕🐙🦑🦐🦞🦀🐡🐠🐟🐬🐳🐋🦈🐊🐅🐆🦓🦍🦧🐘🦛🦏🐪🐫🦒🦘🐃🐂🐄🐎🐖🐏🐑🦙🐐🦌🐕🐩🦮🐈🐓🦃🦚🦜🦢🦩🕊🐇🦝🦨🦡🦦🦥🐁🐀🐿🦔🐾🐉🐲🌵🎄🌲🌳🌴🌱🌿🍀🎍🎋🍃👣🍂🍁🍄🐚🌾💐🌷🌹🥀🌺🌸🌼🌻🌞🌝🍏🍎🍐🍊🍋🍌🍉🍇🍓🍈🥭🍍🥥🥝🍅🥑🥦🥬🥒🌶🌽🥕🧄🧅🥔🍠🥐🥯🍞🥖🥨🧀🥚🍳🧈🥞🧇🥓🥩🍗🍖🦴🌭🍔🍟🍕🥪🥙🧆🌮🌯🥗🥘🥫🍝🍜🍲🍛🍣🍱🥟🦪🍤🍙🍚🍘🍥🥠🥮🍢🍡🍧🍨🍦🥧🧁🍰🎂🍮🍭🍬🍫🍿🍩🍪🌰🥜👀👂👃👄👅👆👇👈👉👊👋👌👍👎👏👐👑👒👓🎯🎰🎱🎲🎳👾👯👺👻👽🏂🏃🏄'
];
function randomName() {
    const wordlistSize = 2048;
    const words = ethers_1.ethers.wordlists.en;
    const randomEmoji = DEVICE_EMOJIS[Math.floor(Math.random() * DEVICE_EMOJIS.length)];
    const randomWord1 = words.getWord(Math.floor(Math.random() * wordlistSize));
    const randomWord2 = words.getWord(Math.floor(Math.random() * wordlistSize));
    return `${randomEmoji} ${randomWord1} ${randomWord2}`;
}
function getMessageFromUnknownError(e) {
    if (e && typeof e === 'object' && 'message' in e && e.message && typeof e.message === 'string') {
        return e.message;
    }
    return 'unknown error';
}
//# sourceMappingURL=SocialLink.js.map