[React] Expose simple provider and useSDK hook for solana (#179)

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

.changeset/gorgeous-yaks-mate.md

@@ -0,0 +1,5 @@
+---
+"@thirdweb-dev/react": patch
+---
+
+Expose simple provider and useSDK hooks for Solana

package.json

@@ -26,7 +26,8 @@
     "version-packages": "changeset version",
     "release": "node ./scripts/pre-release.mjs && changeset publish",
     "version-packages:nightly": "changeset version --snapshot nightly",
-    "release:nightly": "node ./scripts/pre-release.mjs && changeset publish --tag nightly"
+    "release:nightly": "node ./scripts/pre-release.mjs && changeset publish --tag nightly",
+    "push": "turbo run push"
   },
   "preconstruct": {
     "packages": [
@@ -47,5 +48,8 @@
   },
   "manypkg": {
     "defaultBranch": "main"
+  },
+  "devDependencies": {
+    "yalc": "^1.0.0-pre.53"
   }
 }

packages/react/package.json

@@ -8,9 +8,15 @@
   "types": "dist/thirdweb-dev-react.cjs.d.ts",
   "module": "dist/thirdweb-dev-react.esm.js",
   "files": [
-    "dist/**/*",
-    "patches/**/*"
+    "dist/",
+    "solana/"
   ],
+  "preconstruct": {
+    "entrypoints": [
+      "index.ts",
+      "solana/index.ts"
+    ]
+  },
   "private": false,
   "scripts": {
     "format": "prettier --write 'src/**/*'",
@@ -22,7 +28,8 @@
     "generate-snippets": "node ./scripts/generate-snippets.mjs && node ./scripts/generate-feature-snippets.mjs",
     "build": "tsc && preconstruct build",
     "e2e": "yarn test-ct",
-    "test-ct": "playwright test -c playwright-ct.config.ts"
+    "test-ct": "playwright test -c playwright-ct.config.ts",
+    "push": "yalc push"
   },
   "sideEffects:": false,
   "devDependencies": {
@@ -36,6 +43,10 @@
     "@playwright/experimental-ct-react": "1.25.1",
     "@playwright/test": "1.25.1",
     "@preconstruct/cli": "^2.2.1",
+    "@solana/wallet-adapter-base": "^0.9.17",
+    "@solana/wallet-adapter-react": "^0.15.19",
+    "@solana/wallet-adapter-wallets": "^0.19.0",
+    "@solana/web3.js": "^1.63.0",
     "@thirdweb-dev/sdk": "*",
     "@types/color": "^3.0.3",
     "@types/mime": "^3.0.1",
@@ -75,7 +86,12 @@
     "wagmi": "^0.2.28"
   },
   "peerDependencies": {
+    "@solana/wallet-adapter-base": "^0.9.17",
+    "@solana/wallet-adapter-react": "^0.15.19",
+    "@solana/wallet-adapter-wallets": "^0.19.0",
+    "@solana/web3.js": "^1.63.0",
     "@thirdweb-dev/sdk": "*",
+    "@thirdweb-dev/solana": "*",
     "ethers": ">=5.5.1",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
@@ -83,5 +99,22 @@
   "resolutions": {
     "ansi-regex": "^6.0.1",
     "typescript": "^4.6.2"
+  },
+  "peerDependenciesMeta": {
+    "@solana/wallet-adapter-base": {
+      "optional": true
+    },
+    "@solana/wallet-adapter-react": {
+      "optional": true
+    },
+    "@solana/wallet-adapter-wallets": {
+      "optional": true
+    },
+    "@solana/web3.js": {
+      "optional": true
+    },
+    "@thirdweb-dev/solana": {
+      "optional": true
+    }
   }
 }

packages/react/solana/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/thirdweb-dev-react-solana.cjs.js",
+  "module": "dist/thirdweb-dev-react-solana.esm.js"
+}

packages/react/src/solana/hooks/useSDK.tsx

@@ -0,0 +1,6 @@
+import { ThirdwebSDKContext } from "../providers/ThirdwebSDKProvider";
+import { useContext } from "react";
+
+export function useSDK() {
+  return useContext(ThirdwebSDKContext);
+}

packages/react/src/solana/index.ts

@@ -0,0 +1,5 @@
+// Providers
+export * from "./providers/ThirdwebSDKProvider";
+export * from "./providers/ThirdwebProvider";
+// Hooks
+export * from "./hooks/useSDK";

packages/react/src/solana/providers/ThirdwebProvider.tsx

@@ -0,0 +1,66 @@
+import { ThirdwebSDKProvider } from "./ThirdwebSDKProvider";
+import type { WalletAdapter } from "@solana/wallet-adapter-base";
+import {
+  ConnectionProvider,
+  useConnection,
+  useWallet,
+  WalletProvider,
+} from "@solana/wallet-adapter-react";
+import { PhantomWalletAdapter } from "@solana/wallet-adapter-wallets";
+import { getUrlForNetwork, Network } from "@thirdweb-dev/solana";
+import { PropsWithChildren } from "react";
+
+interface ThirdwebProviderProps {
+  endpoint: Network;
+  wallets?: WalletAdapter[];
+  autoConnect?: boolean;
+}
+
+const DEFAULT_WALLETS = [new PhantomWalletAdapter()];
+
+/**
+ * Gives access to the ThirdwebSDK instance and other useful hooks to the rest of the app.
+ * Requires to be wrapped with a ConnectionProvider and a WalletProvider from @solana/wallet-adapter-react.
+ * @example
+ * ```tsx
+ * import { ThirdwebProvider } from "@thirdweb-dev/react/solana";
+ *
+ * const App = () => {
+ *  return (
+ *     <ThirdwebProvider endpoint="devnet">
+ *       <YourApp />
+ *     </ThirdwebProvider>
+ * )};
+ * ```
+ * @beta
+ */
+export const ThirdwebProvider: React.FC<
+  PropsWithChildren<ThirdwebProviderProps>
+> = ({ endpoint, wallets, autoConnect, children }) => {
+  const clusterUrl = getUrlForNetwork(endpoint);
+  return (
+    <ConnectionProvider endpoint={clusterUrl}>
+      <WalletProvider
+        wallets={wallets || DEFAULT_WALLETS}
+        autoConnect={autoConnect || true}
+      >
+        <ThirdwebWrapperProvider>{children}</ThirdwebWrapperProvider>
+      </WalletProvider>
+    </ConnectionProvider>
+  );
+};
+
+/**
+ * @internal
+ */
+export const ThirdwebWrapperProvider: React.FC<PropsWithChildren> = ({
+  children,
+}) => {
+  const { connection } = useConnection();
+  const wallet = useWallet();
+  return (
+    <ThirdwebSDKProvider connection={connection} wallet={wallet}>
+      {children}
+    </ThirdwebSDKProvider>
+  );
+};

