From c6fe5161ffe589f1c63ded9e15ecc0769740a209 Mon Sep 17 00:00:00 2001 From: TYRONE AVNIT Date: Thu, 22 Aug 2024 09:35:18 -0500 Subject: [PATCH 1/2] TECH-292 - Allow the user to select the pass type - Prettify the demo page by adding tailwindcss --- src/civic_sign_frontend_demo/package.json | 8 +- .../postcss.config.js | 6 ++ src/civic_sign_frontend_demo/src/App.tsx | 79 ++++++++++++++++--- src/civic_sign_frontend_demo/src/config.ts | 8 +- src/civic_sign_frontend_demo/src/index.scss | 4 + .../tailwind.config.js | 9 +++ 6 files changed, 98 insertions(+), 16 deletions(-) create mode 100644 src/civic_sign_frontend_demo/postcss.config.js create mode 100644 src/civic_sign_frontend_demo/tailwind.config.js diff --git a/src/civic_sign_frontend_demo/package.json b/src/civic_sign_frontend_demo/package.json index 78b25c5..c46376f 100644 --- a/src/civic_sign_frontend_demo/package.json +++ b/src/civic_sign_frontend_demo/package.json @@ -1,13 +1,14 @@ { "dependencies": { - "@civic/icp-gateway-react-ui": "^0.0.1-beta.5", + "@civic/icp-gateway-react-ui": "^0.0.3", "@dfinity/auth-client": "^2.0.0", + "@dfinity/candid": "^2.0.0", "@dfinity/identity": "^2.0.0", "@dfinity/principal": "^2.0.0", - "@dfinity/candid": "^2.0.0", "@dfinity/verifiable-credentials": "^0.0.2", "axios": "^1.7.2", "jwt-decode": "^4.0.0", + "lucide-react": "^0.429.0", "react": "^18.2.0", "react-dom": "^18.2.0" }, @@ -18,11 +19,14 @@ "@types/react": "^18.2.14", "@types/react-dom": "^18.2.6", "@vitejs/plugin-react": "^4.0.1", + "autoprefixer": "^10.4.20", "cross-fetch": "^3.1.6", "dotenv": "^16.3.1", "jsdom": "^22.1.0", + "postcss": "^8.4.41", "react-icons": "^5.2.1", "sass": "^1.63.6", + "tailwindcss": "^3.4.10", "typescript": "^5.1.3", "vite": "^4.3.9", "vite-plugin-environment": "^1.1.3", diff --git a/src/civic_sign_frontend_demo/postcss.config.js b/src/civic_sign_frontend_demo/postcss.config.js new file mode 100644 index 0000000..2e7af2b --- /dev/null +++ b/src/civic_sign_frontend_demo/postcss.config.js @@ -0,0 +1,6 @@ +export default { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/src/civic_sign_frontend_demo/src/App.tsx b/src/civic_sign_frontend_demo/src/App.tsx index 0d79146..e40d652 100644 --- a/src/civic_sign_frontend_demo/src/App.tsx +++ b/src/civic_sign_frontend_demo/src/App.tsx @@ -3,12 +3,15 @@ import { Principal } from '@dfinity/principal'; import { PrincipalService } from './service/PrincipalService.js'; import { config } from './config.js'; import ICPCredentialCheckButton, { CredentialCheckResponse } from '@civic/icp-gateway-react-ui'; +import { ChevronDown } from 'lucide-react'; function App() { const [principal, setPrincipal] = useState(undefined); - const { gatekeeperNetwork } = config; - const [urlCode, setUrlCode] = useState(null); + const [selectedGatekeeperNetwork, setSelectedGatekeeperNetwork] = useState(config.gatekeeperNetworks[0]); + + // Assume we have an array of available gatekeeperNetworks + const gatekeeperNetworks = useMemo(() => config.gatekeeperNetworks, []); useEffect(() => { const urlParams = new URLSearchParams(window.location.search); @@ -24,7 +27,6 @@ function App() { const principalService = new PrincipalService({ identityProvider: config.internetIdentityUrl, }); - try { const userPrincipal = await principalService.requestPrincipal(); if (userPrincipal) { @@ -39,17 +41,70 @@ function App() { console.log('handleCredentialCheck', credential, error); }, []); + const handleGatekeeperNetworkChange = useCallback((event: React.ChangeEvent) => { + setSelectedGatekeeperNetwork(event.target.value); + }, []); + return ( -
- DFINITY logo - {principal &&

Welcome to the ICP Relying Canister

} - {principal &&

Logged in as {principal?.toText()}

} - {principal - ? - : urlCode ? <> : } - {urlCode && Cool GIF for active status} +
+
+ DFINITY logo + + {principal ? ( +
+

Welcome to the ICP Relying Canister

+

Logged in as {principal?.toText()}

+ +
+ ) : ( + <> +

Select Gatekeeper Network

+
+ +
+ +
+
+ {!urlCode && ( + + )} + + )} + + {urlCode && ( +
+ Cool GIF for active status +

Success!

+
+ )} +
); } -export default App; +export default App; \ No newline at end of file diff --git a/src/civic_sign_frontend_demo/src/config.ts b/src/civic_sign_frontend_demo/src/config.ts index 71f2324..6ea8e06 100644 --- a/src/civic_sign_frontend_demo/src/config.ts +++ b/src/civic_sign_frontend_demo/src/config.ts @@ -18,7 +18,11 @@ const civicBackendCanisterUrl = !isDev const portalUrl = `https://icp-getpass.civic.com`; -const gatekeeperNetwork = "ta136ftcpd8RyTYu3FGBjstD7EMXGBWrcwotdScrAKu"; +const gatekeeperNetworks = [ + 'ta136ftcpd8RyTYu3FGBjstD7EMXGBWrcwotdScrAKu', + 'tunQheuPpHhjjsbrUDp4rikqYez9UXv4SXLRHf9Kzsv', + 'tigoYhp9SpCDoCQmXGj2im5xa3mnjR1zuXrpCJ5ZRmi' +]; // This is for demo purposes but should be replaced with a more secure method const dummyCivicSampleKey = new Uint8Array([ @@ -33,5 +37,5 @@ export const config = { internetIdentityCanisterId, dummyCivicSampleKey, portalUrl, - gatekeeperNetwork, + gatekeeperNetworks, }; diff --git a/src/civic_sign_frontend_demo/src/index.scss b/src/civic_sign_frontend_demo/src/index.scss index e21edd4..7f4d6cb 100644 --- a/src/civic_sign_frontend_demo/src/index.scss +++ b/src/civic_sign_frontend_demo/src/index.scss @@ -1,3 +1,7 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + body { font-family: sans-serif; font-size: 1.5rem; diff --git a/src/civic_sign_frontend_demo/tailwind.config.js b/src/civic_sign_frontend_demo/tailwind.config.js new file mode 100644 index 0000000..b7c41d1 --- /dev/null +++ b/src/civic_sign_frontend_demo/tailwind.config.js @@ -0,0 +1,9 @@ +module.exports = { + content: [ + "./src/**/*.{js,jsx,ts,tsx}", + ], + theme: { + extend: {}, + }, + plugins: [], +} \ No newline at end of file From 0bae959a8760e3c05a22e7aea12947f3c30020da Mon Sep 17 00:00:00 2001 From: TYRONE AVNIT Date: Thu, 22 Aug 2024 10:27:51 -0500 Subject: [PATCH 2/2] TECH-292 - Add friendly names to dropdown --- src/civic_sign_frontend_demo/src/App.tsx | 16 +++++++++------- src/civic_sign_frontend_demo/src/config.ts | 7 ++++--- 2 files changed, 13 insertions(+), 10 deletions(-) diff --git a/src/civic_sign_frontend_demo/src/App.tsx b/src/civic_sign_frontend_demo/src/App.tsx index e40d652..66346c5 100644 --- 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(undefined); const [urlCode, setUrlCode] = useState(null); - const [selectedGatekeeperNetwork, setSelectedGatekeeperNetwork] = useState(config.gatekeeperNetworks[0]); + const [selectedGatekeeperNetwork, setSelectedGatekeeperNetwork] = useState(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) => { - 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() {

Logged in as {principal?.toText()}

@@ -67,13 +69,13 @@ function App() {
diff --git a/src/civic_sign_frontend_demo/src/config.ts b/src/civic_sign_frontend_demo/src/config.ts index 6ea8e06..c479807 100644 --- 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