Replace chakra icon props with tw classes

cartridge-gg · Dec 20, 2024 · 17c204c · 17c204c
1 parent be1a021
commit 17c204c
Show file tree

Hide file tree

Showing 10 changed files with 28 additions and 40 deletions.
diff --git a/packages/keychain/src/components/DeployController.tsx b/packages/keychain/src/components/DeployController.tsx
@@ -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
@@ -3,6 +3,7 @@ import {
   CopyIcon,
   CheckIcon,
   ErrorAlertIcon,
+  ErrorAlertIconProps,
 } from "@cartridge/ui-next";
 import {
   Text,
@@ -19,12 +20,7 @@ import {
   Divider,
 } from "@chakra-ui/react";
 import { motion } from "framer-motion";
-import React, {
-  ComponentProps,
-  ReactElement,
-  useEffect,
-  useState,
-} from "react";
+import React, { ReactElement, useEffect, useState } from "react";
 import { ErrorCode } from "@cartridge/account-wasm/controller";
 import { ControllerError } from "@/utils/connection";
 import { useConnection } from "@/hooks/connection";
@@ -75,11 +71,7 @@ export function ErrorAlert({
               <HStack alignItems="flex-start">
                 {variant && (
                   <ErrorAlertIcon
-                    variant={
-                      variant as ComponentProps<
-                        typeof ErrorAlertIcon
-                      >["variant"]
-                    }
+                    variant={variant as ErrorAlertIconProps["variant"]}
                     size="xs"
                   />
                 )}
@@ -122,9 +114,9 @@ export function ErrorAlert({
                     aria-label="Copy stacktrace"
                     icon={
                       copied ? (
-                        <CheckIcon fontSize="xs" color="black" />
+                        <CheckIcon size="xs" className="text-[black]" />
                       ) : (
-                        <CopyIcon fontSize="xs" color="black" />
+                        <CopyIcon size="xs" className="text-[black]" />
                       )
                     }
                     onClick={() => {

diff --git a/packages/keychain/src/components/ErrorBoundary.tsx b/packages/keychain/src/components/ErrorBoundary.tsx
@@ -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
@@ -81,7 +81,9 @@ function LineItem({
       ) : (
         <HStack gap={0}>
           {variant && <ErrorAlertIcon variant={variant} />}
-          {value !== "FREE" && <EthereumIcon color="text.primary" />}
+          {value !== "FREE" && (
+            <EthereumIcon className="text-secondary-foreground" />
+          )}
           <Text fontSize={13}>{value}</Text>
         </HStack>
       )}

diff --git a/packages/keychain/src/components/Funding/DepositEth.tsx b/packages/keychain/src/components/Funding/DepositEth.tsx
@@ -194,12 +194,8 @@ function DepositEthInner({ onComplete, onBack }: DepositEthProps) {
                             colorScheme="colorful"
                             onClick={() => onConnect(c)}
                           >
-                            {c.name === "argentX" && (
-                              <ArgentIcon fontSize={20} />
-                            )}
-                            {c.name === "braavos" && (
-                              <BraavosIcon 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/connect/SessionConsent.tsx b/packages/keychain/src/components/connect/SessionConsent.tsx
@@ -42,7 +42,7 @@ export function SessionConsent({
           )}
           <Text color="text.secondary" fontSize="xs" fontWeight="bold">
             Authorize{" "}
-            {/* <LockIcon fontSize="md" color="text.secondaryAccent" mr={0.5} /> */}
+            {/* <LockIcon className="text-accent-foreground mr-0.5" /> */}
             <Text as="span" color="text.secondaryAccent" fontWeight="bold">
               {origin}
             </Text>{" "}

diff --git a/packages/keychain/src/components/failure.tsx b/packages/keychain/src/components/failure.tsx
@@ -27,7 +27,7 @@ export function Failure() {
               alignItems="center"
             >
               Discord
-              <ExternalIcon />
+              <ExternalIcon size="sm" />
             </UILink>
           </Text>
         </>

diff --git a/packages/keychain/src/components/session/ContractCard.tsx b/packages/keychain/src/components/session/ContractCard.tsx
@@ -98,7 +98,7 @@ export function ContractCard({
   );
 }
 
-export function humanizeString(str: string): string {
+function humanizeString(str: string): string {
   return (
     str
       // Convert from camelCase or snake_case

diff --git a/packages/ui-next/src/components/icons/error-alert-icon.tsx b/packages/ui-next/src/components/icons/error-alert-icon.tsx
@@ -1,15 +1,17 @@
 import { cn } from "@/utils";
 import { InfoIcon, WarningIcon, AlertIcon as AlertIconRaw } from "./utility";
 
+export type ErrorAlertIconProps = {
+  variant: "info" | "warning" | "error";
+  size?: "xs" | "default";
+  className?: string;
+};
+
 export function ErrorAlertIcon({
   variant,
   size = "default",
   className,
-}: {
-  variant: "info" | "warning" | "error";
-  size?: "xs" | "default";
-  className?: string;
-}) {
+}: ErrorAlertIconProps) {
   switch (variant) {
     case "info":
       return (

diff --git a/packages/ui-next/src/components/network.tsx b/packages/ui-next/src/components/network.tsx
@@ -36,15 +36,11 @@ export function Network({ chainId }: { chainId: string }) {
             {(() => {
               switch (chainId) {
                 case constants.StarknetChainId.SN_MAIN:
-                  return <StarknetColorIcon fontSize="xl" />;
+                  return <StarknetColorIcon />;
                 case constants.StarknetChainId.SN_SEPOLIA:
-                  return <StarknetIcon fontSize="xl" />;
+                  return <StarknetIcon />;
                 default:
-                  return isSlotChain(chainId) ? (
-                    <SlotIcon fontSize="xl" />
-                  ) : (
-                    <QuestionIcon fontSize="xl" />
-                  );
+                  return isSlotChain(chainId) ? <SlotIcon /> : <QuestionIcon />;
               }
             })()}
             <div>{getChainName(chainId)}</div>