Changed location of eth balance in mobile and desktop versions

luloxi · Dec 16, 2024 · 2d2ea52 · 2d2ea52
1 parent d6e2a62
commit 2d2ea52
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
@@ -5,6 +5,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { ConfigMenu } from "./punk-society/ConfigMenu";
+import { PunkBalance } from "./punk-society/PunkBalance";
 import { PunkConnectButton } from "./punk-society/PunkConnectButton";
 import { FaucetButton } from "./scaffold-eth";
 import { useAccount } from "wagmi";
@@ -47,8 +48,11 @@ export const Header = () => {
             <Image src="/usdc-logo.png" alt="USDC" width={20} height={20} className="inline-block" />
             <span className="ml-2">{formattedUsdcBalance}</span>
           </span>
+          <div className="ml-2">
+            <PunkBalance address={connectedAddress} />
+          </div>
         </div>
-        <div className="flex flex-row gap-3 ">
+        <div className="hidden lg:flex flex-row gap-3 ">
           <Link href="/" passHref>
             <button
               className={`bg-transparent hover:bg-transparent border-none hidden lg:flex flex-row items-center justify-center text-xl ${
@@ -123,6 +127,9 @@ export const Header = () => {
         </div> */}
 
         <div className="flex flex-row items-center justify-center ">
+          <div className="hidden lg:flex justify-center mr-2">
+            <PunkBalance address={connectedAddress} />
+          </div>
           <span className="mr-2 hidden lg:flex items-center justify-center gap-1 text-lg text-blue-600 font-bold">
             <Image src="/usdc-logo.png" alt="USDC" width={20} height={20} className="inline-block" />
             {formattedUsdcBalance}

diff --git a/packages/nextjs/components/punk-society/PunkConnectButton/AddressInfoDropdown.tsx b/packages/nextjs/components/punk-society/PunkConnectButton/AddressInfoDropdown.tsx
@@ -1,6 +1,6 @@
 import { useRef, useState } from "react";
 import Link from "next/link";
-import { PunkBalance } from "../PunkBalance";
+// import { PunkBalance } from "../PunkBalance";
 import { NetworkOptions } from "./NetworkOptions";
 // import { FundButton, getOnrampBuyUrl } from "@coinbase/onchainkit/fund";
 import { getAddress } from "viem";
@@ -81,8 +81,9 @@ export const AddressInfoDropdown = ({ address }: AddressInfoDropdownProps) => {
           className="dropdown-content menu z-[2] p-2 mt-2 shadow-center shadow-accent bg-base-200 rounded-box gap-1"
         >
           <NetworkOptions hidden={!selectingNetwork} />
-
-          <PunkBalance address={connectedAddress} />
+          {/* <div className="flex lg:hidden justify-center">
+            <PunkBalance address={connectedAddress} />
+          </div> */}
           <li className={selectingNetwork ? "hidden" : ""}>
             <Link className="p-0 flex items-center justify-center" href={`/profile/${connectedAddress}`} passHref>
               <div className="btn-sm w-full !rounded-xl flex items-center justify-start gap-2 py-3 text-white bg-orange-600 hover:bg-orange-500 active:bg-orange-500">