Migrate all icons to ui-next (#1140)

* Migrate some icons to ui-next * Migrate all icons to ui-next * Enable tsc check in build script * Add alert colors * Replace chakra icon props with tw classes * Add key to mapped div --------- Co-authored-by: JunichiSugiura <[email protected]>
cartridge-gg · Dec 23, 2024 · c26d8f8 · c26d8f8
1 parent 1968210
commit c26d8f8
Show file tree

Hide file tree

Showing 49 changed files with 276 additions and 413 deletions.
diff --git a/packages/keychain/package.json b/packages/keychain/package.json
@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "TARGET_ORIGIN=\"*\" vite",
-    "build": "TARGET_ORIGIN=\"https://x.cartridge.gg/\" vite build",
+    "build": "tsc -b && TARGET_ORIGIN=\"https://x.cartridge.gg/\" vite build",
     "preview": "vite preview --port 3001",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",

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/CopyAddress.tsx b/packages/keychain/src/components/CopyAddress.tsx
@@ -1,4 +1,3 @@
-import { CopyIcon } from "@cartridge/ui";
 import { HStack, Text } from "@chakra-ui/react";
 import { formatAddress } from "@cartridge/utils";
 import { useToast } from "@/hooks/toast";
@@ -16,7 +15,6 @@ export function CopyAddress({ address }: { address: string }) {
       }}
     >
       <Text color="text.secondaryAccent">{formatAddress(address)}</Text>
-      <CopyIcon fontSize="md" />
     </HStack>
   );
 }
