From 14e8c0a54ff87736f51e8cf3dc87c0e044b8888f Mon Sep 17 00:00:00 2001
From: broody <broody@gmail.com>
Date: Thu, 9 Jan 2025 08:15:28 -1000
Subject: [PATCH] update ui

---
 examples/next/src/components/Header.tsx       | 53 +++++++++++--------
 .../next/src/components/ManualTransferEth.tsx | 28 +++++-----
 examples/next/src/components/Transfer.tsx     | 27 +++++-----
 .../src/components/primitives/checkbox.tsx    |  4 +-
 4 files changed, 57 insertions(+), 55 deletions(-)

diff --git a/examples/next/src/components/Header.tsx b/examples/next/src/components/Header.tsx
index 939405b06..b0f4353a9 100644
--- a/examples/next/src/components/Header.tsx
+++ b/examples/next/src/components/Header.tsx
@@ -9,17 +9,11 @@ import {
   useNetwork,
   useSwitchChain,
 } from "@starknet-react/core";
-import { useState } from "react";
+import { useState, useEffect, useRef } from "react";
 import { constants, num } from "starknet";
 import { Chain } from "@starknet-react/chains";
 
-const Header = ({
-  showBack,
-  lockChain,
-}: {
-  showBack?: boolean;
-  lockChain?: boolean;
-}) => {
+const Header = () => {
   const { connect, connectors } = useConnect();
   const { disconnect } = useDisconnect();
   const { chain, chains } = useNetwork();
@@ -32,28 +26,41 @@ const Header = ({
       chainId: constants.StarknetChainId.SN_SEPOLIA,
     },
   });
+  const networkRef = useRef<HTMLDivElement>(null);
+  const profileRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        networkRef.current &&
+        !networkRef.current.contains(event.target as Node)
+      ) {
+        setNetworkOpen(false);
+      }
+      if (
+        profileRef.current &&
+        !profileRef.current.contains(event.target as Node)
+      ) {
+        setProfileOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
 
   return (
     <div className="w-full absolute top-0 left-0 p-5 flex items-center">
-      {showBack && (
-        <button
-          className="absolute top-5 left-5 w-6 h-6 cursor-pointer"
-          onClick={() => {
-            window.history.back();
-          }}
-        >
-          ←
-        </button>
-      )}
       <div className="flex-1" />
       {status === "connected" && (
-        <div className="relative">
+        <div className="relative" ref={networkRef}>
           <Button
             onClick={() => {
               setNetworkOpen(!networkOpen);
               setProfileOpen(false);
             }}
-            disabled={lockChain}
             className="flex items-center gap-2 min-w-[120px]"
           >
             {chain.network}
@@ -66,7 +73,7 @@ const Header = ({
             </span>
           </Button>
           {networkOpen && (
-            <div className="absolute right-0 top-full mt-1 bg-gray-700 shadow-lg rounded-md min-w-[160px] py-1 z-10">
+            <div className="absolute right-0 top-full mt-1 bg-background shadow-lg rounded-md min-w-[160px] py-1 z-10 border border-gray-600">
               {chains.map((c: Chain) => (
                 <button
                   key={c.id}
@@ -84,7 +91,7 @@ const Header = ({
         </div>
       )}
       {address ? (
-        <div className="relative ml-2">
+        <div className="relative ml-2" ref={profileRef}>
           <Button
             onClick={() => {
               setProfileOpen(!profileOpen);
@@ -102,7 +109,7 @@ const Header = ({
             </span>
           </Button>
           {profileOpen && (
-            <div className="absolute right-0 top-full mt-1 bg-gray-700 shadow-lg rounded-md min-w-[160px] py-1 z-10">
+            <div className="absolute right-0 top-full mt-1 bg-background shadow-lg rounded-md min-w-[160px] py-1 z-10 border border-gray-600">
               <button
                 className="block w-full px-4 py-2 text-left hover:bg-gray-600 transition-colors border-b border-gray-600"
                 onClick={() => controllerConnector.controller.openProfile()}
diff --git a/examples/next/src/components/ManualTransferEth.tsx b/examples/next/src/components/ManualTransferEth.tsx
index f94567456..e4d9299b5 100644
--- a/examples/next/src/components/ManualTransferEth.tsx
+++ b/examples/next/src/components/ManualTransferEth.tsx
@@ -1,15 +1,16 @@
 "use client";
 
 import { Button } from "@cartridge/ui-next";
-import { useAccount, useExplorer } from "@starknet-react/core";
+import { useAccount, useNetwork } from "@starknet-react/core";
 import { useCallback, useState } from "react";
 import { ETH_CONTRACT_ADDRESS } from "./providers/StarknetProvider";
 
 export const ManualTransferEth = () => {
   const [submitted, setSubmitted] = useState<boolean>(false);
   const { account } = useAccount();
-  const explorer = useExplorer();
+  const { chain } = useNetwork();
   const [txnHash, setTxnHash] = useState<string>();
+  const [network, setNetwork] = useState<string>();
 
   const execute = useCallback(
     async (amount: string) => {
@@ -32,11 +33,14 @@ export const ManualTransferEth = () => {
             calldata: [account?.address, amount, "0x0"],
           },
         ])
-        .then(({ transaction_hash }) => setTxnHash(transaction_hash))
+        .then(({ transaction_hash }) => {
+          setTxnHash(transaction_hash);
+          setNetwork(chain.network);
+        })
         .catch((e) => console.error(e))
         .finally(() => setSubmitted(false));
     },
-    [account],
+    [account, chain],
   );
 
   if (!account) {
@@ -46,7 +50,6 @@ export const ManualTransferEth = () => {
   return (
     <div>
       <h2>Manual Transfer Eth</h2>
-      <p>Address: {ETH_CONTRACT_ADDRESS}</p>
       <Button onClick={() => execute("0x0")} disabled={submitted}>
         Transfer 0 ETH to self
       </Button>
@@ -60,16 +63,11 @@ export const ManualTransferEth = () => {
         Transfer 500 ETH to self
       </Button>
       {txnHash && (
-        <p>
-          Transaction hash:{" "}
-          <a
-            href={explorer.transaction(txnHash)}
-            target="_blank"
-            rel="noreferrer"
-          >
-            {txnHash}
-          </a>
-        </p>
+        <>
+          <p>Transaction: {txnHash}</p>
+
+          <p>Chain: {network}</p>
+        </>
       )}
     </div>
   );
diff --git a/examples/next/src/components/Transfer.tsx b/examples/next/src/components/Transfer.tsx
index 5b2d485a4..91ee89637 100644
--- a/examples/next/src/components/Transfer.tsx
+++ b/examples/next/src/components/Transfer.tsx
@@ -1,15 +1,16 @@
 "use client";
 
 import { Button } from "@cartridge/ui-next";
-import { useAccount, useExplorer } from "@starknet-react/core";
+import { useAccount, useNetwork } from "@starknet-react/core";
 import { useCallback, useState } from "react";
 import { STRK_CONTRACT_ADDRESS } from "./providers/StarknetProvider";
 
 export const Transfer = () => {
   const [submitted, setSubmitted] = useState<boolean>(false);
   const { account } = useAccount();
-  const explorer = useExplorer();
+  const { chain } = useNetwork();
   const [txnHash, setTxnHash] = useState<string>();
+  const [network, setNetwork] = useState<string>();
 
   const execute = useCallback(
     async (amount: string) => {
@@ -32,11 +33,14 @@ export const Transfer = () => {
             calldata: [account?.address, amount, "0x0"],
           },
         ])
-        .then(({ transaction_hash }) => setTxnHash(transaction_hash))
+        .then(({ transaction_hash }) => {
+          setTxnHash(transaction_hash);
+          setNetwork(chain.network);
+        })
         .catch((e) => console.error(e))
         .finally(() => setSubmitted(false));
     },
-    [account],
+    [account, chain],
   );
 
   if (!account) {
@@ -46,7 +50,6 @@ export const Transfer = () => {
   return (
     <div>
       <h2>Session Transfer STRK</h2>
-      <p>Address: {STRK_CONTRACT_ADDRESS}</p>
       <Button onClick={() => execute("0x0")}>Transfer 0 STRK to self</Button>
       <Button onClick={() => execute("0x1C6BF52634000")} disabled={submitted}>
         Transfer 0.005 STRK to self
@@ -58,16 +61,10 @@ export const Transfer = () => {
         Transfer 500 STRK to self
       </Button>
       {txnHash && (
-        <p>
-          Transaction hash:{" "}
-          <a
-            href={explorer.transaction(txnHash)}
-            target="_blank"
-            rel="noreferrer"
-          >
-            {txnHash}
-          </a>
-        </p>
+        <>
+          <p>Transaction: {txnHash}</p>
+          <p>Chain: {network}</p>
+        </>
       )}
     </div>
   );
diff --git a/packages/ui-next/src/components/primitives/checkbox.tsx b/packages/ui-next/src/components/primitives/checkbox.tsx
index 7d71813ed..b647170bc 100644
--- a/packages/ui-next/src/components/primitives/checkbox.tsx
+++ b/packages/ui-next/src/components/primitives/checkbox.tsx
@@ -30,8 +30,8 @@ const Checkbox = React.forwardRef<
           checked === "indeterminate"
             ? "minus-line"
             : checked
-            ? "line"
-            : "unchecked-line"
+              ? "line"
+              : "unchecked-line"
         }
       />
     </CheckboxPrimitive.Root>