@aioha/react-ui
Version:
Ready-made React modal for Aioha
77 lines (76 loc) • 4.22 kB
JavaScript
import React, { useEffect, useState } from 'react';
import { Providers } from '@aioha/aioha';
import { ProviderSelection } from './login/ProviderSelection.js';
import { UsernameInput } from './login/UsernameInput.js';
import { useAioha } from '@aioha/react-provider';
import { HiveAuthQR } from './login/HiveAuthQR.js';
import { ErrorAlert } from './login/ErrorAlert.js';
import { CloseIcon } from '../icons/CloseIcon.js';
import { ProviderInfo } from './ProviderInfo.js';
import { AccountDiscovery } from './login/AccountDiscovery.js';
export const LoginModal = ({ loginTitle = 'Connect Wallet', loginHelpUrl, loginOptions, arrangement = 'list', forceShowProviders = [], onCancel, onClose, onLogin }) => {
const { aioha } = useAioha();
const [page, setPage] = useState(0);
const [chosenProvider, setProvider] = useState();
const [error, setError] = useState('');
const [hiveAuthPl, setHiveAuthPl] = useState();
useEffect(() => {
aioha.on('hiveauth_login_request', (payload, _, cancel) => {
setError('');
setHiveAuthPl({ payload, cancel });
setPage(2);
});
return () => {
aioha.off('hiveauth_login_request');
};
});
const login = async (provider, username, options) => {
const loginResult = await aioha.login(provider, username, {
...options,
hiveauth: {
// TODO: remove after removing the callback function in next core release
cbWait: () => { }
}
});
if (!loginResult.success) {
setError(loginResult.error);
if (provider !== Providers.HiveSigner)
setPage(1);
}
else {
if (typeof onLogin === 'function')
onLogin(loginResult);
onClose(false);
}
return loginResult;
};
return (React.createElement(React.Fragment, null,
React.createElement("div", { className: "flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600" },
React.createElement("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white" }, loginTitle),
React.createElement("button", { type: "button", className: "text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm h-8 w-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white", onClick: () => onClose(false) },
React.createElement(CloseIcon, null))),
React.createElement("div", { className: "p-4 md:p-5" },
React.createElement(ErrorAlert, { error: error }),
page === 0 ? (React.createElement(ProviderSelection, { helpUrl: loginHelpUrl, forceShow: forceShowProviders, arrangement: arrangement, onCancel: onCancel, onSelected: async (provider) => {
if (!aioha.isProviderEnabled(provider)) {
if (ProviderInfo[provider].url)
window.open(ProviderInfo[provider].url, '_blank', 'noopener,noreferrer');
return;
}
setProvider(provider);
if (provider === Providers.HiveSigner) {
await login(provider, '', {});
}
else if (ProviderInfo[provider].discovery) {
setError('');
setPage(3);
}
else {
setError('');
setPage(1);
}
} })) : page === 1 ? (React.createElement(UsernameInput, { onPrevious: () => {
setError('');
setPage(0);
}, onNext: (username) => login(chosenProvider, username, loginOptions) })) : page === 2 ? (React.createElement(HiveAuthQR, { payload: hiveAuthPl.payload, cancel: hiveAuthPl.cancel })) : page === 3 ? (React.createElement(AccountDiscovery, { provider: chosenProvider, onPrevious: () => setPage(0), onNext: (username, info) => login(chosenProvider, username, { ...loginOptions, paths: info.map((v) => v.path) }) })) : null)));
};