From 250c703b9096a24a85270475a15924eb9a9a7f4d Mon Sep 17 00:00:00 2001
From: JunichiSugiura <jun.sugiura.jp@gmail.com>
Date: Fri, 20 Dec 2024 17:06:25 +0900
Subject: [PATCH] Replace chakra icon props with tw classes

---
 packages/keychain/src/components/DeployController.tsx     | 4 ++--
 packages/keychain/src/components/ErrorAlert.tsx           | 4 ++--
 packages/keychain/src/components/ErrorBoundary.tsx        | 2 +-
 packages/keychain/src/components/Fees.tsx                 | 4 +++-
 .../keychain/src/components/connect/SessionConsent.tsx    | 2 +-
 packages/keychain/src/components/session/ContractCard.tsx | 2 +-
 packages/ui-next/src/components/network.tsx               | 8 ++++----
 7 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/packages/keychain/src/components/DeployController.tsx b/packages/keychain/src/components/DeployController.tsx
index 8219bdaa8..3463e718e 100644
--- 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
index db0a5898a..61d731ad8 100644
--- a/packages/keychain/src/components/ErrorAlert.tsx
+++ b/packages/keychain/src/components/ErrorAlert.tsx
@@ -122,9 +122,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
index 4bc296be0..ed3389ffe 100644
--- a/packages/keychain/src/components/ErrorBoundary.tsx
+++ b/packages/keychain/src/components/ErrorBoundary.tsx
@@ -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="lg" />
             </HStack>
           </Link>
         </HStack>
diff --git a/packages/keychain/src/components/Fees.tsx b/packages/keychain/src/components/Fees.tsx
index d1bf3c972..94de36286 100644
--- 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/connect/SessionConsent.tsx b/packages/keychain/src/components/connect/SessionConsent.tsx
index 606f5301e..0a42656f4 100644
--- 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/session/ContractCard.tsx b/packages/keychain/src/components/session/ContractCard.tsx
index be698621e..d4afebd27 100644
--- a/packages/keychain/src/components/session/ContractCard.tsx
+++ b/packages/keychain/src/components/session/ContractCard.tsx
@@ -123,7 +123,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/network.tsx b/packages/ui-next/src/components/network.tsx
index 6ad5cec0f..5002e8f92 100644
--- a/packages/ui-next/src/components/network.tsx
+++ b/packages/ui-next/src/components/network.tsx
@@ -36,14 +36,14 @@ export function Network({ chainId }: { chainId: string }) {
             {(() => {
               switch (chainId) {
                 case constants.StarknetChainId.SN_MAIN:
-                  return <StarknetColorIcon fontSize="xl" />;
+                  return <StarknetColorIcon size="lg" />;
                 case constants.StarknetChainId.SN_SEPOLIA:
-                  return <StarknetIcon fontSize="xl" />;
+                  return <StarknetIcon size="lg" />;
                 default:
                   return isSlotChain(chainId) ? (
-                    <SlotIcon fontSize="xl" />
+                    <SlotIcon size="lg" />
                   ) : (
-                    <QuestionIcon fontSize="xl" />
+                    <QuestionIcon size="lg" />
                   );
               }
             })()}