wip

proofzero · May 25, 2023 · e4b5a61 · e4b5a61
1 parent eef620d
commit e4b5a61
Show file tree

Hide file tree

Showing 8 changed files with 192 additions and 122 deletions.
diff --git a/apps/passport/app/routes/authorize.tsx b/apps/passport/app/routes/authorize.tsx
@@ -43,6 +43,7 @@ import type { AddressURN } from '@proofzero/urns/address'
 import type { PersonaData } from '@proofzero/types/application'
 
 import Authorization from '@proofzero/design-system/src/templates/authorization/Authorization'
+import { DropdownSelectListItem } from '@proofzero/design-system/src/atoms/dropdown/DropdownSelectList'
 
 export type UserProfile = {
   displayName: string
@@ -111,7 +112,7 @@ export const loader: LoaderFunction = async ({ request, context }) => {
     !(
       context.authzQueryParams.clientId === 'passport' &&
       context.authzQueryParams.redirectUri ===
-        `${new URL(request.url).origin}/settings`
+      `${new URL(request.url).origin}/settings`
     ) &&
     connectResult !== 'CANCEL'
   ) {
@@ -388,20 +389,20 @@ export default function Authorize() {
     requestedScope,
     connectedAccounts,
     connectedSmartContractWallets,
-  } = dataForScopes
+  } = dataForScopes as DataForScopes
 
   const [persona] = useState<PersonaData>(personaData!)
 
-  const [selectedEmail, setSelectedEmail] = useState<EmailSelectListItem>()
-  const [selectedConnectedAccounts, setSelectedConnectedAccounts] = useState<
-    Array<AddressURN> | Array<AuthorizationControlSelection>
-  >([])
-  const [selectedSCWallets, setSelectedSCWallets] = useState<Array<AddressURN>>(
+  const [selectedEmail, setSelectedEmail] = useState<DropdownSelectListItem>()
+  const [selectedConnectedAccounts, setSelectedConnectedAccounts] = useState<Array<DropdownSelectListItem>>(
+    []
+  )
+  const [selectedSCWallets, setSelectedSCWallets] = useState<Array<DropdownSelectListItem>>(
     []
   )
 
   // Re-render the component every time persona gets updated
-  useEffect(() => {}, [persona])
+  useEffect(() => { }, [persona])
 
   const submit = useSubmit()
   const navigate = useNavigate()
@@ -433,7 +434,7 @@ export default function Authorize() {
     }
 
     if (requestedScope.includes('email') && selectedEmail) {
-      personaData.email = selectedEmail.addressURN
+      personaData.email = selectedEmail.title
     }
 
     if (

diff --git a/apps/passport/app/utils/authorize.server.ts b/apps/passport/app/utils/authorize.server.ts
@@ -2,6 +2,7 @@ import { getAccountClient, getAddressClient } from '~/platform.server'
 import {
   getNormalisedConnectedEmails,
   getNormalisedSmartContractWallets,
+  modifyType,
 } from '@proofzero/utils/getNormalisedConnectedAccounts'
 
 import { BadRequestError, UnauthorizedError } from '@proofzero/errors'
@@ -23,13 +24,14 @@ import type {
 } from '@proofzero/utils/getNormalisedConnectedAccounts'
 import { redirect } from '@remix-run/cloudflare'
 import { CryptoAddressType } from '@proofzero/types/address'
+import { DropdownSelectListItem } from '@proofzero/design-system/src/atoms/dropdown/DropdownSelectList'
 
 export type DataForScopes = {
-  connectedEmails?: EmailSelectListItem[]
-  personaData?: PersonaData
+  connectedEmails: DropdownSelectListItem[]
+  personaData: PersonaData
   requestedScope: string[]
-  connectedAccounts?: GetAddressProfileResult[]
-  connectedSmartContractWallets?: SCWalletSelectListItem[]
+  connectedAccounts: DropdownSelectListItem[]
+  connectedSmartContractWallets: DropdownSelectListItem[]
 }
 
 // Deterministically sort scopes so that they are always in the same order
@@ -54,6 +56,7 @@ export const reorderScope = (scopes: string[]): string[] => {
 }
 // -----------------------------------------------------------------------------
 
+
 export const getDataForScopes = async (
   requestedScope: string[],
   accountURN: AccountURN,
@@ -64,9 +67,9 @@ export const getDataForScopes = async (
   if (!accountURN)
     throw new UnauthorizedError({ message: 'Account URN is required' })
 
-  let connectedSmartContractWallets: SCWalletSelectListItem[] = []
-  let connectedEmails: EmailSelectListItem[] = []
-  let connectedAddresses: GetAddressProfileResult[] = []
+  let connectedSmartContractWallets: Array<DropdownSelectListItem> = []
+  let connectedEmails: Array<DropdownSelectListItem> = []
+  let connectedAddresses: Array<DropdownSelectListItem> = []
 
   const accountClient = getAccountClient(jwt || '', env, traceSpan)
 
@@ -79,7 +82,7 @@ export const getDataForScopes = async (
       connectedEmails = getNormalisedConnectedEmails(connectedAccounts)
     }
     if (requestedScope.includes(Symbol.keyFor(SCOPE_CONNECTED_ACCOUNTS)!)) {
-      connectedAddresses = await Promise.all(
+      connectedAddresses = (await Promise.all(
         connectedAccounts
           .filter((ca) => {
             return ca.rc.addr_type !== CryptoAddressType.Wallet
@@ -88,7 +91,11 @@ export const getDataForScopes = async (
             const addressClient = getAddressClient(ca.baseUrn, env, traceSpan)
             return addressClient.getAddressProfile.query()
           })
-      )
+      )).map(address => ({
+        title: address.title,
+        subtitle: `${modifyType(address.type as string)} - ${address.address}`,
+        value: address.id,
+      }))
     }
     if (requestedScope.includes(Symbol.keyFor(SCOPE_SMART_CONTRACT_WALLETS)!)) {
       const scWalletAddresses = await Promise.all(
@@ -145,7 +152,7 @@ export function authzParamsMatch(
     scopesMatch &&
     authzCookieParams.clientId === authzQueryParams.clientId &&
     `${authzReqRedirectURL?.origin}${authzReqRedirectURL?.pathname}` ===
-      `${authzReqCookieRedirectURL?.origin}${authzReqCookieRedirectURL?.pathname}` &&
+    `${authzReqCookieRedirectURL?.origin}${authzReqCookieRedirectURL?.pathname}` &&
     authzCookieParams.state === authzQueryParams.state
   )
 }

diff --git a/packages/design-system/src/atoms/dropdown/ConnectedAccountsDropdown.stories.tsx b/packages/design-system/src/atoms/dropdown/ConnectedAccountsDropdown.stories.tsx
@@ -28,7 +28,6 @@ const accounts: SelectListItem[] = Array.from({ length: 10 }, (_, i) => ({
     value: `urn:proofzero:address:${i}`,
     title: `Account ${i}`,
     subtitle: `${modifyType(pickRandomType(i) as string)} - Address ${i}`
-
 }))
 
 const Template = () => (

diff --git a/packages/design-system/src/atoms/dropdown/EmailDropdown.stories.tsx b/packages/design-system/src/atoms/dropdown/EmailDropdown.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Dropdown, SelectListItem } from './DropdownSelectList'
+import { Dropdown, DropdownSelectListItem } from './DropdownSelectList'
 
 import { OAuthAddressType, EmailAddressType, CryptoAddressType } from '@proofzero/types/address'
 import { OptionType } from '@proofzero/utils/getNormalisedConnectedAccounts'
@@ -32,7 +32,7 @@ const getIcon = (
         : null
 }
 
-const listItems: SelectListItem[] = [
+const listItems: Array<DropdownSelectListItem> = [
     {
         title: 'email@gmail.com',
         value: 'urn:rollupid:address/1',

diff --git a/packages/design-system/src/templates/authorization/Authorization.stories.mdx b/packages/design-system/src/templates/authorization/Authorization.stories.mdx
@@ -4,8 +4,15 @@ import Authorization from './Authorization'
 
 import subtractLogo from '../../assets/subtract-logo.svg'
 
+import { HiOutlineEnvelope } from 'react-icons/hi2'
+
 import { SCOPES_JSON } from '@proofzero/security/scopes'
 
+import googleIcon from '@proofzero/design-system/src/assets/social_icons/google.svg'
+import microsoftIcon from '@proofzero/design-system/src/assets/social_icons/microsoft.svg'
+import appleIcon from '@proofzero/design-system/src/atoms/providers/Apple'
+import { OptionType } from '@proofzero/utils/getNormalisedConnectedAccounts'
+
 import {
   NodeType,
   OAuthAddressType,
@@ -15,6 +22,7 @@ import {
 
 <Meta title="Templates/Authorization" component={Authorization} />
 
+
 export const Template = (args) => (
   <Authorization
     userProfile={{
@@ -27,66 +35,91 @@ export const Template = (args) => (
       privacyURL: 'foo',
       termsURL: 'bar',
     }}
-    requestedScope={['openid', 'profile', 'connected_accounts', 'email']}
+    requestedScope={['openid', 'profile', 'connected_accounts', 'email', 'erc_4337']}
     scopeMeta={{
       scopes: SCOPES_JSON,
     }}
     connectedEmails={[
       {
-        email: 'email@example.com',
-        type: EmailAddressType.Email,
-        addressURN:
-          'urn:rollupid:address/0xc2b930f1fc2a55ddc1bf89e8844ca0479567ac44f3e2eea58216660e26947686',
+        title: 'email@gmail.com',
+        value: 'urn:rollupid:address/1',
+        icon: <img src={googleIcon} className="w-4 h-4 mr-3" />,
+      },
+      {
+        title: 'email@microsoft.com',
+        value: 'urn:rollupid:address/2',
+        icon: <img src={microsoftIcon} className="w-4 h-4 mr-3" />,
+      },
+      {
+        title: 'perez@apple.com',
+        value: 'urn:rollupid:address/5',
+        icon: <img src={appleIcon} className="w-4 h-4 mr-3" />,
       },
       {
-        email: 'email2@example.com',
-        type: OAuthAddressType.Microsoft,
-        addressURN:
-          'urn:rollupid:address/0xc2b930f1fc2a55ddc1bf99e8844ca0479567ac44f3e2eea58216660e26947686',
+        title: 'email@yahoo.com',
+        value: 'urn:rollupid:address/3',
+        icon: <HiOutlineEnvelope className="w-4 h-4 mr-3" />,
+        selected: true,
       },
     ]}
     selectEmailCallback={() => {}}
     addNewEmailCallback={() => {}}
     connectedAccounts={[
       {
-        address: 'email@example.com',
-        title: 'email@example.com',
-        icon: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTA3IiBoZWlnaHQ9IjEwNyIgdmlld0JveD0iMCAwIDEwNyAxMDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDciIGhlaWdodD0iMTA3IiByeD0iMTcuODMwOCIgZmlsbD0idXJsKCNwYWludDBfbGluZWFyXzgxMDNfMjEwMTApIi8+CjxwYXRoIGQ9Ik02Ny44NjYzIDg2LjgyNDZDODAuMjMwMiA4MS4xMjgzIDg4LjgxMjUgNjguNjI3IDg4LjgxMjUgNTQuMTIxMUM4OC44MTI1IDM0LjI0NTMgNzIuNyAxOC4xMzI4IDUyLjgyNDIgMTguMTMyOEMzMi45NDg0IDE4LjEzMjggMTYuODM1OSAzNC4yNDUzIDE2LjgzNTkgNTQuMTIxMUMxNi44MzU5IDY3LjIyMDkgMjMuODM1MSA3OC42ODU5IDM0LjI5NzcgODQuOTgwN1Y1My45MDgxTDM0LjI5ODkgNTMuOTA5M0MzNC40MTI0IDQzLjc3NSA0Mi42NjMgMzUuNTk0NiA1Mi44MjQyIDM1LjU5NDZDNjMuMDU2MSAzNS41OTQ2IDcxLjM1MDcgNDMuODg5MiA3MS4zNTA3IDU0LjEyMTFDNzEuMzUwNyA2NC4zNTE4IDYzLjA1ODEgNzIuNjQ1NiA1Mi44Mjc5IDcyLjY0NzZMNjcuODY2MyA4Ni44MjQ2WiIgZmlsbD0id2hpdGUiLz4KPGRlZnM+CjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhcl84MTAzXzIxMDEwIiB4MT0iNTMuNSIgeTE9IjAiIHgyPSI1My41IiB5Mj0iMTA3IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IiM2MzY2RjEiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMzk0NkQwIi8+CjwvbGluZWFyR3JhZGllbnQ+CjwvZGVmcz4KPC9zdmc+Cg==',
-        type: 'email',
-        id: 'urn:rollupid:address/0x98f8b8473269c7e4444756d5ecef7dce5457a5d58df4100b46478402f59de57c',
+        value: `urn:proofzero:address:0`,
+        title: `Account 0`,
+        subtitle: "SC Wallet - Address 0"
       },
       {
-        address: 'email2@example.com',
-        title: 'MS Email',
-        icon: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTA3IiBoZWlnaHQ9IjEwNyIgdmlld0JveD0iMCAwIDEwNyAxMDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDciIGhlaWdodD0iMTA3IiByeD0iMTcuODMwOCIgZmlsbD0idXJsKCNwYWludDBfbGluZWFyXzgxMDNfMjEwMTApIi8+CjxwYXRoIGQ9Ik02Ny44NjYzIDg2LjgyNDZDODAuMjMwMiA4MS4xMjgzIDg4LjgxMjUgNjguNjI3IDg4LjgxMjUgNTQuMTIxMUM4OC44MTI1IDM0LjI0NTMgNzIuNyAxOC4xMzI4IDUyLjgyNDIgMTguMTMyOEMzMi45NDg0IDE4LjEzMjggMTYuODM1OSAzNC4yNDUzIDE2LjgzNTkgNTQuMTIxMUMxNi44MzU5IDY3LjIyMDkgMjMuODM1MSA3OC42ODU5IDM0LjI5NzcgODQuOTgwN1Y1My45MDgxTDM0LjI5ODkgNTMuOTA5M0MzNC40MTI0IDQzLjc3NSA0Mi42NjMgMzUuNTk0NiA1Mi44MjQyIDM1LjU5NDZDNjMuMDU2MSAzNS41OTQ2IDcxLjM1MDcgNDMuODg5MiA3MS4zNTA3IDU0LjEyMTFDNzEuMzUwNyA2NC4zNTE4IDYzLjA1ODEgNzIuNjQ1NiA1Mi44Mjc5IDcyLjY0NzZMNjcuODY2MyA4Ni44MjQ2WiIgZmlsbD0id2hpdGUiLz4KPGRlZnM+CjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhcl84MTAzXzIxMDEwIiB4MT0iNTMuNSIgeTE9IjAiIHgyPSI1My41IiB5Mj0iMTA3IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IiM2MzY2RjEiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMzk0NkQwIi8+CjwvbGluZWFyR3JhZGllbnQ+CjwvZGVmcz4KPC9zdmc+Cg==',
-        type: 'microsoft',
-        id: 'urn:rollupid:address/0x3c7d7e3fef81c03333ed63d4ac83d2a1840356122163985deb1615e6ecfc25be',
+        value: `urn:proofzero:address:1`,
+        title: `Account 1`,
+        subtitle: "Github - Address 1"
       },
       {
-        address: 'Github-Account',
-        title: 'Github',
-        icon: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTA3IiBoZWlnaHQ9IjEwNyIgdmlld0JveD0iMCAwIDEwNyAxMDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDciIGhlaWdodD0iMTA3IiByeD0iMTcuODMwOCIgZmlsbD0idXJsKCNwYWludDBfbGluZWFyXzgxMDNfMjEwMTApIi8+CjxwYXRoIGQ9Ik02Ny44NjYzIDg2LjgyNDZDODAuMjMwMiA4MS4xMjgzIDg4LjgxMjUgNjguNjI3IDg4LjgxMjUgNTQuMTIxMUM4OC44MTI1IDM0LjI0NTMgNzIuNyAxOC4xMzI4IDUyLjgyNDIgMTguMTMyOEMzMi45NDg0IDE4LjEzMjggMTYuODM1OSAzNC4yNDUzIDE2LjgzNTkgNTQuMTIxMUMxNi44MzU5IDY3LjIyMDkgMjMuODM1MSA3OC42ODU5IDM0LjI5NzcgODQuOTgwN1Y1My45MDgxTDM0LjI5ODkgNTMuOTA5M0MzNC40MTI0IDQzLjc3NSA0Mi42NjMgMzUuNTk0NiA1Mi44MjQyIDM1LjU5NDZDNjMuMDU2MSAzNS41OTQ2IDcxLjM1MDcgNDMuODg5MiA3MS4zNTA3IDU0LjEyMTFDNzEuMzUwNyA2NC4zNTE4IDYzLjA1ODEgNzIuNjQ1NiA1Mi44Mjc5IDcyLjY0NzZMNjcuODY2MyA4Ni44MjQ2WiIgZmlsbD0id2hpdGUiLz4KPGRlZnM+CjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhcl84MTAzXzIxMDEwIiB4MT0iNTMuNSIgeTE9IjAiIHgyPSI1My41IiB5Mj0iMTA3IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IiM2MzY2RjEiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMzk0NkQwIi8+CjwvbGluZWFyR3JhZGllbnQ+CjwvZGVmcz4KPC9zdmc+Cg==',
-        type: 'github',
-        id: 'urn:rollupid:address/0xa69240d7b361e122d22aa68ff97b9530c7c85953fba9dac392ca8dbfb88e17cc',
+        value: `urn:proofzero:address:2`,
+        title: `Account 2`,
+        subtitle: "Google - Address 2"
       },
       {
-        address: '0x6c60Da9471181Aa54C648c6e203663A5501363F3',
-        title: 'ens.eth',
-        icon: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTA3IiBoZWlnaHQ9IjEwNyIgdmlld0JveD0iMCAwIDEwNyAxMDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDciIGhlaWdodD0iMTA3IiByeD0iMTcuODMwOCIgZmlsbD0idXJsKCNwYWludDBfbGluZWFyXzgxMDNfMjEwMTApIi8+CjxwYXRoIGQ9Ik02Ny44NjYzIDg2LjgyNDZDODAuMjMwMiA4MS4xMjgzIDg4LjgxMjUgNjguNjI3IDg4LjgxMjUgNTQuMTIxMUM4OC44MTI1IDM0LjI0NTMgNzIuNyAxOC4xMzI4IDUyLjgyNDIgMTguMTMyOEMzMi45NDg0IDE4LjEzMjggMTYuODM1OSAzNC4yNDUzIDE2LjgzNTkgNTQuMTIxMUMxNi44MzU5IDY3LjIyMDkgMjMuODM1MSA3OC42ODU5IDM0LjI5NzcgODQuOTgwN1Y1My45MDgxTDM0LjI5ODkgNTMuOTA5M0MzNC40MTI0IDQzLjc3NSA0Mi42NjMgMzUuNTk0NiA1Mi44MjQyIDM1LjU5NDZDNjMuMDU2MSAzNS41OTQ2IDcxLjM1MDcgNDMuODg5MiA3MS4zNTA3IDU0LjEyMTFDNzEuMzUwNyA2NC4zNTE4IDYzLjA1ODEgNzIuNjQ1NiA1Mi44Mjc5IDcyLjY0NzZMNjcuODY2MyA4Ni44MjQ2WiIgZmlsbD0id2hpdGUiLz4KPGRlZnM+CjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhcl84MTAzXzIxMDEwIiB4MT0iNTMuNSIgeTE9IjAiIHgyPSI1My41IiB5Mj0iMTA3IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IiM2MzY2RjEiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMzk0NkQwIi8+CjwvbGluZWFyR3JhZGllbnQ+CjwvZGVmcz4KPC9zdmc+Cg==',
-        type: 'eth',
-        id: 'urn:rollupid:address/0x4416ad52d0d65d4b8852b8041039822e92ff4aa301af1b3ab987bd930f6fb4c8',
+        value: `urn:proofzero:address:3`,
+        title: `Account 3`,
+        subtitle: "Microsoft - Address 3"
       },
     ]}
     selectAccountsCallback={() => {}}
     disableAuthorization={true}
     transitionState={'idle'}
+    connectedSmartContractWallets={[
+      {
+        value: `urn:proofzero:address:0`,
+        title: `Account 0`,
+        subtitle: "SC Wallet - Address 0"
+      },
+      {
+        value: `urn:proofzero:address:1`,
+        title: `Account 1`,
+        subtitle: "Github - Address 1"
+      },
+      {
+        value: `urn:proofzero:address:2`,
+        title: `Account 2`,
+        subtitle: "Google - Address 2"
+      },
+      {
+        value: `urn:proofzero:address:3`,
+        title: `Account 3`,
+        subtitle: "Microsoft - Address 3"
+      },
+    ]}
+    selectSmartWalletCallback={() => {}}
+    addNewSmartWalletCallback={() => {}}
   >
     {' '}
   </Authorization>
 )
 
 # Authorization
 
-<Canvas>
+  < Canvas >
   <Story name="Passport Authorization">{Template.bind({})}</Story>
-</Canvas>
+</Canvas >
diff --git a/packages/design-system/src/templates/authorization/Authorization.tsx b/packages/design-system/src/templates/authorization/Authorization.tsx
@@ -45,15 +45,15 @@ type AuthorizationProps = {
 
   transitionState: 'idle' | 'submitting' | 'loading'
 
-  connectedSmartContractWallets: DropdownSelectListItem[]
+  connectedSmartContractWallets?: DropdownSelectListItem[]
   addNewSmartWalletCallback: () => void
   selectSmartWalletCallback: (selected: Array<DropdownSelectListItem>) => void
 
-  connectedEmails: DropdownSelectListItem[]
+  connectedEmails?: Array<DropdownSelectListItem>
   addNewEmailCallback: () => void
   selectEmailCallback: (selected: DropdownSelectListItem) => void
 
-  connectedAccounts: DropdownSelectListItem[]
+  connectedAccounts?: DropdownSelectListItem[]
   addNewAccountCallback: () => void
   selectAccountsCallback: (
     selected: Array<DropdownSelectListItem>

diff --git a/packages/utils/getNormalisedConnectedAccounts.ts b/packages/utils/getNormalisedConnectedAccounts.ts