diff --git a/scaffolds/nextjs-dedicated-wallet/scaffold.ts b/scaffolds/nextjs-dedicated-wallet/scaffold.ts index 128fe7a..44b17a4 100644 --- a/scaffolds/nextjs-dedicated-wallet/scaffold.ts +++ b/scaffolds/nextjs-dedicated-wallet/scaffold.ts @@ -75,9 +75,6 @@ export default class DedicatedScaffold extends BaseScaffold { if (authType === 'EmailOTP') { (this.source as string[]).push('./src/components/magic/wallet-methods/UpdateEmail.tsx'); } - if (authType === 'SMSOTP') { - (this.source as string[]).push('./src/components/magic/wallet-methods/UpdatePhone.tsx'); - } }); } } diff --git a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Discord.tsx b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Discord.tsx index 763aed7..65a8718 100644 --- a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Discord.tsx +++ b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Discord.tsx @@ -1,9 +1,8 @@ import { LoginProps } from '@/utils/types'; import { useMagic } from '../MagicProvider'; import { useEffect, useState } from 'react'; -import { saveToken } from '@/utils/common'; +import { saveUserInfo } from '@/utils/common'; import Spinner from '@/components/ui/Spinner'; -import classNames from 'classnames'; import Image from 'next/image'; import discord from 'public/social/Discord.svg'; import Card from '@/components/ui/Card'; @@ -22,8 +21,10 @@ const Discord = ({ token, setToken }: LoginProps) => { try { if (magic) { const result = await magic?.oauth.getRedirectResult(); - //do stuff with user profile data - saveToken(result.magic.idToken, setToken, 'SOCIAL'); + const metadata = await magic?.user.getMetadata(); + if (!metadata?.publicAddress) return; + setToken(result.magic.idToken); + saveUserInfo(result.magic.idToken, 'SOCIAL', metadata?.publicAddress); setLoadingFlag('false'); } } catch (e) { @@ -63,7 +64,7 @@ const Discord = ({ token, setToken }: LoginProps) => { disabled={false} > Discord -
Continue with Discord
+
Continue with Discord
)} diff --git a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/EmailOTP.tsx b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/EmailOTP.tsx index 2b0954e..152156e 100644 --- a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/EmailOTP.tsx +++ b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/EmailOTP.tsx @@ -3,7 +3,7 @@ import showToast from '@/utils/showToast'; import Spinner from '../../ui/Spinner'; import { RPCError, RPCErrorCode } from 'magic-sdk'; import { LoginProps } from '@/utils/types'; -import { saveToken } from '@/utils/common'; +import { saveUserInfo } from '@/utils/common'; import Card from '../../ui/Card'; import CardHeader from '../../ui/CardHeader'; import { useState } from 'react'; @@ -23,10 +23,16 @@ const EmailOTP = ({ token, setToken }: LoginProps) => { setLoginInProgress(true); setEmailError(false); const token = await magic?.auth.loginWithEmailOTP({ email }); - if (token) { - saveToken(token, setToken, 'EMAIL'); - setEmail(''); + + const metadata = await magic?.user.getMetadata(); + + if (!token || !metadata?.publicAddress) { + throw new Error('Magic login failed'); } + + setToken(token); + saveUserInfo(token, 'EMAIL', metadata?.publicAddress); + setEmail(''); } catch (e) { console.log('login error: ' + JSON.stringify(e)); if (e instanceof RPCError) { diff --git a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Facebook.tsx b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Facebook.tsx index 17bd3a1..6b33d7e 100644 --- a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Facebook.tsx +++ b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Facebook.tsx @@ -1,9 +1,8 @@ import { LoginProps } from '@/utils/types'; import { useMagic } from '../MagicProvider'; import { useEffect, useState } from 'react'; -import { saveToken } from '@/utils/common'; +import { saveUserInfo } from '@/utils/common'; import Spinner from '../../ui/Spinner'; -import classNames from 'classnames'; import Image from 'next/image'; import facebook from 'public/social/Facebook.svg'; import Card from '../../ui/Card'; @@ -22,8 +21,10 @@ const Facebook = ({ token, setToken }: LoginProps) => { try { if (magic) { const result = await magic?.oauth.getRedirectResult(); - //do stuff with user profile data - saveToken(result.magic.idToken, setToken, 'SOCIAL'); + const metadata = await magic?.user.getMetadata(); + if (!metadata?.publicAddress) return; + setToken(result.magic.idToken); + saveUserInfo(result.magic.idToken, 'SOCIAL', metadata?.publicAddress); setLoadingFlag('false'); } } catch (e) { @@ -63,7 +64,7 @@ const Facebook = ({ token, setToken }: LoginProps) => { disabled={false} > Facebook -
Continue with Facebook
+
Continue with Facebook
)} diff --git a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Github.tsx b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Github.tsx index 8004de7..23ba301 100644 --- a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Github.tsx +++ b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Github.tsx @@ -1,9 +1,8 @@ import { LoginProps } from '@/utils/types'; import { useMagic } from '../MagicProvider'; import { useEffect, useState } from 'react'; -import { saveToken } from '@/utils/common'; +import { saveUserInfo } from '@/utils/common'; import Spinner from '../../ui/Spinner'; -import classNames from 'classnames'; import Image from 'next/image'; import github from 'public/social/Github.svg'; import Card from '../../ui/Card'; @@ -22,8 +21,10 @@ const Github = ({ token, setToken }: LoginProps) => { try { if (magic) { const result = await magic?.oauth.getRedirectResult(); - //do stuff with user profile data - saveToken(result.magic.idToken, setToken, 'SOCIAL'); + const metadata = await magic?.user.getMetadata(); + if (!metadata?.publicAddress) return; + setToken(result.magic.idToken); + saveUserInfo(result.magic.idToken, 'SOCIAL', metadata?.publicAddress); setLoadingFlag('false'); } } catch (e) { @@ -63,7 +64,7 @@ const Github = ({ token, setToken }: LoginProps) => { disabled={false} > Github -
Continue with Github
+
Continue with Github
)} diff --git a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Google.tsx b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Google.tsx index 4dc8087..b2b0079 100644 --- a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Google.tsx +++ b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Google.tsx @@ -1,9 +1,8 @@ import { LoginProps } from '@/utils/types'; import { useMagic } from '../MagicProvider'; import { useEffect, useState } from 'react'; -import { saveToken } from '@/utils/common'; +import { saveUserInfo } from '@/utils/common'; import Spinner from '../../ui/Spinner'; -import classNames from 'classnames'; import Image from 'next/image'; import google from 'public/social/Google.svg'; import Card from '../../ui/Card'; @@ -22,8 +21,10 @@ const Google = ({ token, setToken }: LoginProps) => { try { if (magic) { const result = await magic?.oauth.getRedirectResult(); - //do stuff with user profile data - saveToken(result.magic.idToken, setToken, 'SOCIAL'); + const metadata = await magic?.user.getMetadata(); + if (!metadata?.publicAddress) return; + setToken(result.magic.idToken); + saveUserInfo(result.magic.idToken, 'SOCIAL', metadata?.publicAddress); setLoadingFlag('false'); } } catch (e) { @@ -63,7 +64,7 @@ const Google = ({ token, setToken }: LoginProps) => { disabled={false} > Google -
Continue with Google
+
Continue with Google
)} diff --git a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/SMSOTP.tsx b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/SMSOTP.tsx index a0150b2..fa075de 100644 --- a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/SMSOTP.tsx +++ b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/SMSOTP.tsx @@ -4,7 +4,7 @@ import showToast from '@/utils/showToast'; import Spinner from '../../ui/Spinner'; import { RPCError, RPCErrorCode } from 'magic-sdk'; import { LoginProps } from '@/utils/types'; -import { saveToken } from '@/utils/common'; +import { saveUserInfo } from '@/utils/common'; import Card from '../../ui/Card'; import CardHeader from '../../ui/CardHeader'; import FormInput from '@/components/ui/FormInput'; @@ -25,10 +25,15 @@ const SMSOTP = ({ token, setToken }: LoginProps) => { const token = await magic?.auth.loginWithSMS({ phoneNumber: phone, }); - if (token) { - saveToken(token, setToken, 'SMS'); - setPhone(''); + const metadata = await magic?.user.getMetadata(); + + if (!token || !metadata?.publicAddress) { + throw new Error('Magic login failed'); } + + setToken(token); + saveUserInfo(token, 'EMAIL', metadata?.publicAddress); + setPhone(''); } catch (e) { console.log('login error: ' + JSON.stringify(e)); if (e instanceof RPCError) { diff --git a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Twitch.tsx b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Twitch.tsx index 8986ba7..0747e80 100644 --- a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Twitch.tsx +++ b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Twitch.tsx @@ -1,9 +1,8 @@ import { LoginProps } from '@/utils/types'; import { useMagic } from '../MagicProvider'; import { useEffect, useState } from 'react'; -import { saveToken } from '@/utils/common'; +import { saveUserInfo } from '@/utils/common'; import Spinner from '../../ui/Spinner'; -import classNames from 'classnames'; import Image from 'next/image'; import twitch from 'public/social/Twitch.svg'; import Card from '../../ui/Card'; @@ -22,8 +21,10 @@ const Twitch = ({ token, setToken }: LoginProps) => { try { if (magic) { const result = await magic?.oauth.getRedirectResult(); - //do stuff with user profile data - saveToken(result.magic.idToken, setToken, 'SOCIAL'); + const metadata = await magic?.user.getMetadata(); + if (!metadata?.publicAddress) return; + setToken(result.magic.idToken); + saveUserInfo(result.magic.idToken, 'SOCIAL', metadata?.publicAddress); setLoadingFlag('false'); } } catch (e) { @@ -63,7 +64,7 @@ const Twitch = ({ token, setToken }: LoginProps) => { disabled={false} > Twitch -
Continue with Twitch
+
Continue with Twitch
)} diff --git a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Twitter.tsx b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Twitter.tsx index f90a7a2..39a1180 100644 --- a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Twitter.tsx +++ b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Twitter.tsx @@ -1,9 +1,8 @@ import { LoginProps } from '@/utils/types'; import { useMagic } from '../MagicProvider'; import { useEffect, useState } from 'react'; -import { saveToken } from '@/utils/common'; +import { saveUserInfo } from '@/utils/common'; import Spinner from '../../ui/Spinner'; -import classNames from 'classnames'; import Image from 'next/image'; import twitter from 'public/social/Twitter.svg'; import Card from '../../ui/Card'; @@ -22,8 +21,10 @@ const Twitter = ({ token, setToken }: LoginProps) => { try { if (magic) { const result = await magic?.oauth.getRedirectResult(); - //do stuff with user profile data - saveToken(result.magic.idToken, setToken, 'SOCIAL'); + const metadata = await magic?.user.getMetadata(); + if (!metadata?.publicAddress) return; + setToken(result.magic.idToken); + saveUserInfo(result.magic.idToken, 'SOCIAL', metadata?.publicAddress); setLoadingFlag('false'); } } catch (e) { @@ -63,7 +64,7 @@ const Twitter = ({ token, setToken }: LoginProps) => { disabled={false} > Twitter -
Continue with Twitter
+
Continue with Twitter
)} diff --git a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/cards/UserInfoCard.tsx b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/cards/UserInfoCard.tsx index b4ded64..1f6003f 100644 --- a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/cards/UserInfoCard.tsx +++ b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/cards/UserInfoCard.tsx @@ -16,25 +16,7 @@ const UserInfo = ({ token, setToken }: LoginProps) => { const [copied, setCopied] = useState('Copy'); const [isRefreshing, setIsRefreshing] = useState(false); - const [publicAddress, setPublicAddress] = useState(localStorage.getItem('user')); - - useEffect(() => { - const checkLoginandGetBalance = async () => { - const isLoggedIn = await magic?.user.isLoggedIn(); - if (isLoggedIn) { - try { - const metadata = await magic?.user.getInfo(); - if (metadata) { - localStorage.setItem('user', metadata?.publicAddress!); - setPublicAddress(metadata?.publicAddress!); - } - } catch (e) { - console.log('error in fetching address: ' + e); - } - } - }; - setTimeout(() => checkLoginandGetBalance(), 5000); - }, []); + const [publicAddress] = useState(localStorage.getItem('user')); const getBalance = useCallback(async () => { if (publicAddress && web3) { diff --git a/scaffolds/nextjs-dedicated-wallet/template/src/utils/common.ts b/scaffolds/nextjs-dedicated-wallet/template/src/utils/common.ts index 7b17952..cfda3a2 100644 --- a/scaffolds/nextjs-dedicated-wallet/template/src/utils/common.ts +++ b/scaffolds/nextjs-dedicated-wallet/template/src/utils/common.ts @@ -12,9 +12,9 @@ export const logout = async (setToken: Dispatch>, magic: setToken(''); }; -export const saveToken = (token: string, setToken: Dispatch>, loginMethod: LoginMethod) => { +export const saveUserInfo = (token: string, loginMethod: LoginMethod, userAddress: string) => { localStorage.setItem('token', token); - setToken(token); localStorage.setItem('isAuthLoading', 'false'); localStorage.setItem('loginMethod', loginMethod); + localStorage.setItem('user', userAddress); };