Migrate more icons to ui-next

cartridge-gg · Dec 20, 2024 · 6818f59 · 6818f59
1 parent 840c836
commit 6818f59
Show file tree

Hide file tree

Showing 35 changed files with 169 additions and 256 deletions.
diff --git a/packages/keychain/src/components/ConfirmTransaction.tsx b/packages/keychain/src/components/ConfirmTransaction.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from "react";
 import { ResponseCodes, SessionPolicies, toArray } from "@cartridge/controller";
 import { Content, FOOTER_MIN_HEIGHT } from "@/components/layout";
-import { TransactionDuoIcon } from "@cartridge/ui";
+import { TransactionDuoIcon } from "@cartridge/ui-next";
 import { useConnection } from "@/hooks/connection";
 import { Policies } from "@/components/Policies";
 import { ExecuteCtx } from "@/utils/connection";

diff --git a/packages/keychain/src/components/ErrorBoundary.tsx b/packages/keychain/src/components/ErrorBoundary.tsx
@@ -1,6 +1,6 @@
 import React, { PropsWithChildren, useEffect } from "react";
 import { Container, Content, Footer } from "./layout";
-import { AlertIcon, ExternalIcon } from "@cartridge/ui";
+import { AlertIcon, ExternalIcon } from "@cartridge/ui-next";
 import { Button, HStack, Link, Text } from "@chakra-ui/react";
 import { useConnection } from "@/hooks/connection";
 import { CARTRIDGE_DISCORD_LINK } from "@/const";

diff --git a/packages/keychain/src/components/Fees.tsx b/packages/keychain/src/components/Fees.tsx
@@ -7,10 +7,9 @@ import {
   Text,
   VStack,
 } from "@chakra-ui/react";
-
 import { formatUnits } from "viem";
 import { useChainId } from "@/hooks/connection";
