Migrate more icons to ui-next

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

Hide file tree

Showing 13 changed files with 70 additions and 66 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/Balance.tsx b/packages/keychain/src/components/Funding/Balance.tsx
@@ -63,7 +63,7 @@ export function Balance({ showBalances }: BalanceProps) {
           <HStack>
             <CoinsIcon fontSize={20} />
             <Text>{creditBalance.formatted}</Text>
-            <Text color="text.secondary">${creditBalance.formatted}</Text>
+            <Text color="text.secondary">{creditBalance.formatted}</Text>
           </HStack>
           <Spacer />
           <HStack color="text.secondary">

diff --git a/packages/keychain/src/components/Funding/DepositEth.tsx b/packages/keychain/src/components/Funding/DepositEth.tsx
@@ -20,11 +20,11 @@ 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";
@@ -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/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/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/failure.stories.tsx b/packages/keychain/src/components/failure.stories.tsx
@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Failure } from "./failure";
+
+const meta = {
+  component: Failure,
+} satisfies Meta<typeof Failure>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
diff --git a/packages/keychain/src/components/failure.tsx b/packages/keychain/src/components/failure.tsx
@@ -1,5 +1,5 @@
 import { Container } from "@/components/layout";
-import { AlertIcon, ExternalIcon } from "@cartridge/ui";
+import { AlertIcon, ExternalIcon } from "@cartridge/ui-next";
 import { Link as UILink, Text } from "@chakra-ui/react";
 import { CARTRIDGE_DISCORD_LINK } from "@/const";
 import { Link } from "react-router-dom";
@@ -9,7 +9,7 @@ export function Failure() {
     <Container
       variant="expanded"
       hideAccount
-      icon={<AlertIcon boxSize={9} />}
+      icon={<AlertIcon size="lg" />}
       title="Uh-oh something went wrong"
       description={
         <>

diff --git a/packages/keychain/src/components/pending.stories.tsx b/packages/keychain/src/components/pending.stories.tsx
@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Pending } from "./pending";
+
+const meta = {
+  component: Pending,
+} satisfies Meta<typeof Pending>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
diff --git a/packages/keychain/src/components/pending.tsx b/packages/keychain/src/components/pending.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { useUrlTxns } from "@/hooks/transaction";
 import { Transaction, TransactionState } from "@/components/Transaction";
-import { TimerDuoIcon } from "@cartridge/ui";
+import { TimerDuoIcon } from "@cartridge/ui-next";
 import { Container, Content } from "@/components/layout";
 
 export function Pending() {
@@ -24,7 +24,7 @@ export function Pending() {
       setDescription("Your transaction was successful");
     }
 
-    //pending
+    // pending
   }, [txnResults, txns]);
 
   return (

diff --git a/packages/keychain/src/components/success.tsx b/packages/keychain/src/components/success.tsx
@@ -1,5 +1,5 @@
 import { Container } from "@/components/layout";
-import { SparklesDuoIcon } from "@cartridge/ui";
+import { SparklesDuoIcon } from "@cartridge/ui-next";
 import { useSearchParams } from "react-router-dom";
 
 export function Success() {