More responsiveness and fixes

FrederikBolding · Jul 25, 2024 · 43b670a · 43b670a
1 parent 08f7483
commit 43b670a
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 10 deletions.
diff --git a/src/components/Chain.tsx b/src/components/Chain.tsx
@@ -23,9 +23,17 @@ export const Chain = ({
 }: ChainData) => {
   const { isConnected, handleConnect, handleAddChain } =
     useContext(Web3Context);
-  const handleAddChainClick = () => {
+
+  const handleConnectClick = (event: React.MouseEvent) => {
+    event.preventDefault();
+    handleConnect();
+  };
+
+  const handleAddChainClick = (event: React.MouseEvent) => {
+    event.preventDefault();
     handleAddChain({ name, chainId, nativeCurrency, ...rest });
   };
+
   return (
     <Link to={`/chain/${chainId}`}>
       <Flex
@@ -68,7 +76,7 @@ export const Chain = ({
         </Flex>
         <Center mt="auto">
           {!isConnected ? (
-            <Button onClick={handleConnect}>Connect Wallet</Button>
+            <Button onClick={handleConnectClick}>Connect</Button>
           ) : (
             <Button onClick={handleAddChainClick}>Add Chain</Button>
           )}

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -65,7 +65,7 @@ export const Header = ({ showSearch = true, showFilters = true }) => {
             size="lg"
             onClick={handleConnect}
           >
-            Connect Wallet
+            Connect
           </Button>
         ) : (
           <Button size="lg" w={{ base: "100%", md: "auto" }}>

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -5,7 +5,14 @@ import { Header } from "./Header";
 export const Layout = ({ children, headerProps = {} }) => (
   <Flex flexDirection="column" py="4" px="8" height="100vh" position="relative">
     <Header {...headerProps} />
-    <Flex as="main" flexDirection="column" mt={{ base: "164px", md: "16" }}>
+    <Flex
+      as="main"
+      flexDirection="column"
+      mt={{
+        base: headerProps.showSearch !== false ? "164px" : "116px",
+        md: "16",
+      }}
+    >
       {children}
     </Flex>
   </Flex>

diff --git a/src/components/RpcTable.tsx b/src/components/RpcTable.tsx
@@ -29,7 +29,7 @@ export const RpcTable = ({ rpcs, handleRpcClick }) => {
               <Td pl="0">{rpcUrl}</Td>
               <Td pr="0" textAlign="end">
                 {!isConnected ? (
-                  <Button onClick={handleConnect}>Connect Wallet</Button>
+                  <Button onClick={handleConnect}>Connect</Button>
                 ) : (
                   <Button onClick={() => handleRpcClick(rpcUrl)}>
                     Add Chain

diff --git a/src/pages/chain/{Chain.chainId}.tsx b/src/pages/chain/{Chain.chainId}.tsx
@@ -49,18 +49,27 @@ const ChainPage = ({ data }: { data: { chain: ChainData } }) => {
     <>
       <Seo />
       <Layout headerProps={{ showSearch: false, showFilters: false }}>
-        <Flex flexDirection="column" mt="8">
-          <Flex justifyContent="space-between" alignItems="center">
-            <Flex alignItems="center">
+        <Flex flexDirection="column" mt={["0", null, "8"]}>
+          <Flex
+            flexDirection={["column", null, "row"]}
+            justifyContent="space-between"
+            alignItems="center"
+            gap="6"
+          >
+            <Flex
+              flexDirection={["column", null, "row"]}
+              alignItems="center"
+              gap="6"
+            >
               {icon && (
-                <Flex mr="6">
+                <Flex>
                   <ChainIcon name={name} icon={icon} width="60px" />
                 </Flex>
               )}
               <Heading size="2xl">{name}</Heading>
             </Flex>
             {!isConnected ? (
-              <Button onClick={handleConnect}>Connect Wallet</Button>
+              <Button onClick={handleConnect}>Connect</Button>
             ) : (
               <Button onClick={handleAddChainClick}>Add Chain</Button>
             )}