diff --git a/packages/keychain/src/components/DeployController.tsx b/packages/keychain/src/components/DeployController.tsx
@@ -6,7 +6,7 @@ import {
 import { Container, Footer, Content } from "@/components/layout";
 import { useCallback, useEffect, useState } from "react";
 import { Button, Link, Spinner } from "@chakra-ui/react";
-import { CheckIcon, ExternalIcon, WandIcon } from "@cartridge/ui";
+import { CheckIcon, ExternalIcon, WandIcon } from "@cartridge/ui-next";
 import { Funding } from "./Funding";
 import { useConnection } from "@/hooks/connection";
 import { ControllerErrorAlert, ErrorAlert } from "./ErrorAlert";
@@ -125,7 +125,7 @@ export function DeployController({
       return (
         <Container
           variant="expanded"
-          icon={<WandIcon fontSize="5xl" variant="line" />}
+          icon={<WandIcon variant="line" size="lg" />}
           title="Deploy Controller"
           description="This will initialize your controller on the new network"
         >
@@ -199,7 +199,7 @@ export function DeployController({
       return (
         <Container
           variant="expanded"
-          icon={<CheckIcon fontSize="5xl" />}
+          icon={<CheckIcon size="lg" />}
           title="Success!"
           description={`Your controller has been deployed on ${chainName}`}
         >

diff --git a/packages/keychain/src/components/ErrorAlert.tsx b/packages/keychain/src/components/ErrorAlert.tsx
@@ -1,11 +1,11 @@
 import {
-  AlertIcon,
-  InfoIcon,
-  WedgeDownIcon,
-  WarningIcon,
+  WedgeIcon,
   CopyIcon,
   CheckIcon,
-} from "@cartridge/ui";
+  ErrorAlertIcon,
+  ErrorAlertIconProps,
+  Button,
+} from "@cartridge/ui-next";
 import {
   Text,
   Accordion,
@@ -17,7 +17,6 @@ import {
   Box,
   VStack,
   Link,
-  IconButton,
   Divider,
 } from "@chakra-ui/react";
 import { motion } from "framer-motion";
@@ -70,18 +69,12 @@ export function ErrorAlert({
               disabled={!description || (isExpanded && !allowToggle)}
             >
               <HStack alignItems="flex-start">
-                {(() => {
-                  switch (variant) {
-                    case "info":
-                      return <InfoIcon color="info.foreground" />;
-                    case "warning":
-                      return <WarningIcon color="warning.foreground" />;
-                    case "error":
-                      return <AlertIcon color="error.foreground" />;
-                    default:
-                      return null;
-                  }
-                })()}
+                {variant && (
+                  <ErrorAlertIcon
+                    variant={variant as ErrorAlertIconProps["variant"]}
+                    size="xs"
+                  />
+                )}
                 <Text
                   as="b"
                   fontSize="2xs"
@@ -103,7 +96,7 @@ export function ErrorAlert({
                       rotate: itemExpanded ? 180 : 0,
                     }}
                   >
-                    <WedgeDownIcon boxSize={5} />
+                    <WedgeIcon size="sm" variant="down" />
                   </Box>
                 </HStack>
               )}
@@ -112,27 +105,22 @@ export function ErrorAlert({
             {description && (
               <AccordionPanel w="full" position="relative">
                 {copyText && (
-                  <IconButton
+                  <Button
                     size="icon"
-                    w={6}
-                    h={6}
-                    position="absolute"
-                    right={3}
-                    aria-label="Copy stacktrace"
-                    icon={
-                      copied ? (
-                        <CheckIcon fontSize="lg" color="black" />
-                      ) : (
-                        <CopyIcon fontSize="lg" color="black" />
-                      )
-                    }
+                    variant="icon"
+                    className="absolute right-3 w-5 h-5 bg-[rgba(0,0,0,0.1)]"
                     onClick={() => {
                       setCopied(true);
                       navigator.clipboard.writeText(copyText);
                     }}
-                  />
+                  >
+                    {copied ? (
+                      <CheckIcon size="xs" className="text-[black]" />
+                    ) : (
+                      <CopyIcon size="xs" className="text-[black]" />
+                    )}
+                  </Button>
                 )}
-
                 <Box
                   h="full"
                   maxH={200}

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";
@@ -44,7 +44,7 @@ export function ErrorPage({ error }: { error: Error }) {
       variant="expanded"
       title="Uh oh!"
       description="Something went wrong"
-      icon={<AlertIcon fontSize={48} />}
+      icon={<AlertIcon size="lg" />}
     >
       <Content gap={4}>
         <HStack
@@ -78,7 +78,7 @@ export function ErrorPage({ error }: { error: Error }) {
           <Link href={CARTRIDGE_DISCORD_LINK} isExternal>
             <HStack>
               <Text fontSize="sm">Cartridge Discord</Text>
-              <ExternalIcon fontSize="xl" />
+              <ExternalIcon size="sm" />
             </HStack>
           </Link>
         </HStack>

diff --git a/packages/keychain/src/components/Fees.tsx b/packages/keychain/src/components/Fees.tsx
@@ -1,16 +1,8 @@
 import { useEffect, useState } from "react";
-import {
-  AlertIcon,
-  HStack,
-  Spacer,
-  Spinner,
-  Text,
-  VStack,
-} from "@chakra-ui/react";
-
+import { HStack, Spacer, Spinner, Text, VStack } from "@chakra-ui/react";
 import { formatUnits } from "viem";
 import { useChainId } from "@/hooks/connection";
-import { EthereumIcon, InfoIcon, WarningIcon } from "@cartridge/ui";
+import { ErrorAlertIcon, EthereumIcon } from "@cartridge/ui-next";
 
 export function Fees({
   maxFee,
@@ -88,19 +80,10 @@ function LineItem({
         <Spinner size="sm" />
       ) : (
         <HStack gap={0}>
-          {(() => {
-            switch (variant) {
-              case "info":
-                return <InfoIcon color="info.foreground" />;
-              case "warning":
-                return <WarningIcon color="warning.background" />;
-              case "error":
-                return <AlertIcon color="error.foreground" />;
-              default:
-                return null;
-            }
-          })()}
-          {value !== "FREE" && <EthereumIcon color="text.primary" />}
+          {variant && <ErrorAlertIcon variant={variant} />}
+          {value !== "FREE" && (
+            <EthereumIcon className="text-secondary-foreground" />
+          )}
           <Text fontSize={13}>{value}</Text>
         </HStack>
       )}

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";
 
@@ -194,12 +194,8 @@ function DepositEthInner({ onComplete, onBack }: DepositEthProps) {
                             colorScheme="colorful"
                             onClick={() => onConnect(c)}
                           >
-                            {c.name === "argentX" && (
-                              <ArgentIcon fontSize={20} />
-                            )}
-                            {c.name === "braavos" && (
-                              <BravosIcon fontSize={20} />
-                            )}
+                            {c.name === "argentX" && <ArgentIcon size="sm" />}
+                            {c.name === "braavos" && <BraavosIcon size="sm" />}
                             {c.name}
                           </Button>
                         ))}
@@ -214,7 +210,7 @@ function DepositEthInner({ onComplete, onBack }: DepositEthProps) {
                       </Text>
                     )}
                     <Button w="full" gap="5px" onClick={onCopy}>
-                      <CopyIcon fontSize={20} /> copy address
+                      <CopyIcon size="sm" /> copy address
                     </Button>
                     <HStack>
                       <Text color="text.secondary" fontSize="14px">

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";
@@ -118,7 +118,13 @@ export function PurchaseCredits({ onBack }: PurchaseCreditsProps) {
         (state === PurchaseState.SELECTION ? "Credits" : "Complete")
       }
       description={controller && <CopyAddress address={controller.address} />}
-      Icon={state === PurchaseState.SELECTION ? CoinsIcon : CheckIcon}
+      icon={
+        state === PurchaseState.SELECTION ? (
+          <CoinsIcon variant="solid" />
+        ) : (
+          <CheckIcon />
+        )
+      }
       onBack={state === PurchaseState.SELECTION ? onBack : undefined}
     >
       <Content gap={6}>
@@ -162,7 +168,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";
 
@@ -80,7 +80,7 @@ export default function StripeCheckout({
     <Container
       title={"Purchase $" + creditsAmount}
       description={controller && <CopyAddress address={controller.address} />}
-      Icon={CoinsIcon}
+      icon={<CoinsIcon variant="solid" />}
       onBack={onBack}
     >
       <Content gap={6}>