demo_web: activate Solana (Ed25519) SDK and widgets

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

@@ -7,17 +7,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 initOkoSol = useSDKState((state) => state.initOkoSol);
 
   const isInitialized = useSDKState(
-    (state) => state.oko_cosmos !== null && state.oko_eth !== null,
-    // state.oko_sol !== null,
+    (state) =>
+      state.oko_cosmos !== null &&
+      state.oko_eth !== null &&
+      state.oko_sol !== null,
   );
 
   useEffect(() => {
     initOkoCosmos();
     initOkoEth();
-    // initOkoSol();
+    initOkoSol();
   }, []);
 
   return { isInitialized };

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

@@ -12,18 +12,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";
-// TODO: refactor this @chemonoworld @Ryz0nd
-// import { SolanaOnchainSignWidget } from "@oko-wallet-demo-web/components/widgets/solana_onchain_sign_widget/solana_onchain_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: FC = () => {
   const isLazyInitialized = useSDKState(
-    (st) => st.isCosmosLazyInitialized && st.isEthLazyInitialized,
-    // TODO: refactor this @chemonoworld @Ryz0nd
-    // &&
-    // st.isSolLazyInitialized,
+    (st) =>
+      st.isCosmosLazyInitialized &&
+      st.isEthLazyInitialized &&
+      st.isSolLazyInitialized,
   );
 
   const isSignedIn = useUserInfoState((state) => state.isSignedIn);
@@ -51,9 +50,8 @@ export const PreviewPanel: FC = () => {
               )}
               {isSignedIn && (
                 <div className={styles.col}>
-                  {/* TODO: refactor this @chemonoworld @Ryz0nd */}
-                  {/* <SolanaOffchainSignWidget /> */}
-                  {/* <SolanaOnchainSignWidget /> */}
+                  <SolanaOffchainSignWidget />
+                  <SolanaOnchainSignWidget />
                 </div>
               )}
             </>

apps/demo_web/src/components/widgets/account_widget/account_info_widget.tsx

