diff --git a/packages/keychain/src/Policies.tsx b/packages/keychain/src/Policies.tsx index 721bcbb19..e4cd3846c 100644 --- a/packages/keychain/src/Policies.tsx +++ b/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({ diff --git a/packages/keychain/src/components/Execute/Call.tsx b/packages/keychain/src/components/Execute/Call.tsx deleted file mode 100644 index 68cf35e53..000000000 --- a/packages/keychain/src/components/Execute/Call.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { Policy } from "@cartridge/controller"; -import { CodeUtilIcon } from "@cartridge/ui"; -import { HStack, Spacer, SystemProps, Text } from "@chakra-ui/react"; - -export function Call({ - policy, - ...rest -}: { - policy: Policy; -} & SystemProps) { - return ( - - - {policy.method} - - - ); -} diff --git a/packages/keychain/src/components/Execute/Fees.tsx b/packages/keychain/src/components/Execute/Fees.tsx index 8f6be53c8..62c4a6240 100644 --- a/packages/keychain/src/components/Execute/Fees.tsx +++ b/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 ( - <> - - {formattedFee || error ? ( - <> - {approved && ( - - )} + + {formattedFee ? ( + <> + {approved && } + + + {approved && ( - - {approved && ( - - )} - - ) : ( - - )} - - + )} + + ) : ( + + )} + ); } function LineItem({ name, - description, value, isLoading = false, }: { @@ -130,31 +113,24 @@ function LineItem({ }) { return ( - + {name} - - {isLoading ? ( - - ) : ( - <> - {description && ( - <> - - {description} - - - - )} - {value} - - )} - + + {isLoading ? ( + + ) : ( + + + {value} + + )} ); } diff --git a/packages/keychain/src/components/Execute/index.tsx b/packages/keychain/src/components/Execute/index.tsx index 1849470ea..32b86e8cb 100644 --- a/packages/keychain/src/components/Execute/index.tsx +++ b/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( + () => + calls.map((c) => ({ target: c.contractAddress, method: c.entrypoint })), + [calls], + ); + if (isInsufficient) { return ( - - - - Transaction Details - - - - - {calls.map((call, i) => ( - - ))} - - - - +