Add layout container variant (#348)

* Hide close button on full page Move header banner to PortalBanner Get chainId dand controller via context Introduce layout component submodule Add content layout component Add layout context Style connect variant banner * Fix close button condition
cartridge-gg · Jun 11, 2024 · 5bf8d30 · 5bf8d30
1 parent 52cdb73
commit 5bf8d30
Show file tree

Hide file tree

Showing 61 changed files with 830 additions and 2,632 deletions.
diff --git a/examples/starknet-react-next/src/components/StarknetProvider.tsx b/examples/starknet-react-next/src/components/StarknetProvider.tsx
@@ -52,7 +52,7 @@ const connectors = [
     ],
     {
       url,
-      rpc: process.env.NEXT_PUBLIC_RPC_SEPOLIA
+      rpc: process.env.NEXT_PUBLIC_RPC_SEPOLIA,
       // theme: "rollyourown",
       // colorMode: "light"
     },

diff --git a/packages/keychain/src/components/Container/Header/index.tsx b/packages/keychain/src/components/Container/Header/index.tsx
diff --git a/packages/keychain/src/components/DeploymentRequired.tsx b/packages/keychain/src/components/DeploymentRequired.tsx
@@ -1,26 +1,22 @@
 import { constants } from "starknet";
-import Controller from "utils/controller";
-import { Container } from "./Container";
+import { Container, Banner, Footer, Content } from "components/layout";
 import { useEffect, useState } from "react";
 import { Status } from "utils/account";
 import { Loading } from "./Loading";
 import { Button, Link, Text } from "@chakra-ui/react";
 import { ExternalIcon } from "@cartridge/ui";
-import { PortalBanner } from "./PortalBanner";
-import { PortalFooter } from "./PortalFooter";
+import { useController } from "hooks/controller";
+
 export function DeploymentRequired({
-  chainId,
-  controller,
   onClose,
   onLogout,
   children,
 }: {
-  chainId: string;
-  controller: Controller;
   onClose: () => void;
   onLogout: () => void;
   children: React.ReactNode;
 }) {
+  const { controller } = useController()
   const account = controller.account;
   const [status, setStatus] = useState<Status>(account.status);
   const [deployHash, setDeployHash] = useState<string>();
@@ -65,40 +61,41 @@ export function DeploymentRequired({
 
   if (status !== Status.DEPLOYED) {
     return (
-      <Container chainId={chainId} onLogout={onLogout}>
-        <PortalBanner
+      <Container onLogout={onLogout}>
+        <Banner
           Icon={Loading}
           title={"Deploying your account"}
           description="This may take a second"
         />
 
-        {status === Status.DEPLOYING && (
-          <Link
-            href={`https://${
-              account.chainId === constants.StarknetChainId.SN_SEPOLIA
+        <Content>
+          {status === Status.DEPLOYING && (
+            <Link
+              href={`https://${account.chainId === constants.StarknetChainId.SN_SEPOLIA
                 ? "sepolia."
                 : undefined
-            }starkscan.co/tx/${deployHash}`}
-            isExternal
-          >
-            <Button variant="link" mt={10} rightIcon={<ExternalIcon />}>
-              View on Starkscan
-            </Button>
-          </Link>
-        )}
+                }starkscan.co/tx/${deployHash}`}
+              isExternal
+            >
+              <Button variant="link" mt={10} rightIcon={<ExternalIcon />}>
+                View on Starkscan
+              </Button>
+            </Link>
+          )}
 
-        {error && (
-          <>
-            <Text>
-              We encounter an account deployment error: {error.message}
-            </Text>
-            <Text>Please come by discord and report this issue.</Text>
-          </>
-        )}
+          {error && (
+            <>
+              <Text>
+                We encounter an account deployment error: {error.message}
+              </Text>
+              <Text>Please come by discord and report this issue.</Text>
+            </>
+          )}
+        </Content>
 
-        <PortalFooter>
+        <Footer>
           <Button onClick={onClose}>close</Button>
-        </PortalFooter>
+        </Footer>
       </Container>
     );
   }

diff --git a/packages/keychain/src/components/Execute/Call.tsx b/packages/keychain/src/components/Execute/Call.tsx
@@ -3,11 +3,9 @@ import { CodeUtilIcon } from "@cartridge/ui";
 import { HStack, Spacer, SystemProps, Text } from "@chakra-ui/react";
 
 export function Call({
-  chainId,
   policy,
   ...rest
 }: {
-  chainId: string;
   policy: Policy;
 } & SystemProps) {
   return (

diff --git a/packages/keychain/src/components/Execute/Fees.tsx b/packages/keychain/src/components/Execute/Fees.tsx
@@ -11,6 +11,7 @@ import {
 import { constants } from "starknet";
 import { formatUnits } from "viem";
 import { Error } from "components/Error";
+import { useChainId } from "hooks/connection";
 
 async function fetchEthPrice() {
   const res = await fetch(process.env.NEXT_PUBLIC_API_URL, {
@@ -25,17 +26,16 @@ async function fetchEthPrice() {
 
 export function Fees({
   error,
-  chainId,
   fees,
   balance,
   approved,
 }: {
   error: Error;
-  chainId: string;
   fees?: { base: bigint; max: bigint };
   balance: string;
   approved?: string;
 }) {
+  const chainId = useChainId();
   const [formattedFee, setFormattedFee] = useState<{
     base: string;
     max: string;
@@ -66,13 +66,13 @@ export function Fees({
       setFormattedFee(
         fees.max > 10000000000000n
           ? {
-              base: `~${parseFloat(formatUnits(fees.base, 18)).toFixed(5)} eth`,
-              max: `~${parseFloat(formatUnits(fees.max, 18)).toFixed(5)} eth`,
-            }
+            base: `~${parseFloat(formatUnits(fees.base, 18)).toFixed(5)} eth`,
+            max: `~${parseFloat(formatUnits(fees.max, 18)).toFixed(5)} eth`,
+          }
           : {
-              base: "<0.00001",
-              max: "<0.00001",
-            },
+            base: "<0.00001",
+            max: "<0.00001",
+          },
       );
     }
     compute();

diff --git a/...eychain/src/components/Execute/LowEth.tsx → .../components/Execute/InsufficientFunds.tsx b/...eychain/src/components/Execute/LowEth.tsx → .../components/Execute/InsufficientFunds.tsx
@@ -1,29 +1,26 @@
 import { CopyIcon, EthereumIcon, StarknetIcon } from "@cartridge/ui";
 import { HStack, Spacer, Text, VStack } from "@chakra-ui/react";
-import { Container } from "components/Container";
-import { PortalBanner } from "components/PortalBanner";
+import { Container, Content, Banner } from "components/layout";
 import { useState } from "react";
 import { BigNumberish } from "starknet";
 import { formatAddress } from "utils/contracts";
 
-const NewLowEth = ({
-  chainId,
+export function InsufficientFunds({
   address,
   balance,
 }: {
-  chainId: string;
   address: BigNumberish;
   balance: BigNumberish;
-}) => {
+}) {
   const [copied, setCopied] = useState(false);
   return (
-    <Container chainId={chainId} hideAccount>
-      <PortalBanner
+    <Container hideAccount>
+      <Banner
         title="Insufficient Funds"
         description="You'll need more gas to complete this transaction. Send some ETH to your controller address."
       />
 
-      <VStack w="full">
+      <Content>
         <VStack w="full" align="flex-start" fontSize="14px">
           <Text color="darkGray.400" fontSize="11px">
             BALANCE
@@ -88,9 +85,7 @@ const NewLowEth = ({
             </HStack>
           )}
         </VStack>
-      </VStack>
+      </Content>
     </Container>
   );
 };
-
-export default NewLowEth;