@@ -16,15 +16,17 @@ import type { LoginMethod } from "@oko-wallet-demo-web/types/login";
 export type AccountInfoWidgetProps = {
   type: LoginMethod;
   email: string;
-  publicKey: string;
+  publicKeySecp256k1: string;
+  publicKeyEd25519: string | null;
   name: string | null;
   onSignOut: () => void;
 };
 
 export const AccountInfoWidget: FC<AccountInfoWidgetProps> = ({
   type,
   email,
-  publicKey,
+  publicKeySecp256k1,
+  publicKeyEd25519,
   name,
   onSignOut,
 }) => {
@@ -56,13 +58,36 @@ export const AccountInfoWidget: FC<AccountInfoWidgetProps> = ({
             color="tertiary"
             className={styles.label}
           >
-            Public Key
+            Public Key (secp256k1)
           </Typography>
           <Typography size="sm" weight="medium" className={styles.publicKey}>
-            {publicKey}
+            {publicKeySecp256k1}
           </Typography>
         </div>
 
+        {publicKeyEd25519 && (
+          <>
+            <Spacing height={12} />
+            <div className={styles.publicKeyCol}>
+              <Typography
+                size="xs"
+                weight="semibold"
+                color="tertiary"
+                className={styles.label}
+              >
+                Public Key (ed25519)
+              </Typography>
+              <Typography
+                size="sm"
+                weight="medium"
+                className={styles.publicKey}
+              >
+                {publicKeyEd25519}
+              </Typography>
+            </div>
+          </>
+        )}
+
         <Spacing height={12} />
 
         <div className={styles.signOutRow}>

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

@@ -28,7 +28,10 @@ export const AccountWidget: FC<AccountWidgetProps> = () => {
     status: "ready",
   });
   const email = useUserInfoState((state) => state.email);
-  const publicKey = useUserInfoState((state) => state.publicKey);
+  const publicKeySecp256k1 = useUserInfoState(
+    (state) => state.publicKeySecp256k1,
+  );
+  const publicKeyEd25519 = useUserInfoState((state) => state.publicKeyEd25519);
   const name = useUserInfoState((state) => state.name);
   const authType = useUserInfoState((state) => state.authType);
   const isSignedIn = useUserInfoState((state) => state.isSignedIn);
@@ -118,7 +121,8 @@ export const AccountWidget: FC<AccountWidgetProps> = () => {
       <AccountInfoWidget
         type={displayLoginMethod}
         email={email || ""}
-        publicKey={publicKey || ""}
+        publicKeySecp256k1={publicKeySecp256k1 || ""}
+        publicKeyEd25519={publicKeyEd25519}
         name={name}
         onSignOut={handleSignOut}
       />

apps/demo_web/src/components/widgets/address_widget/address_row.tsx

@@ -4,10 +4,18 @@ import { Tooltip } from "@oko-wallet/oko-common-ui/tooltip";
 
 import styles from "./address_row.module.scss";
 
+const chainConfig: Record<
+  AddressRowProps["chain"],
+  { label: string; prefix: string }
+> = {
+  ethereum: { label: "Ethereum", prefix: "0x" },
+  cosmos: { label: "Cosmos Hub", prefix: "cosmos1" },
+  solana: { label: "Solana", prefix: "" },
+};
+
 export const AddressRow: FC<AddressRowProps> = ({ icon, chain, address }) => {
   const isLoggedIn = !!address;
-  const label = chain === "ethereum" ? "Ethereum" : "Cosmos Hub";
-  const prefix = chain === "ethereum" ? "0x" : "cosmos1";
+  const { label, prefix } = chainConfig[chain];
 
   const renderChainLabel = () => (
     <div className={isLoggedIn ? styles.chainLabelChip : styles.chainLabel}>
@@ -63,6 +71,6 @@ export const AddressRow: FC<AddressRowProps> = ({ icon, chain, address }) => {
 
 export interface AddressRowProps {
   icon: ReactElement;
-  chain: "ethereum" | "cosmos";
+  chain: "ethereum" | "cosmos" | "solana";
   address?: string;
 }

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

@@ -1,6 +1,7 @@
 import { useState, type FC } from "react";
 import { CosmosIcon } from "@oko-wallet/oko-common-ui/icons/cosmos_icon";
 import { EthereumBlueIcon } from "@oko-wallet/oko-common-ui/icons/ethereum_blue_icon";
+import { SolanaIcon } from "@oko-wallet/oko-common-ui/icons/solana_icon";
 import { WalletIcon } from "@oko-wallet/oko-common-ui/icons/wallet";
 import { Spacing } from "@oko-wallet/oko-common-ui/spacing";
 import { Typography } from "@oko-wallet/oko-common-ui/typography";
@@ -15,7 +16,7 @@ import { useGetChainInfos } from "@oko-wallet-demo-web/hooks/use_get_chain_infos
 
 export const AddressWidget: FC<AddressWidgetProps> = ({}) => {
   const [showModal, setShowModal] = useState(false);
-  const { cosmosAddress, ethAddress } = useAddresses();
+  const { cosmosAddress, ethAddress, solanaAddress } = useAddresses();
 
   const { data: chains } = useGetChainInfos();
 
@@ -57,6 +58,13 @@ export const AddressWidget: FC<AddressWidgetProps> = ({}) => {
           />
           <Spacing height={12} />
 
+          <AddressRow
+            icon={<SolanaIcon />}
+            chain="solana"
+            address={formatAddress(solanaAddress)}
+          />
+          <Spacing height={12} />
+
           <ViewChainsButton onClick={handleViewChains} />
         </div>
       </Widget>

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

@@ -1,38 +1,36 @@
-// TODO: refactor this widget @chemonoworld @Ryz0nd
-
-// 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}
-//     />
-//   );
-// };
+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}
+    />
+  );
+};