-import { EthereumIcon, InfoIcon, WarningIcon } from "@cartridge/ui";
+import { EthereumIcon, InfoIcon, WarningIcon } from "@cartridge/ui-next";
 
 export function Fees({
   maxFee,

diff --git a/packages/keychain/src/components/Funding/AmountSelection.tsx b/packages/keychain/src/components/Funding/AmountSelection.tsx
@@ -1,4 +1,4 @@
-import { DollarIcon } from "@cartridge/ui";
+import { DollarIcon } from "@cartridge/ui-next";
 import {
   Box,
   Button,
@@ -21,7 +21,7 @@ type AmountSelectionProps = {
   onChange?: (amount: number) => void;
 };
 
-export default function AmountSelection({
+export function AmountSelection({
   amount,
   lockSelection,
   enableCustom,
@@ -92,13 +92,7 @@ export default function AmountSelection({
                 onChange?.(amount);
               }}
             />
-            <DollarIcon
-              position="absolute"
-              color="text.secondary"
-              top="10px"
-              left="10px"
-              boxSize="20px"
-            />
+            <DollarIcon size="xs" className="absolute top-3 left-3" />
           </Box>
         )}
       </VStack>

diff --git a/packages/keychain/src/components/Funding/Balance.tsx b/packages/keychain/src/components/Funding/Balance.tsx
@@ -1,4 +1,4 @@
-import { CoinsIcon, EthereumIcon } from "@cartridge/ui";
+import { CoinsIcon, EthereumIcon } from "@cartridge/ui-next";
 import { HStack, Spacer, Text, VStack } from "@chakra-ui/react";
 import { TokenPair } from "@cartridge/utils/api/cartridge";
 import { formatEther } from "viem";
@@ -61,9 +61,9 @@ export function Balance({ showBalances }: BalanceProps) {
           fontWeight="semibold"
         >
           <HStack>
-            <CoinsIcon fontSize={20} />
+            <CoinsIcon variant="solid" size="sm" />
             <Text>{creditBalance.formatted}</Text>
-            <Text color="text.secondary">${creditBalance.formatted}</Text>
+            <Text color="text.secondary">{creditBalance.formatted}</Text>
           </HStack>
           <Spacer />
           <HStack color="text.secondary">
@@ -83,7 +83,7 @@ export function Balance({ showBalances }: BalanceProps) {
           fontWeight="semibold"
         >
           <HStack>
-            <EthereumIcon fontSize={20} />
+            <EthereumIcon size="sm" />
             <Text>{eth?.balance.formatted ?? "0.00"}</Text>
             {countervalue && (
               <Text color="text.secondary">{countervalue.formatted}</Text>

diff --git a/packages/keychain/src/components/Funding/DepositEth.tsx b/packages/keychain/src/components/Funding/DepositEth.tsx
@@ -20,18 +20,18 @@ import {
 } from "starknet";
 import {
   ArgentIcon,
-  BravosIcon,
+  BraavosIcon,
   CopyIcon,
   EthereumIcon,
   StarknetColorIcon,
-} from "@cartridge/ui";
+} from "@cartridge/ui-next";
 import { useConnection } from "@/hooks/connection";
 import { useToast } from "@/hooks/toast";
 import { ETH_CONTRACT_ADDRESS } from "@/utils/token";
 import { ErrorAlert } from "../ErrorAlert";
 import { CopyAddress } from "@/components/CopyAddress";
 import { parseEther } from "viem";
-import AmountSelection, { DEFAULT_AMOUNT } from "./AmountSelection";
+import { AmountSelection, DEFAULT_AMOUNT } from "./AmountSelection";
 import { Balance } from "./Balance";
 import { TokenPair, usePriceQuery } from "@cartridge/utils/api/cartridge";
 
@@ -198,7 +198,7 @@ function DepositEthInner({ onComplete, onBack }: DepositEthProps) {
                               <ArgentIcon fontSize={20} />
                             )}
                             {c.name === "braavos" && (
-                              <BravosIcon fontSize={20} />
+                              <BraavosIcon fontSize={20} />
                             )}
                             {c.name}
                           </Button>

diff --git a/packages/keychain/src/components/Funding/PurchaseCredits.tsx b/packages/keychain/src/components/Funding/PurchaseCredits.tsx
@@ -1,10 +1,10 @@
 import { Container, Content, Footer } from "@/components/layout";
 import { Button, Divider } from "@chakra-ui/react";
 import { useCallback, useMemo, useState } from "react";
-import { CheckIcon, CoinsIcon } from "@cartridge/ui";
+import { CheckIcon, CoinsIcon } from "@cartridge/ui-next";
 import { useConnection } from "@/hooks/connection";
 import { CopyAddress } from "../CopyAddress";
-import AmountSelection, { DEFAULT_AMOUNT } from "./AmountSelection";
+import { AmountSelection, DEFAULT_AMOUNT } from "./AmountSelection";
 import { ErrorAlert } from "@/components/ErrorAlert";
 import { Elements } from "@stripe/react-stripe-js";
 import { Appearance, loadStripe } from "@stripe/stripe-js";
@@ -162,7 +162,7 @@ export function PurchaseCredits({ onBack }: PurchaseCreditsProps) {
               isLoading={isLoading}
               onClick={() => createPaymentIntent()}
             >
-              <CoinsIcon fontSize={20} />
+              <CoinsIcon variant="solid" size="sm" />
               Stripe
             </Button>
           </>

diff --git a/packages/keychain/src/components/Funding/StripeCheckout.tsx b/packages/keychain/src/components/Funding/StripeCheckout.tsx
@@ -8,7 +8,7 @@ import { StripePaymentElementOptions } from "@stripe/stripe-js";
 import { Button } from "@chakra-ui/react";
 import { Container, Content, Footer } from "@/components/layout";
 import { useController } from "@/hooks/controller";
-import { CoinsIcon } from "@cartridge/ui";
+import { CoinsIcon } from "@cartridge/ui-next";
 import { CopyAddress } from "@/components/CopyAddress";
 import { ErrorAlert } from "@/components/ErrorAlert";
 

diff --git a/packages/keychain/src/components/Funding/index.tsx b/packages/keychain/src/components/Funding/index.tsx
@@ -3,7 +3,7 @@ import { Button } from "@chakra-ui/react";
 import { useState } from "react";
 import { useConnection } from "@/hooks/connection";
 import { CopyAddress } from "../CopyAddress";
-import { ArrowLineDownIcon, CoinsIcon, EthereumIcon } from "@cartridge/ui";
+import { ArrowIcon, CoinsIcon, EthereumIcon } from "@cartridge/ui-next";
 import { DepositEth } from "./DepositEth";
 import { PurchaseCredits } from "./PurchaseCredits";
 import { Balance } from "./Balance";
@@ -44,7 +44,7 @@ export function Funding({ onComplete, title }: FundingProps) {
     <Container
       title={title || (controller ? `Fund ${controller.username()}` : "")}
       description={controller && <CopyAddress address={controller.address} />}
-      Icon={ArrowLineDownIcon}
+      icon={<ArrowIcon variant="down" />}
     >
       <Content gap={6}>
         <Balance showBalances={["credits", "eth"]} />
@@ -55,11 +55,11 @@ export function Funding({ onComplete, title }: FundingProps) {
             colorScheme="colorful"
             onClick={() => setState(FundingState.FUND_CREDITS)}
           >
-            <CoinsIcon fontSize={20} mr="5px" /> Purchase Credits
+            <CoinsIcon variant="line" size="sm" /> Purchase Credits
           </Button>
         )}
         <Button onClick={() => setState(FundingState.FUND_ETH)}>
-          <EthereumIcon fontSize={20} mr="5px" /> Deposit Eth
+          <EthereumIcon size="sm" className="mr-1" /> Deposit Eth
         </Button>
       </Footer>
     </Container>

diff --git a/packages/keychain/src/components/Policies.tsx b/packages/keychain/src/components/Policies.tsx
@@ -9,7 +9,7 @@ import {
   AccordionPanel,
   Box,
 } from "@chakra-ui/react";
-import { FnIcon, WedgeRightIcon } from "@cartridge/ui";
+import { FnIcon, WedgeIcon } from "@cartridge/ui-next";
 import { SessionPolicies } from "@cartridge/presets";
 import { CopyAddress } from "./CopyAddress";
 
@@ -62,17 +62,15 @@ export function Policies({
                     }}
                   >
                     <HStack>
-                      <FnIcon boxSize={5} />
+                      <FnIcon size="sm" />
                       <Text>{m.entrypoint}</Text>
                     </HStack>
 
                     <Spacer />
 
-                    <WedgeRightIcon
-                      fontSize="2xl"
-                      transform={isExpanded ? "rotate(90deg)" : undefined}
-                      transition="all 0.2s ease"
-                      color="text.secondary"
+                    <WedgeIcon
+                      variant={isExpanded ? "down" : "right"}
+                      className="text-muted-foreground"
                     />
                   </AccordionButton>
 
@@ -114,11 +112,9 @@ export function Policies({
 
                   <Spacer />
 
-                  <WedgeRightIcon
-                    fontSize="2xl"
-                    transform={isExpanded ? "rotate(90deg)" : undefined}
-                    transition="all 0.2s ease"
-                    color="text.secondary"
+                  <WedgeIcon
+                    variant={isExpanded ? "down" : "right"}
+                    className="text-muted-foreground"
                   />
                 </AccordionButton>
 

diff --git a/packages/keychain/src/components/Settings/Delegate.tsx b/packages/keychain/src/components/Settings/Delegate.tsx
@@ -1,4 +1,4 @@
-import { AlertIcon } from "@cartridge/ui";
+import { AlertIcon } from "@cartridge/ui-next";
 import { Button, VStack, Text, HStack, Input } from "@chakra-ui/react";
 import { Container, Content, Footer } from "@/components/layout";
 import { useConnection } from "@/hooks/connection";

diff --git a/packages/keychain/src/components/Settings/Recovery.tsx b/packages/keychain/src/components/Settings/Recovery.tsx
@@ -1,4 +1,4 @@
-import { AlertIcon } from "@cartridge/ui";
+import { AlertIcon } from "@cartridge/ui-next";
 import { Button, VStack, Text, HStack, Input } from "@chakra-ui/react";
 import { Container, Content, Footer } from "@/components/layout";
 import { useConnection } from "@/hooks/connection";

diff --git a/packages/keychain/src/components/Settings/index.tsx b/packages/keychain/src/components/Settings/index.tsx
@@ -1,5 +1,5 @@
 import { Button } from "@chakra-ui/react";
-import { GearIcon } from "@cartridge/ui";
+import { GearIcon } from "@cartridge/ui-next";
 import { useState } from "react";
 import { Container, Footer } from "@/components/layout";
 import { Recovery } from "./Recovery";

diff --git a/packages/keychain/src/components/SignMessage.tsx b/packages/keychain/src/components/SignMessage.tsx
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { Button, Flex, Text } from "@chakra-ui/react";
 import { shortString, Signature, TypedData } from "starknet";
 import { Container, Footer, Content } from "@/components/layout";
-import { TransferDuoIcon } from "@cartridge/ui";
+import { TransferDuoIcon } from "@cartridge/ui-next";
 import { useController } from "@/hooks/controller";
 
 export function SignMessage({

diff --git a/packages/keychain/src/components/Transaction.tsx b/packages/keychain/src/components/Transaction.tsx
@@ -1,19 +1,15 @@
 import { ReactNode, useEffect, useMemo, useState } from "react";
+import { constants } from "starknet";
 import {
-  Text,
-  Link,
-  HStack,
-  Circle,
-  Spacer,
-  Divider,
+  CheckIcon,
+  ExternalIcon,
   Spinner,
-} from "@chakra-ui/react";
-
-import { constants } from "starknet";
-import { CheckIcon, ExternalIcon, StarknetIcon } from "@cartridge/ui";
+  StarknetIcon,
+} from "@cartridge/ui-next";
 import { useController } from "@/hooks/controller";
 import { useChainName } from "@/hooks/chain";
 import { StarkscanUrl } from "@cartridge/utils";
+import { Link } from "react-router-dom";
 
 export type TransactionState = "pending" | "success" | "error";
 
@@ -31,7 +27,7 @@ export function Transaction({
   finalized,
 }: TransactionProps) {
   const [state, setState] = useState<TransactionState>("pending");
-  const { color, icon } = useMemo(() => getColorIcon(state), [state]);
+  const { icon } = useMemo(() => getColorIcon(state), [state]);
   const { controller } = useController();
 
   useEffect(() => {
@@ -58,52 +54,39 @@ export function Transaction({
   const chainName = useChainName(chainId);
 
   return (
-    <HStack w="full" borderRadius="sm" bgColor="solid.primary" p={3}>
-      <HStack spacing={3} color={color}>
-        <Circle size={7.5} bgColor="solid.secondary">
-          {icon}
-        </Circle>
-        <Text fontSize="11px" color="inherit">
-          {name}
-        </Text>
-      </HStack>
-
-      <Spacer />
+    <div className="flex items-center bg-secondary roudned p-3 text-sm justify-between">
+      <div className="flex items-center gap-1">
+        {icon}
+        <div>{name}</div>
+      </div>
 
-      <HStack spacing="15px">
-        <HStack color="text.secondary" spacing="5px">
-          <StarknetIcon boxSize="14px" />
-          <Text color="inherit" fontSize="13px">
-            {chainName}
-          </Text>
-        </HStack>
-        <Divider orientation="vertical" bgColor="solid.accent" h="30px" />
-        <Link href={StarkscanUrl(chainId).transaction(hash)} isExternal>
-          <ExternalIcon boxSize="12px" color="link.blue" />
+      <div className="flex items-center gap-1">
+        <div className="flex items-center text-muted-foreground gap-1 border-r px-3">
+          <StarknetIcon size="sm" />
+          <div>{chainName}</div>
+        </div>
+        <Link to={StarkscanUrl(chainId).transaction(hash)} target="_blank">
+          <ExternalIcon size="sm" />
         </Link>
-      </HStack>
-    </HStack>
+      </div>
+    </div>
   );
 }
 
 function getColorIcon(state: TransactionState): {
-  color: string;
   icon: ReactNode;
 } {
   switch (state) {
     case "success":
       return {
-        color: "green.400",
-        icon: <CheckIcon boxSize="12px" color="green.400" />,
+        icon: <CheckIcon className="text-[#0EAD69]" size="xs" />,
       };
     case "pending":
       return {
-        color: "white",
-        icon: <Spinner size="sm" />,
+        icon: <Spinner />,
       };
     case "error":
       return {
-        color: "alert.foreground",
         icon: <></>,
       };
   }

diff --git a/packages/keychain/src/components/connect/Authenticate/Unsupported.tsx b/packages/keychain/src/components/connect/Authenticate/Unsupported.tsx
@@ -1,4 +1,4 @@
-import { AlertIcon } from "@cartridge/ui";
+import { AlertIcon } from "@cartridge/ui-next";
 import { Container } from "@/components/layout";
 import { useEffect, useState } from "react";
 

diff --git a/packages/keychain/src/components/connect/Logout.tsx b/packages/keychain/src/components/connect/Logout.tsx
@@ -1,6 +1,6 @@
 import { Button } from "@chakra-ui/react";
 import { Container, Footer } from "@/components/layout";
-import { LogoutDuoIcon } from "@cartridge/ui";
+import { LogoutDuoIcon } from "@cartridge/ui-next";
 import { useConnection } from "@/hooks/connection";
 import { ResponseCodes } from "@cartridge/controller";
 

diff --git a/packages/keychain/src/components/connect/SessionConsent.tsx b/packages/keychain/src/components/connect/SessionConsent.tsx
@@ -1,5 +1,5 @@
 import { HStack, Text } from "@chakra-ui/react";
-import { VerifiedIcon } from "@cartridge/ui";
+import { VerifiedIcon } from "@cartridge/ui-next";
 import { useConnection } from "@/hooks/connection";
 import { useMemo } from "react";
 import { Link } from "react-router-dom";
@@ -37,11 +37,7 @@ export function SessionConsent({
               to="https://github.com/cartridge-gg/controller/blob/main/packages/controller/src/presets.ts"
               target="_blank"
             >
-              <VerifiedIcon
-                fontSize="3xl"
-                color="text.secondaryAccent"
-                _hover={{ color: "brand.primary" }}
-              />
+              <VerifiedIcon size="lg" className="text-accent-foreground" />
             </Link>
           )}
           <Text color="text.secondary" fontSize="xs" fontWeight="bold">

diff --git a/packages/keychain/src/components/connect/Upgrade.tsx b/packages/keychain/src/components/connect/Upgrade.tsx
@@ -1,4 +1,4 @@
-import { BoltIcon } from "@cartridge/ui";
+import { BoltIcon } from "@cartridge/ui-next";
 import { ListItem, Text, UnorderedList, VStack } from "@chakra-ui/react";
 import { ExecutionContainer } from "@/components/ExecutionContainer";
 import { Content } from "@/components/layout";