React 19.1.0, Next 15.2.4, and related dep updates

package.json

@@ -1,6 +1,6 @@
 {
   "name": "make-scoped-magic-app",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "A tool for quickly scaffolding an app with Magic authentication baked-in!",
   "repository": "magiclabs/make-scoped-magic-app",
   "license": "MIT",
@@ -30,8 +30,8 @@
     "@types/node": "^14.14.12",
     "@types/parse-package-name": "^0.1.0",
     "@types/pretty-time": "^1.1.3",
-    "@types/react": "^17.0.0",
-    "@types/react-is": "^17.0.0",
+    "@types/react": "^19.0.12",
+    "@types/react-is": "^19.0.0",
     "@types/tar": "^4.0.4",
     "@types/watch": "^1.0.6",
     "@types/yargs-parser": "^20.2.0",
@@ -94,5 +94,6 @@
     "tar": "^6.2.1",
     "braces": "^3.0.3",
     "merge": "^2.1.1"
-  }
+  },
+  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

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

@@ -11,22 +11,22 @@
   "dependencies": {
     "@magic-ext/oauth": "^23.0.3",
     "@types/node": "20.3.3",
-    "@types/react": "18.2.14",
-    "@types/react-dom": "18.2.6",
+    "@types/react": "19.0.12",
+    "@types/react-dom": "19.0.4",
     "autoprefixer": "10.4.14",
     "classnames": "^2.3.2",
     "magic-sdk": "^29.0.2",
-    "next": "13.4.7",
+    "next": "15.2.4",
     "postcss": "8.4.24",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
     "react-toastify": "^9.1.3",
     "tailwindcss": "3.3.2",
     "typescript": "5.1.6",
     "web3": "^4.0.2"
   },
   "devDependencies": {
     "eslint": "^8.45.0",
-    "eslint-config-next": "13.4.10"
+    "eslint-config-next": "15.2.4"
   }
 }

scaffolds/nextjs-dedicated-wallet/template/src/components/magic/MagicDashboardRedirect.tsx

@@ -0,0 +1,38 @@
+import React, { useCallback } from 'react';
+import DevLinks from './DevLinks';
+import Image from 'next/image';
+
+const MagicDashboardRedirect = () => {
+  const onClick = useCallback(() => {
+    window.open('https://dashboard.magic.link/signup', '_blank');
+  }, []);
+
+  return (
+    <div className="redirect-container">
+      <div className="flex flex-col mt-10 gap-2.5 items-center">
+        <Image src="/logo.svg" alt="logo" width={32} height={32} />
+        <div className="text-center text-white text-xl font-extrabold font-['Inter'] leading-[30px]">Magic</div>
+        <div className="text-center text-white text-opacity-50 text-base font-normal font-['SF Mono'] leading-normal">
+          Demo
+        </div>
+      </div>
+      <div className="flex flex-col items-center flex-1">
+        <div className="redirect-card">
+          <div className="flex gap-2 mx-4 my-2 ">
+            <Image src="/info.svg" alt="info" width={24} height={24} />
+            <h3 className="max-w-[480px] text-[#4E4D52] text-base font-normal">
+              Please set your <code>NEXT_PUBLIC_MAGIC_API_KEY</code> environment variable in <code>.env</code>. You can
+              get your Magic API key from the Magic Dashboard.
+            </h3>
+          </div>
+        </div>
+
+        <button className="api-button" onClick={onClick} disabled={false}>
+          Get API keys
+          <Image src="/link_white.svg" alt="link-icon" width={24} height={24} className="ml-[6px] my-auto" />
+        </button>
+      </div>
+      <DevLinks />
+    </div>
+  );
+};

scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Discord.tsx

@@ -4,7 +4,6 @@ import { useEffect, useState } from 'react';
 import { saveUserInfo } from '@/utils/common';
 import Spinner from '@/components/ui/Spinner';
 import Image from 'next/image';
-import discord from 'public/social/Discord.svg';
 import Card from '@/components/ui/Card';
 import CardHeader from '@/components/ui/CardHeader';
 
@@ -63,7 +62,7 @@ const Discord = ({ token, setToken }: LoginProps) => {
             }}
             disabled={false}
           >
-            <Image src={discord} alt="Discord" height={24} width={24} className="mr-6" />
+            <Image src="/social/Discord.svg" alt="Discord" height={24} width={24} className="mr-6" />
             <div className="w-full text-xs font-semibold text-center">Continue with Discord</div>
           </button>
         </div>

scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Facebook.tsx

@@ -4,7 +4,6 @@ import { useEffect, useState } from 'react';
 import { saveUserInfo } from '@/utils/common';
 import Spinner from '../../ui/Spinner';
 import Image from 'next/image';
-import facebook from 'public/social/Facebook.svg';
 import Card from '../../ui/Card';
 import CardHeader from '../../ui/CardHeader';
 
@@ -64,7 +63,7 @@ const Facebook = ({ token, setToken }: LoginProps) => {
             }}
             disabled={false}
           >
-            <Image src={facebook} alt="Facebook" height={24} width={24} className="mr-6" />
+            <Image src="/social/Facebook.svg" alt="Facebook" height={24} width={24} className="mr-6" />
             <div className="w-full text-xs font-semibold text-center">Continue with Facebook</div>
           </button>
         </div>

scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Github.tsx

@@ -4,7 +4,6 @@ import { useEffect, useState } from 'react';
 import { saveUserInfo } from '@/utils/common';
 import Spinner from '../../ui/Spinner';
 import Image from 'next/image';
-import github from 'public/social/Github.svg';
 import Card from '../../ui/Card';
 import CardHeader from '../../ui/CardHeader';
 
@@ -64,7 +63,7 @@ const Github = ({ token, setToken }: LoginProps) => {
             }}
             disabled={false}
           >
-            <Image src={github} alt="Github" height={24} width={24} className="mr-6" />
+            <Image src="/social/Github.svg" alt="Github" height={24} width={24} className="mr-6" />
             <div className="w-full text-xs font-semibold text-center">Continue with Github</div>
           </button>
         </div>

scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Google.tsx

@@ -4,7 +4,6 @@ import { useEffect, useState } from 'react';
 import { saveUserInfo } from '@/utils/common';
 import Spinner from '../../ui/Spinner';
 import Image from 'next/image';
-import google from 'public/social/Google.svg';
 import Card from '../../ui/Card';
 import CardHeader from '../../ui/CardHeader';
 
@@ -64,7 +63,7 @@ const Google = ({ token, setToken }: LoginProps) => {
             }}
             disabled={false}
           >
-            <Image src={google} alt="Google" height={24} width={24} className="mr-6" />
+            <Image src="/social/Google.svg" alt="Google" height={24} width={24} className="mr-6" />
             <div className="w-full text-xs font-semibold text-center">Continue with Google</div>
           </button>
         </div>

scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Twitch.tsx

@@ -4,7 +4,6 @@ import { useEffect, useState } from 'react';
 import { saveUserInfo } from '@/utils/common';
 import Spinner from '../../ui/Spinner';
 import Image from 'next/image';
-import twitch from 'public/social/Twitch.svg';
 import Card from '../../ui/Card';
 import CardHeader from '../../ui/CardHeader';
 
@@ -64,7 +63,7 @@ const Twitch = ({ token, setToken }: LoginProps) => {
             }}
             disabled={false}
           >
-            <Image src={twitch} alt="Twitch" height={24} width={24} className="mr-6" />
+            <Image src="/social/Twitch.svg" alt="Twitch" height={24} width={24} className="mr-6" />
             <div className="w-full text-xs font-semibold text-center">Continue with Twitch</div>
           </button>
         </div>

scaffolds/nextjs-dedicated-wallet/template/src/components/magic/auth/Twitter.tsx

@@ -4,7 +4,6 @@ import { useEffect, useState } from 'react';
 import { saveUserInfo } from '@/utils/common';
 import Spinner from '../../ui/Spinner';
 import Image from 'next/image';
-import twitter from 'public/social/Twitter.svg';
 import Card from '../../ui/Card';
 import CardHeader from '../../ui/CardHeader';
 
@@ -64,7 +63,7 @@ const Twitter = ({ token, setToken }: LoginProps) => {
             }}
             disabled={false}
           >
-            <Image src={twitter} alt="Twitter" height={24} width={24} className="mr-6" />
+            <Image src="/social/Twitter.svg" alt="Twitter" height={24} width={24} className="mr-6" />
             <div className="w-full text-xs font-semibold text-center">Continue with Twitter</div>
           </button>
         </div>

scaffolds/nextjs-dedicated-wallet/template/src/components/magic/cards/SendTransactionCard.tsx

