feat: extend sandbox with PoO request

PoO - proof of ownership
radixdlt · Oct 11, 2024 · 4ddb5b6 · 4ddb5b6
1 parent ff4363f
commit 4ddb5b6
Show file tree

Hide file tree

Showing 6 changed files with 231 additions and 12 deletions.
diff --git a/apps/sandbox/src/data-request/PersonaDataCard.tsx b/apps/sandbox/src/data-request/PersonaDataCard.tsx
@@ -76,7 +76,6 @@ export const PersonaDataCard = () => {
             )
           }
         )}
-        ;
         <Box mt={2}>
           <Checkbox
             disabled={!enabled}

diff --git a/apps/sandbox/src/one-time-data-request/AccountsProof.tsx b/apps/sandbox/src/one-time-data-request/AccountsProof.tsx
@@ -0,0 +1,92 @@
+import Box from '@mui/joy/Box'
+import Checkbox from '@mui/joy/Checkbox'
+import { Card } from '../components/Card'
+import { Button, Input } from '@mui/joy'
+
+export const AccountsProofCard = ({
+  state,
+  updateState
+}: {
+  state: {
+    enabled: boolean
+    data: {
+      addresses: string[]
+    }
+  }
+  updateState: (state: {
+    enabled: boolean
+    data: {
+      addresses: string[]
+    }
+  }) => void
+}) => {
+  const enabled = !!state.enabled
+  return (
+    <Card
+      title="Accounts Proof of Ownership"
+      side={
+        <Checkbox
+          checked={enabled}
+          onChange={(ev) => {
+            updateState({ ...state, enabled: ev.target.checked })
+          }}
+        />
+      }
+    >
+      <Box
+        sx={{
+          p: 2,
+          display: 'grid',
+          gap: 2
+        }}
+      >
+        <Button
+          color="primary"
+          onClick={() => {
+            updateState({
+              ...state,
+              data: {
+                addresses: [...state.data.addresses, '']
+              }
+            })
+          }}
+        >
+          Add
+        </Button>
+        {state.data.addresses.map((address, index) => (
+          <Box sx={{ display: 'flex', gap: 1 }} key={index}>
+            <Input
+              sx={{ width: '100%' }}
+              placeholder="account address"
+              value={address}
+              onChange={(ev) => {
+                const addresses = [...state.data.addresses]
+                addresses[index] = ev.target.value
+                updateState({
+                  ...state,
+                  data: {
+                    addresses
+                  }
+                })
+              }}
+            />
+            <Button
+              onClick={() => {
+                const addresses = [...state.data.addresses]
+                addresses.splice(index, 1)
+                updateState({
+                  ...state,
+                  data: {
+                    addresses
+                  }
+                })
+              }}
+            >
+              x
+            </Button>
+          </Box>
+        ))}
+      </Box>
+    </Card>
+  )
+}
diff --git a/apps/sandbox/src/one-time-data-request/OneTimeDataRequestsPage.tsx b/apps/sandbox/src/one-time-data-request/OneTimeDataRequestsPage.tsx
@@ -12,6 +12,8 @@ import {
   OneTimeDataRequestBuilderItem
 } from '@common/rdt'
 import { useState } from 'react'
