web app cleanup

usecannon · Jan 15, 2024 · f5fae5c · f5fae5c
1 parent b19b99d
commit f5fae5c
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 68 deletions.
diff --git a/packages/website/src/features/Deploy/PublishUtility.tsx b/packages/website/src/features/Deploy/PublishUtility.tsx
@@ -1,12 +1,5 @@
 import { ethers } from 'ethers';
-import {
-  Button,
-  FormControl,
-  FormHelperText,
-  Link,
-  Spinner,
-  Text,
-} from '@chakra-ui/react';
+import { Button, Link, Spinner, Text } from '@chakra-ui/react';
 import { useAccount, useMutation, useWalletClient } from 'wagmi';
 import {
   CannonStorage,
@@ -18,7 +11,7 @@ import {
 import { useCannonPackage } from '@/hooks/cannon';
 import { IPFSBrowserLoader } from '@/helpers/ipfs';
 import { useStore } from '@/helpers/store';
-import { ExternalLinkIcon } from '@chakra-ui/icons';
+import { ExternalLinkIcon, InfoOutlineIcon } from '@chakra-ui/icons';
 
 export default function PublishUtility(props: {
   deployUrl: string;
@@ -132,51 +125,52 @@ export default function PublishUtility(props: {
     );
   } else if (existingRegistryUrl !== props.deployUrl) {
     return (
-      <FormControl>
+      <>
         {!existingRegistryUrl ? (
-          <Text>
+          <Text fontSize="sm" mb={2}>
             The package resulting from this deployment has not been published to
             the registry.
           </Text>
         ) : (
-          <Text>
+          <Text fontSize="sm" mb={2}>
             A different package has been published to the registry with a
             matching name and version.
           </Text>
         )}
         {settings.isIpfsGateway && (
-          <Text>
+          <Text fontSize="sm" mb={2}>
             You cannot publish on an IPFS gateway, only read operations can be
             done.
           </Text>
         )}
         {settings.ipfsApiUrl.includes('https://repo.usecannon.com') && (
-          <Text>
+          <Text fontSize="sm" mb={2}>
             You cannot publish on an repo endpoint, only read operations can be
             done.
           </Text>
         )}
-        <Button
-          isDisabled={
-            settings.isIpfsGateway ||
-            settings.ipfsApiUrl.includes('https://repo.usecannon.com') ||
-            wc.data?.chain?.id !== 1 ||
-            publishMutation.isLoading
-          }
-          onClick={() => publishMutation.mutate()}
-          mt={4}
-        >
-          {publishMutation.isLoading
-            ? [<Spinner key={0} />, ' Publish in Progress...']
-            : 'Publish to Registry'}
-        </Button>
-        {wc.data?.chain?.id !== 1 && (
-          <FormHelperText>
-            You must set your wallet to Ethereum Mainnet to publish this
-            package.
-          </FormHelperText>
+
+        {wc.data?.chain?.id === 1 ? (
+          <Button
+            isDisabled={
+              settings.isIpfsGateway ||
+              settings.ipfsApiUrl.includes('https://repo.usecannon.com') ||
+              wc.data?.chain?.id !== 1 ||
+              publishMutation.isLoading
+            }
+            onClick={() => publishMutation.mutate()}
+          >
+            {publishMutation.isLoading
+              ? [<Spinner key={0} />, ' Publish in Progress...']
+              : 'Publish to Registry'}
+          </Button>
+        ) : (
+          <Text fontSize="xs" fontWeight="medium">
+            <InfoOutlineIcon transform="translateY(-1.5px)" mr={1.5} />
+            Connect a wallet using chain ID 1 to publish
+          </Text>
         )}
-      </FormControl>
+      </>
     );
   } else {
     return (

diff --git a/packages/website/src/features/Deploy/QueueFromGitOpsPage.tsx b/packages/website/src/features/Deploy/QueueFromGitOpsPage.tsx
@@ -251,7 +251,8 @@ function QueueFromGitOps() {
   const buildInfo = useCannonBuild(
     currentSafe as any,
     cannonDefInfo.def as any,
-    prevCannonDeployInfo.pkg as any
+    prevCannonDeployInfo.pkg as any,
+    chainId
   );
 
   const buildTransactions = () => {

diff --git a/packages/website/src/features/Deploy/TransactionDetailsPage.tsx b/packages/website/src/features/Deploy/TransactionDetailsPage.tsx
@@ -10,7 +10,6 @@ import {
   Alert,
   Button,
   Grid,
-  HStack,
   Link,
   Tooltip,
   useToast,
@@ -176,7 +175,8 @@ const TransactionDetailsPage: FC<{
   const buildInfo = useCannonBuild(
     safe,
     cannonDefInfo.def as any,
-    prevCannonDeployInfo.pkg as any
+    prevCannonDeployInfo.pkg as any,
+    Number(chainId)
   );
 
   useEffect(
@@ -393,15 +393,10 @@ const TransactionDetailsPage: FC<{
                       <Box>
                         {account.isConnected &&
                         walletChainId === safe.chainId ? (
-                          <HStack
-                            gap="6"
-                            mt={4}
-                            marginLeft={'auto'}
-                            marginRight={'auto'}
-                          >
+                          <>
                             <Tooltip label={stager.signConditionFailed}>
                               <Button
-                                size="lg"
+                                mb={3}
                                 w="100%"
                                 isDisabled={
                                   (safeTxn &&
@@ -414,7 +409,6 @@ const TransactionDetailsPage: FC<{
                             </Tooltip>
                             <Tooltip label={stager.execConditionFailed}>
                               <Button
-                                size="lg"
                                 w="100%"
                                 isDisabled={
                                   (safeTxn &&
@@ -437,9 +431,9 @@ const TransactionDetailsPage: FC<{
                                 Execute
                               </Button>
                             </Tooltip>
-                          </HStack>
+                          </>
                         ) : (
-                          <Text fontSize="xs" fontWeight="medium" mt={4}>
+                          <Text fontSize="xs" fontWeight="medium" mt={3}>
                             <InfoOutlineIcon
                               transform="translateY(-1.5px)"
                               mr={1.5}
@@ -451,26 +445,25 @@ const TransactionDetailsPage: FC<{
                       </Box>
                     )}
                   </Box>
-                </Box>
-
-                {allowPublishing && (
-                  <Box
-                    background="gray.800"
-                    p={4}
-                    borderWidth="1px"
-                    borderColor="gray.700"
-                    mb={8}
-                  >
-                    <Heading size="xs" mb="1">
-                      Cannon Package
-                    </Heading>
+                  {allowPublishing && (
+                    <Box
+                      background="gray.800"
+                      p={4}
+                      borderWidth="1px"
+                      borderColor="gray.700"
+                      mb={8}
+                    >
+                      <Heading size="sm" mb="2">
+                        Cannon Package
+                      </Heading>
 
-                    <PublishUtility
-                      deployUrl={hintData.cannonPackage}
-                      targetChainId={safe.chainId}
-                    />
-                  </Box>
-                )}
+                      <PublishUtility
+                        deployUrl={hintData.cannonPackage}
+                        targetChainId={safe.chainId}
+                      />
+                    </Box>
+                  )}
+                </Box>
               </Box>
             </Grid>
           </Container>

diff --git a/packages/website/src/hooks/cannon.ts b/packages/website/src/hooks/cannon.ts
@@ -63,9 +63,8 @@ export function useLoadCannonDefinition(repo: string, ref: string, filepath: str
   };
 }
 
-export function useCannonBuild(safe: SafeDefinition, def: ChainDefinition, prevDeploy: DeploymentInfo) {
+export function useCannonBuild(safe: SafeDefinition, def: ChainDefinition, prevDeploy: DeploymentInfo, chainId: number) {
   const { addLog } = useLogs();
-  const chainId = useChainId();
   const settings = useStore((s) => s.settings);
 
   const [buildStatus, setBuildStatus] = useState('');