From f8eccd689f46f7ae6b446e720eeb11195dd4e121 Mon Sep 17 00:00:00 2001
From: Bram Borggreve <beeman@beeman.nl>
Date: Tue, 2 Jul 2024 00:00:36 +0200
Subject: [PATCH] fix: ensure 'basic' anchor template works with Anchor 0.30.x

---
 .../basic/src/__fileName__-exports.ts.template    | 15 +++++++++++++--
 .../__fileName__-data-access.tsx.template         | 11 ++++++++---
 .../files/base/webpack.config.js.template         |  1 +
 .../src/utils/generate-react-application.ts       |  9 +++++++++
 4 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/packages/preset-anchor/src/generators/anchor-template/files/basic/src/__fileName__-exports.ts.template b/packages/preset-anchor/src/generators/anchor-template/files/basic/src/__fileName__-exports.ts.template
index 1af740b1..ba17db76 100644
--- a/packages/preset-anchor/src/generators/anchor-template/files/basic/src/__fileName__-exports.ts.template
+++ b/packages/preset-anchor/src/generators/anchor-template/files/basic/src/__fileName__-exports.ts.template
@@ -1,8 +1,8 @@
 // Here we export some useful types and functions for interacting with the Anchor program.
 import { AnchorProvider, Program } from '@coral-xyz/anchor';
-import { PublicKey } from '@solana/web3.js';
+import { Cluster, PublicKey } from '@solana/web3.js';
+import <%= className %>IDL from '../target/idl/<%= fileNameUnderscore %>.json';
 import type { <%= className %> } from '../target/types/<%= fileNameUnderscore %>';
-import { IDL as <%= className %>IDL } from '../target/types/<%= fileNameUnderscore %>';
 
 // Re-export the generated IDL and type
 export { <%= className %>, <%= className %>IDL };
@@ -14,3 +14,14 @@ export const <%= upperCaseName %>_PROGRAM_ID = new PublicKey(<%= className %>IDL
 export function get<%= className %>Program(provider: AnchorProvider) {
   return new Program(<%= className %>IDL as <%= className %>, provider);
 }
+
+// This is a helper function to get the program ID for the <%= className %> program depending on the cluster.
+export function get<%= className %>ProgramId(cluster: Cluster) {
+  switch (cluster) {
+    case 'devnet':
+    case 'testnet':
+    case 'mainnet-beta':
+    default:
+      return <%= upperCaseName %>_PROGRAM_ID
+  }
+}
diff --git a/packages/preset-react/src/generators/react-feature/files/anchor-basic/__fileName__-data-access.tsx.template b/packages/preset-react/src/generators/react-feature/files/anchor-basic/__fileName__-data-access.tsx.template
index 77a7d8bd..a50078c1 100644
--- a/packages/preset-react/src/generators/react-feature/files/anchor-basic/__fileName__-data-access.tsx.template
+++ b/packages/preset-react/src/generators/react-feature/files/anchor-basic/__fileName__-data-access.tsx.template
@@ -2,11 +2,12 @@
     'use client';
 
 <% } %>
-import { programId, get<%= className %>Program } from '@<%= npmScope %>/anchor';
+import { get<%= className %>Program, get<%= className %>ProgramId } from '@<%= npmScope %>/anchor'
 import { Program } from '@coral-xyz/anchor';
 import { useConnection } from '@solana/wallet-adapter-react';
-import { Keypair } from '@solana/web3.js';
+import { Cluster, Keypair } from '@solana/web3.js';
 import { useMutation, useQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
 import toast from 'react-hot-toast';
 import { useCluster } from '../cluster/cluster-data-access';
 import { useAnchorProvider } from '../solana/solana-provider';
@@ -17,7 +18,11 @@ export function use<%= className %>Program() {
   const { cluster } = useCluster();
   const transactionToast = useTransactionToast();
   const provider = useAnchorProvider();
-  const program = get<%= className %>Program(provider);
+  const programId = useMemo(
+    () => get<%= className %>ProgramId(cluster.network as Cluster),
+    [cluster]
+  );
+  const program = get<%= className %>Program(provider)
 
   const getProgramAccount = useQuery({
     queryKey: ['get-program-account', { cluster }],
diff --git a/packages/preset-react/src/generators/react-template/files/base/webpack.config.js.template b/packages/preset-react/src/generators/react-template/files/base/webpack.config.js.template
index 42626bc5..e88d65ac 100644
--- a/packages/preset-react/src/generators/react-template/files/base/webpack.config.js.template
+++ b/packages/preset-react/src/generators/react-template/files/base/webpack.config.js.template
@@ -9,6 +9,7 @@ module.exports = composePlugins(withNx(), withReact(), (config) => {
   config.resolve.fallback = {
     crypto: require.resolve('crypto-browserify'),
     stream: require.resolve('stream-browserify'),
+    vm: false,
   };
 
   return config;
diff --git a/packages/preset-react/src/utils/generate-react-application.ts b/packages/preset-react/src/utils/generate-react-application.ts
index f616f5c5..2752e5d1 100644
--- a/packages/preset-react/src/utils/generate-react-application.ts
+++ b/packages/preset-react/src/utils/generate-react-application.ts
@@ -29,5 +29,14 @@ export async function generateReactApplication(tree: Tree, options: NormalizedRe
     return json
   })
 
+  updateJson(tree, join(project.root, 'tsconfig.app.json'), (json) => {
+    json.compilerOptions = {
+      ...json.compilerOptions,
+      resolveJsonModule: true,
+      allowSyntheticDefaultImports: true,
+    }
+    return json
+  })
+
   return getProjects(tree).get(options.webName)
 }