TECH-292 - Add friendly names to dropdown

civicteam · Aug 22, 2024 · 0bae959 · 0bae959
1 parent c6fe516
commit 0bae959
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 10 deletions.
diff --git a/src/civic_sign_frontend_demo/src/App.tsx b/src/civic_sign_frontend_demo/src/App.tsx
@@ -1,14 +1,14 @@
 import React, { useEffect, useState, useCallback, useMemo } from 'react';
 import { Principal } from '@dfinity/principal';
 import { PrincipalService } from './service/PrincipalService.js';
-import { config } from './config.js';
+import { config, GatekeeperNetwork } from './config.js';
 import ICPCredentialCheckButton, { CredentialCheckResponse } from '@civic/icp-gateway-react-ui';
 import { ChevronDown } from 'lucide-react';
 
 function App() {
   const [principal, setPrincipal] = useState<Principal | undefined>(undefined);
   const [urlCode, setUrlCode] = useState<string | null>(null);
-  const [selectedGatekeeperNetwork, setSelectedGatekeeperNetwork] = useState<string>(config.gatekeeperNetworks[0]);
+  const [selectedGatekeeperNetwork, setSelectedGatekeeperNetwork] = useState<GatekeeperNetwork>(config.gatekeeperNetworks[0]);
 
   // Assume we have an array of available gatekeeperNetworks
   const gatekeeperNetworks = useMemo(() => config.gatekeeperNetworks, []);
@@ -42,7 +42,9 @@ function App() {
   }, []);
 
   const handleGatekeeperNetworkChange = useCallback((event: React.ChangeEvent<HTMLSelectElement>) => {
-    setSelectedGatekeeperNetwork(event.target.value);
+    const selectedNetwork = gatekeeperNetworks.find((network) => network.name === event.target.value);
+    console.log('Selected network:', selectedNetwork);
+    setSelectedGatekeeperNetwork(selectedNetwork || gatekeeperNetworks[0]);
   }, []);
 
   return (
@@ -56,7 +58,7 @@ function App() {
             <p className="text-center mb-6">Logged in as <span className="font-mono bg-gray-100 p-1 rounded">{principal?.toText()}</span></p>
             <ICPCredentialCheckButton
               principal={principal}
-              gatekeeperNetwork={selectedGatekeeperNetwork}
+              gatekeeperNetwork={selectedGatekeeperNetwork.address}
               onCredentialCheck={handleCredentialCheck}
               config={{ stage: 'dev' }}
             />
@@ -67,13 +69,13 @@ function App() {
             <div className="relative mb-6">
               <select
                 id="gatekeeperNetwork"
-                value={selectedGatekeeperNetwork}
+                value={selectedGatekeeperNetwork.name}
                 onChange={handleGatekeeperNetworkChange}
                 className="block appearance-none w-full bg-white border border-gray-300 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
               >
                 {gatekeeperNetworks.map((network) => (
-                  <option key={network} value={network}>
-                    {network}
+                  <option key={network.name} value={network.name}>
+                    {network.name}
                   </option>
                 ))}
               </select>

diff --git a/src/civic_sign_frontend_demo/src/config.ts b/src/civic_sign_frontend_demo/src/config.ts
@@ -18,10 +18,11 @@ const civicBackendCanisterUrl = !isDev
 
 
 const portalUrl = `https://icp-getpass.civic.com`;
+export type GatekeeperNetwork = { name: string, address: string };
 const gatekeeperNetworks = [
-  'ta136ftcpd8RyTYu3FGBjstD7EMXGBWrcwotdScrAKu',
-  'tunQheuPpHhjjsbrUDp4rikqYez9UXv4SXLRHf9Kzsv', 
-  'tigoYhp9SpCDoCQmXGj2im5xa3mnjR1zuXrpCJ5ZRmi'
+  { name: 'Age 13', address: 'ta136ftcpd8RyTYu3FGBjstD7EMXGBWrcwotdScrAKu', },
+  { name: 'Uniqueness', address: 'tunQheuPpHhjjsbrUDp4rikqYez9UXv4SXLRHf9Kzsv', },
+  { name: 'Captcha', address: 'tigoYhp9SpCDoCQmXGj2im5xa3mnjR1zuXrpCJ5ZRmi', },
 ];
 
 // This is for demo purposes but should be replaced with a more secure method