feat: use canvas wallet adapter

Author: jimmymadrigal

package-lock.json

@@ -12,7 +12,10 @@
   },
   "dependencies": {
     "@dialectlabs/blinks": "^0.5.0",
-    "@dscvr-one/canvas-client-sdk": "^1.0.7",
+    "@dscvr-one/canvas-client-sdk": "^1.1.0",
+    "@dscvr-one/canvas-wallet-adapter": "^1.0.1",
+    "@solana/wallet-adapter-base": "^0.9.23",
+    "@solana/wallet-adapter-react": "^0.15.35",
     "@solana/web3.js": "^1.95.2",
     "base58": "^2.0.1",
     "react": "^18.3.1",

package.json

@@ -1,60 +1,53 @@
-import { useEffect, useRef, useState } from "react";
-import "./App.css";
-import {
-  Action,
-  ActionContainer,
-} from "@dialectlabs/blinks";
+import { useEffect, useRef, useState } from 'react';
+import './App.css';
+import { Action, ActionContainer } from '@dialectlabs/blinks';
 import '@dialectlabs/blinks/index.css';
-import './blink.css'
-import { CanvasAdapter, isIframe } from "./canvas-adapter";
-import { CanvasClient } from "@dscvr-one/canvas-client-sdk";
+import './blink.css';
+import { canvasClient } from './canvas-client';
+import { useCanvasAdapter } from './use-canvas-adapter';
 
 const App = () => {
   const [action, setAction] = useState<Action | null>(null);
-  const [_, setIsInIframe] = useState(false);
-  const [websiteUrl, setWebsiteUrl] = useState("");
-  const [websiteText, setWebsiteText] = useState("");
+  const [websiteUrl, setWebsiteUrl] = useState('');
+  const [websiteText, setWebsiteText] = useState('');
   const containerRef = useRef<HTMLDivElement>(null);
-  const canvasClientRef = useRef<CanvasClient | undefined>();
-  
-  useEffect(() => {
-    const iframe = isIframe();
-
-    if(iframe) {
-      canvasClientRef.current = new CanvasClient();
-    };
+  const { initialize, canvasAdapterRef } = useCanvasAdapter();
 
-    setIsInIframe(iframe);
-    const adapter = iframe ? new CanvasAdapter() : undefined;
+  useEffect(() => {
+    if (canvasClient) {
+      initialize();
+    }
 
     const fetchAction = async () => {
       const url = new URL(window.location.href);
-      
-      const actionParam = url.searchParams.get('action') ?? 'https://blink-chat.xyz/api/actions/chat';
-      
+
+      const actionParam =
+        url.searchParams.get('action') ??
+        'https://blink-chat.xyz/api/actions/chat';
+
       if (actionParam) {
         try {
           const actionUrl = new URL(actionParam);
-          
+
           setWebsiteUrl(actionUrl.toString());
           setWebsiteText(actionUrl.host);
 
           const action = await Action.fetch(
             actionParam,
-            adapter
+            canvasAdapterRef.current
           );
           setAction(action);
         } catch (error) {
-          console.error("Invalid action URL:", error);
+          console.error('Invalid action URL:', error);
         }
       } else {
-        console.error("No action parameter provided in URL");
+        console.error('No action parameter provided in URL');
       }
     };
     fetchAction();
 
     const resizeObserver = new ResizeObserver((_) => {
-      canvasClientRef?.current?.resize();
+      canvasClient.resize();
     });
 
     if (containerRef.current) {
@@ -70,16 +63,16 @@ const App = () => {
 
   const exampleCallbacks = {
     onActionMount: (action: any, url: any, actionState: any) => {
-      console.log("Action mounted:", action, url, actionState);
+      console.log('Action mounted:', action, url, actionState);
     },
   };
 
-  const exampleSecurityLevel = "only-trusted";
+  const exampleSecurityLevel = 'only-trusted';
 
   const containerStyle = {
     maxWidth: '450px',
     margin: '0 auto',
-    width: '100%'
+    width: '100%',
   };
 
   return (
@@ -98,4 +91,4 @@ const App = () => {
   );
 };
 
-export default App;
+export default App;

src/App.tsx

@@ -0,0 +1,21 @@
+import { CanvasClient } from '@dscvr-one/canvas-client-sdk';
+import { registerCanvasWallet } from '@dscvr-one/canvas-wallet-adapter';
+import type { WalletName } from '@solana/wallet-adapter-base';
+
+export const checkIframe = () => {
+  try {
+    return window.self !== window.top;
+  } catch (e) {
+    return true;
+  }
+};
+
+export const isIframe = checkIframe();
+export const canvasClient = isIframe ? new CanvasClient() : undefined;
+const canvasWallet = canvasClient
+  ? registerCanvasWallet(canvasClient)
+  : undefined;
+
+export const CANVAS_WALLET_NAME = canvasWallet
+  ? (canvasWallet.name as WalletName)
+  : undefined;

src/canvas-adapter.ts

@@ -1,10 +1,20 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import {
+  WalletProvider,
+  ConnectionProvider,
+} from '@solana/wallet-adapter-react';
+import App from './App.tsx';
+import './index.css';
+
+const RPC_ENDPOINT = 'https://api.mainnet-beta.solana.com';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-)
+    <WalletProvider wallets={[]}>
+      <ConnectionProvider endpoint={RPC_ENDPOINT}>
+        <App />
+      </ConnectionProvider>
+    </WalletProvider>
+  </React.StrictMode>
+);