From 95279bfafb3e18c02a9642b0428a7fd0aa7dc26f Mon Sep 17 00:00:00 2001
From: JunichiSugiura <jun.sugiura.jp@gmail.com>
Date: Fri, 20 Dec 2024 11:50:00 +0900
Subject: [PATCH] Migrate more icons to ui-next

---
 .../src/components/ConfirmTransaction.tsx     |  2 +-
 .../keychain/src/components/ErrorBoundary.tsx |  2 +-
 packages/keychain/src/components/Fees.tsx     |  3 +-
 .../components/Funding/AmountSelection.tsx    | 12 +---
 .../src/components/Funding/Balance.tsx        |  2 +-
 .../src/components/Funding/DepositEth.tsx     |  8 +--
 .../components/Funding/PurchaseCredits.tsx    |  2 +-
 .../keychain/src/components/Funding/index.tsx |  8 +--
 packages/keychain/src/components/Policies.tsx | 20 +++---
 .../keychain/src/components/SignMessage.tsx   |  2 +-
 .../keychain/src/components/Transaction.tsx   | 63 +++++++------------
 .../connect/Authenticate/Unsupported.tsx      |  2 +-
 .../src/components/connect/Logout.tsx         |  2 +-
 .../src/components/connect/SessionConsent.tsx |  8 +--
 .../src/components/connect/Upgrade.tsx        |  2 +-
 .../src/components/connect/create/Legal.tsx   | 26 ++++----
 .../src/components/failure.stories.tsx        | 13 ++++
 packages/keychain/src/components/failure.tsx  |  4 +-
 .../src/components/pending.stories.tsx        | 13 ++++
 packages/keychain/src/components/pending.tsx  |  4 +-
 packages/keychain/src/components/success.tsx  |  2 +-
 21 files changed, 95 insertions(+), 105 deletions(-)
 create mode 100644 packages/keychain/src/components/failure.stories.tsx
 create mode 100644 packages/keychain/src/components/pending.stories.tsx

diff --git a/packages/keychain/src/components/ConfirmTransaction.tsx b/packages/keychain/src/components/ConfirmTransaction.tsx
index bcc557705..6d65d90a3 100644
--- 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
index 219a2befb..4bc296be0 100644
--- 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
index 413398741..bc7ffe3af 100644
--- 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
index f5c64bf8e..4e751ba5d 100644
--- 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
index 686347cac..59eefd8bf 100644
--- 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
index 616db9b8f..954a47841 100644
--- 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
index cc858315f..64b8a1a1e 100644
--- a/packages/keychain/src/components/Funding/PurchaseCredits.tsx
+++ b/packages/keychain/src/components/Funding/PurchaseCredits.tsx
@@ -4,7 +4,7 @@ import { useCallback, useMemo, useState } from "react";
 import { CheckIcon, CoinsIcon } from "@cartridge/ui";
 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";
diff --git a/packages/keychain/src/components/Funding/index.tsx b/packages/keychain/src/components/Funding/index.tsx
index 6a40f9ea9..b8fd35785 100644
--- 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
index e16ce83d2..adcf728d7 100644
--- 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
index 4aa4dc6d4..36d66e97a 100644
--- 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
index fa441fc0f..822fbbbb2 100644
--- 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
index cbe8b703e..e07ac240b 100644
--- 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
index 3c3395357..782cd96a8 100644
--- 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
index 2815d04b8..606f5301e 100644
--- 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
index 800c301c5..759148c6d 100644
--- 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";
diff --git a/packages/keychain/src/components/connect/create/Legal.tsx b/packages/keychain/src/components/connect/create/Legal.tsx
index 2a59484dd..8889217fd 100644
--- a/packages/keychain/src/components/connect/create/Legal.tsx
+++ b/packages/keychain/src/components/connect/create/Legal.tsx
@@ -1,30 +1,26 @@
-import { HStack, Text, Link } from "@chakra-ui/react";
-import { LockIcon } from "@cartridge/ui";
+import { LockIcon } from "@cartridge/ui-next";
+import { Link } from "react-router-dom";
 
 export const Legal = () => (
-  <HStack spacing={2} align="flex-start" marginTop="auto" mb="0.5rem">
-    <LockIcon color="#808080" width="16px" height="16px" />
-    <Text fontSize="12px" fontWeight={500} lineHeight="16px" color="#808080">
+  <div className="flex items-center gap-1 text-muted-foreground">
+    <LockIcon />
+    <div className="text-xs">
       By continuing you are agreeing to Cartridge&apos;s{" "}
       <Link
-        href="https://cartridge.gg/legal/terms-of-service"
+        to="https://cartridge.gg/legal/terms-of-service"
         target="_blank"
-        color="#808080"
-        textDecoration="underline"
-        display="inline"
+        className="underline"
       >
         Terms of Service
       </Link>{" "}
       and{" "}
       <Link
-        href="https://cartridge.gg/legal/privacy-policy"
+        to="https://cartridge.gg/legal/privacy-policy"
         target="_blank"
-        color="#808080"
-        textDecoration="underline"
-        display="inline"
+        className="underline"
       >
         Privacy Policy
       </Link>
-    </Text>
-  </HStack>
+    </div>
+  </div>
 );
diff --git a/packages/keychain/src/components/failure.stories.tsx b/packages/keychain/src/components/failure.stories.tsx
new file mode 100644
index 000000000..1caf9f5ea
--- /dev/null
+++ 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
index 99999576f..0b2bb593f 100644
--- 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
new file mode 100644
index 000000000..54a7ecb9a
--- /dev/null
+++ 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
index 8b60cd8ee..7e9fe6788 100644
--- 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
index 2b2a571b3..4a4798e08 100644
--- 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() {