feat: new login modal

near · Oct 16, 2024 · 18410e1 · 18410e1
1 parent fad5874
commit 18410e1
Show file tree

Hide file tree

Showing 9 changed files with 50 additions and 109 deletions.
diff --git a/src/assets/images/wallets/fastAuth.png b/src/assets/images/wallets/fastAuth.png
diff --git a/src/components/sidebar-navigation/Sidebar.tsx b/src/components/sidebar-navigation/Sidebar.tsx
@@ -4,8 +4,6 @@ import { useRouter } from 'next/router';
 import { useCallback, useEffect, useRef } from 'react';
 import { useContext } from 'react';
 
-import { useSignInRedirect } from '@/hooks/useSignInRedirect';
-
 import { NearContext } from '../wallet-selector/WalletSelector';
 import NearIconSvg from './icons/near-icon.svg';
 import { Search } from './Search';
@@ -22,14 +20,9 @@ export const Sidebar = () => {
  const toggleExpandedSidebar = useNavigationStore((store) => store.toggleExpandedSidebar);
  const handleBubbledClickInSidebar = useNavigationStore((store) => store.handleBubbledClickInSidebar);
  const tooltipsDisabled = isSidebarExpanded;
- const { signedAccountId } = useContext(NearContext);
- const { requestAuthentication } = useSignInRedirect();
+ const { wallet, signedAccountId } = useContext(NearContext);
  const inputRef = useRef<HTMLInputElement>(null);
 
- const handleCreateAccount = () => {
- requestAuthentication(true);
- };
-
  const isNavigationItemActive = useCallback(
  (route: string | string[], exactMatch = false) => {
  if (expandedDrawer) return false;
@@ -202,10 +195,10 @@ export const Sidebar = () => {
  {signedAccountId ? (
  <UserDropdownMenu collapsed={!isSidebarExpanded} />
  ) : (
- <Tooltip content="Sign-up or Login" side="right" disabled={tooltipsDisabled} asChild>
- <S.LoginItem $active={false} $type="featured" onClick={handleCreateAccount}>
+ <Tooltip content="Login" side="right" disabled={tooltipsDisabled} asChild>
+ <S.LoginItem $active={false} $type="featured" onClick={wallet?.signIn}>
  <i className="ph-bold ph-user" />
- <span>Sign-up or Login</span>
+ <span>Login</span>
  </S.LoginItem>
  </Tooltip>
  )}

diff --git a/src/components/sidebar-navigation/SmallScreenHeader.tsx b/src/components/sidebar-navigation/SmallScreenHeader.tsx
@@ -4,8 +4,6 @@ import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { useContext } from 'react';
 
-import { useSignInRedirect } from '@/hooks/useSignInRedirect';
-
 import { NearContext } from '../wallet-selector/WalletSelector';
 import NearIconSvg from './icons/near-icon.svg';
 import { useNavigationStore } from './store';
@@ -20,12 +18,7 @@ export const SmallScreenHeader = () => {
  const setNavigation = useNavigationStore((store) => store.set);
  const showDrawerCollapse = useNavigationStore((store) => store.isOpenedOnSmallScreens && !!store.expandedDrawer);
  const expandedDrawerTitle = useNavigationStore((store) => store.expandedDrawerTitle);
- const { signedAccountId } = useContext(NearContext);
- const { requestAuthentication } = useSignInRedirect();
-
- const handleCreateAccount = () => {
- requestAuthentication(true);
- };
+ const { wallet, signedAccountId } = useContext(NearContext);
 
  return (
  <S.SmallScreenHeader>
@@ -59,9 +52,9 @@ export const SmallScreenHeader = () => {
  ) : (
  <>
  <Button
- label="Sign-up or Login"
+ label="Login"
  variant="primary"
- onClick={handleCreateAccount}
+ onClick={wallet?.signIn}
  style={{ alignSelf: 'center', marginRight: '1rem' }}
  />
  </>

diff --git a/src/components/wallet-selector/WalletSelector.ts b/src/components/wallet-selector/WalletSelector.ts
@@ -6,11 +6,9 @@ import { setupEthereumWallets } from '@near-wallet-selector/ethereum-wallets';
 import { setupHereWallet } from '@near-wallet-selector/here-wallet';
 import { setupLedger } from '@near-wallet-selector/ledger';
 import { setupMeteorWallet } from '@near-wallet-selector/meteor-wallet';
-import { setupMintbaseWallet } from '@near-wallet-selector/mintbase-wallet';
 import { setupModal } from '@near-wallet-selector/modal-ui';
 import { setupMyNearWallet } from '@near-wallet-selector/my-near-wallet';
 import { setupNearMobileWallet } from '@near-wallet-selector/near-mobile-wallet';
-import { setupNeth } from '@near-wallet-selector/neth';
 import { setupNightly } from '@near-wallet-selector/nightly';
 import { setupSender } from '@near-wallet-selector/sender';
 import { setupWelldoneWallet } from '@near-wallet-selector/welldone-wallet';
@@ -19,6 +17,7 @@ import { setupFastAuthWallet } from 'near-fastauth-wallet';
 import type { Context } from 'react';
 import { createContext } from 'react';
 
+import fastAuthIcon from '@/assets/images/wallets/fastAuth.png';
 import { networkId as defaultNetwork, signInContractId } from '@/config';
 import { KEYPOM_OPTIONS } from '@/utils/keypom-options';
 import type { NetworkId } from '@/utils/types';
@@ -45,32 +44,36 @@ export class Wallet {
  }
 
  startUp = async (accountChangeHook: (account: string) => void) => {
+ const emailLogin = async (moduleOptions: any) => {
+ const setup = await setupFastAuthWallet({
+ iconUrl: fastAuthIcon.src,
+ walletUrl:
+ this.networkId === 'testnet'
+ ? 'https://wallet.testnet.near.org/fastauth'
+ : 'https://wallet.near.org/fastauth',
+ relayerUrl:
+ this.networkId === 'testnet'
+ ? 'http://34.70.226.83:3030/relay'
+ : 'https://near-relayer-mainnet.api.pagoda.co/relay',
+ });
+ const fastAuth = await setup(moduleOptions);
+ if (fastAuth) fastAuth.metadata.name = 'Email Login';
+ return fastAuth;
+ };
+
  this.selector = setupWalletSelector({
  network: this.networkId,
  modules: [
+ await emailLogin,
  setupEthereumWallets({ wagmiConfig, web3Modal: web3Modal as any, alwaysOnboardDuringSignIn: true }),
  setupMeteorWallet(),
  setupBitteWallet(),
  setupHereWallet(),
  setupMyNearWallet(),
+ setupNearMobileWallet(),
  setupSender(),
- setupMintbaseWallet(),
- setupNeth({
- gas: '300000000000000',
- bundle: false,
- }),
  setupNightly(),
  setupWelldoneWallet(),
- setupFastAuthWallet({
- walletUrl:
- this.networkId === 'testnet'
- ? 'https://wallet.testnet.near.org/fastauth'
- : 'https://wallet.near.org/fastauth',
- relayerUrl:
- this.networkId === 'testnet'
- ? 'http://34.70.226.83:3030/relay'
- : 'https://near-relayer-mainnet.api.pagoda.co/relay',
- }),
  setupKeypom({
  trialAccountSpecs: {
  url:
@@ -89,7 +92,6 @@ export class Wallet {
  signInContractId,
  }) as any, // TODO: Refactor setupKeypom() to TS
  setupLedger(),
- setupNearMobileWallet(),
  ],
  });
 

diff --git a/src/hooks/useSignInRedirect.ts b/src/hooks/useSignInRedirect.ts
diff --git a/src/pages/[accountId]/widget/[componentName].tsx b/src/pages/[accountId]/widget/[componentName].tsx
@@ -8,7 +8,6 @@ import { privacyDomainName, termsDomainName } from '@/config';
 import { useBosComponents } from '@/hooks/useBosComponents';
 import { useGatewayEvents } from '@/hooks/useGatewayEvents';
 import { useDefaultLayout } from '@/hooks/useLayout';
-import { useSignInRedirect } from '@/hooks/useSignInRedirect';
 import type { NextPageWithLayout } from '@/utils/types';
 
 const ViewComponentPage: NextPageWithLayout = () => {
@@ -17,15 +16,14 @@ const ViewComponentPage: NextPageWithLayout = () => {
  const [componentProps, setComponentProps] = useState<Record<string, unknown>>({});
  const { wallet, signedAccountId } = useContext(NearContext);
  const components = useBosComponents();
- const { requestAuthentication } = useSignInRedirect();
  const { emitGatewayEvent, shouldPassGatewayEventProps } = useGatewayEvents();
 
  useEffect(() => {
- const { requestAuth, createAccount } = componentProps;
+ const { requestAuth } = componentProps;
  if (requestAuth && !signedAccountId) {
- requestAuthentication(!!createAccount);
+ wallet?.signIn();
  }
- }, [signedAccountId, componentProps, requestAuthentication]);
+ }, [wallet, signedAccountId, componentProps]);
 
  useEffect(() => {
  const urlSearchParams = new URLSearchParams(window.location.search);

diff --git a/src/pages/applications.tsx b/src/pages/applications.tsx
@@ -5,14 +5,12 @@ import { ComponentWrapperPage } from '@/components/near-org/ComponentWrapperPage
 import { NearContext } from '@/components/wallet-selector/WalletSelector';
 import { useBosComponents } from '@/hooks/useBosComponents';
 import { useDefaultLayout } from '@/hooks/useLayout';
-import { useSignInRedirect } from '@/hooks/useSignInRedirect';
 import type { NextPageWithLayout } from '@/utils/types';
 
 const ApplicationsPage: NextPageWithLayout = () => {
  const components = useBosComponents();
  const router = useRouter();
- const { requestAuthentication } = useSignInRedirect();
- const { signedAccountId } = useContext(NearContext);
+ const { wallet, signedAccountId } = useContext(NearContext);
 
  const setURLSearchParams = (params: string | string[][] | Record<string, string> | URLSearchParams | undefined) => {
  if (!params) return;
@@ -29,11 +27,11 @@ const ApplicationsPage: NextPageWithLayout = () => {
  };
 
  useEffect(() => {
- const { requestAuth, createAccount } = router.query;
+ const { requestAuth } = router.query;
  if (requestAuth && !signedAccountId) {
- requestAuthentication(!!createAccount);
+ wallet?.signIn();
  }
- }, [signedAccountId, requestAuthentication, router.query]);
+ }, [signedAccountId, wallet, router.query]);
 
  return (
  <ComponentWrapperPage

diff --git a/src/pages/wallet-utilities.tsx b/src/pages/wallet-utilities.tsx
@@ -10,14 +10,12 @@ import KeyTable from '@/components/wallet-utilities/KeyTable';
 import { ReceiveNear } from '@/components/wallet-utilities/ReceiveNear';
 import { SendNear } from '@/components/wallet-utilities/SendNear';
 import { useDefaultLayout } from '@/hooks/useLayout';
-import { useSignInRedirect } from '@/hooks/useSignInRedirect';
 import type { NextPageWithLayout } from '@/utils/types';
 
 const WalletUtilitiesPage: NextPageWithLayout = () => {
  const router = useRouter();
  const selectedTab = (router.query.tab as string) || 'send';
- const signedAccountId = useContext(NearContext);
- const { requestAuthentication } = useSignInRedirect();
+ const { wallet, signedAccountId } = useContext(NearContext);
 
  return (
  <Section grow="available" style={{ background: 'var(--sand3)' }}>
@@ -72,7 +70,7 @@ const WalletUtilitiesPage: NextPageWithLayout = () => {
  ) : (
  <Card>
  <Text>Please sign in to use wallet utilities.</Text>
- <Button label="Sign In" fill="outline" onClick={() => requestAuthentication()} />
+ <Button label="Sign In" fill="outline" onClick={() => wallet?.signIn()} />
  </Card>
  )}
  </Flex>

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -77,3 +77,17 @@ w3m-modal {
  bottom: 10px;
  }
 }
+
+/* wallet selector */
+.modal-right {
+ display: none;
+}
+
+.modal-left, .modal-left-title {
+ border-right: 0 !important;
+ width: 100% !important;
+}
+
+.nws-modal {
+ max-width: 500px !important;
+}