Solana integration

apps/demo_web/package.json

@@ -23,6 +23,7 @@
     "@oko-wallet/oko-sdk-core": "^0.0.6-rc.130",
     "@oko-wallet/oko-sdk-cosmos": "^0.0.6-rc.157",
     "@oko-wallet/oko-sdk-eth": "^0.0.6-rc.145",
+    "@oko-wallet/oko-sdk-sol": "workspace:*",
     "@oko-wallet/stdlib-js": "^0.0.2-rc.44",
     "@types/node": "^24.10.1",
     "@types/react": "^19.2.7",

apps/demo_web/src/components/oko_provider/use_oko.ts

@@ -5,14 +5,19 @@ import { useSDKState } from "@oko-wallet-demo-web/state/sdk";
 export function useInitOko() {
   const initOkoCosmos = useSDKState((state) => state.initOkoCosmos);
   const initOkoEth = useSDKState((state) => state.initOkoEth);
+  const initOkoSol = useSDKState((state) => state.initOkoSol);
 
   const isInitialized = useSDKState(
-    (state) => state.oko_cosmos !== null && state.oko_eth !== null,
+    (state) =>
+      state.oko_cosmos !== null &&
+      state.oko_eth !== null &&
+      state.oko_sol !== null,
   );
 
   useEffect(() => {
     initOkoCosmos();
     initOkoEth();
+    initOkoSol();
   }, []);
 
   return { isInitialized };

apps/demo_web/src/components/preview_panel/preview_panel.tsx

@@ -11,12 +11,17 @@ import { CosmosOnchainSignWidget } from "@oko-wallet-demo-web/components/widgets
 import { CosmosOffChainSignWidget } from "@oko-wallet-demo-web/components/widgets/cosmos_offchain_sign_widget/cosmos_offchain_sign_widget";
 import { EthereumOnchainSignWidget } from "@oko-wallet-demo-web/components/widgets/ethereum_onchain_sign_widget/ethereum_onchain_sign_widget";
 import { EthereumOffchainSignWidget } from "@oko-wallet-demo-web/components/widgets/ethereum_offchain_sign_widget/ethereum_offchain_sign_widget";
+import { SolanaOffchainSignWidget } from "@oko-wallet-demo-web/components/widgets/solana_offchain_sign_widget/solana_offchain_sign_widget";
+import { SolanaOnchainSignWidget } from "@oko-wallet-demo-web/components/widgets/solana_onchain_sign_widget/solana_onchain_sign_widget";
 import { useUserInfoState } from "@oko-wallet-demo-web/state/user_info";
 import { useSDKState } from "@oko-wallet-demo-web/state/sdk";
 
 export const PreviewPanel: React.FC = () => {
   const isLazyInitialized = useSDKState(
-    (st) => st.isCosmosLazyInitialized && st.isEthLazyInitialized,
+    (st) =>
+      st.isCosmosLazyInitialized &&
+      st.isEthLazyInitialized &&
+      st.isSolLazyInitialized,
   );
 
   const isSignedIn = useUserInfoState((state) => state.isSignedIn);
@@ -42,6 +47,12 @@ export const PreviewPanel: React.FC = () => {
                   <CosmosOnchainSignWidget />
                 </div>
               )}
+              {isSignedIn && (
+                <div className={styles.col}>
+                  <SolanaOffchainSignWidget />
+                  <SolanaOnchainSignWidget />
+                </div>
+              )}
             </>
           ) : (
             <div className={styles.col}>

apps/demo_web/src/components/widgets/solana_offchain_sign_widget/solana_offchain_sign_widget.tsx

@@ -0,0 +1,36 @@
+import { SolanaIcon } from "@oko-wallet/oko-common-ui/icons/solana_icon";
+
+import { SignWidget } from "@oko-wallet-demo-web/components/widgets/sign_widget/sign_widget";
+import { useSDKState } from "@oko-wallet-demo-web/state/sdk";
+
+export const SolanaOffchainSignWidget = () => {
+  const okoSol = useSDKState((state) => state.oko_sol);
+
+  const handleClickSolOffchainSign = async () => {
+    if (okoSol === null) {
+      throw new Error("okoSol is not initialized");
+    }
+
+    // Connect if not already connected
+    if (!okoSol.connected) {
+      await okoSol.connect();
+    }
+
+    const message = "Welcome to Oko! Try generating an Ed25519 MPC signature.";
+    const messageBytes = new TextEncoder().encode(message);
+
+    const signature = await okoSol.signMessage(messageBytes);
+
+    // Log signature for demo purposes
+    console.log("Solana signature:", Buffer.from(signature).toString("hex"));
+  };
+
+  return (
+    <SignWidget
+      chain="Solana"
+      chainIcon={<SolanaIcon />}
+      signType="offchain"
+      signButtonOnClick={handleClickSolOffchainSign}
+    />
+  );
+};

apps/demo_web/src/components/widgets/solana_onchain_sign_widget/solana_onchain_sign_widget.module.scss

@@ -0,0 +1,3 @@
+.checkboxContainer {
+  margin: -4px 0 20px 20px;
+}

apps/demo_web/src/components/widgets/solana_onchain_sign_widget/solana_onchain_sign_widget.tsx

@@ -0,0 +1,132 @@
+import { useCallback, useState } from "react";
+import {
+  Connection,
+  PublicKey,
+  SystemProgram,
+  Transaction,
+  TransactionMessage,
+  VersionedTransaction,
+  LAMPORTS_PER_SOL,
+} from "@solana/web3.js";
+import { SolanaIcon } from "@oko-wallet/oko-common-ui/icons/solana_icon";
+import { Checkbox } from "@oko-wallet/oko-common-ui/checkbox";
+
+import styles from "./solana_onchain_sign_widget.module.scss";
+import { SignWidget } from "@oko-wallet-demo-web/components/widgets/sign_widget/sign_widget";
+import { useSDKState } from "@oko-wallet-demo-web/state/sdk";
+
+const SOLANA_RPC_URL = "https://api.devnet.solana.com";
+
+export const SolanaOnchainSignWidget = () => {
+  const okoSol = useSDKState((state) => state.oko_sol);
+  const [isLegacy, setIsLegacy] = useState(false);
+
+  const handleClickSolOnchainSignV0 = useCallback(async () => {
+    if (okoSol === null) {
+      throw new Error("okoSol is not initialized");
+    }
+
+    if (!okoSol.connected) {
+      await okoSol.connect();
+    }
+
+    if (!okoSol.publicKey) {
+      throw new Error("No public key available");
+    }
+
+    const connection = new Connection(SOLANA_RPC_URL);
+
+    const toAddress = new PublicKey(
+      "11111111111111111111111111111111",
+    );
+
+    const { blockhash } = await connection.getLatestBlockhash();
+
+    const instructions = [
+      SystemProgram.transfer({
+        fromPubkey: okoSol.publicKey,
+        toPubkey: toAddress,
+        lamports: 0.001 * LAMPORTS_PER_SOL,
+      }),
+    ];
+
+    const messageV0 = new TransactionMessage({
+      payerKey: okoSol.publicKey,
+      recentBlockhash: blockhash,
+      instructions,
+    }).compileToV0Message();
+
+    const versionedTransaction = new VersionedTransaction(messageV0);
+
+    const signedTransaction =
+      await okoSol.signTransaction(versionedTransaction);
+
+    console.log(
+      "Solana v0 signed transaction:",
+      Buffer.from(signedTransaction.signatures[0]).toString("hex"),
+    );
+  }, [okoSol]);
+
+  const handleClickSolOnchainSignLegacy = useCallback(async () => {
+    if (okoSol === null) {
+      throw new Error("okoSol is not initialized");
+    }
+
+    if (!okoSol.connected) {
+      await okoSol.connect();
+    }
+
+    if (!okoSol.publicKey) {
+      throw new Error("No public key available");
+    }
+
+    const connection = new Connection(SOLANA_RPC_URL);
+
+    const toAddress = new PublicKey(
+      "11111111111111111111111111111111",
+    );
+
+    const transaction = new Transaction().add(
+      SystemProgram.transfer({
+        fromPubkey: okoSol.publicKey,
+        toPubkey: toAddress,
+        lamports: 0.001 * LAMPORTS_PER_SOL,
+      }),
+    );
+
+    const { blockhash } = await connection.getLatestBlockhash();
+    transaction.recentBlockhash = blockhash;
+    transaction.feePayer = okoSol.publicKey;
+
+    const signedTransaction = await okoSol.signTransaction(transaction);
+
+    console.log(
+      "Solana legacy signed transaction:",
+      signedTransaction.signatures.map((sig) =>
+        sig.signature ? Buffer.from(sig.signature).toString("hex") : null,
+      ),
+    );
+  }, [okoSol]);
+
+  return (
+    <SignWidget
+      chain="Solana"
+      chainIcon={<SolanaIcon />}
+      signType="onchain"
+      signButtonOnClick={
+        isLegacy ? handleClickSolOnchainSignLegacy : handleClickSolOnchainSignV0
+      }
+      renderBottom={() => (
+        <div className={styles.checkboxContainer}>
+          <Checkbox
+            size="sm"
+            id="set-tx-version"
+            checked={isLegacy}
+            onChange={() => setIsLegacy((prevState) => !prevState)}
+            label="Legacy Transaction"
+          />
+        </div>
+      )}
+    />
+  );
+};

apps/demo_web/src/state/sdk.ts

@@ -6,6 +6,10 @@ import {
   OkoEthWallet,
   type OkoEthWalletInterface,
 } from "@oko-wallet/oko-sdk-eth";
+import {
+  OkoSolWallet,
+  type OkoSolWalletInterface,
+} from "@oko-wallet/oko-sdk-sol";
 import { create } from "zustand";
 import { combine } from "zustand/middleware";
 
@@ -14,28 +18,37 @@ import { useUserInfoState } from "@oko-wallet-demo-web/state/user_info";
 interface SDKState {
   oko_eth: OkoEthWalletInterface | null;
   oko_cosmos: OkoCosmosWalletInterface | null;
+  oko_sol: OkoSolWalletInterface | null;
 
   isEthInitializing: boolean;
   isEthLazyInitialized: boolean;
 
   isCosmosInitializing: boolean;
   isCosmosLazyInitialized: boolean;
+
+  isSolInitializing: boolean;
+  isSolLazyInitialized: boolean;
 }
 
 interface SDKActions {
   initOkoEth: () => Promise<OkoEthWalletInterface | null>;
   initOkoCosmos: () => Promise<OkoCosmosWalletInterface | null>;
+  initOkoSol: () => Promise<OkoSolWalletInterface | null>;
 }
 
 const initialState: SDKState = {
   oko_eth: null,
   oko_cosmos: null,
+  oko_sol: null,
 
   isEthInitializing: false,
   isEthLazyInitialized: false,
 
   isCosmosInitializing: false,
   isCosmosLazyInitialized: false,
+
+  isSolInitializing: false,
+  isSolLazyInitialized: false,
 };
 
 export const useSDKState = create(
@@ -127,16 +140,76 @@ export const useSDKState = create(
         return null;
       }
     },
+    initOkoSol: async () => {
+      const state = get();
+
+      if (state.oko_sol || state.isSolInitializing) {
+        console.log("Sol SDK already initialized or initializing, skipping...");
+        return state.oko_sol;
+      }
+
+      try {
+        console.log("Initializing Sol SDK...");
+        set({
+          isSolInitializing: true,
+        });
+
+        const initRes = OkoSolWallet.init({
+          api_key:
+            "72bd2afd04374f86d563a40b814b7098e5ad6c7f52d3b8f84ab0c3d05f73ac6c",
+          sdk_endpoint: process.env.NEXT_PUBLIC_OKO_SDK_ENDPOINT,
+        });
+
+        if (initRes.success) {
+          console.log("Sol SDK initialized");
+
+          const okoSol = initRes.data;
+          set({
+            oko_sol: okoSol,
+            isSolInitializing: false,
+          });
+
+          try {
+            await okoSol.waitUntilInitialized;
+            console.log("Sol SDK lazy initialized");
+            set({
+              isSolLazyInitialized: true,
+            });
+          } catch (e) {
+            console.error("Sol SDK lazy init failed:", e);
+            set({ isSolLazyInitialized: true }); // Still mark as done to not block
+          }
+
+          return okoSol;
+        } else {
+          console.error("Sol sdk init fail, err: %s", initRes.err);
+          set({ isSolInitializing: false, isSolLazyInitialized: true });
+
+          return null;
+        }
+      } catch (e) {
+        console.error("Sol SDK init error:", e);
+        set({ isSolInitializing: false, isSolLazyInitialized: true });
+        return null;
+      }
+    },
   })),
 );
 
 function setupCosmosListener(cosmosSDK: OkoCosmosWalletInterface) {
   const setUserInfo = useUserInfoState.getState().setUserInfo;
 
   if (cosmosSDK) {
+    console.log("[Demo] Setting up Cosmos accountsChanged listener");
     cosmosSDK.on({
       type: "accountsChanged",
       handler: ({ authType, email, publicKey, name }) => {
+        console.log("[Demo] accountsChanged event received:", {
+          authType,
+          email,
+          publicKey: publicKey ? "exists" : "null",
+          name,
+        });
         setUserInfo({
           authType: authType || null,
           email: email || null,

apps/docs_web/docs/v0/sdk-usage/sdk-overview.md

@@ -23,6 +23,9 @@ npm install @oko-wallet/oko-sdk-cosmos
 # For Ethereum/EVM chains
 npm install @oko-wallet/oko-sdk-eth
 
+# For Solana
+npm install @oko-wallet/oko-sdk-sol
+
 # Core SDK (for custom integration)
 npm install @oko-wallet/oko-sdk-core
 ```
@@ -56,10 +59,25 @@ const ethWallet = initRes.data;
 const provider = await ethWallet.getEthereumProvider();
 ```
 
+### Solana
+
+```typescript
+import { OkoSolWallet } from "@oko-wallet/oko-sdk-sol";
+
+const initRes = OkoSolWallet.init(config);
+if (!initRes.success) {
+  throw new Error(`Solana wallet initialization failed: ${initRes.err}`);
+}
+
+const solWallet = initRes.data;
+await solWallet.connect();
+```
+
 ## Next Steps
 
 - **[Cosmos Integration](./cosmos-integration)** - Complete Cosmos setup
 - **[Ethereum Integration](./ethereum-integration)** - Complete Ethereum setup
+- **[Solana Integration](./solana-integration)** - Complete Solana setup
 - **[React Integration](./react-integration)** - React patterns
 - **[RainbowKit Integration](./rainbow-kit-integration)** - RainbowKit
   integration