Decode network id

cartridge-gg · Jan 7, 2025 · 37d21a0 · 37d21a0
1 parent 9da6f9a
commit 37d21a0
Showing 1 changed file with 5 additions and 5 deletions.
diff --git a/examples/next/src/components/Header.tsx b/examples/next/src/components/Header.tsx
@@ -4,6 +4,7 @@ import { Button } from "@cartridge/ui-next";
 import ControllerConnector from "@cartridge/connector/controller";
 import { useAccount, useConnect, useDisconnect } from "@starknet-react/core";
 import { useState } from "react";
+import { num, shortString } from "starknet";
 
 const Header = ({
   showBack,
@@ -14,15 +15,14 @@ const Header = ({
 }) => {
   const { connect, connectors } = useConnect();
   const { disconnect } = useDisconnect();
-  const { address, connector } = useAccount();
+  const { address, connector, chainId } = useAccount();
   const controllerConnector = connector as never as ControllerConnector;
   const chains = [
     { name: "Mainnet", id: "mainnet" },
     { name: "Sepolia (Testnet)", id: "sepolia" },
     { name: "Slot (L3)", id: "slot" },
   ];
 
-  const chainName = "chain name";
   const [networkOpen, setNetworkOpen] = useState(false);
   const [profileOpen, setProfileOpen] = useState(false);
 
@@ -43,7 +43,7 @@ const Header = ({
         </button>
       )}
       <div className="flex-1" />
-      <div className="relative">
+      {chainId && <div className="relative">
         <Button
           onClick={() => {
             setNetworkOpen(!networkOpen);
@@ -52,7 +52,7 @@ const Header = ({
           disabled={lockChain}
           className="flex items-center gap-2 min-w-[120px]"
         >
-          {chainName}
+          {shortString.decodeShortString(num.toHex(chainId))}
           <span
             className={`transition-transform duration-200 ${
               networkOpen ? "rotate-180" : ""
@@ -77,7 +77,7 @@ const Header = ({
             ))}
           </div>
         )}
-      </div>
+      </div>}
       {address ? (
         <div className="relative ml-2">
           <Button