@@ -11,7 +11,6 @@ import showToast from '@/utils/showToast';
 import Spacer from '@/components/ui/Spacer';
 import TransactionHistory from '@/components/ui/TransactionHistory';
 import Image from 'next/image';
-import Link from 'public/link.svg';
 import { TxnParams } from '@/utils/types';
 
 const SendTransaction = () => {
@@ -76,7 +75,6 @@ const SendTransaction = () => {
           type: 'error',
         });
       });
-
   }, [web3, amount, publicAddress, toAddress]);
 
   return (
@@ -87,7 +85,7 @@ const SendTransaction = () => {
           <a href={getFaucetUrl()} target="_blank" rel="noreferrer">
             <FormButton onClick={() => null} disabled={false}>
               Get Test {getNetworkToken()}
-              <Image src={Link} alt="link-icon" className="ml-[3px]" />
+              <Image src="/link.svg" alt="link-icon" width={24} height={24} className="ml-[3px]" />
             </FormButton>
           </a>
           <Divider />

scaffolds/nextjs-dedicated-wallet/template/src/components/ui/Header.tsx

@@ -1,19 +1,28 @@
 import Image from 'next/image';
-import Logo from 'public/logo.svg';
 import DevLinks from './DevLinks';
 
 const Header = () => {
   return (
     <div className="app-header-container">
       <div className="flex flex-col gap-2.5 items-center">
-        <Image src={Logo} alt="logo" />
+        <Image src="/logo.svg" alt="logo" width={32} height={32} />
         <div className="text-center text-white text-xl font-extrabold font-['Inter'] leading-[30px]">Magic</div>
         <div className="text-center text-white text-opacity-50 text-base font-normal font-['SF Mono'] leading-normal">
           Demo
         </div>
       </div>
       <DevLinks />
-      <p className="text-sm font-semibold text-white">Take a look at our <a href="https://github.com/magiclabs/make-scoped-magic-app/blob/master/scaffolds/nextjs-dedicated-wallet/template/README.md" target='_blank' className="cursor-pointer text-[#6851ff]">developer guide</a> to learn more about this template</p>
+      <p className="text-sm font-semibold text-white">
+        Take a look at our{' '}
+        <a
+          href="https://github.com/magiclabs/make-scoped-magic-app/blob/master/scaffolds/nextjs-dedicated-wallet/template/README.md"
+          target="_blank"
+          className="cursor-pointer text-[#6851ff]"
+        >
+          developer guide
+        </a>{' '}
+        to learn more about this template
+      </p>
     </div>
   );
 };

scaffolds/nextjs-dedicated-wallet/template/src/components/ui/MagicDashboardRedirect.tsx

@@ -1,9 +1,6 @@
 import React, { useCallback } from 'react';
 import DevLinks from './DevLinks';
 import Image from 'next/image';
-import Info from 'public/info.svg';
-import Link from 'public/link_white.svg';
-import Logo from 'public/logo.svg';
 
 const MagicDashboardRedirect = () => {
   const onClick = useCallback(() => {
@@ -13,7 +10,7 @@ const MagicDashboardRedirect = () => {
   return (
     <div className="redirect-container">
       <div className="flex flex-col mt-10 gap-2.5 items-center">
-        <Image src={Logo} alt="logo" />
+        <Image src="/logo.svg" alt="logo" width={32} height={32} />
         <div className="text-center text-white text-xl font-extrabold font-['Inter'] leading-[30px]">Magic</div>
         <div className="text-center text-white text-opacity-50 text-base font-normal font-['SF Mono'] leading-normal">
           Demo
@@ -22,7 +19,7 @@ const MagicDashboardRedirect = () => {
       <div className="flex flex-col items-center flex-1">
         <div className="redirect-card">
           <div className="flex gap-2 mx-4 my-2 ">
-            <Image src={Info} alt="logo" />
+            <Image src="/info.svg" alt="info" width={24} height={24} />
             <h3 className="max-w-[480px] text-[#4E4D52] text-base font-normal">
               Please set your <code>NEXT_PUBLIC_MAGIC_API_KEY</code> environment variable in <code>.env</code>. You can
               get your Magic API key from the Magic Dashboard.
@@ -32,7 +29,7 @@ const MagicDashboardRedirect = () => {
 
         <button className="api-button" onClick={onClick} disabled={false}>
           Get API keys
-          <Image src={Link} alt="link-icon" className="ml-[6px] my-auto" />
+          <Image src="/link_white.svg" alt="link-icon" width={24} height={24} className="ml-[6px] my-auto" />
         </button>
       </div>
       <DevLinks />

scaffolds/nextjs-dedicated-wallet/template/src/components/ui/TransactionHistory.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import Image from 'next/image';
-import Link from 'public/link.svg';
 import { getBlockExplorer } from '@/utils/network';
 
 const TransactionHistory = () => {
@@ -9,7 +8,7 @@ const TransactionHistory = () => {
   return (
     <a className="action-button" href={getBlockExplorer(publicAddress as string)} target="_blank" rel="noreferrer">
       <div className="flex items-center justify-center">
-        Transaction History <Image src={Link} alt="link-icon" className="ml-[3px]" />
+        Transaction History <Image src="/link.svg" alt="link-icon" width={24} height={24} className="ml-[3px]" />
       </div>
     </a>
   );

scaffolds/nextjs-flow-dedicated-wallet/template/package.json

@@ -13,21 +13,21 @@
     "@magic-ext/oauth": "^23.0.3",
     "@onflow/fcl": "^1.6.0",
     "@types/node": "20.3.3",
-    "@types/react": "18.2.14",
-    "@types/react-dom": "18.2.6",
+    "@types/react": "19.0.12",
+    "@types/react-dom": "19.0.4",
     "autoprefixer": "10.4.14",
     "classnames": "^2.3.2",
     "magic-sdk": "^29.0.2",
-    "next": "13.4.7",
+    "next": "15.2.4",
     "postcss": "8.4.24",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
     "react-toastify": "^9.1.3",
     "tailwindcss": "3.3.2",
     "typescript": "5.1.6"
   },
   "devDependencies": {
     "eslint": "^8.45.0",
-    "eslint-config-next": "13.4.10"
+    "eslint-config-next": "15.2.4"
   }
 }

scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/Header.tsx

@@ -1,11 +1,10 @@
 import Image from 'next/image';
-import MagicLogo from 'public/logo.svg';
 import DevLinks from './DevLinks';
 
 const Header = () => {
   return (
     <div className="app-header-container">
-      <Image src={MagicLogo} alt="magic-logo" className="magic-logo" />
+      <Image src="/logo.svg" alt="magic-logo" width={32} height={32} className="magic-logo" />
       <div className="text-center text-white text-xl font-extrabold font-['Inter'] leading-[30px]">Magic</div>
       <h3 className="demo-sub-header">Demo</h3>
       <DevLinks />

scaffolds/nextjs-flow-dedicated-wallet/template/src/components/magic/MagicDashboardRedirect.tsx

@@ -1,9 +1,6 @@
 import React, { useCallback } from 'react';
 import DevLinks from './DevLinks';
 import Image from 'next/image';
-import Info from 'public/info.svg';
-import Link from 'public/link_white.svg';
-import Logo from 'public/logo.svg';
 
 const MagicDashboardRedirect = () => {
   const onClick = useCallback(() => {
@@ -13,7 +10,7 @@ const MagicDashboardRedirect = () => {
   return (
     <div className="redirect-container">
       <div className="flex flex-col mt-10 gap-2.5 items-center">
-        <Image src={Logo} alt="logo" />
+        <Image src="/logo.svg" alt="logo" width={32} height={32} />
         <div className="text-center text-white text-xl font-extrabold font-['Inter'] leading-[30px]">Magic</div>
         <div className="text-center text-white text-opacity-50 text-base font-normal font-['SF Mono'] leading-normal">
           Demo
@@ -22,7 +19,7 @@ const MagicDashboardRedirect = () => {
       <div className="flex flex-col items-center flex-1">
         <div className="redirect-card">
           <div className="flex gap-2 mx-4 my-2 ">
-            <Image src={Info} alt="logo" />
+            <Image src="/info.svg" alt="info" width={24} height={24} />
             <h3 className="max-w-[480px] text-[#4E4D52] text-base font-normal">
               Please set your <code>NEXT_PUBLIC_MAGIC_API_KEY</code> environment variable in <code>.env</code>. You can
               get your Magic API key from the Magic Dashboard.
@@ -32,7 +29,7 @@ const MagicDashboardRedirect = () => {
 
         <button className="api-button" onClick={onClick} disabled={false}>
           Get API keys
-          <Image src={Link} alt="link-icon" className="ml-[6px] my-auto" />
+          <Image src="/link_white.svg" alt="link-icon" width={24} height={24} className="ml-[6px] my-auto" />
         </button>
       </div>
       <DevLinks />