WIP: update hooks api (#13)

## Breaking changes:
- `useAction` hook doesn't use adapter anymore, it accepts `adapter` as a parameter
- `useAction` can resolve websites with `actions.json` and interstitials
- `useActionAdapter` renamed to `useActionSolanaWalletAdapter`
- use `https://actions-registry.dial.to/all` for security registry

Author: zhelezkov

.gitignore

@@ -173,3 +173,5 @@ dist
 
 # Finder (MacOS) folder config
 .DS_Store
+
+.vscode

package.json

@@ -21,10 +21,15 @@
       "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"
+    "./hooks": {
+      "import": "./dist/hooks/index.js",
+      "require": "./dist/hooks/index.cjs",
+      "types": "./dist/hooks/index.d.ts"
+    },
+    "./hooks/solana": {
+      "import": "./dist/hooks/solana/index.js",
+      "require": "./dist/hooks/solana/index.cjs",
+      "types": "./dist/hooks/solana/index.d.ts"
     },
     ".": {
       "import": "./dist/index.js",

src/api/ActionsRegistry.ts

@@ -2,12 +2,16 @@ import { Action } from './Action.ts';
 
 export type LookupType = 'action' | 'website' | 'interstitial';
 
+const DEFAULT_REFRESH_INTERVAL = 10 * 60 * 1000; // 10 minutes
+
 export class ActionsRegistry {
   private static instance: ActionsRegistry | null = null;
   private actionsByHost: Record<string, RegisteredEntity>;
   private websitesByHost: Record<string, RegisteredEntity>;
   private interstitialsByHost: Record<string, RegisteredEntity>;
 
+  private initPromise: Promise<ActionsRegistryConfig> | null = null;
+
   private constructor(config?: ActionsRegistryConfig) {
     this.actionsByHost = config
       ? Object.fromEntries(
@@ -39,7 +43,16 @@ export class ActionsRegistry {
   }
 
   public async init(): Promise<void> {
-    const config = await fetchActionsRegistryConfig();
+    if (this.initPromise !== null) {
+      return;
+    }
+    await this.refresh();
+    setInterval(() => this.refresh(), DEFAULT_REFRESH_INTERVAL);
+  }
+
+  public async refresh(): Promise<void> {
+    this.initPromise = fetchActionsRegistryConfig();
+    const config = await this.initPromise;
     this.actionsByHost = Object.fromEntries(
       config.actions.map((action) => [action.host, action]),
     );
@@ -171,7 +184,7 @@ export const getExtendedInterstitialState = (
 
 async function fetchActionsRegistryConfig(): Promise<ActionsRegistryConfig> {
   try {
-    const response = await fetch('https://actions-registry.dialectapi.to/all');
+    const response = await fetch('https://actions-registry.dial.to/all');
 
     if (!response.ok) {
       console.error(

src/ext/index.ts

@@ -0,0 +1 @@
+export * from './twitter';

src/ext/twitter.tsx

@@ -72,9 +72,7 @@ export function setupTwitterObserver(
   const twitterReactRoot = document.getElementById('react-root')!;
 
   const refreshRegistry = async () => {
-    await ActionsRegistry.getInstance().init();
-
-    setTimeout(refreshRegistry, 1000 * 60 * 10); // every 10 minutes
+    return ActionsRegistry.getInstance().init();
   };
 
   // if we don't have the registry, then we don't show anything

src/react/index.ts src/hooks/index.tssrc/react/index.ts renamed to src/hooks/index.ts

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

src/hooks/solana/index.ts

@@ -0,0 +1 @@
+export { useActionSolanaWalletAdapter } from './useActionSolanaWalletAdapter';

src/react/useActionAdapter.ts …s/solana/useActionSolanaWalletAdapter.tssrc/react/useActionAdapter.ts renamed to src/hooks/solana/useActionSolanaWalletAdapter.ts src/react/useActionAdapter.ts renamed to src/hooks/solana/useActionSolanaWalletAdapter.ts

@@ -3,7 +3,7 @@ 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';
+import { ActionConfig } from '../../api';
 
 /**
  * Hook to create an action adapter using solana's wallet adapter.
@@ -13,7 +13,7 @@ import { ActionConfig } from '../api';
  * @param rpcUrlOrConnection
  * @see {Action}
  */
-export function useActionAdapter(rpcUrlOrConnection: string | Connection) {
+export function useActionSolanaWalletAdapter(rpcUrlOrConnection: string | Connection) {
   const wallet = useWallet();
   const walletModal = useWalletModal();
 

src/hooks/useAction.ts

@@ -0,0 +1,79 @@
+'use client';
+import { useEffect, useState } from 'react';
+import { Action, type ActionAdapter } from '../api';
+import { unfurlUrlToActionApiUrl } from '../utils/url-mapper.ts';
+import { useActionsRegistryInterval } from './useActionRegistryInterval.ts';
+
+interface UseActionOptions {
+  url: string | URL;
+  adapter: ActionAdapter;
+  securityRegistryRefreshInterval?: number;
+}
+
+function useActionApiUrl(url: string | URL) {
+  const [apiUrl, setApiUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    let ignore = false;
+
+    unfurlUrlToActionApiUrl(new URL(url))
+      .then((apiUrl) => {
+        if (ignore) {
+          return;
+        }
+        setApiUrl(apiUrl);
+      })
+      .catch((e) => {
+        console.error('[@dialectlabs/blinks] Failed to unfurl action URL', e);
+        setApiUrl(null);
+      });
+
+    return () => {
+      ignore = true;
+    };
+  }, [url]);
+
+  return { actionApiUrl: apiUrl };
+}
+
+export function useAction({ url, adapter }: UseActionOptions) {
+  const { isRegistryLoaded } = useActionsRegistryInterval();
+  const { actionApiUrl } = useActionApiUrl(url);
+  const [action, setAction] = useState<Action | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    setIsLoading(true);
+    if (!isRegistryLoaded || !actionApiUrl) {
+      return;
+    }
+
+    let ignore = false;
+    Action.fetch(actionApiUrl)
+      .then((action) => {
+        if (ignore) {
+          return;
+        }
+        setAction(action);
+      })
+      .catch((e) => {
+        console.error('[@dialectlabs/blinks] Failed to fetch action', e);
+        setAction(null);
+      })
+      .finally(() => {
+        if (!ignore) {
+          setIsLoading(false);
+        }
+      });
+
+    return () => {
+      ignore = true;
+    };
+  }, [actionApiUrl, isRegistryLoaded]);
+
+  useEffect(() => {
+    action?.setAdapter(adapter);
+  }, [action, adapter]);
+
+  return { action, isLoading };
+}

src/hooks/useActionRegistryInterval.ts

@@ -0,0 +1,17 @@
+'use client';
+import { useEffect, useState } from 'react';
+import { ActionsRegistry } from '../api';
+
+export function useActionsRegistryInterval() {
+  const [isRegistryLoaded, setRegistryLoaded] = useState(false);
+
+  useEffect(() => {
+    ActionsRegistry.getInstance()
+      .init()
+      .then(() => {
+        setRegistryLoaded(true);
+      });
+  }, [isRegistryLoaded]);
+
+  return { isRegistryLoaded };
+}