diff --git a/demo/.env_example b/demo/.env_example new file mode 100644 index 0000000..1971638 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/demo/README.md b/demo/README.md new file mode 100644 index 0000000..34b8ae3 --- /dev/null +++ b/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. + + diff --git a/demo/src/App.tsx b/demo/src/App.tsx index 7c9109a..2f7ce9e 100644 --- a/demo/src/App.tsx +++ b/demo/src/App.tsx @@ -14,8 +14,8 @@ function App() { id: "ethereum", }); const [selectedNetwork, setSelectedNetwork] = React.useState({ - name: "Mainnet", - id: "mainnet", + name: "Hoodi", + id: "hoodi", }); const [theme, setTheme] = React.useState<"light" | "dark" | "system">( "system" diff --git a/demo/src/components/MainContent.tsx b/demo/src/components/MainContent.tsx index b002c74..6d532ea 100644 --- a/demo/src/components/MainContent.tsx +++ b/demo/src/components/MainContent.tsx @@ -135,7 +135,7 @@ export function MainContent({ = { ethereum: [ - { name: "Holesky", id: "holesky" }, + { name: "Hoodi", id: "hoodi" }, { name: "Mainnet", id: "mainnet", disabled: true }, ], solana: [ diff --git a/demo/src/components/ToggleGroup.tsx b/demo/src/components/ToggleGroup.tsx index b2cad36..67c66bf 100644 --- a/demo/src/components/ToggleGroup.tsx +++ b/demo/src/components/ToggleGroup.tsx @@ -29,7 +29,7 @@ const getIcon = (value: string) => { return ; case "mainnet": return ; - case "holesky": + case "hoodi": case "devnet": case "signet": return ; @@ -46,7 +46,7 @@ const shouldShowIcon = (value: string) => { "babylon", "solana", "mainnet", - "holesky", + "hoodi", "devnet", "signet", ].includes(value); diff --git a/demo/src/vite-env.d.ts b/demo/src/vite-env.d.ts index 11f02fe..7637fb8 100644 --- a/demo/src/vite-env.d.ts +++ b/demo/src/vite-env.d.ts @@ -1 +1,9 @@ /// + +interface ImportMetaEnv { + readonly VITE_DAPP_TOKEN: string; +} + +interface ImportMeta { + readonly env: ImportMetaEnv; +} diff --git a/src/elements/types.ts b/src/elements/types.ts index e2e930e..a0e1698 100644 --- a/src/elements/types.ts +++ b/src/elements/types.ts @@ -6,7 +6,7 @@ enum Protocol { enum EthereumNetwork { mainnet = "mainnet", - holesky = "holesky", + hoodi = "hoodi", } enum BabylonNetwork {