Style execute page (#384)

packages/keychain/src/Policies.tsx

@@ -9,11 +9,7 @@ import {
   AccordionPanel,
   Box,
 } from "@chakra-ui/react";
-import {
-  CodeUtilIcon,
-  CopyHash,
-  WedgeRightIcon,
-} from "@cartridge/ui";
+import { CodeUtilIcon, CopyHash, WedgeRightIcon } from "@cartridge/ui";
 import { Policy } from "@cartridge/controller";
 
 export function Policies({

packages/keychain/src/components/Execute/Fees.tsx

@@ -1,16 +1,10 @@
 import { useEffect, useState } from "react";
-import {
-  Divider,
-  HStack,
-  Spacer,
-  Spinner,
-  Text,
-  VStack,
-} from "@chakra-ui/react";
+import { HStack, Spacer, Spinner, Text, VStack } from "@chakra-ui/react";
 
 import { constants } from "starknet";
 import { formatUnits } from "viem";
 import { useChainId } from "hooks/connection";
+import { EthereumIcon } from "@cartridge/ui";
 
 async function fetchEthPrice() {
   const res = await fetch(process.env.NEXT_PUBLIC_API_URL, {
@@ -24,12 +18,10 @@ async function fetchEthPrice() {
 }
 
 export function Fees({
-  error,
   fees,
   balance,
   approved,
 }: {
-  error: Error;
   fees?: { base: bigint; max: bigint };
   balance: string;
   approved?: string;
@@ -78,48 +70,39 @@ export function Fees({
   }, [chainId, fees, balance, approved]);
 
   return (
-    <>
-      <VStack
-        w="full"
-        overflow="hidden"
-        borderRadius="md"
-        spacing="1px"
-        align="flex-start"
-      >
-        {formattedFee || error ? (
-          <>
-            {approved && (
-              <LineItem name="Cost" description="" value={approved} />
-            )}
+    <VStack
+      w="full"
+      overflow="hidden"
+      borderRadius="md"
+      spacing="1px"
+      align="flex-start"
+    >
+      {formattedFee ? (
+        <>
+          {approved && <LineItem name="Cost" value={approved} />}
+
+          <LineItem
+            name="Network Fee"
+            value={formattedFee?.base}
+            isLoading={!formattedFee}
+          />
 
+          {approved && (
             <LineItem
-              name="Network Fee"
-              description={!error && `Max: ${formattedFee?.max}`}
-              value={!error ? formattedFee?.base : "..."}
-              isLoading={!formattedFee && !error}
+              name="Total"
+              value={approved ? approved : formattedFee?.base}
             />
-
-            {approved && (
-              <LineItem
-                name="Total"
-                description={`Balance: ${Number(
-                  parseFloat(balance).toFixed(5),
-                )}`}
-                value={approved ? approved : formattedFee?.base}
-              />
-            )}
-          </>
-        ) : (
-          <LineItem name="Calculating Fees" isLoading />
-        )}
-      </VStack>
-    </>
+          )}
+        </>
+      ) : (
+        <LineItem name="Calculating Fees" isLoading />
+      )}
+    </VStack>
   );
 }
 
 function LineItem({
   name,
-  description,
   value,
   isLoading = false,
 }: {
@@ -130,31 +113,24 @@ function LineItem({
 }) {
   return (
     <HStack w="full" h="40px" p={4} bg="solid.primary" color="text.secondary">
-      <Text fontSize="2xs" color="inherit">
+      <Text
+        fontSize="xs"
+        color="inherit"
+        textTransform="uppercase"
+        fontWeight="bold"
+      >
         {name}
       </Text>
       <Spacer />
-      <HStack spacing="12px">
-        {isLoading ? (
-          <Spinner size="sm" />
-        ) : (
-          <>
-            {description && (
-              <>
-                <Text fontSize={11} color="inherit">
-                  {description}
-                </Text>
-                <Divider
-                  orientation="vertical"
-                  borderColor="solid.secondary"
-                  h="16px"
-                />
-              </>
-            )}
-            <Text fontSize={13}>{value}</Text>
-          </>
-        )}
-      </HStack>
+
+      {isLoading ? (
+        <Spinner size="sm" />
+      ) : (
+        <HStack>
+          <EthereumIcon color="text.primary" />
+          <Text fontSize={13}>{value}</Text>
+        </HStack>
+      )}
     </HStack>
   );
 }

packages/keychain/src/components/Execute/index.tsx

@@ -1,9 +1,8 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { Text, VStack, Button } from "@chakra-ui/react";
+import { Button } from "@chakra-ui/react";
 import { Call as StarknetCall, InvocationsDetails } from "starknet";
-import { Fees } from "./Fees";
 import { formatEther } from "viem";
-import { ExecuteReply, ResponseCodes } from "@cartridge/controller";
+import { ExecuteReply, Policy, ResponseCodes } from "@cartridge/controller";
 import {
   Container,
   Content,
@@ -12,11 +11,12 @@ import {
 } from "components/layout";
 import { Status } from "utils/account";
 import { TransactionDuoIcon } from "@cartridge/ui";
-import { Call } from "./Call";
 import { InsufficientFunds } from "./InsufficientFunds";
 import { useChainId, useOrigin } from "hooks/connection";
 import { useController } from "hooks/controller";
 import { ErrorAlert } from "components/ErrorAlert";
+import { Policies } from "Policies";
+import { Fees } from "./Fees";
 
 export const CONTRACT_ETH =
   "0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7";
@@ -132,6 +132,12 @@ export function Execute({
     });
   }, [account, calls, fees, onExecute]);
 
+  const policies = useMemo<Policy[]>(
+    () =>
+      calls.map((c) => ({ target: c.contractAddress, method: c.entrypoint })),
+    [calls],
+  );
+
   if (isInsufficient) {
     return (
       <InsufficientFunds
@@ -148,40 +154,17 @@ export function Execute({
       description={origin}
     >
       <Content pb={FOOTER_MIN_HEIGHT}>
-        <VStack spacing="1px" w="full" borderRadius="md" bg="solid.primary">
-          <VStack w="full" p={3} align="flex-start">
-            <Text fontSize="xs" fontWeight="bold" color="text.secondaryAccent">
-              Transaction Details
-            </Text>
-          </VStack>
-
-          <VStack w="full" spacing="1px">
-            {calls.map((call, i) => (
-              <Call
-                key={i}
-                policy={{
-                  target: call.contractAddress,
-                  method: call.entrypoint,
-                }}
-                _last={{ borderBottomRadius: "md" }}
-              />
-            ))}
-          </VStack>
-        </VStack>
-
-        <Fees
-          error={error}
-          fees={fees}
-          balance={ethBalance && format(ethBalance)}
-        />
+        <Policies title="Transaction Details" policies={policies} />
       </Content>
 
       <Footer>
-        {error && (
+        {error ? (
           <ErrorAlert
             title="Fee estimation failed"
             description={error.message}
           />
+        ) : (
+          <Fees fees={fees} balance={ethBalance && format(ethBalance)} />
         )}
         <Button
           colorScheme="colorful"

packages/keychain/src/components/connect/CreateSession.tsx

@@ -1,7 +1,6 @@
 import { Container, Footer } from "components/layout";
 import { BigNumberish } from "starknet";
 import { Policy } from "@cartridge/controller";
-import { PlugNewDuoIcon } from "@cartridge/ui";
 import { Button } from "@chakra-ui/react";
 import { useState } from "react";
 import { useConnection } from "hooks/connection";
@@ -20,7 +19,6 @@ export function CreateSession({
   return (
     <Container
       variant="connect"
-      Icon={PlugNewDuoIcon}
       title="Create Session"
       description={`${origin} is requesting to connect to your Cartridge Controller`}
     >

packages/keychain/src/components/layout/Container/Header/index.tsx

@@ -6,7 +6,7 @@ export type HeaderProps = TopBarProps & BannerProps;
 
 export function Header({ onBack, hideAccount, ...bannerProps }: HeaderProps) {
   return (
-    <Box position="sticky" top={0} w="full" zIndex={1} bg="solid.bg">
+    <Box position="sticky" top={0} w="full" zIndex={2} bg="solid.bg">
       <Banner {...bannerProps} />
       <TopBar onBack={onBack} hideAccount={hideAccount} />
     </Box>

packages/keychain/src/components/layout/Footer/index.tsx

@@ -63,6 +63,10 @@ export function Footer({
     };
   }, [setFooterHeight]);
 
+  useEffect(() => {
+    window.document.body.style.overflowY = isOpen ? "hidden" : "auto";
+  }, [isOpen]);
+
   return (
     <VStack
       position={["fixed", "fixed", "absolute"]}

packages/keychain/src/hooks/connection.tsx

@@ -15,7 +15,7 @@ import {
 } from "utils/connection";
 import { isIframe } from "components/connect/utils";
 import { RpcProvider } from "starknet";
-import { Policy } from "@cartridge/controller";
+import { Policy, ResponseCodes } from "@cartridge/controller";
 
 const ConnectionContext = createContext<ConnectionContextValue>(undefined);
 
@@ -48,6 +48,20 @@ export function ConnectionProvider({ children }: PropsWithChildren) {
     return JSON.parse(policiesStr);
   };
 
+  const close = useCallback(async () => {
+    if (!parent) return;
+
+    try {
+      context.resolve({
+        code: ResponseCodes.CANCELED,
+        message: "User closed modal",
+      });
+      await parent.close();
+    } catch (e) {
+      // Always fails for some reason
+    }
+  }, [context, parent]);
+
   useEffect(() => {
     if (!isIframe()) {
       const urlParams = new URLSearchParams(window.location.search);
@@ -72,9 +86,15 @@ export function ConnectionProvider({ children }: PropsWithChildren) {
     );
 
     return () => {
+      if (context) {
+        context.resolve({
+          code: ResponseCodes.CANCELED,
+          message: "User closed modal",
+        });
+      }
       connection.destroy();
     };
-  }, []);
+  }, [context]);
 
   useEffect(() => {
     if (rpcUrl) {
@@ -87,17 +107,6 @@ export function ConnectionProvider({ children }: PropsWithChildren) {
     }
   }, [rpcUrl]);
 
-  const close = useCallback(async () => {
-    if (!parent) return;
-
-    try {
-      context.reject("User closed modal");
-      await parent.close();
-    } catch (e) {
-      // Always fails for some reason
-    }
-  }, [context, parent]);
-
   const logout = useCallback((context: ConnectionCtx) => {
     setContext({
       origin: context.origin,