Updated npm packages

scaffolds/nextjs-universal-wallet/template/package.json

@@ -13,12 +13,12 @@
     "@types/react": "18.0.35",
     "@types/react-dom": "18.0.11",
     "eslint-config-next": "13.3.0",
-    "magic-sdk": "^16.2.0",
+    "magic-sdk": "^21.0.0",
     "next": "13.3.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "typescript": "5.0.4",
-    "web3": "^1.9.0"
+    "web3": "^4.0.2"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.15",

scaffolds/nextjs-universal-wallet/template/src/components/magic/MagicProvider.tsx

@@ -1,11 +1,11 @@
 import { createContext, useContext, useEffect, useState } from 'react';
 import { Magic } from 'magic-sdk';
 import { getChainId, getNetworkUrl } from '../../utils/networks';
-import Web3 from 'web3';
+const { Web3 } = require('web3');
 
 export type MagicContextType = {
   magic: Magic | null;
-  web3: Web3 | null;
+  web3: typeof Web3 | null;
 };
 
 const MagicContext = createContext<MagicContextType>({
@@ -17,7 +17,7 @@ export const useMagicContext = () => useContext(MagicContext);
 
 const MagicProvider = ({ children }: { children: React.ReactNode }) => {
   const [magicInstance, setMagicInstance] = useState<Magic | null>(null);
-  const [web3Instance, setWeb3Instance] = useState<Web3 | null>(null);
+  const [web3Instance, setWeb3Instance] = useState<typeof Web3 | null>(null);
 
   useEffect(() => {
     if (process.env.NEXT_PUBLIC_MAGIC_API_KEY) {

scaffolds/nextjs-universal-wallet/template/src/components/magic/cards/UserInfoCard.tsx

@@ -26,7 +26,7 @@ const UserInfo = ({ setAccount }: Props) => {
   const getBalance = useCallback(async () => {
     if (publicAddress && web3) {
       const balance = await web3.eth.getBalance(publicAddress);
-      setBalance(web3.utils.fromWei(balance));
+      setBalance(web3.utils.fromWei(balance, 'ether'));
       console.log('BALANCE: ', balance);
     }
   }, [web3, publicAddress]);