add support to define an api key for the client (#266)

CHANGELOG.md

@@ -4,6 +4,8 @@ All notable changes to the create-aptos-dapp tool will be captured in this file.
 
 # Unreleased
 
+- Add support to define a client API Key
+
 # 0.0.37 (2024-11-04)
 
 - [Fix] Generate Boilerplate template without Surf errors out because of a wrong file path

src/generateDapp.ts

@@ -138,6 +138,7 @@ export async function generateDapp(selection: Selections) {
       network: selection.network,
       signing_option: selection.signingOption,
       use_surf: selection.useSurf,
+      use_api_key: selection.useApiKey,
     });
 
     // Log next steps

src/types.ts

@@ -7,7 +7,14 @@ import {
 } from "./utils/constants";
 
 export type Result = prompts.Answers<
-  "projectName" | "projectType" | "template" | "network" | "signingOption" | "useSurf"
+  | "projectName"
+  | "projectType"
+  | "template"
+  | "network"
+  | "signingOption"
+  | "useSurf"
+  | "useApiKey"
+  | "apiKey"
 >;
 
 export type Template = {
@@ -40,6 +47,8 @@ export type Selections = {
   framework: Framework;
   signingOption: SigningOption;
   useSurf: boolean;
+  useApiKey: boolean;
+  apiKey: string;
 };
 
 export type TemplateTelemetryData = {
@@ -51,6 +60,7 @@ export type TemplateTelemetryData = {
   framework: Framework;
   signing_option: string;
   use_surf: boolean;
+  use_api_key: boolean;
 };
 
 export type ExampleTelemetryData = {

src/utils/setUpEnvVariables.ts

@@ -15,8 +15,10 @@ export const setUpEnvVariables = (
 
   if (selection.framework === TemplateFramework.VITE) {
     content += `\nVITE_APP_NETWORK=${selection.network}`;
+    content += `\nVITE_APTOS_API_KEY="${selection.apiKey ?? ""}"`;
   } else if (selection.framework === TemplateFramework.NEXTJS) {
     content += `\nNEXT_PUBLIC_APP_NETWORK=${selection.network}`;
+    content += `\nNEXT_PUBLIC_APTOS_API_KEY="${selection.apiKey ?? ""}"`;
   } else if (selection.projectType === TemplateProjectType.MOVE) {
     content += `\nAPP_NETWORK=${selection.network}`;
   } else {

src/workflow/helpers.ts

@@ -38,3 +38,17 @@ export const needFrameworkChoice = (values: Selections) => {
 
   return "select";
 };
+
+export const canUseApiKey = (values: Selections) => {
+  if (values.projectType === TemplateProjectType.FULLSTACK) {
+    return "confirm";
+  }
+  return null;
+};
+
+export const needApiKey = (values: Selections) => {
+  if (values.useApiKey) {
+    return "text";
+  }
+  return null;
+};

src/workflow/index.ts

@@ -24,6 +24,8 @@ export async function startWorkflow() {
         workflowOptions.useSurf,
         workflowOptions.framework,
         workflowOptions.network,
+        workflowOptions.useApiKey,
+        workflowOptions.apiKey,
       ],
       {
         onCancel: () => {
@@ -89,6 +91,8 @@ export async function startWorkflow() {
     useSurf,
     network,
     projectType,
+    useApiKey,
+    apiKey,
   } = result;
   return {
     projectName,
@@ -98,5 +102,7 @@ export async function startWorkflow() {
     signingOption,
     useSurf,
     network,
+    useApiKey,
+    apiKey,
   } as Selections;
 }

src/workflow/rechoseWorkflow.ts

@@ -32,13 +32,17 @@ export async function rechoseWorkflow(result: Result): Promise<void> {
               { title: "Network", value: "network" },
             ];
           } else {
-            return [
+            const choices = [
               { title: "Project Name", value: "projectName" },
               { title: "Project Type", value: "projectType" },
               { title: "Template", value: "template" },
               { title: "Network", value: "network" },
               { title: "Use Surf", value: "useSurf" },
             ];
+            if (result.useApiKey) {
+              choices.push({ title: "API Key", value: "apiKey" });
+            }
+            return choices;
           }
         },
       },
@@ -118,8 +122,7 @@ export async function rechoseWorkflow(result: Result): Promise<void> {
       break;
     case "useSurf":
       if (
-        result.template.path !==
-        FullstackBoilerplateTemplateInfo.value.path
+        result.template.path !== FullstackBoilerplateTemplateInfo.value.path
       ) {
         break;
       }
@@ -130,6 +133,14 @@ export async function rechoseWorkflow(result: Result): Promise<void> {
         })
       ).useSurf;
       break;
+    case "apiKey":
+      result.apiKey = (
+        await prompts({
+          ...workflowOptions.apiKey,
+          initial: result.apiKey,
+        })
+      ).apiKey;
+      break;
     default:
       console.log("Invalid option selected");
       break;

src/workflow/workflowOptions.ts

@@ -12,10 +12,12 @@ import {
 } from "../utils/constants.js";
 import { validateProjectName } from "../utils/index.js";
 import {
+  needApiKey,
   needFrameworkChoice,
   needSigningOptionChoice,
   needSurfChoice,
   needTemplateChoice,
+  canUseApiKey,
 } from "./helpers.js";
 
 /** workflow object containing all the text for the different prompt options */
@@ -181,4 +183,18 @@ export const workflowOptions = {
     initial: 0,
     hint: "- You can change this later",
   },
+  useApiKey: {
+    type: (prev, values) => canUseApiKey(values),
+    name: "useApiKey",
+    message:
+      "Would you like to use an API key? It is highly recommended to use with the Aptos API",
+    initial: true,
+  },
+  apiKey: {
+    type: (prev, values) => needApiKey(values),
+    name: "apiKey",
+    message:
+      "Enter your API key for the chosen network (you can get one at https://developers.aptoslabs.com/docs/api-access)",
+    initial: "",
+  },
 };

templates/boilerplate-template/frontend/components/WalletProvider.tsx

@@ -3,15 +3,15 @@ import { AptosWalletAdapterProvider } from "@aptos-labs/wallet-adapter-react";
 // Internal components
 import { useToast } from "@/components/ui/use-toast";
 // Internal constants
-import { NETWORK } from "@/constants";
+import { APTOS_API_KEY, NETWORK } from "@/constants";
 
 export function WalletProvider({ children }: PropsWithChildren) {
   const { toast } = useToast();
 
   return (
     <AptosWalletAdapterProvider
       autoConnect={true}
-      dappConfig={{ network: NETWORK }}
+      dappConfig={{ network: NETWORK, aptosApiKey: APTOS_API_KEY }}
       optInWallets={["Continue with Google","Petra","Nightly","Pontem Wallet", "Mizu Wallet"]}
       onError={(error) => {
         toast({

templates/boilerplate-template/frontend/constants.ts

@@ -1,2 +1,3 @@
 export const NETWORK = import.meta.env.VITE_APP_NETWORK ?? "testnet";
 export const MODULE_ADDRESS = import.meta.env.VITE_MODULE_ADDRESS;
+export const APTOS_API_KEY = import.meta.env.VITE_APTOS_API_KEY;

templates/boilerplate-template/frontend/utils/aptosClient.ts

@@ -1,7 +1,7 @@
-import { NETWORK } from "@/constants";
+import { NETWORK, APTOS_API_KEY } from "@/constants";
 import { Aptos, AptosConfig } from "@aptos-labs/ts-sdk";
 
-const aptos = new Aptos(new AptosConfig({ network: NETWORK }));
+const aptos = new Aptos(new AptosConfig({ network: NETWORK, clientConfig: { API_KEY: APTOS_API_KEY } }));
 
 // Reuse same Aptos instance to utilize cookie based sticky routing
 export function aptosClient() {

templates/boilerplate-template/package.json

@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "@aptos-labs/ts-sdk": "^1.30.0",
-    "@aptos-labs/wallet-adapter-react": "^3.7.0",
+    "@aptos-labs/wallet-adapter-react": "^3.7.4",
     "@radix-ui/react-collapsible": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",

templates/clicker-game-tg-mini-app-template/frontend/components/WalletProvider.tsx

@@ -3,7 +3,7 @@ import { AptosWalletAdapterProvider } from "@aptos-labs/wallet-adapter-react";
 // Internal components
 import { useToast } from "@/components/ui/use-toast";
 // Internal constants
-import { NETWORK } from "@/constants";
+import { NETWORK, APTOS_API_KEY } from "@/constants";
 
 export function WalletProvider({ children }: PropsWithChildren) {
   const { toast } = useToast();
@@ -18,6 +18,7 @@ export function WalletProvider({ children }: PropsWithChildren) {
           appId: undefined,
           // Learn more https://docs.mizu.io/docs/preparation/manifest-json
           manifestURL: "https://assets.mz.xyz/static/config/mizuwallet-connect-manifest.json",
+          aptosApiKey: APTOS_API_KEY,
         },
       }}
       optInWallets={["Mizu Wallet"]}

templates/clicker-game-tg-mini-app-template/frontend/constants.ts

@@ -1,3 +1,4 @@
 export const NETWORK = import.meta.env.VITE_APP_NETWORK ?? "testnet";
 export const MODULE_ADDRESS = import.meta.env.VITE_MODULE_ADDRESS;
 export const IS_DEV = Boolean(import.meta.env.DEV);
+export const APTOS_API_KEY = import.meta.env.VITE_APTOS_API_KEY;

templates/clicker-game-tg-mini-app-template/frontend/utils/aptosClient.ts

@@ -1,8 +1,8 @@
 import { Aptos, AptosConfig } from "@aptos-labs/ts-sdk";
 
-import { NETWORK } from "@/constants";
+import { NETWORK, APTOS_API_KEY } from "@/constants";
 
-const aptos = new Aptos(new AptosConfig({ network: NETWORK }));
+const aptos = new Aptos(new AptosConfig({ network: NETWORK, clientConfig: { API_KEY: APTOS_API_KEY } }));
 
 // Reuse same Aptos instance to utilize cookie based sticky routing
 export function aptosClient() {

templates/clicker-game-tg-mini-app-template/package.json

@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@aptos-labs/ts-sdk": "^1.26.0",
-    "@aptos-labs/wallet-adapter-react": "^3.5.10",
+    "@aptos-labs/wallet-adapter-react": "^3.7.4",
     "@radix-ui/react-collapsible": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",

templates/custom-indexer-template/package.json

@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "@aptos-labs/ts-sdk": "^1.30.0",
-    "@aptos-labs/wallet-adapter-react": "^3.5.9",
+    "@aptos-labs/wallet-adapter-react": "^3.7.4",
     "@hookform/resolvers": "^3.7.0",
     "@neondatabase/serverless": "^0.9.5",
     "@radix-ui/react-checkbox": "^1.1.1",

templates/custom-indexer-template/src/components/WalletProvider.tsx

@@ -3,15 +3,15 @@
 import { AptosWalletAdapterProvider } from "@aptos-labs/wallet-adapter-react";
 import { PropsWithChildren } from "react";
 import { useToast } from "@/components/ui/use-toast";
-import { NETWORK } from "@/constants";
+import { APTOS_API_KEY, NETWORK } from "@/constants";
 
 export const WalletProvider = ({ children }: PropsWithChildren) => {
   const { toast } = useToast();
 
   return (
     <AptosWalletAdapterProvider
       autoConnect={true}
-      dappConfig={{ network: NETWORK }}
+      dappConfig={{ network: NETWORK, aptosApiKey: APTOS_API_KEY }}
       optInWallets={[
         "Petra",
         "Nightly",

templates/custom-indexer-template/src/constants.ts

@@ -3,3 +3,4 @@ import type { Network } from "@aptos-labs/wallet-adapter-react";
 export const NETWORK: Network =
   (process.env.NEXT_PUBLIC_APP_NETWORK as Network) ?? "testnet";
 export const MODULE_ADDRESS = process.env.NEXT_PUBLIC_MODULE_ADDRESS;
+export const APTOS_API_KEY = process.env.NEXT_PUBLIC_APTOS_API_KEY;

templates/custom-indexer-template/src/lib/aptos.ts

@@ -1,9 +1,10 @@
-import { NETWORK } from "@/constants";
+import { APTOS_API_KEY, NETWORK } from "@/constants";
 import { Aptos, AptosConfig } from "@aptos-labs/ts-sdk";
 
 const APTOS_CLIENT = new Aptos(
   new AptosConfig({
     network: NETWORK,
+    clientConfig: { API_KEY: APTOS_API_KEY },
   })
 );
 

templates/nextjs-boilerplate-template/package.json

@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "@aptos-labs/ts-sdk": "^1.30.0",
-    "@aptos-labs/wallet-adapter-react": "^3.6.2",
+    "@aptos-labs/wallet-adapter-react": "^3.7.4",
     "@ducanh2912/next-pwa": "^10.2.9",
     "@radix-ui/react-collapsible": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.1",

templates/nextjs-boilerplate-template/src/app/layout.tsx

@@ -5,7 +5,6 @@ import { ReactQueryProvider } from "@/components/ReactQueryProvider";
 import { WalletProvider } from "@/components/WalletProvider";
 import { Toaster } from "@/components/ui/toaster";
 import { WrongNetworkAlert } from "@/components/WrongNetworkAlert";
-import { TopBanner } from "@/components/TopBanner";
 
 import "./globals.css";
 
@@ -28,7 +27,6 @@ export default function RootLayout({
           <ReactQueryProvider>
             <div id="root">{children}</div>
             <WrongNetworkAlert />
-            <TopBanner />
             <Toaster />
           </ReactQueryProvider>
         </WalletProvider>

templates/nextjs-boilerplate-template/src/app/page.tsx

@@ -4,6 +4,7 @@ import { AccountInfo } from "@/components/AccountInfo";
 import { Header } from "@/components/Header";
 import { MessageBoard } from "@/components/MessageBoard";
 import { NetworkInfo } from "@/components/NetworkInfo";
+import { TopBanner } from "@/components/TopBanner";
 import { TransferAPT } from "@/components/TransferAPT";
 import { WalletDetails } from "@/components/WalletDetails";
 // Internal Components
@@ -15,6 +16,7 @@ function App() {
 
   return (
     <>
+    <TopBanner />
       <Header />
       <div className="flex items-center justify-center flex-col">
         {connected ? (

templates/nextjs-boilerplate-template/src/components/WalletProvider.tsx

@@ -3,7 +3,7 @@
 // Internal components
 import { useToast } from "@/components/ui/use-toast";
 // Internal constants
-import { NETWORK } from "@/constants";
+import { APTOS_API_KEY, NETWORK } from "@/constants";
 import { AptosWalletAdapterProvider } from "@aptos-labs/wallet-adapter-react";
 import type { PropsWithChildren } from "react";
 
@@ -13,7 +13,7 @@ export function WalletProvider({ children }: PropsWithChildren) {
   return (
     <AptosWalletAdapterProvider
       autoConnect={true}
-      dappConfig={{ network: NETWORK }}
+      dappConfig={{ network: NETWORK, aptosApiKey: APTOS_API_KEY }}
       optInWallets={["Continue with Google","Petra","Nightly","Pontem Wallet", "Mizu Wallet"]}
       onError={(error) => {
         toast({

templates/nextjs-boilerplate-template/src/constants.ts

@@ -2,3 +2,4 @@ import type { Network } from "@aptos-labs/wallet-adapter-react";
 
 export const NETWORK: Network = (process.env.NEXT_PUBLIC_APP_NETWORK as Network) ?? "testnet";
 export const MODULE_ADDRESS = process.env.NEXT_PUBLIC_MODULE_ADDRESS;
+export const APTOS_API_KEY = process.env.NEXT_PUBLIC_APTOS_API_KEY;

templates/nextjs-boilerplate-template/src/utils/aptosClient.ts

@@ -1,7 +1,7 @@
-import { NETWORK } from "@/constants";
+import { APTOS_API_KEY, NETWORK } from "@/constants";
 import { Aptos, AptosConfig } from "@aptos-labs/ts-sdk";
 
-const aptos = new Aptos(new AptosConfig({ network: NETWORK }));
+const aptos = new Aptos(new AptosConfig({ network: NETWORK, clientConfig: { API_KEY: APTOS_API_KEY } }));
 
 // Reuse same Aptos instance to utilize cookie based sticky routing
 export function aptosClient() {

templates/nft-minting-dapp-template/frontend/components/WalletProvider.tsx

@@ -2,15 +2,15 @@ import { PropsWithChildren } from "react";
 import { AptosWalletAdapterProvider } from "@aptos-labs/wallet-adapter-react";
 
 import { useToast } from "@/components/ui/use-toast";
-import { NETWORK } from "@/constants";
+import { APTOS_API_KEY, NETWORK } from "@/constants";
 
 export function WalletProvider({ children }: PropsWithChildren) {
   const { toast } = useToast();
 
   return (
     <AptosWalletAdapterProvider
       autoConnect={true}
-      dappConfig={{ network: NETWORK }}
+      dappConfig={{ network: NETWORK, aptosApiKey: APTOS_API_KEY }}
       optInWallets={["Continue with Google","Petra","Nightly","Pontem Wallet", "Mizu Wallet"]}
       onError={(error) => {
         toast({