diff --git a/scaffolds/nextjs-dedicated-wallet/template/package.json b/scaffolds/nextjs-dedicated-wallet/template/package.json index 6597160..e3a5b59 100644 --- a/scaffolds/nextjs-dedicated-wallet/template/package.json +++ b/scaffolds/nextjs-dedicated-wallet/template/package.json @@ -9,14 +9,13 @@ "lint": "next lint --fix" }, "dependencies": { - "@magic-ext/auth": "^4.0.0", "@magic-ext/oauth": "^15.0.0", "@types/node": "20.3.3", "@types/react": "18.2.14", "@types/react-dom": "18.2.6", "autoprefixer": "10.4.14", "classnames": "^2.3.2", - "magic-sdk": "^21.0.0", + "magic-sdk": "^21.5.0", "next": "13.4.7", "postcss": "8.4.24", "react": "18.2.0", diff --git a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/MagicProvider.tsx b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/MagicProvider.tsx index 296d2da..2a1f37d 100644 --- a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/MagicProvider.tsx +++ b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/MagicProvider.tsx @@ -1,11 +1,10 @@ import { getChainId, getNetworkUrl } from '@/utils/network'; import { OAuthExtension } from '@magic-ext/oauth'; -import { AuthExtension } from '@magic-ext/auth'; import { Magic as MagicBase } from 'magic-sdk'; import { ReactNode, createContext, useContext, useEffect, useMemo, useState } from 'react'; const { Web3 } = require('web3'); -export type Magic = MagicBase; +export type Magic = MagicBase; type MagicContextType = { magic: Magic | null; @@ -30,7 +29,7 @@ const MagicProvider = ({ children }: { children: ReactNode }) => { rpcUrl: getNetworkUrl(), chainId: getChainId(), }, - extensions: [new AuthExtension(), new OAuthExtension()], + extensions: [new OAuthExtension()], }); setMagic(magic); 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 662e77c..2b0954e 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 @@ -22,9 +22,9 @@ const EmailOTP = ({ token, setToken }: LoginProps) => { try { setLoginInProgress(true); setEmailError(false); - const account = await magic?.auth.loginWithEmailOTP({ email }); - if (account) { - saveToken(account, setToken, 'EMAIL'); + const token = await magic?.auth.loginWithEmailOTP({ email }); + if (token) { + saveToken(token, setToken, 'EMAIL'); setEmail(''); } } catch (e) { 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 2b3e474..a0150b2 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 @@ -22,11 +22,11 @@ const SMSOTP = ({ token, setToken }: LoginProps) => { try { setLoginInProgress(true); setPhoneError(false); - const account = await magic?.auth.loginWithSMS({ + const token = await magic?.auth.loginWithSMS({ phoneNumber: phone, }); - if (account) { - saveToken(account, setToken, 'SMS'); + if (token) { + saveToken(token, setToken, 'SMS'); setPhone(''); } } catch (e) { diff --git a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/cards/WalletMethodsCard.tsx b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/cards/WalletMethodsCard.tsx index f40e77f..0b3eb2c 100644 --- a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/cards/WalletMethodsCard.tsx +++ b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/cards/WalletMethodsCard.tsx @@ -10,9 +10,6 @@ import { LoginMethod } from '@/utils/common'; <% if(loginMethods.map(authType => authType.replaceAll(" ", "")).includes("EmailOTP")){%> <%-`import UpdateEmail from '../wallet-methods/UpdateEmail'`-%> <% }%> -<% if(loginMethods.map(authType => authType.replaceAll(" ", "")).includes("SMSOTP")){%> -<%-`import UpdatePhone from '../wallet-methods/UpdatePhone'`-%> -<% }%> const WalletMethods = ({ token, setToken }: LoginProps) => { const [loginMethod, setLoginMethod] = useState( @@ -29,14 +26,6 @@ const WalletMethods = ({ token, setToken }: LoginProps) => { )}`-%> <% }%> - <% if(loginMethods.map(authType => authType.replaceAll(" ", "")).includes("SMSOTP")){%> - <%-`{loginMethod && loginMethod == 'SMS' && ( - <> - - - - )}`-%> - <% }%> diff --git a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/wallet-methods/UpdatePhone.tsx b/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/wallet-methods/UpdatePhone.tsx deleted file mode 100644 index 3eb73a7..0000000 --- a/scaffolds/nextjs-dedicated-wallet/template/src/components/magic/wallet-methods/UpdatePhone.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import React, { useCallback, useState } from 'react'; -import { useMagic } from '../MagicProvider'; -import Spinner from '@/components/ui/Spinner'; -import showToast from '@/utils/showToast'; -import { RPCError } from 'magic-sdk'; - -const UpdatePhone = () => { - const { magic } = useMagic(); - const [disabled, setDisabled] = useState(false); - - const updatePhone = useCallback(async () => { - if (!magic) return; - try { - setDisabled(true); - await magic.auth.updatePhoneNumberWithUI(); - showToast({ message: 'Phone Updated!', type: 'success' }); - setDisabled(false); - } catch (error) { - setDisabled(false); - console.error(error); - if (error instanceof RPCError) { - showToast({ message: error.message, type: 'error' }); - } else { - showToast({ message: 'Update phone failed', type: 'error' }); - } - } - }, [magic]); - - return ( -
- -
- Initiates the update phone number flow that allows a user to change their phone number. -
-
- ); -}; - -export default UpdatePhone; diff --git a/scaffolds/nextjs-dedicated-wallet/template/src/styles/globals.css b/scaffolds/nextjs-dedicated-wallet/template/src/styles/globals.css index 7222af2..21b95a6 100644 --- a/scaffolds/nextjs-dedicated-wallet/template/src/styles/globals.css +++ b/scaffolds/nextjs-dedicated-wallet/template/src/styles/globals.css @@ -109,7 +109,7 @@ ul { } .home-page { - @apply flex flex-col justify-center items-center min-h-screen relative bg-[length:100vw_320px] bg-no-repeat bg-[url('/main.svg')]; + @apply flex flex-col justify-center items-center min-h-screen relative bg-[length:100vw_320px] bg-no-repeat; } .login-page { diff --git a/scaffolds/nextjs-flow-dedicated-wallet/scaffold.tsx b/scaffolds/nextjs-flow-dedicated-wallet/scaffold.tsx index 3f9d55e..1009bf5 100644 --- a/scaffolds/nextjs-flow-dedicated-wallet/scaffold.tsx +++ b/scaffolds/nextjs-flow-dedicated-wallet/scaffold.tsx @@ -75,9 +75,6 @@ export default class FlowDedicatedScaffold extends BaseScaffold { if (authType.replaceAll(' ', '') === 'EmailOTP') { (this.source as string[]).push('./src/components/magic/wallet-methods/UpdateEmail.tsx'); } - if (authType.replaceAll(' ', '') === 'SMSOTP') { - (this.source as string[]).push('./src/components/magic/wallet-methods/UpdatePhone.tsx'); - } }); } } diff --git a/scaffolds/nextjs-flow-dedicated-wallet/template/package.json b/scaffolds/nextjs-flow-dedicated-wallet/template/package.json index 5ab1dde..61fceb8 100644 --- a/scaffolds/nextjs-flow-dedicated-wallet/template/package.json +++ b/scaffolds/nextjs-flow-dedicated-wallet/template/package.json @@ -9,7 +9,6 @@ "lint": "next lint --fix" }, "dependencies": { - "@magic-ext/auth": "^4.0.0", "@magic-ext/flow": "^16.0.0", "@magic-ext/oauth": "^15.0.0", "@onflow/fcl": "^1.6.0", @@ -18,7 +17,7 @@ "@types/react-dom": "18.2.6", "autoprefixer": "10.4.14", "classnames": "^2.3.2", - "magic-sdk": "^21.0.0", + "magic-sdk": "^21.5.0", "next": "13.4.7", "postcss": "8.4.24", "react": "18.2.0", diff --git a/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/MagicProvider.tsx b/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/MagicProvider.tsx index f7052b7..6be95a6 100644 --- a/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/MagicProvider.tsx +++ b/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/MagicProvider.tsx @@ -1,64 +1,48 @@ -import {getNetwork, getNetworkUrl} from '@/utils/network' -import {OAuthExtension} from '@magic-ext/oauth' -import {AuthExtension} from '@magic-ext/auth' -import {Magic as MagicBase} from 'magic-sdk' -import { - ReactNode, - createContext, - useContext, - useEffect, - useMemo, - useState, -} from 'react' -import {FlowExtension} from '@magic-ext/flow' -import * as fcl from '@onflow/fcl' +import { getNetwork, getNetworkUrl } from '@/utils/network'; +import { OAuthExtension } from '@magic-ext/oauth'; +import { Magic as MagicBase } from 'magic-sdk'; +import { ReactNode, createContext, useContext, useEffect, useMemo, useState } from 'react'; +import { FlowExtension } from '@magic-ext/flow'; +import * as fcl from '@onflow/fcl'; -export type Magic = MagicBase< - AuthExtension & OAuthExtension[] & FlowExtension[] -> +export type Magic = MagicBase; type MagicContextType = { - magic: Magic | null -} + magic: Magic | null; +}; const MagicContext = createContext({ - magic: null, -}) - -export const useMagic = () => useContext(MagicContext) - -const MagicProvider = ({children}: {children: ReactNode}) => { - const [magic, setMagic] = useState(null) - - useEffect(() => { - if (process.env.NEXT_PUBLIC_MAGIC_API_KEY) { - const magic = new MagicBase( - process.env.NEXT_PUBLIC_MAGIC_API_KEY as string, - { - extensions: [ - new AuthExtension(), - new OAuthExtension(), - new FlowExtension({ - rpcUrl: getNetworkUrl(), - network: getNetwork() as string, - }), - ], - } - ) - setMagic(magic) - fcl.config().put('accessNode.api', getNetworkUrl()) - } - }, []) - - const value = useMemo(() => { - return { - magic, - } - }, [magic]) - - return ( - {children} - ) -} - -export default MagicProvider + magic: null, +}); + +export const useMagic = () => useContext(MagicContext); + +const MagicProvider = ({ children }: { children: ReactNode }) => { + const [magic, setMagic] = useState(null); + + useEffect(() => { + if (process.env.NEXT_PUBLIC_MAGIC_API_KEY) { + const magic = new MagicBase(process.env.NEXT_PUBLIC_MAGIC_API_KEY as string, { + extensions: [ + new OAuthExtension(), + new FlowExtension({ + rpcUrl: getNetworkUrl(), + network: getNetwork() as string, + }), + ], + }); + setMagic(magic); + fcl.config().put('accessNode.api', getNetworkUrl()); + } + }, []); + + const value = useMemo(() => { + return { + magic, + }; + }, [magic]); + + return {children}; +}; + +export default MagicProvider; diff --git a/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/auth/EmailOTP.tsx b/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/auth/EmailOTP.tsx index 662e77c..2b0954e 100644 --- a/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/auth/EmailOTP.tsx +++ b/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/auth/EmailOTP.tsx @@ -22,9 +22,9 @@ const EmailOTP = ({ token, setToken }: LoginProps) => { try { setLoginInProgress(true); setEmailError(false); - const account = await magic?.auth.loginWithEmailOTP({ email }); - if (account) { - saveToken(account, setToken, 'EMAIL'); + const token = await magic?.auth.loginWithEmailOTP({ email }); + if (token) { + saveToken(token, setToken, 'EMAIL'); setEmail(''); } } catch (e) { diff --git a/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/auth/SMSOTP.tsx b/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/auth/SMSOTP.tsx index 2b3e474..a0150b2 100644 --- a/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/auth/SMSOTP.tsx +++ b/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/auth/SMSOTP.tsx @@ -22,11 +22,11 @@ const SMSOTP = ({ token, setToken }: LoginProps) => { try { setLoginInProgress(true); setPhoneError(false); - const account = await magic?.auth.loginWithSMS({ + const token = await magic?.auth.loginWithSMS({ phoneNumber: phone, }); - if (account) { - saveToken(account, setToken, 'SMS'); + if (token) { + saveToken(token, setToken, 'SMS'); setPhone(''); } } catch (e) { diff --git a/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/cards/WalletMethodsCard.tsx b/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/cards/WalletMethodsCard.tsx index db2d484..a2c7a0b 100644 --- a/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/cards/WalletMethodsCard.tsx +++ b/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/cards/WalletMethodsCard.tsx @@ -10,9 +10,6 @@ import GetMetadata from '../wallet-methods/GetMetadata' <% if(loginMethods.map(authType => authType.replaceAll(" ", "")).includes("EmailOTP")){%> <%-`import UpdateEmail from '../wallet-methods/UpdateEmail'`-%> <% }%> -<% if(loginMethods.map(authType => authType.replaceAll(" ", "")).includes("SMSOTP")){%> -<%-`import UpdatePhone from '../wallet-methods/UpdatePhone'`-%> -<% }%> const WalletMethods = ({token, setToken}: LoginProps) => { const [loginMethod, setLoginMethod] = useState( @@ -29,14 +26,6 @@ const WalletMethods = ({token, setToken}: LoginProps) => { )}`-%> <% }%> - <% if(loginMethods.map(authType => authType.replaceAll(" ", "")).includes("SMSOTP")){%> - <%-`{loginMethod && loginMethod == 'SMS' && ( - <> - - - - )}`-%> - <% }%> diff --git a/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/wallet-methods/UpdatePhone.tsx b/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/wallet-methods/UpdatePhone.tsx deleted file mode 100644 index d0e67c0..0000000 --- a/scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/wallet-methods/UpdatePhone.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import React, {useCallback, useState} from 'react' -import {useMagic} from '../MagicProvider' -import Spinner from '@/components/ui/Spinner' -import showToast from '@/utils/showToast' -import {RPCError} from 'magic-sdk' - -const UpdatePhone = () => { - const {magic} = useMagic() - const [disabled, setDisabled] = useState(false) - - const updatePhone = useCallback(async () => { - if (!magic) return - try { - setDisabled(true) - await magic.auth.updatePhoneNumberWithUI() - showToast({message: 'Phone Updated!', type: 'success'}) - setDisabled(false) - } catch (error) { - setDisabled(false) - console.error(error) - if (error instanceof RPCError) { - showToast({message: error.message, type: 'error'}) - } else { - showToast({message: 'Update phone failed', type: 'error'}) - } - } - }, [magic]) - - return ( -
- -
- Initiates the update phone number flow that allows a user to - change their phone number. -
-
- ) -} - -export default UpdatePhone diff --git a/scaffolds/nextjs-flow-dedicated-wallet/template/src/styles/globals.css b/scaffolds/nextjs-flow-dedicated-wallet/template/src/styles/globals.css index 7222af2..1f84300 100644 --- a/scaffolds/nextjs-flow-dedicated-wallet/template/src/styles/globals.css +++ b/scaffolds/nextjs-flow-dedicated-wallet/template/src/styles/globals.css @@ -109,7 +109,7 @@ ul { } .home-page { - @apply flex flex-col justify-center items-center min-h-screen relative bg-[length:100vw_320px] bg-no-repeat bg-[url('/main.svg')]; + @apply flex flex-col justify-center items-center min-h-screen relative bg-[length:100vw_320px]; } .login-page { @@ -124,7 +124,7 @@ ul { } .login-button { - @apply w-full h-12 text-white font-semibold text-base leading-6 transition-[0.1s] text-center transition-[0.1s] m-auto px-2 py-3 rounded-[300px] border-[none]; + @apply w-full h-12 text-white font-semibold text-base leading-6 text-center transition-[0.1s] m-auto px-2 py-3 rounded-[300px] border-[none]; background: #8271f3; } diff --git a/scaffolds/nextjs-flow-universal-wallet/template/src/components/magic/Home.tsx b/scaffolds/nextjs-flow-universal-wallet/template/src/components/magic/Home.tsx index a1d58de..5099438 100644 --- a/scaffolds/nextjs-flow-universal-wallet/template/src/components/magic/Home.tsx +++ b/scaffolds/nextjs-flow-universal-wallet/template/src/components/magic/Home.tsx @@ -20,8 +20,8 @@ export default function Home({ setAccount }: Props) {
- + diff --git a/scaffolds/nextjs-flow-universal-wallet/template/src/components/magic/Login.tsx b/scaffolds/nextjs-flow-universal-wallet/template/src/components/magic/Login.tsx index 0055c1b..bec6b20 100644 --- a/scaffolds/nextjs-flow-universal-wallet/template/src/components/magic/Login.tsx +++ b/scaffolds/nextjs-flow-universal-wallet/template/src/components/magic/Login.tsx @@ -17,11 +17,11 @@ const Login = ({ setAccount }: Props) => { if (!magic) return; try { setDisabled(true); - const account = await magic.flow.getAccount(); + const token = await magic.flow.getAccount(); setDisabled(false); - console.log('Logged in user:', account); - localStorage.setItem('user', account); - setAccount(account); + console.log('Logged in user:', token); + localStorage.setItem('user', token); + setAccount(token); } catch (error) { setDisabled(false); console.error(error); diff --git a/scaffolds/nextjs-flow-universal-wallet/template/src/styles/globals.css b/scaffolds/nextjs-flow-universal-wallet/template/src/styles/globals.css index aed673d..65dde2b 100644 --- a/scaffolds/nextjs-flow-universal-wallet/template/src/styles/globals.css +++ b/scaffolds/nextjs-flow-universal-wallet/template/src/styles/globals.css @@ -102,14 +102,14 @@ ul { } .home-page { - @apply flex flex-col justify-center items-center min-h-screen relative bg-[length:100vw_320px] bg-no-repeat bg-[url('/main.svg')]; + @apply flex flex-col justify-center items-center min-h-screen relative bg-[length:100vw_320px] bg-[url('/login_bg.png')] bg-no-repeat; } .login-page { @apply min-h-screen bg-[length:100%_auto] bg-[url('/login.svg')]; } .connect-button { - @apply w-[296px] h-12 text-white font-semibold text-base leading-6 transition-[0.1s] text-center transition-[0.1s] m-auto px-6 py-3 rounded-[300px] border-[none]; + @apply w-[296px] h-12 text-white font-semibold text-base leading-6 text-center transition-[0.1s] m-auto px-6 py-3 rounded-[300px] border-[none]; background: rgba(255, 255, 255, 0.1); } diff --git a/scaffolds/nextjs-solana-dedicated-wallet/scaffold.tsx b/scaffolds/nextjs-solana-dedicated-wallet/scaffold.tsx index e27149f..b46d912 100644 --- a/scaffolds/nextjs-solana-dedicated-wallet/scaffold.tsx +++ b/scaffolds/nextjs-solana-dedicated-wallet/scaffold.tsx @@ -75,9 +75,6 @@ export default class SolanaDedicatedScaffold extends BaseScaffold { if (authType.replaceAll(' ', '') === 'EmailOTP') { (this.source as string[]).push('./src/components/magic/wallet-methods/UpdateEmail.tsx'); } - if (authType.replaceAll(' ', '') === 'SMSOTP') { - (this.source as string[]).push('./src/components/magic/wallet-methods/UpdatePhone.tsx'); - } }); } } diff --git a/scaffolds/nextjs-solana-dedicated-wallet/template/package.json b/scaffolds/nextjs-solana-dedicated-wallet/template/package.json index bdc3e3d..3929fa5 100644 --- a/scaffolds/nextjs-solana-dedicated-wallet/template/package.json +++ b/scaffolds/nextjs-solana-dedicated-wallet/template/package.json @@ -9,7 +9,6 @@ "lint": "next lint --fix" }, "dependencies": { - "@magic-ext/auth": "^4.0.0", "@magic-ext/oauth": "^15.0.0", "@magic-ext/solana": "^17.0.0", "@solana/web3.js": "^1.87.1", @@ -18,7 +17,7 @@ "@types/react-dom": "18.2.6", "autoprefixer": "10.4.14", "classnames": "^2.3.2", - "magic-sdk": "^21.0.0", + "magic-sdk": "^21.5.0", "next": "13.4.7", "postcss": "8.4.24", "react": "18.2.0", diff --git a/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/MagicProvider.tsx b/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/MagicProvider.tsx index fd8892b..afb4855 100644 --- a/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/MagicProvider.tsx +++ b/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/MagicProvider.tsx @@ -1,68 +1,52 @@ -import {getNetworkUrl} from '@/utils/network' -import {OAuthExtension} from '@magic-ext/oauth' -import {AuthExtension} from '@magic-ext/auth' -import {Magic as MagicBase} from 'magic-sdk' -import { - ReactNode, - createContext, - useContext, - useEffect, - useMemo, - useState, -} from 'react' -import {SolanaExtension} from '@magic-ext/solana' -import {Connection} from '@solana/web3.js' +import { getNetworkUrl } from '@/utils/network'; +import { OAuthExtension } from '@magic-ext/oauth'; +import { Magic as MagicBase } from 'magic-sdk'; +import { ReactNode, createContext, useContext, useEffect, useMemo, useState } from 'react'; +import { SolanaExtension } from '@magic-ext/solana'; +import { Connection } from '@solana/web3.js'; -export type Magic = MagicBase< - AuthExtension & OAuthExtension[] & SolanaExtension[] -> +export type Magic = MagicBase; type MagicContextType = { - magic: Magic | null - connection: Connection | null -} + magic: Magic | null; + connection: Connection | null; +}; const MagicContext = createContext({ - magic: null, - connection: null, -}) - -export const useMagic = () => useContext(MagicContext) - -const MagicProvider = ({children}: {children: ReactNode}) => { - const [magic, setMagic] = useState(null) - const [connection, setConnection] = useState(null) - - useEffect(() => { - if (process.env.NEXT_PUBLIC_MAGIC_API_KEY) { - const magic = new MagicBase( - process.env.NEXT_PUBLIC_MAGIC_API_KEY as string, - { - extensions: [ - new AuthExtension(), - new OAuthExtension(), - new SolanaExtension({ - rpcUrl: getNetworkUrl(), - }), - ], - } - ) - const connection = new Connection(getNetworkUrl()) - setMagic(magic) - setConnection(connection) - } - }, []) - - const value = useMemo(() => { - return { - magic, - connection, - } - }, [magic, connection]) - - return ( - {children} - ) -} - -export default MagicProvider + magic: null, + connection: null, +}); + +export const useMagic = () => useContext(MagicContext); + +const MagicProvider = ({ children }: { children: ReactNode }) => { + const [magic, setMagic] = useState(null); + const [connection, setConnection] = useState(null); + + useEffect(() => { + if (process.env.NEXT_PUBLIC_MAGIC_API_KEY) { + const magic = new MagicBase(process.env.NEXT_PUBLIC_MAGIC_API_KEY as string, { + extensions: [ + new OAuthExtension(), + new SolanaExtension({ + rpcUrl: getNetworkUrl(), + }), + ], + }); + const connection = new Connection(getNetworkUrl()); + setMagic(magic); + setConnection(connection); + } + }, []); + + const value = useMemo(() => { + return { + magic, + connection, + }; + }, [magic, connection]); + + return {children}; +}; + +export default MagicProvider; diff --git a/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/auth/EmailOTP.tsx b/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/auth/EmailOTP.tsx index 662e77c..2b0954e 100644 --- a/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/auth/EmailOTP.tsx +++ b/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/auth/EmailOTP.tsx @@ -22,9 +22,9 @@ const EmailOTP = ({ token, setToken }: LoginProps) => { try { setLoginInProgress(true); setEmailError(false); - const account = await magic?.auth.loginWithEmailOTP({ email }); - if (account) { - saveToken(account, setToken, 'EMAIL'); + const token = await magic?.auth.loginWithEmailOTP({ email }); + if (token) { + saveToken(token, setToken, 'EMAIL'); setEmail(''); } } catch (e) { diff --git a/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/auth/SMSOTP.tsx b/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/auth/SMSOTP.tsx index 2b3e474..a0150b2 100644 --- a/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/auth/SMSOTP.tsx +++ b/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/auth/SMSOTP.tsx @@ -22,11 +22,11 @@ const SMSOTP = ({ token, setToken }: LoginProps) => { try { setLoginInProgress(true); setPhoneError(false); - const account = await magic?.auth.loginWithSMS({ + const token = await magic?.auth.loginWithSMS({ phoneNumber: phone, }); - if (account) { - saveToken(account, setToken, 'SMS'); + if (token) { + saveToken(token, setToken, 'SMS'); setPhone(''); } } catch (e) { diff --git a/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/cards/WalletMethodsCard.tsx b/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/cards/WalletMethodsCard.tsx index db2d484..a2c7a0b 100644 --- a/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/cards/WalletMethodsCard.tsx +++ b/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/cards/WalletMethodsCard.tsx @@ -10,9 +10,6 @@ import GetMetadata from '../wallet-methods/GetMetadata' <% if(loginMethods.map(authType => authType.replaceAll(" ", "")).includes("EmailOTP")){%> <%-`import UpdateEmail from '../wallet-methods/UpdateEmail'`-%> <% }%> -<% if(loginMethods.map(authType => authType.replaceAll(" ", "")).includes("SMSOTP")){%> -<%-`import UpdatePhone from '../wallet-methods/UpdatePhone'`-%> -<% }%> const WalletMethods = ({token, setToken}: LoginProps) => { const [loginMethod, setLoginMethod] = useState( @@ -29,14 +26,6 @@ const WalletMethods = ({token, setToken}: LoginProps) => { )}`-%> <% }%> - <% if(loginMethods.map(authType => authType.replaceAll(" ", "")).includes("SMSOTP")){%> - <%-`{loginMethod && loginMethod == 'SMS' && ( - <> - - - - )}`-%> - <% }%> diff --git a/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/wallet-methods/UpdatePhone.tsx b/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/wallet-methods/UpdatePhone.tsx deleted file mode 100644 index d0e67c0..0000000 --- a/scaffolds/nextjs-solana-dedicated-wallet/template/src/components/magic/wallet-methods/UpdatePhone.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import React, {useCallback, useState} from 'react' -import {useMagic} from '../MagicProvider' -import Spinner from '@/components/ui/Spinner' -import showToast from '@/utils/showToast' -import {RPCError} from 'magic-sdk' - -const UpdatePhone = () => { - const {magic} = useMagic() - const [disabled, setDisabled] = useState(false) - - const updatePhone = useCallback(async () => { - if (!magic) return - try { - setDisabled(true) - await magic.auth.updatePhoneNumberWithUI() - showToast({message: 'Phone Updated!', type: 'success'}) - setDisabled(false) - } catch (error) { - setDisabled(false) - console.error(error) - if (error instanceof RPCError) { - showToast({message: error.message, type: 'error'}) - } else { - showToast({message: 'Update phone failed', type: 'error'}) - } - } - }, [magic]) - - return ( -
- -
- Initiates the update phone number flow that allows a user to - change their phone number. -
-
- ) -} - -export default UpdatePhone diff --git a/scaffolds/nextjs-solana-dedicated-wallet/template/src/styles/globals.css b/scaffolds/nextjs-solana-dedicated-wallet/template/src/styles/globals.css index 7222af2..21b95a6 100644 --- a/scaffolds/nextjs-solana-dedicated-wallet/template/src/styles/globals.css +++ b/scaffolds/nextjs-solana-dedicated-wallet/template/src/styles/globals.css @@ -109,7 +109,7 @@ ul { } .home-page { - @apply flex flex-col justify-center items-center min-h-screen relative bg-[length:100vw_320px] bg-no-repeat bg-[url('/main.svg')]; + @apply flex flex-col justify-center items-center min-h-screen relative bg-[length:100vw_320px] bg-no-repeat; } .login-page { diff --git a/scaffolds/nextjs-universal-wallet/template/src/components/magic/Home.tsx b/scaffolds/nextjs-universal-wallet/template/src/components/magic/Home.tsx index c36d8a1..cf49a0f 100644 --- a/scaffolds/nextjs-universal-wallet/template/src/components/magic/Home.tsx +++ b/scaffolds/nextjs-universal-wallet/template/src/components/magic/Home.tsx @@ -6,7 +6,6 @@ import WalletMethods from './cards/WalletMethodsCard'; import SendTransaction from './cards/SendTransactionsCard'; import Links from './DevLinks'; import Spacer from '../ui/Spacer'; -import HomePageBackground from 'public/main.svg'; interface Props { setAccount: React.Dispatch>; } @@ -20,8 +19,8 @@ export default function Home({ setAccount }: Props) {
- + diff --git a/scaffolds/nextjs-universal-wallet/template/src/styles/globals.css b/scaffolds/nextjs-universal-wallet/template/src/styles/globals.css index e926d58..aeda631 100644 --- a/scaffolds/nextjs-universal-wallet/template/src/styles/globals.css +++ b/scaffolds/nextjs-universal-wallet/template/src/styles/globals.css @@ -102,7 +102,7 @@ ul { } .home-page { - @apply flex flex-col justify-center items-center min-h-screen relative bg-[length:100vw_320px] bg-no-repeat bg-[url('/main.svg')]; + @apply flex flex-col justify-center items-center min-h-screen relative bg-[length:100vw_320px] bg-[url('/login_bg.png')] bg-no-repeat; } .login-page {