feat: hoodi support

demo/.env_example

@@ -0,0 +1,2 @@
+# Figment dApp token (app ID). Exposed to the client as import.meta.env.VITE_DAPP_TOKEN.
+VITE_DAPP_TOKEN=d500a3f1bdc613c4ece8964f5c7b9f173393cf53b4eb4eadb520e80435c4ece3

demo/README.md

@@ -0,0 +1,44 @@
+# Figment Elements Demo
+
+A simple demo app for the [Figment Elements](https://docs.figment.io/docs/elements) staking widget. It lets you try Ethereum (Hoodi) and Solana (Devnet) staking in an embeddable iframe.
+
+## Getting started
+
+### 1. Install dependencies
+
+From the `demo` folder:
+
+```bash
+pnpm i
+```
+
+### 2. Set your Figment dApp token
+
+Copy the example env file and add your token:
+
+```bash
+cp .env_example .env
+```
+
+Edit `.env` and set your Figment dApp token (app ID):
+
+```
+VITE_DAPP_TOKEN=your-figment-app-id
+```
+
+### 3. Run the demo
+
+```bash
+pnpm dev
+```
+
+Open the URL shown in the terminal (usually `http://localhost:5173`) in your browser.
+
+## What you can do
+
+- **Protocol:** Switch between ETH (Hoodi) and SOL (Devnet).
+- **Network:** Choose the network (e.g. Hoodi for Ethereum, Devnet for Solana).
+- **Theme:** Toggle light, dark, or system theme.
+- **Wallet:** Use the default wallet flow (WalletConnect for ETH, Solana Wallet Adapter for SOL) or a custom wallet.
+
+The staking UI is loaded in an iframe from Figment; your token in `VITE_DAPP_TOKEN` identifies your app to that service.

demo/package.json

@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@figmentio/elements": "^2.1.0",
+    "@figmentio/elements": "^2.1.1",
     "@solana/web3.js": "1.98.2",
     "buffer": "^6.0.3",
     "lucide-react": "^0.344.0",

demo/src/App.tsx

@@ -7,18 +7,18 @@ function App() {
   const [primaryColor, setPrimaryColor] = React.useState("#004039");
   const [secondaryColor, setSecondaryColor] = React.useState("#10B981");
   const [walletType, setWalletType] = React.useState<"default" | "custom">(
-    "default"
+    "default",
   );
   const [selectedProtocol, setSelectedProtocol] = React.useState<Protocol>({
     name: "ETH",
     id: "ethereum",
   });
   const [selectedNetwork, setSelectedNetwork] = React.useState<Network>({
-    name: "Mainnet",
-    id: "mainnet",
+    name: "Hoodi",
+    id: "hoodi",
   });
   const [theme, setTheme] = React.useState<"light" | "dark" | "system">(
-    "system"
+    "system",
   );
 
   return (

demo/src/components/MainContent.tsx

@@ -39,11 +39,11 @@ export function MainContent({
         const encodedMessage = new TextEncoder().encode(message);
         const signedMessage = await provider.signMessage(
           encodedMessage,
-          "utf8"
+          "utf8",
         );
 
         const signature = Buffer.from(signedMessage.signature).toString(
-          "base64"
+          "base64",
         );
 
         if (!signature) throw new Error("Failed to sign message");
@@ -70,7 +70,7 @@ export function MainContent({
       signMessage: async (message: string) => {
         const signature = await window?.tomo_btc?.signMessage(
           message,
-          "bip322-simple"
+          "bip322-simple",
         );
         if (!signature) throw new Error("Failed to sign message");
         return signature;
@@ -130,7 +130,7 @@ export function MainContent({
                 UI components for embeddable staking
               </p>
             </div>
-            <div className="my-8 mx-auto w-[350px] h-[450px] overflow-hidden">
+            <div className="my-8 mx-auto w-[350px] h-[490px] overflow-hidden">
               {(walletType === "custom" ? wallet.address : true) && (
                 <Staking
                   appId={import.meta.env.VITE_DAPP_TOKEN}

demo/src/components/Sidebar.tsx

@@ -16,7 +16,7 @@ const protocols: Protocol[] = [
 
 const networksByProtocol: Record<Protocol["id"], Network[]> = {
   ethereum: [
-    { name: "Holesky", id: "holesky" },
+    { name: "Hoodi", id: "hoodi" },
     { name: "Mainnet", id: "mainnet", disabled: true },
   ],
   solana: [

demo/src/components/ToggleGroup.tsx

@@ -29,7 +29,7 @@ const getIcon = (value: string) => {
       return <SolanaIcon className="w-5 h-5" />;
     case "mainnet":
       return <GlobeIcon className="w-4 h-4" />;
-    case "holesky":
+    case "hoodi":
     case "devnet":
     case "signet":
       return <TestTubeIcon className="w-4 h-4 -rotate-45" />;
@@ -46,7 +46,7 @@ const shouldShowIcon = (value: string) => {
     "babylon",
     "solana",
     "mainnet",
-    "holesky",
+    "hoodi",
     "devnet",
     "signet",
   ].includes(value);
@@ -65,7 +65,7 @@ export function ToggleGroup<T extends string>({
       <div
         className={cn(
           "flex items-center bg-[#F9F9F9] rounded-full",
-          variant === "vertical" && "flex-col items-stretch"
+          variant === "vertical" && "flex-col items-stretch",
         )}
       >
         {items.map((item) => (
@@ -81,7 +81,7 @@ export function ToggleGroup<T extends string>({
                   : "text-[#6E938E] hover:text-[#004039]",
                 item.disabled &&
                   "opacity-50 cursor-not-allowed hover:text-[#9DB5B2]",
-                shouldShowIcon(item.value) && "text-current"
+                shouldShowIcon(item.value) && "text-current",
               )}
             >
               {shouldShowIcon(item.value) && (
@@ -93,7 +93,7 @@ export function ToggleGroup<T extends string>({
                       item.value === "mainnet" ||
                       item.value.includes("net")
                       ? "text-current"
-                      : ""
+                      : "",
                   )}
                 >
                   {getIcon(item.value)}

demo/src/vite-env.d.ts

@@ -1 +1,9 @@
 /// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_DAPP_TOKEN: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}