Fix Profile navigation and ERC-20 card (#841)

* Remove z-[-1] hack for tooltip

* Restyle navigation

* Comment out erc721 collection card

* Fix STRK amount / icon not displayed error

* Add 1px gap between nav buttons

* Hide setting button for now

packages/profile/src/components/inventory.tsx

@@ -90,13 +90,14 @@ export function Inventory() {
             >
               <img src={t.logoUrl} className="w-5 h-5" />
               <div>
-                {t.balance ? t.balance.toString() : "---"} {t.symbol}
+                {t.balance === undefined ? "---" : t.balance.toString()}{" "}
+                {t.symbol}
               </div>
             </CardContent>
           ))}
         </Card>
 
-        <Card>
+        {/* <Card>
           <CardHeader>
             <CardTitle>Golden Token (2)</CardTitle>
           </CardHeader>
@@ -112,7 +113,7 @@ export function Inventory() {
               </div>
             ))}
           </CardContent>
-        </Card>
+        </Card> */}
       </LayoutContent>
     </LayoutContainer>
   );

packages/profile/src/components/layout/index.tsx

@@ -1,4 +1,4 @@
-import { Button, cn, DotsIcon, TimesIcon } from "@cartridge/ui-next";
+import { Button, cn, TimesIcon } from "@cartridge/ui-next";
 import { Network } from "@cartridge/ui-next";
 import { PropsWithChildren, useCallback } from "react";
 import { useConnection } from "../provider/hooks";
@@ -20,9 +20,9 @@ export function LayoutContainer({ children }: PropsWithChildren) {
 
         <div className="flex gap-2">
           <Network chainId={chainId} />
-          <Button variant="icon" size="icon">
+          {/* <Button variant="icon" size="icon">
             <DotsIcon />
-          </Button>
+          </Button> */}
         </div>
       </div>
 
@@ -59,8 +59,7 @@ type LayoutHeaderProps = {
 
 export function LayoutHeader({ title, description, right }: LayoutHeaderProps) {
   return (
-    // z-[-1]: Workaround for network tooltip to be visible.
-    <div className="flex gap-2 px-4 py-6 sticky top-16 bg-background justify-between z-[-1]">
+    <div className="flex gap-2 px-4 py-6 sticky top-16 bg-background justify-between">
       <div className="flex min-w-0 gap-2 items-center">
         <div className="w-11 h-11 bg-secondary rounded flex shrink-0 items-center justify-center">
           <img

packages/profile/src/components/navigation.tsx

@@ -1,8 +1,7 @@
 import {
   ClockIcon,
   cn,
-  ScrollIcon,
-  ShieldIcon,
+  CoinsIcon,
   StateIconProps,
   Tooltip,
   TooltipContent,
@@ -15,10 +14,10 @@ import { useCallback } from "react";
 
 export function Navigation() {
   return (
-    <div className="flex rounded border border-1 border-border overflow-hidden shrink-0">
-      <Item Icon={ScrollIcon} variant="quest" />
-      <Item Icon={ShieldIcon} variant="inventory" />
+    <div className="flex rounded border border-1 border-secondary overflow-hidden shrink-0 gap-[1px] bg-secondary">
+      <Item Icon={CoinsIcon} variant="inventory" />
       <Item Icon={ClockIcon} variant="history" />
+      {/* <Item Icon={ScrollIcon} variant="quest" /> */}
     </div>
   );
 }

packages/utils/src/erc20.ts

@@ -1,4 +1,4 @@
-import { Provider, uint256 } from "starknet";
+import { getChecksumAddress, Provider, uint256 } from "starknet";
 import { hexToString, Hex } from "viem";
 
 export type ERC20Info = {
@@ -59,6 +59,9 @@ export class ERC20 {
       this.callSymbol(),
       this.callDecimals(),
     ]);
+    if (symbol === "STRK") {
+      console.log(this.address);
+    }
     if (!this.logoUrl) {
       this.logoUrl = await this.fetchLogoUrl();
     }
@@ -134,6 +137,10 @@ export class ERC20 {
     const res = await fetch("https://mainnet-api.ekubo.org/tokens");
     const data: EkuboTokenInfo[] = await res.json();
 
-    return data.find((t) => t.l2_token_address === this.address)?.logo_url;
+    return data.find(
+      (t) =>
+        getChecksumAddress(t.l2_token_address) ===
+        getChecksumAddress(this.address),
+    )?.logo_url;
   }
 }