Merge branch 'main' of github.com:neti-software/aleph-zero-hackathon

neti-software · Jan 30, 2024 · c30cf88 · c30cf88
2 parents 1106123 + 7a0df38
commit c30cf88
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 17 deletions.
diff --git a/frontend/src/app/dashboard/page.tsx b/frontend/src/app/dashboard/page.tsx
@@ -72,7 +72,7 @@ export default function Dashboard() {
             decodedOutput: decodedOutput2,
           } = decodeOutput(metadata, contract, 'PSP34Metadata::get_attribute')
 
-          const output3 = keyring.encodeAddress(hexToU8a(output2), 42)
+          const output3 = output2 != null ? keyring.encodeAddress(hexToU8a(output2), 42) : output2
 
           setTableData((prevData) => [
             ...prevData,

diff --git a/frontend/src/app/register-phone/page.tsx b/frontend/src/app/register-phone/page.tsx
@@ -3,30 +3,30 @@
 import { useState } from 'react'
 
 import { ContractIds } from '@/deployments/deployments'
+import { Box } from '@mui/material'
 import { useInkathon, useRegisteredContract } from '@scio-labs/use-inkathon'
 import toast from 'react-hot-toast'
 
 import RequestForm from '@/components/ui/request-form'
 import { contractTxWithToast } from '@/utils/contract-tx-with-toast'
 
-type UpdateGreetingValues = { newMessage: string }
-
 export default function Mint() {
   const { api, activeAccount, activeSigner } = useInkathon()
   const { contract, address: contractAddress } = useRegisteredContract(ContractIds.PhoneNumbers)
   const [updateIsLoading, setUpdateIsLoading] = useState<boolean>(false)
 
-  const handleFormData = async (phoneNumber: string) => {
+  const handleFormData = async ({ input, operator }: { input: string; operator: string }) => {
     if (!activeAccount || !contract || !activeSigner || !api) {
       toast.error('Wallet not connected. Try again…')
       return
     }
-
     setUpdateIsLoading(true)
     try {
-      await contractTxWithToast(api, activeAccount.address, contract, 'setMetadata', {}, [
-        activeAccount.address,
-        { Bytes: '123123123' },
+      await contractTxWithToast(api, activeAccount.address, contract, 'mint', {}, [input])
+      await contractTxWithToast(api, activeAccount.address, contract, 'PSP34::transfer', {}, [
+        operator,
+        { Bytes: input },
+        '',
       ])
     } catch (e) {
       console.error(e)
@@ -39,7 +39,13 @@ export default function Mint() {
 
   return (
     <>
-      <RequestForm onFormDataSubmit={handleFormData} updateIsLoading={updateIsLoading} />
+      <Box sx={{ mt: '20vh' }}>
+        <RequestForm
+          onFormDataSubmit={handleFormData}
+          updateIsLoading={updateIsLoading}
+          name="register_phone"
+        />
+      </Box>
     </>
   )
 }
diff --git a/frontend/src/components/ui/app-bar.tsx b/frontend/src/components/ui/app-bar.tsx
@@ -15,7 +15,7 @@ import logo from 'public/icons/logo.svg'
 import { ConnectButton } from '../web3/connect-button'
 
 function ResponsiveAppBar() {
-  const [value, setValue] = React.useState(1)
+  const [value, setValue] = React.useState(0)
   const path = usePathname()
   if (path === '/') return
 

diff --git a/frontend/src/components/ui/request-form.tsx b/frontend/src/components/ui/request-form.tsx
@@ -18,19 +18,19 @@ const theme = createTheme({
 })
 
 interface RequestFormProps {
-  onFormDataSubmit: (input: string) => void
+  onFormDataSubmit: ({ input, operator }: { input: string; operator: string }) => void
   name: string
   updateIsLoading: boolean
 }
 
 function RequestForm({ onFormDataSubmit, name, updateIsLoading }: RequestFormProps) {
   const [input, setInput] = useState('')
+  const [operator, setOperator] = useState('')
 
   const handleSubmit = (event: React.FormEvent) => {
     event.preventDefault()
-    onFormDataSubmit(input)
+    onFormDataSubmit({ input, operator })
   }
-
   return (
     <ThemeProvider theme={theme}>
       <Container component="main" maxWidth="xs">
@@ -42,11 +42,11 @@ function RequestForm({ onFormDataSubmit, name, updateIsLoading }: RequestFormPro
           }}
         >
           <Typography component="h1" variant="h5" color="primary">
-            set {name === 'number_owner' ? 'new owner' : null}
+            set {name === 'number_owner' ? 'new owner' : 'new phone number'}
           </Typography>
           <Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
             <InputLabel htmlFor={name} sx={{ color: '#00eac7' }}>
-              {name === 'number_owner' ? 'wallet address' : null}
+              {name === 'number_owner' ? 'wallet address' : 'phone number'}
             </InputLabel>
             <TextField
               margin="normal"
@@ -82,6 +82,47 @@ function RequestForm({ onFormDataSubmit, name, updateIsLoading }: RequestFormPro
                 },
               }}
             />
+            {name === 'register_phone' ? (
+              <>
+                <InputLabel htmlFor={name} sx={{ color: '#00eac7' }}>
+                  operator
+                </InputLabel>
+                <TextField
+                  margin="normal"
+                  value={operator}
+                  required
+                  fullWidth
+                  id={name}
+                  name={name}
+                  autoFocus
+                  onChange={(e) => setOperator(e.target.value)}
+                  sx={{
+                    mt: 0,
+                    input: { color: 'black' },
+                    backgroundColor: 'white',
+                    borderRadius: '10px',
+                    '& label.Mui-focused': {
+                      color: '#00eac7',
+                      borderRadius: '10px',
+                    },
+                    '& .MuiInput-underline:after': {
+                      borderBottomColor: '#00eac7',
+                      borderRadius: '10px',
+                    },
+                    '& .MuiOutlinedInput-root': {
+                      '&:hover fieldset': {
+                        borderColor: '#00eac7',
+                        borderRadius: '10px',
+                      },
+                      '&.Mui-focused fieldset': {
+                        borderColor: '#00eac7',
+                        borderRadius: '10px',
+                      },
+                    },
+                  }}
+                />
+              </>
+            ) : null}
 
             <Button
               type="submit"

diff --git a/frontend/src/components/ui/request-metadata.tsx b/frontend/src/components/ui/request-metadata.tsx
@@ -20,15 +20,15 @@ export default function RequestMetadata({
   const { contract, address: contractAddress } = useRegisteredContract(ContractIds.PhoneNumbers)
   const [updateIsLoading, setUpdateIsLoading] = useState<boolean>(false)
 
-  const handleFormData = async (newOwner: string) => {
+  const handleFormData = async ({ input, operator }: { input: string; operator: string }) => {
     if (!activeAccount || !contract || !activeSigner || !api) {
       toast.error('Wallet not connected. Try again…')
       return
     }
     setUpdateIsLoading(true)
     try {
       await contractTxWithToast(api, activeAccount.address, contract, 'setMetadata', {}, [
-        newOwner,
+        input,
         { Bytes: phoneNumber },
       ])
       onClose()