Resolved merge conflicts for master push

CHANGELOG.md

@@ -1,14 +1,49 @@
-# v4.2.2 (Tue Sep 12 2023)
+# v4.4.1 (Wed Sep 27 2023)
+
+#### 🚀 Enhancement
+
+- Remove Universal option from prompts (it remains available in flags)
+
+# v4.4.0 (Wed Sep 27 2023)
+
+#### 🚀 Enhancement
+
+- Updates the UI design of the templates
+
+#### Authors: 2
+
+- James ([@jamesrp13](https://github.com/jamesrp13))
+- Aditya Kulkarni ([@AdityaKulkarni](https://github.com/AdityaKulkarni))
+
+---
+
+# v4.3.1 (Fri Sep 15 2023)
 
 #### 🚀 Enhancement
 
+- Enables anonymous usage tracking with a command to opt out
+- Updates Quickstart to use Dedicated Wallet
+
+#### Authors: 2
+
+- James ([@jamesrp13](https://github.com/jamesrp13))
+- Aditya Kulkarni ([@AdityaKulkarni](https://github.com/AdityaKulkarni))
+
+---
+
+# v4.2.2 (Tue Sep 12 2023)
+
+#### 🐛 Bug Fix
+
 - Fix bug where network isn't always added into template configuration
 
 #### Authors: 2
 
 - James ([@jamesrp13](https://github.com/jamesrp13))
 - Aditya Kulkarni ([@AdityaKulkarni](https://github.com/AdityaKulkarni))
 
+---
+
 # v4.2.0 (Mon Sep 11 2023)
 
 #### 🚀 Enhancement

core/cli.ts

@@ -45,7 +45,7 @@ export const ConsoleMessages = {
       startCmd && chalk`  {rgb(0,255,255) ${startCmd}}`,
     ].filter(Boolean);
 
-    msg.join('\n');
+    return msg.join('\n');
   },
 };
 

core/create-app.tsx

@@ -89,8 +89,6 @@ export async function createApp(config: CreateMagicAppConfig) {
     })),
   };
 
-  console.log('config', JSON.stringify(config, null, 2));
-
   const templateFlags: any = await parseFlags(mapTemplateToFlags(config.template as string), config?.data);
   const repoUrl = new URL(`${DEFAULT_CREATE_MAGIC_APP_REPO}/tree/${config.branch}`, GITHUB_BASE_URL);
   const repoInfo = await getRepoInfo(repoUrl, getRelativeTemplatePath(config.template as string));

core/utils/renderScaffold.ts

@@ -7,16 +7,17 @@ import fs from 'fs';
 // TODO - update templateData type to be more specific
 export const renderScaffold = async (cwd: string, scaffold: BaseScaffold, templateData: any) => {
   const basePath = resolveToRoot('scaffolds', scaffold.templateName, 'template');
-  const allDirFilePaths = [];
+  const allDirFilePaths: string[] = [];
   // typeof scaffold.source being a string means it's a directory and we should copy all files
   if (typeof scaffold.source == 'string') {
-    readTemplateDirs(basePath, (err, filePaths) => {
+    readTemplateDirs(basePath, async (err, filePaths) => {
       if (err) {
         console.log(err);
       }
       for (const filePath of filePaths) {
         allDirFilePaths.push(filePath);
       }
+      await copyFilesAndRenameEnv(allDirFilePaths, basePath, cwd, templateData);
     });
     // Otherwise it's an array and we should copy all the files in the array
   } else {
@@ -37,13 +38,15 @@ export const renderScaffold = async (cwd: string, scaffold: BaseScaffold, templa
         allDirFilePaths.push(resolvedPath);
       }
     }
+    await copyFilesAndRenameEnv(allDirFilePaths, basePath, cwd, templateData);
   }
+};
 
+async function copyFilesAndRenameEnv(allDirFilePaths: string[], basePath: string, cwd: string, templateData: any) {
   for (const filePath of allDirFilePaths) {
     await copyFileWithEjsData(filePath, path.join(cwd, filePath.replace(basePath, '')), templateData);
   }
-
   if (fs.existsSync(path.join(cwd, '.env.example'))) {
     fs.renameSync(path.join(cwd, '.env.example'), path.join(cwd, '.env'));
   }
-};
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "make-magic",
-  "version": "4.2.2",
+  "version": "4.4.1",
   "description": "A tool for quickly scaffolding an app with Magic authentication baked-in!",
   "repository": "magiclabs/create-magic-app",
   "license": "MIT",

scaffolds/nextjs-dedicated-wallet/scaffold.tsx

@@ -21,10 +21,13 @@ export default class DedicatedScaffold extends BaseScaffold {
   public installationCommand: string[] = ['npm', 'install'];
   public startCommand: string[] = ['npm', 'run', 'dev'];
   public source: string | string[] = [
-    './public/background.svg',
     './public/favicon.ico',
-    './public/magic_color_white.svg',
+    './public/logo.svg',
+    './public/info.svg',
     './public/link.svg',
+    './public/link_white.svg',
+    './public/redirect_bg.png',
+    './public/login_bg.png',
     './.env.example',
     './.eslintrc.json',
     './.gitignore',

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

@@ -11,13 +11,11 @@ export default function Dashboard({ token, setToken }: LoginProps) {
   return (
     <div className="home-page">
       <Header />
-      <Spacer size={32} />
-      <Spacer size={120} />
       <div className="cards-container">
-        <SendTransaction />
-        <Spacer size={10} />
         <UserInfo token={token} setToken={setToken} />
         <Spacer size={10} />
+        <SendTransaction />
+        <Spacer size={10} />
         <WalletMethods token={token} setToken={setToken} />
         <Spacer size={15} />
       </div>

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

@@ -1,11 +1,17 @@
 import Image from 'next/image';
-import MagicColorWhite from 'public/magic_color_white.svg';
+import Logo from 'public/logo.svg';
 import DevLinks from './DevLinks';
 
 const Header = () => {
   return (
     <div className="app-header-container">
-      <Image className="h-[180] w-[120px] m-2" src={MagicColorWhite} alt="logo" />
+      <div className="flex flex-col gap-2.5 items-center">
+        <Image src={Logo} alt="logo" />
+        <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 />
     </div>
   );

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

@@ -8,7 +8,7 @@ const Login = ({ token, setToken }: LoginProps) => {
   return (
     <div className="login-page">
       <Header />
-      <div className="login-method-grid">
+      <div className={`max-w-[100%] grid grid-cols-<%= Math.min(loginMethods.length, 3) %> grid-flow-row auto-rows-fr gap-5 p-4 mt-8`}>
       <% loginMethods.forEach(authType => { %>
       <% if (authType !== "Social Logins") { %>
         <%-`<${authType.replaceAll(' ', '')} token={token} setToken={setToken} />`-%>

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

@@ -1,6 +1,9 @@
 import React, { useCallback } from 'react';
-import Spacer from '../ui/Spacer';
 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(() => {
@@ -9,18 +12,27 @@ const MagicDashboardRedirect = () => {
 
   return (
     <div className="redirect-container">
-      <Spacer size={32} />
-      <Spacer size={20} />
-      <div className="text-center">
-        <h3 className="max-w-[500px] text-center text-[#ffffffcc] text-xl font-normal m-0">
-          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 className="flex flex-col mt-10 gap-2.5 items-center">
+        <Image src={Logo} alt="logo" />
+        <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>
-      <Spacer size={32} />
-      <div className="text-center">
-        <button className="login-button min-w-[296px]" onClick={onClick}>
-          Go to Dashboard
+      <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" />
+            <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} alt="link-icon" className="ml-[6px] my-auto" />
         </button>
       </div>
       <DevLinks />

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

@@ -55,18 +55,16 @@ const Discord = ({ token, setToken }: LoginProps) => {
         <Spinner />
       ) : (
         <div className="login-method-grid-item-container">
-          <div
-            className={classNames(
-              'login-method-grid-item-container m-2',
-              token.length > 0 ? 'cursor-default' : 'cursor-pointer',
-            )}
+          <button
+            className="social-login-button"
             onClick={() => {
               if (token.length == 0) login();
             }}
+            disabled={false}
           >
-            <Image src={discord} alt="Discord" height={24} width={24} />
-            <div className="text-xs font-semibold">Discord</div>
-          </div>
+            <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>
+          </button>
         </div>
       )}
     </Card>

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

@@ -68,7 +68,7 @@ const EmailOTP = ({ token, setToken }: LoginProps) => {
           disabled={isLoginInProgress || (token.length > 0 ? false : email.length == 0)}
           onClick={() => handleLogin()}
         >
-          {isLoginInProgress ? <Spinner /> : 'Login'}
+          {isLoginInProgress ? <Spinner /> : 'Log in / Sign up'}
         </button>
       </div>
     </Card>

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

@@ -55,18 +55,16 @@ const Facebook = ({ token, setToken }: LoginProps) => {
         <Spinner />
       ) : (
         <div className="login-method-grid-item-container">
-          <div
-            className={classNames(
-              'login-method-grid-item-container m-2',
-              token.length > 0 ? 'cursor-default' : 'cursor-pointer',
-            )}
+          <button
+            className="social-login-button"
             onClick={() => {
               if (token.length == 0) login();
             }}
+            disabled={false}
           >
-            <Image src={facebook} alt="Facebook" height={24} width={24} />
-            <div className="text-xs font-semibold">Facebook</div>
-          </div>
+            <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>
+          </button>
         </div>
       )}
     </Card>