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,48 @@
+# 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
+npm install
+```
+
+
+### 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
+npm run 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/src/App.tsx

@@ -14,8 +14,8 @@ function App() {
     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"

demo/src/components/MainContent.tsx

@@ -135,7 +135,7 @@ export function MainContent({
                 <Staking
                   appId={import.meta.env.VITE_DAPP_TOKEN}
                   protocol={selectedProtocol.id as "solana"}
-                  network={selectedNetwork.id as "mainnet"}
+                  network={selectedNetwork.id as "mainnet" | "hoodi"}
                   wallet={
                     walletType === "custom"
                       ? customWalletConfigMap[

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);

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;
+}

src/elements/types.ts

@@ -6,7 +6,7 @@ enum Protocol {
 
 enum EthereumNetwork {
   mainnet = "mainnet",
-  holesky = "holesky",
+  hoodi = "hoodi",
 }
 
 enum BabylonNetwork {