feat: contract labels

paradigmxyz · Nov 12, 2023 · 0edf9d9 · 0edf9d9
1 parent 70308a4
commit 0edf9d9
Show file tree

Hide file tree

Showing 6 changed files with 210 additions and 130 deletions.
diff --git a/src/components/FormPopover.tsx b/src/components/FormPopover.tsx
@@ -0,0 +1,68 @@
+import * as Popover from '@radix-ui/react-popover'
+import { type ReactNode, useState } from 'react'
+
+import { Box, Button, Stack } from '~/design-system'
+import * as Form from './form'
+
+export function FormPopover({
+  children,
+  disabled,
+  onSubmit,
+}: {
+  children: ReactNode
+  disabled: boolean
+  onSubmit: (e: React.FormEvent) => void
+}) {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <Popover.Root open={open}>
+      <Popover.Trigger asChild>
+        <Box position="absolute" style={{ top: -6 }}>
+          <Button.Symbol
+            label="Edit"
+            height="16px"
+            onClick={() => setOpen(true)}
+            symbol="square.and.pencil"
+            variant="ghost primary"
+          />
+        </Box>
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Content
+          onEscapeKeyDown={() => setOpen(false)}
+          onPointerDownOutside={() => setOpen(false)}
+          style={{ zIndex: 1 }}
+        >
+          <Box
+            backgroundColor="surface/secondary/elevated"
+            borderWidth="1px"
+            gap="4px"
+            padding="8px"
+            width="full"
+          >
+            <Form.Root
+              onSubmit={(e) => {
+                onSubmit(e)
+                setOpen(false)
+              }}
+            >
+              <Stack gap="8px">
+                {children}
+                <Button
+                  disabled={disabled}
+                  height="20px"
+                  type="submit"
+                  variant="stroked fill"
+                  width="fit"
+                >
+                  Update
+                </Button>
+              </Stack>
+            </Form.Root>
+          </Box>
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  )
+}
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -9,6 +9,7 @@ export { DecodedLogs } from './logs'
 export { TabsContent, TabsList } from './tabs'
 
 export { Container } from './Container'
+export { FormPopover } from './FormPopover'
 export { Header } from './Header'
 export { LabelledContent } from './LabelledContent'
 export { LoadMore } from './LoadMore'

diff --git a/src/screens/contract-details.tsx b/src/screens/contract-details.tsx
@@ -2,15 +2,18 @@ import * as Tabs from '@radix-ui/react-tabs'
 import { useMutation } from '@tanstack/react-query'
 import type { Abi, AbiFunction } from 'abitype'
 import { useMemo } from 'react'
+import { useForm } from 'react-hook-form'
 import { useParams } from 'react-router'
 
 import {
   AbiFunctionsAccordion,
   Container,
+  FormPopover,
   LabelledContent,
   TabsContent,
   TabsList,
 } from '~/components'
+import * as Form from '~/components/form'
 import { Bleed, Box, Stack, Text } from '~/design-system'
 import { useAutoloadAbi } from '~/hooks/useAutoloadAbi'
 import { useContracts } from '~/hooks/useContracts'