packages/react/src/solana/providers/ThirdwebSDKProvider.tsx

@@ -0,0 +1,68 @@
+import type { WalletContextState } from "@solana/wallet-adapter-react";
+import type { Connection } from "@solana/web3.js";
+import { ThirdwebSDK } from "@thirdweb-dev/solana";
+import {
+  createContext,
+  FC,
+  PropsWithChildren,
+  useEffect,
+  useState,
+} from "react";
+
+interface ThirdwebSDKProviderProps {
+  connection: Connection;
+  wallet?: WalletContextState;
+}
+
+/**
+ * Gives access to the ThirdwebSDK instance and other useful hooks to the rest of the app.
+ * Requires to be wrapped with a ConnectionProvider and a WalletProvider from @solana/wallet-adapter-react.
+ * @example
+ * ```tsx
+ * import {
+ *   useConnection,
+ *   useWallet,
+ * } from "@solana/wallet-adapter-react";
+ * import { ThirdwebProvider } from "@thirdweb-dev/react/solana";
+ *
+ * const ThirdwebApp = () => {
+ *  const { connection } = useConnection();
+ *  const wallet = useWallet();
+ *  return (
+ *    <ThirdwebSDKProvider connection={connection} wallet={wallet}>
+ *      <YourApp />
+ *    </ThirdwebSDKProvider>
+ * )};
+ * ```
+ */
+export const ThirdwebSDKProvider: FC<
+  PropsWithChildren<ThirdwebSDKProviderProps>
+> = ({ children, connection, wallet }) => {
+  const [sdk, setSDK] = useState<ThirdwebSDK | null>(null);
+
+  useEffect(() => {
+    if (connection) {
+      setSDK(new ThirdwebSDK(connection));
+    } else {
+      setSDK(null);
+    }
+  }, [connection]);
+
+  useEffect(() => {
+    if (sdk) {
+      if (wallet?.publicKey) {
+        sdk.wallet.connect(wallet);
+      } else {
+        sdk.wallet.disconnect();
+      }
+    }
+  }, [sdk, wallet]);
+
+  return (
+    <ThirdwebSDKContext.Provider value={sdk}>
+      {children}
+    </ThirdwebSDKContext.Provider>
+  );
+};
+
+export const ThirdwebSDKContext = createContext<ThirdwebSDK | null>(null);

packages/sdk/package.json

@@ -20,7 +20,8 @@
     "build": "tsc && preconstruct build",
     "test:all": "SWC_NODE_PROJECT=./tsconfig.test.json mocha --timeout 30000 --parallel './test/**/*.test.ts'",
     "test": "make test",
-    "test:single": "SWC_NODE_PROJECT=./tsconfig.test.json mocha --timeout 30000"
+    "test:single": "SWC_NODE_PROJECT=./tsconfig.test.json mocha --timeout 30000",
+    "push": "yalc push"
   },
   "devDependencies": {
     "@esbuild-plugins/node-modules-polyfill": "^0.1.4",

packages/solana/package.json

@@ -18,7 +18,8 @@
     "node:stop": "amman stop",
     "test:all": "SWC_NODE_PROJECT=./tsconfig.test.json mocha --timeout 30000 --parallel './test/**/*.test.ts'",
     "test": "make test",
-    "test:single": "SWC_NODE_PROJECT=./tsconfig.test.json mocha --timeout 30000"
+    "test:single": "SWC_NODE_PROJECT=./tsconfig.test.json mocha --timeout 30000",
+    "push": "yalc push"
   },
   "files": [
     "dist/",

packages/solana/src/index.ts

@@ -14,6 +14,8 @@ export * from "./types/index";
 export * from "./types/common";
 export * from "./types/contracts";
 export * from "./types/contracts/nft-drop";
+// utils
+export * from "./utils/urls";
 
 //schema for dashboard use
 export {

packages/storage/package.json

@@ -15,7 +15,8 @@
     "build": "tsc && preconstruct build",
     "test:all": "SWC_NODE_PROJECT=./tsconfig.test.json mocha --timeout 30000 --parallel './test/**/*.test.ts'",
     "test": "yarn test:all",
-    "test:single": "SWC_NODE_PROJECT=./tsconfig.test.json mocha --timeout 30000"
+    "test:single": "SWC_NODE_PROJECT=./tsconfig.test.json mocha --timeout 30000",
+    "push": "yalc push"
   },
   "files": [
     "dist/"

turbo.json

@@ -42,6 +42,10 @@
     },
     "clean": {
       "cache": false
+    },
+    "push": {
+      "cache": false,
+      "dependsOn": ["build"]
     }
   }
 }