environment data in swap demo dev tools overlay

Signed-off-by: Dominic Wörner <dom.woe@gmail.com>

Author: domwoe

examples/apps/staking/frontend/src/components/DeveloperOverlay.tsx

@@ -7,7 +7,9 @@ import { Badge } from './ui/badge';
 import { Input } from './ui/input';
 import { Label } from './ui/label';
 import { toast } from 'sonner';
-import { stakingVaultConfig } from '../contracts/stakingVault';
+import { stakingVaultConfig, STAKING_VAULT_ADDRESS } from '../contracts/stakingVault';
+import { VAULT_REGISTRY_ADDRESS } from '../contracts/vaultRegistry';
+import { ETHEREUM_CHAIN_ID, APP_GIT_COMMIT } from '../lib/env';
 import {
   Hammer,
   Wallet,
@@ -19,7 +21,8 @@ import {
   Clock,
   Network,
   Plus,
-  DollarSign
+  DollarSign,
+  Server
 } from 'lucide-react';
 
 export function DeveloperOverlay() {
@@ -388,6 +391,82 @@ export function DeveloperOverlay() {
             )}
           </div>
 
+          {/* Environment Status */}
+          <div className="border-t border-slate-800 pt-4 space-y-2">
+            <div className="flex items-center gap-2 text-slate-200 mb-2">
+              <Server className="size-4 text-slate-400" />
+              <span className="text-sm font-medium">Environment</span>
+            </div>
+
+            <div className="space-y-1.5 text-xs">
+              <div className="flex items-center justify-between">
+                <span className="text-slate-500">Network:</span>
+                <span className="font-medium text-slate-300">Chain {ETHEREUM_CHAIN_ID}</span>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="text-slate-500">Staking Contract:</span>
+                <button
+                  onClick={() => {
+                    if (STAKING_VAULT_ADDRESS && STAKING_VAULT_ADDRESS !== '0x') {
+                      navigator.clipboard?.writeText(STAKING_VAULT_ADDRESS);
+                      toast.success('Staking contract address copied!');
+                    }
+                  }}
+                  disabled={!STAKING_VAULT_ADDRESS || STAKING_VAULT_ADDRESS === '0x'}
+                  className="font-medium font-mono text-green-400 hover:text-green-300 transition-colors disabled:cursor-not-allowed disabled:hover:text-green-400"
+                >
+                  {STAKING_VAULT_ADDRESS && STAKING_VAULT_ADDRESS !== '0x'
+                    ? STAKING_VAULT_ADDRESS.slice(0, 8) + '...'
+                    : 'Not deployed'
+                  }
+                </button>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="text-slate-500">BST Token:</span>
+                <button
+                  onClick={() => {
+                    if (bstTokenAddress && bstTokenAddress !== '0x') {
+                      navigator.clipboard?.writeText(bstTokenAddress);
+                      toast.success('BST token address copied!');
+                    }
+                  }}
+                  disabled={!bstTokenAddress || bstTokenAddress === '0x'}
+                  className="font-medium font-mono text-yellow-400 hover:text-yellow-300 transition-colors disabled:cursor-not-allowed disabled:hover:text-yellow-400"
+                >
+                  {bstTokenAddress && bstTokenAddress !== '0x'
+                    ? bstTokenAddress.slice(0, 8) + '...'
+                    : 'Loading...'
+                  }
+                </button>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="text-slate-500">Vault Registry:</span>
+                <button
+                  onClick={() => {
+                    if (VAULT_REGISTRY_ADDRESS && VAULT_REGISTRY_ADDRESS !== '0x') {
+                      navigator.clipboard?.writeText(VAULT_REGISTRY_ADDRESS);
+                      toast.success('Vault registry address copied!');
+                    }
+                  }}
+                  disabled={!VAULT_REGISTRY_ADDRESS || VAULT_REGISTRY_ADDRESS === '0x'}
+                  className="font-medium font-mono text-purple-400 hover:text-purple-300 transition-colors disabled:cursor-not-allowed disabled:hover:text-purple-400"
+                >
+                  {VAULT_REGISTRY_ADDRESS && VAULT_REGISTRY_ADDRESS !== '0x'
+                    ? VAULT_REGISTRY_ADDRESS.slice(0, 8) + '...'
+                    : 'Not deployed'
+                  }
+                </button>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="text-slate-500">Commit:</span>
+                <span className="font-medium font-mono text-slate-300">{APP_GIT_COMMIT}</span>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="text-slate-500">Mode:</span>
+                <span className="font-medium text-green-400">Development</span>
+              </div>
+            </div>
+          </div>
 
           {/* Quick Actions Footer */}
           <div className="border-t border-slate-800 pt-3">

examples/apps/staking/frontend/src/hooks/useStaking.ts

@@ -195,7 +195,7 @@ export function useTokenBalance(address?: `0x${string}`) {
  * Hook to fetch user's created vaults from the IC backend
  */
 export function useUserVaults() {
-  const { createIdentity, createAgent } = useEthereumDerivedIdentity();
+  const { createIdentity, createAgent } = useEthereumDerivedIdentity  ();
   const { address: userAddress } = useAccount();
 
   return useQuery<Vault[]>({

examples/apps/swap/frontend/src/components/DeveloperOverlay.tsx

@@ -312,21 +312,39 @@ export function DeveloperOverlay() {
               </div>
               <div className="flex items-center justify-between">
                 <span className="text-slate-500">Swap Contract:</span>
-                <span className="font-medium font-mono text-blue-400">
+                <button
+                  onClick={() => {
+                    if (contracts.swapContract && contracts.swapContract !== '0x') {
+                      navigator.clipboard?.writeText(contracts.swapContract);
+                      toast.success('Swap contract address copied!');
+                    }
+                  }}
+                  disabled={!contracts.swapContract || contracts.swapContract === '0x'}
+                  className="font-medium font-mono text-blue-400 hover:text-blue-300 transition-colors disabled:cursor-not-allowed disabled:hover:text-blue-400"
+                >
                   {contracts.swapContract && contracts.swapContract !== '0x'
                     ? contracts.swapContract.slice(0, 8) + '...'
                     : 'Not deployed'
                   }
-                </span>
+                </button>
               </div>
               <div className="flex items-center justify-between">
                 <span className="text-slate-500">Vault Registry:</span>
-                <span className="font-medium font-mono text-purple-400">
+                <button
+                  onClick={() => {
+                    if (contracts.vaultRegistry && contracts.vaultRegistry !== '0x') {
+                      navigator.clipboard?.writeText(contracts.vaultRegistry);
+                      toast.success('Vault registry address copied!');
+                    }
+                  }}
+                  disabled={!contracts.vaultRegistry || contracts.vaultRegistry === '0x'}
+                  className="font-medium font-mono text-purple-400 hover:text-purple-300 transition-colors disabled:cursor-not-allowed disabled:hover:text-purple-400"
+                >
                   {contracts.vaultRegistry && contracts.vaultRegistry !== '0x'
                     ? contracts.vaultRegistry.slice(0, 8) + '...'
                     : 'Not deployed'
                   }
-                </span>
+                </button>
               </div>
               <div className="flex items-center justify-between">
                 <span className="text-slate-500">Commit:</span>