Pdeexp 2143 add kadena to make magic cli

core/utils/templateMappings.ts

@@ -17,9 +17,16 @@ import SolanaDedicatedScaffold, {
   flags as solanaDedicatedFlags,
 } from '../../scaffolds/nextjs-solana-dedicated-wallet/scaffold';
 import { Timer } from './timer';
+import KadenaDedicatedScaffold, {
+  flags as kadenaDedicatedFlags,
+} from '../../scaffolds/nextjs-kadena-dedicated-wallet/scaffold';
 
-export type Chain = 'evm' | 'solana' | 'flow';
-export type Template = 'nextjs-dedicated-wallet' | 'nextjs-solana-dedicated-wallet' | 'nextjs-flow-dedicated-wallet';
+export type Chain = 'evm' | 'solana' | 'flow' | 'kadena';
+export type Template =
+  | 'nextjs-dedicated-wallet'
+  | 'nextjs-solana-dedicated-wallet'
+  | 'nextjs-flow-dedicated-wallet'
+  | 'nextjs-kadena-dedicated-wallet';
 
 type ConfigType = CreateMagicAppConfig & {
   chain: Chain | undefined;
@@ -36,6 +43,8 @@ function mapTemplateToChain(template: string): Chain | undefined {
       return 'solana';
     case 'nextjs-flow-dedicated-wallet':
       return 'flow';
+    case 'nextjs-kadena-dedicated-wallet':
+      return 'kadena';
     default:
       return undefined;
   }
@@ -81,6 +90,14 @@ export async function mapTemplateToScaffold(
         data.loginMethods = await AuthTypePrompt.loginMethodsPrompt();
       }
       return new FlowDedicatedScaffold(data);
+    case 'nextjs-kadena-dedicated-wallet':
+      if (!data.network) {
+        data.network = await BlockchainNetworkPrompt.kadenaNetworkPrompt();
+      }
+      if (!data.loginMethods || data.loginMethods.length === 0) {
+        data.loginMethods = await AuthTypePrompt.loginMethodsPrompt('kadena');
+      }
+      return new KadenaDedicatedScaffold(data);
     default:
       throw new Error(`Invalid template: ${template}`);
   }
@@ -94,6 +111,8 @@ export function mapTemplateToFlags(template: string): any {
       return solanaDedicatedFlags;
     case 'nextjs-flow-dedicated-wallet':
       return flowDedicatedFlags;
+    case 'nextjs-kadena-dedicated-wallet':
+      return kadenaDedicatedFlags;
     default:
       throw new Error(`Invalid template: ${template}`);
   }
@@ -108,6 +127,15 @@ const quickstartConfig = (config: ConfigType): ConfigType => ({
   isQuickstart: true,
 });
 
+const evmConfig = async (config: ConfigType): Promise<ConfigType> => ({
+  ...config,
+  template: 'nextjs-dedicated-wallet',
+  network: await BlockchainNetworkPrompt.evmNetworkPrompt(),
+  chain: 'evm',
+  isChosenTemplateValid: true,
+  isQuickstart: false,
+});
+
 const solanaConfig = async (config: ConfigType): Promise<ConfigType> => ({
   ...config,
   template: 'nextjs-solana-dedicated-wallet',
@@ -117,6 +145,24 @@ const solanaConfig = async (config: ConfigType): Promise<ConfigType> => ({
   isQuickstart: false,
 });
 
+const flowConfig = async (config: ConfigType): Promise<ConfigType> => ({
+  ...config,
+  template: 'nextjs-flow-dedicated-wallet',
+  network: await BlockchainNetworkPrompt.flowNetworkPrompt(),
+  chain: 'flow',
+  isChosenTemplateValid: true,
+  isQuickstart: false,
+});
+
+const kadenaConfig = async (config: ConfigType): Promise<ConfigType> => ({
+  ...config,
+  template: 'nextjs-kadena-dedicated-wallet',
+  network: await BlockchainNetworkPrompt.kadenaNetworkPrompt(),
+  chain: 'kadena',
+  isChosenTemplateValid: true,
+  isQuickstart: false,
+});
+
 export const buildTemplate = async (appConfig: ConfigType): Promise<ConfigType> => {
   let config = { ...appConfig };
 
@@ -144,13 +190,16 @@ export const buildTemplate = async (appConfig: ConfigType): Promise<ConfigType>
         config = await solanaConfig(config);
         break;
       case 'flow':
-        config.network = await BlockchainNetworkPrompt.flowNetworkPrompt();
+        config = await flowConfig(config);
+        break;
+      case 'kadena':
+        config = await kadenaConfig(config);
         break;
       case 'evm':
-        config.network = await BlockchainNetworkPrompt.evmNetworkPrompt();
+        config = await evmConfig(config);
         break;
       default:
-        config.network = await BlockchainNetworkPrompt.evmNetworkPrompt();
+        config = await evmConfig(config);
         break;
     }
   } else {
@@ -165,17 +214,19 @@ export const buildTemplate = async (appConfig: ConfigType): Promise<ConfigType>
       'zksync-sepolia',
     ];
     const solanaNetworks = ['solana-devnet', 'solana-mainnet'];
+    const kadenaNetworks = ['kadena-testnet', 'kadena-mainnet'];
 
     if (evmNetworks.includes(config.network)) {
       config.chain = 'evm';
     } else if (solanaNetworks.includes(config.network)) {
       config.chain = 'solana';
+    } else if (kadenaNetworks.includes(config.network)) {
+      config.chain = 'kadena';
     } else {
       config.chain = 'flow';
     }
   }
 