+import { PersonaProofCard } from './PersonaProof'
+import { AccountsProofCard } from './AccountsProof'
 export const OneTimeDataRequestsPage = () => {
   const [state, setState] = useState<{
     accounts: {
@@ -32,6 +34,18 @@ export const OneTimeDataRequestsPage = () => {
         phoneNumbers: boolean
       }
     }
+    personaProof: {
+      enabled: boolean
+      data: {
+        address: string
+      }
+    }
+    accountsProof: {
+      enabled: boolean
+      data: {
+        addresses: string[]
+      }
+    }
   }>({
     accounts: {
       enabled: true,
@@ -47,14 +61,27 @@ export const OneTimeDataRequestsPage = () => {
         emailAddresses: false,
         phoneNumbers: false
       }
+    },
+    personaProof: {
+      enabled: false,
+      data: {
+        address: ''
+      }
+    },
+    accountsProof: {
+      enabled: false,
+      data: {
+        addresses: []
+      }
     }
   })
 
   return (
     <Box
       sx={{
         display: 'grid',
-        gridTemplateColumns: 'minmax(160px, 300px) minmax(200px, 1fr)',
+        gridTemplateColumns:
+          'minmax(160px, 300px) minmax(300px, 500px) minmax(200px, 1fr)',
         gap: 1
       }}
     >
@@ -77,6 +104,25 @@ export const OneTimeDataRequestsPage = () => {
           }}
         />
       </Box>
+      <Box
+        sx={{
+          display: 'grid',
+          gap: 1
+        }}
+      >
+        <PersonaProofCard
+          state={state.personaProof}
+          updateState={(personaProof) => {
+            setState((prev) => ({ ...prev, personaProof }))
+          }}
+        />
+        <AccountsProofCard
+          state={state.accountsProof}
+          updateState={(accountsProof) => {
+            setState((prev) => ({ ...prev, accountsProof }))
+          }}
+        />
+      </Box>
       <Box>
         <Sheet
           variant="outlined"
@@ -124,6 +170,23 @@ export const OneTimeDataRequestsPage = () => {
                     dataRequest.push(personaDataRequest)
                   }
 
+                  if (
+                    state.personaProof.enabled ||
+                    state.accountsProof.enabled
+                  ) {
+                    let poo = OneTimeDataRequestBuilder.proofOfOwnership()
+                    dataRequest.push(
+                      state.accountsProof.enabled
+                        ? (state.personaProof.enabled
+                            ? poo.identity(state.personaProof.data.address)
+                            : poo
+                          ).accounts(
+                            state.accountsProof.data.addresses.filter(Boolean)
+                          )
+                        : poo
+                    )
+                  }
+
                   rdt.walletApi.sendOneTimeRequest(...dataRequest)
                 }}
                 sx={{ alignSelf: 'center', width: '150px' }}

diff --git a/apps/sandbox/src/one-time-data-request/PersonaProof.tsx b/apps/sandbox/src/one-time-data-request/PersonaProof.tsx
@@ -0,0 +1,49 @@
+import Box from '@mui/joy/Box'
+import Checkbox from '@mui/joy/Checkbox'
+import { Card } from '../components/Card'
+import { Input } from '@mui/joy'
+
+export const PersonaProofCard = ({
+  state,
+  updateState
+}: {
+  state: {
+    enabled: boolean
+    data: {
+      address: string
+    }
+  }
+  updateState: (state: {
+    enabled: boolean
+    data: {
+      address: string
+    }
+  }) => void
+}) => {
+  const enabled = !!state.enabled
+  return (
+    <Card
+      title="Persona Proof of Ownership"
+      side={
+        <Checkbox
+          checked={enabled}
+          onChange={(ev) => {
+            updateState({ ...state, enabled: ev.target.checked })
+          }}
+        />
+      }
+    >
+      <Box sx={{ p: 2 }}>
+        <Input
+          placeholder="Identity address"
+          onChange={(event) => {
+            updateState({
+              ...state,
+              data: { address: event.target.value.toString() }
+            })
+          }}
+        />
+      </Box>
+    </Card>
+  )
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/common/package.json b/packages/common/package.json
@@ -7,7 +7,7 @@
     "@floating-ui/dom": "^1.5.3",
     "@radixdlt/babylon-core-api-sdk": "^1.2.3",
     "@radixdlt/babylon-gateway-api-sdk": "^1.7.3",
-    "@radixdlt/radix-dapp-toolkit": "^2.1.1",
+    "@radixdlt/radix-dapp-toolkit": "2.2.0-dev.5",
     "@radixdlt/radix-engine-toolkit": "^1.0.5",
     "@radixdlt/rola": "^2.0.0",
     "dayjs": "^1.11.10",