Merge pull request #128 from magiclabs/fix/remove-unecessary-setters

fix: add address to local storage when auth'd
magiclabs · Feb 2, 2024 · 780941d · 780941d
2 parents f1c8f21 + 053c979
commit 780941d
Show file tree

Hide file tree

Showing 11 changed files with 58 additions and 62 deletions.
diff --git 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
@@ -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}
           >
             <Image src={discord} alt="Discord" height={24} width={24} className="mr-6" />
-            <div className="text-xs font-semibold text-center w-full">Continue with Discord</div>
+            <div className="w-full text-xs font-semibold text-center">Continue with Discord</div>
           </button>
         </div>
       )}

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
@@ -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
@@ -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}
           >
             <Image src={facebook} alt="Facebook" height={24} width={24} className="mr-6" />
-            <div className="text-xs font-semibold text-center w-full">Continue with Facebook</div>
+            <div className="w-full text-xs font-semibold text-center">Continue with Facebook</div>
           </button>
         </div>
       )}

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
@@ -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}
           >
             <Image src={github} alt="Github" height={24} width={24} className="mr-6" />
-            <div className="text-xs font-semibold text-center w-full">Continue with Github</div>
+            <div className="w-full text-xs font-semibold text-center">Continue with Github</div>
           </button>
         </div>
       )}

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
@@ -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}
           >
             <Image src={google} alt="Google" height={24} width={24} className="mr-6" />
-            <div className="text-xs font-semibold text-center w-full">Continue with Google</div>
+            <div className="w-full text-xs font-semibold text-center">Continue with Google</div>
           </button>
         </div>
       )}

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
@@ -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
@@ -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}
           >
             <Image src={twitch} alt="Twitch" height={24} width={24} className="mr-6" />
-            <div className="text-xs font-semibold text-center w-full">Continue with Twitch</div>
+            <div className="w-full text-xs font-semibold text-center">Continue with Twitch</div>
           </button>
         </div>
       )}

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
@@ -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}
           >
             <Image src={twitter} alt="Twitter" height={24} width={24} className="mr-6" />
-            <div className="text-xs font-semibold text-center w-full">Continue with Twitter</div>
+            <div className="w-full text-xs font-semibold text-center">Continue with Twitter</div>
           </button>
         </div>
       )}

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
@@ -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
@@ -12,9 +12,9 @@ export const logout = async (setToken: Dispatch<SetStateAction<string>>, magic:
   setToken('');
 };
 
-export const saveToken = (token: string, setToken: Dispatch<SetStateAction<string>>, 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);
 };