Merge pull request #7 from dialectlabs/feature/improve-react-api

Feature/improve react api

Author: fsher

bun.lockb

@@ -21,6 +21,11 @@
       "require": "./dist/ext/twitter.cjs",
       "types": "./dist/ext/twitter.d.ts"
     },
+    "./react": {
+      "import": "./dist/react/index.js",
+      "require": "./dist/react/index.cjs",
+      "types": "./dist/react/index.d.ts"
+    },
     ".": {
       "import": "./dist/index.js",
       "require": "./dist/index.cjs",
@@ -50,6 +55,8 @@
     "typescript": "^5.0.0"
   },
   "peerDependencies": {
+    "@solana/wallet-adapter-react": "^0.15.0",
+    "@solana/wallet-adapter-react-ui": "^0.9.0",
     "@solana/web3.js": "^1.91.0",
     "react": ">=18",
     "react-dom": ">=18"

package.json

@@ -14,7 +14,7 @@ export class Action {
   private constructor(
     private readonly _url: string,
     private readonly _data: ActionsSpecGetResponse,
-    private readonly _adapter: ActionAdapter,
+    private _adapter?: ActionAdapter,
   ) {
     // if no links present, fallback to original solana pay spec
     if (!_data.links?.actions) {
@@ -61,14 +61,22 @@ export class Action {
   }
 
   public get adapter() {
+    if (!this._adapter) {
+      throw new Error('No adapter provided');
+    }
+
     return this._adapter;
   }
 
+  public setAdapter(adapter: ActionAdapter) {
+    this._adapter = adapter;
+  }
+
   public resetActions() {
     this._actions.forEach((action) => action.reset());
   }
 
-  static async fetch(apiUrl: string, adapter: ActionAdapter) {
+  static async fetch(apiUrl: string, adapter?: ActionAdapter) {
     const proxyUrl = proxify(apiUrl);
     const response = await fetch(proxyUrl, {
       headers: {

src/api/Action.ts

@@ -30,14 +30,17 @@ export class ActionConfig implements ActionAdapter {
   private connection: Connection;
 
   constructor(
-    rpcUrl: string,
+    rpcUrlOrConnection: string | Connection,
     private adapter: IncomingActionConfig['adapter'],
   ) {
-    if (!rpcUrl) {
-      throw new Error('rpcUrl is required');
+    if (!rpcUrlOrConnection) {
+      throw new Error('rpcUrl or connection is required');
     }
 
-    this.connection = new Connection(rpcUrl, 'confirmed');
+    this.connection =
+      typeof rpcUrlOrConnection === 'string'
+        ? new Connection(rpcUrlOrConnection, 'confirmed')
+        : rpcUrlOrConnection;
   }
 
   async connect(context: ActionContext) {

src/api/ActionConfig.ts

@@ -0,0 +1,4 @@
+'use client';
+export { useAction } from './useAction';
+export { useActionAdapter } from './useActionAdapter';
+export { useActionsRegistryInterval } from './useActionRegistryInterval';

src/react/index.ts

@@ -0,0 +1,39 @@
+'use client';
+import type { Connection } from '@solana/web3.js';
+import { useEffect, useState } from 'react';
+import { Action } from '../api';
+import { useActionAdapter } from './useActionAdapter.ts';
+import { useActionsRegistryInterval } from './useActionRegistryInterval.ts';
+
+interface UseActionOptions {
+  rpcUrlOrConnection: string | Connection;
+  refreshInterval?: number;
+}
+
+export function useAction(
+  actionUrl: string,
+  { rpcUrlOrConnection, refreshInterval }: UseActionOptions,
+) {
+  const { isRegistryLoaded } = useActionsRegistryInterval({ refreshInterval });
+  const { adapter } = useActionAdapter(rpcUrlOrConnection);
+  const [action, setAction] = useState<Action | null>(null);
+
+  useEffect(() => {
+    setAction(null);
+    if (!isRegistryLoaded) {
+      return;
+    }
+    Action.fetch(actionUrl)
+      .then(setAction)
+      .catch((e) => {
+        console.error('Failed to fetch action', e);
+        setAction(null);
+      });
+  }, [actionUrl, isRegistryLoaded]);
+
+  useEffect(() => {
+    action?.setAdapter(adapter);
+  }, [action, adapter]);
+
+  return { action };
+}

src/react/useAction.ts

@@ -0,0 +1,53 @@
+'use client';
+import { useWallet } from '@solana/wallet-adapter-react';
+import { useWalletModal } from '@solana/wallet-adapter-react-ui';
+import { Connection, VersionedTransaction } from '@solana/web3.js';
+import { useMemo } from 'react';
+import { ActionConfig } from '../api';
+
+/**
+ * Hook to create an action adapter using solana's wallet adapter.
+ *
+ * Be sure to call `action.setAdapter` with the to update the adapter, every time the instance updates.
+ *
+ * @param rpcUrlOrConnection
+ * @see {Action}
+ */
+export function useActionAdapter(rpcUrlOrConnection: string | Connection) {
+  const wallet = useWallet();
+  const walletModal = useWalletModal();
+
+  const finalConnection = useMemo(() => {
+    return typeof rpcUrlOrConnection === 'string'
+      ? new Connection(rpcUrlOrConnection, 'confirmed')
+      : rpcUrlOrConnection;
+  }, [rpcUrlOrConnection]);
+
+  const adapter = useMemo(() => {
+    return new ActionConfig(finalConnection, {
+      connect: async () => {
+        try {
+          await wallet.connect();
+        } catch {
+          walletModal.setVisible(true);
+          return null;
+        }
+
+        return wallet.publicKey?.toBase58() ?? null;
+      },
+      signTransaction: async (txData: string) => {
+        try {
+          const tx = await wallet.sendTransaction(
+            VersionedTransaction.deserialize(Buffer.from(txData, 'base64')),
+            finalConnection,
+          );
+          return { signature: tx };
+        } catch {
+          return { error: 'Signing failed.' };
+        }
+      },
+    });
+  }, [finalConnection, wallet, walletModal]);
+
+  return { adapter };
+}

src/react/useActionAdapter.ts

@@ -0,0 +1,34 @@
+'use client';
+import { useEffect, useState } from 'react';
+import { ActionsRegistry } from '../api';
+
+const TEN_MINUTES_MS = 10 * 60 * 1000;
+
+export function useActionsRegistryInterval({
+  refreshInterval = TEN_MINUTES_MS,
+}: {
+  refreshInterval?: number;
+} = {}) {
+  const [isRegistryLoaded, setRegistryLoaded] = useState(false);
+  const [isLoading, setLoading] = useState(false);
+
+  useEffect(() => {
+    const refresh = async () => {
+      await ActionsRegistry.getInstance().init();
+      setRegistryLoaded(true);
+    };
+
+    if (!isRegistryLoaded && !isLoading) {
+      setLoading(true);
+      refresh().then(() => setLoading(false));
+    }
+
+    const interval = setInterval(refresh, refreshInterval);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [isRegistryLoaded, refreshInterval]);
+
+  return { isRegistryLoaded };
+}

src/react/useActionRegistryInterval.ts

@@ -1,13 +1,24 @@
-import { defineConfig } from 'tsup';
+import { defineConfig, type Options } from 'tsup';
 
-export default defineConfig({
-  entry: ['src/index.ts', 'src/index.css', 'src/ext/twitter.tsx'],
+const commonCfg: Partial<Options> = {
   splitting: true,
   sourcemap: false,
   clean: true,
-  dts: {
-    entry: ['src/index.ts', 'src/ext/twitter.tsx'],
-  },
   format: ['cjs', 'esm'],
   target: ['esnext'],
-});
+};
+
+export default defineConfig([
+  {
+    ...commonCfg,
+    entry: [
+      'src/index.ts',
+      'src/index.css',
+      'src/ext/twitter.tsx',
+      'src/react/index.ts',
+    ],
+    dts: {
+      entry: ['src/index.ts', 'src/ext/twitter.tsx', 'src/react/index.ts'],
+    },
+  },
+]);