[SDK] Dynamically import anchor library (#232)

Co-authored-by: Jonas Daniels <[email protected]>

.changeset/gold-geese-shout.md

@@ -0,0 +1,5 @@
+---
+"@thirdweb-dev/sdk": patch
+---
+
+[SOL] Dynamic imports for anchor programs

packages/sdk/src/solana/contracts/program.ts

@@ -1,9 +1,12 @@
+import { UserWallet } from "../classes/user-wallet";
+import { Cluster, resolveClusterFromConnection } from "@metaplex-foundation/js";
 import {
   Program as AnchorProgram,
   Idl,
   AnchorProvider,
+  setProvider,
 } from "@project-serum/anchor";
-import { Signer } from "@solana/web3.js";
+import { Connection, PublicKey, Signer } from "@solana/web3.js";
 
 /**
  * Dynamic interface for interacting with Solana programs.
@@ -23,9 +26,27 @@ import { Signer } from "@solana/web3.js";
  */
 export class Program {
   private program: AnchorProgram<Idl>;
+  public publicKey: PublicKey;
+  public accountType = "program" as const;
+  public network: Cluster;
 
-  constructor(programAddress: string, idl: Idl, provider?: AnchorProvider) {
-    this.program = new AnchorProgram(idl, programAddress, provider);
+  constructor(
+    programAddress: string,
+    idl: Idl,
+    connection: Connection,
+    wallet: UserWallet,
+  ) {
+    this.publicKey = new PublicKey(programAddress);
+    this.network = resolveClusterFromConnection(connection);
+    setProvider(new AnchorProvider(connection, wallet.getSigner(), {}));
+    this.program = new AnchorProgram(idl, programAddress);
+    wallet.events.on("connected", () => {
+      setProvider(new AnchorProvider(connection, wallet.getSigner(), {}));
+    });
+    wallet.events.on("disconnected", () => {
+      // identity will be guest in this case
+      setProvider(new AnchorProvider(connection, wallet.getSigner(), {}));
+    });
   }
 
   /**

packages/sdk/src/solana/sdk.ts

@@ -3,17 +3,11 @@ import { Registry } from "./classes/registry";
 import { UserWallet } from "./classes/user-wallet";
 import { NFTCollection } from "./contracts/nft-collection";
 import { NFTDrop } from "./contracts/nft-drop";
-import { Program } from "./contracts/program";
 import { Token } from "./contracts/token";
 import { Network } from "./types";
 import { getUrlForNetwork } from "./utils/urls";
 import { Metaplex } from "@metaplex-foundation/js";
-import {
-  AnchorProvider,
-  Idl,
-  Program as AnchorProgram,
-  setProvider,
-} from "@project-serum/anchor";
+import type { Idl } from "@project-serum/anchor";
 import { Connection, Keypair } from "@solana/web3.js";
 import { IpfsUploader, ThirdwebStorage } from "@thirdweb-dev/storage";
 import Bs58 from "bs58";
@@ -70,7 +64,6 @@ export class ThirdwebSDK {
 
   private connection: Connection;
   private metaplex: Metaplex;
-  private anchorProvider: AnchorProvider;
   private storage: ThirdwebStorage;
 
   /**
@@ -104,17 +97,6 @@ export class ThirdwebSDK {
     this.wallet = new UserWallet(this.metaplex);
     this.deployer = new Deployer(this.metaplex, this.storage);
     this.registry = new Registry(this.metaplex);
-    this.anchorProvider = new AnchorProvider(
-      this.metaplex.connection,
-      this.metaplex.identity(),
-      {},
-    );
-    this.wallet.events.on("connected", () => {
-      this.propagateWalletConnected();
-    });
-    this.wallet.events.on("disconnected", () => {
-      this.propagateWalletDisconnected();
-    });
   }
 
   /**
@@ -150,7 +132,11 @@ export class ThirdwebSDK {
    * @returns SDK interface for the program
    */
   public async getProgram(address: string) {
-    const idl = await AnchorProgram.fetchIdl(address, this.anchorProvider);
+    const anchor = await import("@project-serum/anchor");
+    const idl = await anchor.Program.fetchIdl(
+      address,
+      new anchor.AnchorProvider(this.connection, this.metaplex.identity(), {}),
+    );
     if (!idl) {
       throw new Error(
         `Could not fetch IDL for program at address '${address}'`,
@@ -166,19 +152,7 @@ export class ThirdwebSDK {
    * @returns SDK interface for the program
    */
   public async getProgramWithIdl(address: string, idl: Idl) {
-    return new Program(address, idl, this.anchorProvider);
-  }
-
-  private propagateWalletConnected() {
-    setProvider(
-      new AnchorProvider(this.connection, this.metaplex.identity(), {}),
-    );
-  }
-
-  private propagateWalletDisconnected() {
-    // metaplex.identity() will return a guest identity
-    setProvider(
-      new AnchorProvider(this.connection, this.metaplex.identity(), {}),
-    );
+    const program = await import("./contracts/program");
+    return new program.Program(address, idl, this.connection, this.wallet);
   }
 }

turbo.json

@@ -5,47 +5,49 @@
       "outputs": ["dist/**"],
       "dependsOn": ["^build"]
     },
-    "sdk#build": {
+    "@thirdweb-dev/sdk#build": {
+      "outputs": ["dist/**"],
+      "dependsOn": ["^build"]
+    },
+    "@thirdweb-dev/react#build": {
       "outputs": ["dist/**", "evm/**", "solana/**"],
       "dependsOn": ["^build"]
     },
-    "react#build": {
-      "outputs": ["dist/**", "evm/**", "solana/**"],
-      "dependsOn": ["^build"]
-    },
-    "auth#build": {
+    "@thirdweb-dev/auth#build": {
       "outputs": ["dist/**", "express/**", "next/**", "next-auth/**"],
       "dependsOn": ["^build"]
     },
-    "contracts-js#build": {
+    "@thirdweb-dev/contracts-js#build": {
       "outputs": ["dist/**", "factories/**", "src/**"],
       "dependsOn": ["^build"]
     },
-    "solana#build": {
-      "outputs": ["dist/**", "server/**"],
-      "dependsOn": ["^build"]
-    },
     "test": {
       "outputs": [],
       "inputs": ["src/**", "test/**"],
-      "dependsOn": ["^build"]
+      "dependsOn": ["build"]
     },
     "test:solana": {
       "outputs": [],
-      "inputs": ["src/solana/**", "test/solana/**"]
+      "inputs": ["src/solana/**", "test/solana/**"],
+      "dependsOn": ["build"]
     },
     "test:evm": {
       "outputs": [],
       "inputs": ["src/evm/**", "test/evm/**"],
-      "dependsOn": ["^build"]
+      "dependsOn": ["build"]
     },
     "e2e": {
+      "outputs": [],
+      "inputs": ["src/**"],
+      "dependsOn": ["build"]
+    },
+    "thirdweb#e2e": {
       "outputs": [],
       "inputs": ["src/**", "e2e/**"],
       "dependsOn": ["build"]
     },
-    "react#e2e": {
-      "inputs": ["src/**", "playwright/**"],
+    "@thirdweb-dev/react#e2e": {
+      "inputs": ["src/**", "playwright/index.ts", "playwright/index.html"],
       "dependsOn": ["build"]
     },
     "lint": {