From 37d21a07ba44dc42ec8df645406c449ee7853204 Mon Sep 17 00:00:00 2001
From: broody <broody@gmail.com>
Date: Tue, 7 Jan 2025 09:42:04 -1000
Subject: [PATCH] Decode network id

---
 examples/next/src/components/Header.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/examples/next/src/components/Header.tsx b/examples/next/src/components/Header.tsx
index 76cf50999..8fea77380 100644
--- 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,7 +15,7 @@ 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" },
@@ -22,7 +23,6 @@ const Header = ({
     { 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