@@ -20,11 +23,19 @@ export default function ContractDetails() {
   const { contracts, updateContract } = useContracts({ enabled: false })
   const contract = contracts.find((c) => c.address === contractAddress)
 
-  const {
-    data: autoloadAbi,
-    isLoading,
-    isFetched,
-  } = useAutoloadAbi({
+  ////////////////////////////////////////////////////////////////////////
+
+  const { formState, register, handleSubmit } = useForm({
+    defaultValues: { name: contract?.name },
+  })
+
+  const update = handleSubmit(({ name }) => {
+    updateContract({ address: contract?.address!, name })
+  })
+
+  ////////////////////////////////////////////////////////////////////////
+
+  const { data: autoloadAbi, isLoading } = useAutoloadAbi({
     address: contract?.address,
     enabled: Boolean(!contract?.abi && contract?.address),
   })
@@ -66,18 +77,40 @@ export default function ContractDetails() {
     return [read as {} as AbiFunction[], write as {} as AbiFunction[]]
   }, [abiFunctions, hasStateMutability])
 
+  ////////////////////////////////////////////////////////////////////////
+
   return (
     <Container dismissable header="Contract Details">
       <Stack gap="20px">
-        <Box>
-          <LabelledContent label="Contract Address">
-            <Text size="12px">{contract?.address}</Text>
-          </LabelledContent>
-        </Box>
+        <LabelledContent
+          label="Label"
+          labelRight={
+            <FormPopover disabled={!formState.isValid} onSubmit={update}>
+              <Form.InputField
+                label="Label"
+                height="24px"
+                hideLabel
+                register={register('name', {
+                  required: true,
+                })}
+                style={{ width: '360px' }}
+              />
+            </FormPopover>
+          }
+        >
+          <Text size="12px">{contract?.name ?? 'Unnamed Contract'}</Text>
+        </LabelledContent>
+        <LabelledContent label="Contract Address">
+          <Text size="12px">{contract?.address}</Text>
+        </LabelledContent>
         {(isGuessedAbi || contract?.abi) && (
           <UploadAbi
-            onUpload={({ abi }) =>
-              updateContract({ abi, address: contract?.address! })
+            onUpload={({ abi, file }) =>
+              updateContract({
+                abi,
+                address: contract?.address!,
+                name: file.name.replace('.json', ''),
+              })
             }
           />
         )}
@@ -98,7 +131,7 @@ export default function ContractDetails() {
             Loading...
           </Text>
         )}
-        {isFetched && (
+        {abi && (
           <Tabs.Root asChild defaultValue="read">
             <Box display="flex" flexDirection="column" height="full">
               {hasStateMutability ? (
@@ -150,7 +183,9 @@ export default function ContractDetails() {
   )
 }
 
-function UploadAbi({ onUpload }: { onUpload: (abi: { abi: Abi }) => void }) {
+function UploadAbi({
+  onUpload,
+}: { onUpload: (abi: { abi: Abi; file: File }) => void }) {
   const { error, mutateAsync: uploadAbi } = useMutation({
     async mutationFn(files: FileList | null) {
       if (!files) return
@@ -166,7 +201,7 @@ function UploadAbi({ onUpload }: { onUpload: (abi: { abi: Abi }) => void }) {
       if (!isAbi)
         throw new Error('ABI is not valid. Please upload a valid ABI.')
 
-      onUpload({ abi })
+      onUpload({ abi, file })
     },
   })
 

diff --git a/src/screens/index.tsx b/src/screens/index.tsx
@@ -833,7 +833,7 @@ function Contracts() {
           (_, index) =>
             ({
               index,
-              size: 32,
+              size: 40,
               type: 'item',
             }) as const,
         ),
@@ -908,19 +908,39 @@ function Contracts() {
                     backgroundColor={{ hover: 'surface/fill/quarternary' }}
                     paddingHorizontal="8px"
                     paddingVertical="8px"
-                    height="full"
+                    style={{ minHeight: '40px' }}
                   >
-                    <Columns alignHorizontal="justify" gap="4px" width="full">
+                    <Columns
+                      alignHorizontal="justify"
+                      gap="4px"
+                      alignVertical="center"
+                      width="full"
+                    >
                       <Column alignVertical="center">
-                        {contract.address !== '0x' ? (
-                          <Text size="11px" wrap={false}>
-                            {contract.address}
-                          </Text>
-                        ) : (
-                          <Text color="text/tertiary" size="11px" wrap={false}>
-                            Deploying...
-                          </Text>
-                        )}
+                        <Stack gap="8px">
+                          {contract.address !== '0x' ? (
+                            <>
+                              <Text size="11px" wrap={false}>
+                                {contract.name || 'Unnamed Contract'}
+                              </Text>
+                              <Text
+                                color="text/secondary"
+                                size="9px"
+                                wrap={false}
+                              >
+                                {contract.address}
+                              </Text>
+                            </>
+                          ) : (
+                            <Text
+                              color="text/tertiary"
+                              size="11px"
+                              wrap={false}
+                            >
+                              Deploying...
+                            </Text>
+                          )}
+                        </Stack>
                       </Column>
                       <Column alignVertical="center" width="content">
                         <Button.Symbol