-  config.template = config.chain === 'flow' ? 'nextjs-flow-dedicated-wallet' : 'nextjs-dedicated-wallet';
   config.isChosenTemplateValid = true;
 
   return config;

scaffolds/dev-data.ts

@@ -17,4 +17,10 @@ export const templateDevData = {
     loginMethods: ['EmailOTP', 'SMSOTP'],
     projectName: 'My Solana Dedicated Wallet',
   },
+  'nextjs-kadena-dedicated-wallet': {
+    network: 'kadena-testnet',
+    publishableApiKey: 'pk_live_FD2D70B32ABE11BD',
+    loginMethods: ['EmailOTP', 'SMSOTP'],
+    projectName: 'My Kadena Dedicated Wallet',
+  },
 };

scaffolds/nextjs-kadena-dedicated-wallet/scaffold.ts

@@ -0,0 +1,86 @@
+import { Flags } from '../../core/flags';
+import BaseScaffold, { ExecaCommand } from '../../core/types/BaseScaffold';
+import { AuthTypePrompt, NpmClientPrompt, PublishableApiKeyPrompt } from '../prompts';
+
+export type Data = NpmClientPrompt.Data & PublishableApiKeyPrompt.Data & AuthTypePrompt.Data;
+
+export const flags: Flags<Partial<Data>> = {
+  ...NpmClientPrompt.flags,
+  ...PublishableApiKeyPrompt.flags,
+  ...AuthTypePrompt.flags,
+};
+
+export const definition = {
+  shortDescription: 'A dedicated wallet scaffold for Next.js using Kadena',
+  featured: true,
+};
+
+export default class KadenaDedicatedScaffold extends BaseScaffold {
+  public templateName = 'nextjs-kadena-dedicated-wallet';
+
+  private data: Data;
+
+  public installationCommand: ExecaCommand = { command: 'npm', args: ['install'] };
+
+  public startCommand: ExecaCommand = { command: 'npm', args: ['run', 'dev'] };
+
+  public source: string | string[] = [
+    './public/favicon.ico',
+    './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',
+    './package.json',
+    './postcss.config.js',
+    './tailwind.config.js',
+    './tsconfig.json',
+    './README.md',
+    './src/components/ui',
+    './src/components/magic/cards',
+    './src/components/magic/wallet-methods/Disconnect.tsx',
+    './src/components/magic/wallet-methods/GetIdToken.tsx',
+    './src/components/magic/wallet-methods/GetMetadata.tsx',
+    './src/components/magic/Dashboard.tsx',
+    './src/components/magic/DevLinks.tsx',
+    './src/components/magic/Header.tsx',
+    './src/components/magic/Login.tsx',
+    './src/components/magic/MagicProvider.tsx',
+    './src/components/magic/MagicDashboardRedirect.tsx',
+    './src/pages',
+    './src/styles',
+    './src/utils',
+    './src/pact',
+  ];
+
+  constructor(data: Data) {
+    super();
+    this.data = data;
+
+    if (typeof this.source !== 'string') {
+      this.data.loginMethods = this.data.loginMethods.map((authType) =>
+        AuthTypePrompt.mapInputToLoginMethods(authType),
+      );
+      this.data.loginMethods.forEach((authType) => {
+        (this.source as string[]).push(`./src/components/magic/auth/${authType.replaceAll(' ', '')}.tsx`);
+        if (
+          authType === 'Discord' ||
+          authType === 'Facebook' ||
+          authType === 'Github' ||
+          authType === 'Google' ||
+          authType === 'Twitch' ||
+          authType === 'Twitter'
+        ) {
+          (this.source as string[]).push(`./public/social/${authType.replaceAll(' ', '')}.svg`);
+        }
+        if (authType.replaceAll(' ', '') === 'EmailOTP') {
+          (this.source as string[]).push('./src/components/magic/wallet-methods/UpdateEmail.tsx');
+        }
+      });
+    }
+  }
+}

scaffolds/nextjs-kadena-dedicated-wallet/template/.env.example

@@ -0,0 +1,5 @@
+# Publishable API Key found in the Magic Dashboard
+NEXT_PUBLIC_MAGIC_API_KEY=<%= publishableApiKey %>
+
+# The blockchain network
+NEXT_PUBLIC_BLOCKCHAIN_NETWORK=<%= network %>

scaffolds/nextjs-kadena-dedicated-wallet/template/.eslintrc.json

@@ -0,0 +1,7 @@
+{
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "quotes": [1, "single"],
+    "indent": [1, 2]
+  }
+}

scaffolds/nextjs-kadena-dedicated-wallet/template/.gitignore

@@ -0,0 +1,39 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# env files
+.env
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+#environment
+.env

scaffolds/nextjs-kadena-dedicated-wallet/template/README.md

@@ -0,0 +1,44 @@
+This scaffold is meant to help you bootstrap your own projects with Magic's [Dedicated Wallet](https://magic.link/docs/auth/overview). Magic is a developer SDK that integrates with your application to enable passwordless Web3 onboarding.
+
+The folder structure of this scaffold is designed to encapsulate all things Magic into one place so you can easily add or remove components and functionality. For example, all Magic-specific components are in the `src/components/magic` directory while generic UI components are in the `src/components/ui` directory.
+
+## Next.js
+
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+### Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+### Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+### Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

scaffolds/nextjs-kadena-dedicated-wallet/template/next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+}
+
+module.exports = nextConfig