Merge pull request #628 from ar-io/PE-7279-logo-primary

fix(nav menu): add ant logo associate with primary name to nav menu

src/components/cards/NavMenuCard/NavMenuCard.tsx

@@ -1,3 +1,5 @@
+import { AntLogoIcon } from '@src/components/data-display/AntLogoIcon';
+import useDomainInfo from '@src/hooks/useDomainInfo';
 import { usePrimaryName } from '@src/hooks/usePrimaryName';
 import { AoAddress } from '@src/types';
 import { shortPrimaryName } from '@src/utils';
@@ -14,6 +16,7 @@ import { useWalletState } from '../../../state/contexts/WalletState';
 import eventEmitter from '../../../utils/events';
 import { ROUTES } from '../../../utils/routes';
 import { LogoutIcon, MenuIcon, TokenIcon } from '../../icons';
+import { BrandLogo } from '../../icons';
 import ConnectButton from '../../inputs/buttons/ConnectButton/ConnectButton';
 import MenuButton from '../../inputs/buttons/MenuButton/MenuButton';
 import { Loader, NavBarLink } from '../../layout';
@@ -35,6 +38,9 @@ function NavMenuCard() {
   ] = useGlobalState();
   const [{ wallet, walletAddress }, dispatchWalletState] = useWalletState();
   const { data: primaryNameData } = usePrimaryName();
+  const { data: domainDomain } = useDomainInfo({
+    domain: primaryNameData?.name,
+  });
   const isMobile = useIsMobile();
 
   const [showMenu, setShowMenu] = useState(false);
@@ -371,36 +377,48 @@ function NavMenuCard() {
         <MenuButton
           setShow={setShowMenu}
           show={showMenu}
-          className={walletAddress ? 'outline-button' : ''}
+          className={
+            walletAddress
+              ? 'outline-button items-center justify-center'
+              : 'items-center justify-center'
+          }
           style={
             walletAddress
               ? {
                   borderRadius: 'var(--corner-radius',
                   borderWidth: '1px',
-                  padding: '10px',
+                  padding: '0px',
                   borderColor: 'var(--text-faded)',
                   width: 'fit-content',
                   minWidth: 'unset',
                 }
               : {}
           }
         >
-          {primaryNameData?.name ? (
-            <span className="flex text-white fill-success gap-2 items-center text-[14px]">
-              <svg width="8px" height="8px">
-                <circle cx="4" cy="4" r="4" fill="current" />
-              </svg>
-              {shortPrimaryName(primaryNameData.name)}
-            </span>
-          ) : walletAddress ? (
-            <WalletAddress characterCount={4} />
-          ) : (
-            <MenuIcon
-              width={'24px'}
-              height={'24px'}
-              fill={'var(--text-white)'}
-            />
-          )}
+          <span className="flex text-white gap-2 items-center justify-center text-[14px] h-[2.5rem] p-2">
+            {primaryNameData?.name ? (
+              <>
+                <AntLogoIcon
+                  className="rounded-full max-h-[1.875rem] border border-dark-grey"
+                  id={domainDomain?.info?.Logo}
+                  icon={
+                    <div className="flex items-center justify-center rounded-full fill-white p-[5px]">
+                      <BrandLogo width={'20px'} height={'20px'} />
+                    </div>
+                  }
+                />
+                {shortPrimaryName(primaryNameData.name)}
+              </>
+            ) : walletAddress ? (
+              <WalletAddress characterCount={4} />
+            ) : (
+              <MenuIcon
+                width={'24px'}
+                height={'24px'}
+                fill={'var(--text-white)'}
+              />
+            )}
+          </span>
         </MenuButton>
       </Tooltip>
     </>

src/components/data-display/AntLogoIcon.tsx

@@ -0,0 +1,57 @@
+import { useGlobalState } from '@src/state';
+import { CSSProperties, useEffect, useRef, useState } from 'react';
+import { ReactNode } from 'react-markdown';
+
+import { HamburgerOutlineIcon } from '../icons';
+
+export function AntLogoIcon({
+  id,
+  className,
+  style,
+  icon = (
+    <HamburgerOutlineIcon
+      width={'20px'}
+      height={'20px'}
+      fill="var(--text-white)"
+    />
+  ),
+}: {
+  id?: string;
+  className?: string;
+  icon?: ReactNode;
+  style?: CSSProperties;
+}) {
+  const [{ gateway }] = useGlobalState();
+  const [validImage, setValidImage] = useState(true);
+  const logoRef = useRef<HTMLImageElement>(null);
+
+  useEffect(() => {
+    if (!logoRef.current || !id) return;
+
+    const img = logoRef.current;
+    setValidImage(true);
+
+    const handleError = () => setValidImage(false);
+
+    img.addEventListener('error', handleError);
+
+    return () => {
+      img.removeEventListener('error', handleError);
+    };
+  }, [logoRef, id]);
+
+  if (!id) return <>{icon}</>;
+
+  return (
+    <>
+      <img
+        ref={logoRef}
+        className={className ?? 'w-[30px] rounded-full'}
+        src={`https://${gateway}/${id}`}
+        alt="ant-logo"
+        style={{ display: validImage ? 'block' : 'none', ...(style ?? {}) }}
+      />
+      {!validImage && icon}
+    </>
+  );
+}

src/components/pages/ManageDomain/ManageDomain.tsx

@@ -1,65 +1,16 @@
 import TransactionSuccessCard from '@src/components/cards/TransactionSuccessCard/TransactionSuccessCard';
+import { AntLogoIcon } from '@src/components/data-display/AntLogoIcon';
 import DomainSettings from '@src/components/forms/DomainSettings/DomainSettings';
 import { usePrimaryName } from '@src/hooks/usePrimaryName';
 import { useGlobalState, useModalState, useWalletState } from '@src/state';
 import { useTransactionState } from '@src/state/contexts/TransactionState';
 import { Star } from 'lucide-react';
-import { ReactNode, useEffect, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import { decodeDomainToASCII } from '../../../utils';
-import { HamburgerOutlineIcon } from '../../icons';
 import './styles.css';
 
-function AntLogoIcon({
-  id,
-  className,
-  icon = (
-    <HamburgerOutlineIcon
-      width={'20px'}
-      height={'20px'}
-      fill="var(--text-white)"
-    />
-  ),
-}: {
-  id?: string;
-  className?: string;
-  icon?: ReactNode;
-}) {
-  const [{ gateway }] = useGlobalState();
-  const [validImage, setValidImage] = useState(true);
-  const logoRef = useRef<HTMLImageElement>(null);
-
-  useEffect(() => {
-    if (!logoRef.current || !id) return;
-
-    const img = logoRef.current;
-
-    const handleError = () => setValidImage(false);
-
-    img.addEventListener('error', handleError);
-
-    return () => {
-      img.removeEventListener('error', handleError);
-    };
-  }, [logoRef, id]);
-
-  if (!id) return <>{icon}</>;
-
-  return (
-    <>
-      <img
-        ref={logoRef}
-        className={className ?? 'w-[30px] rounded-full'}
-        src={`https://${gateway}/${id}`}
-        alt="ant-logo"
-        style={{ display: validImage ? 'block' : 'none' }}
-      />
-      {!validImage && icon}
-    </>
-  );
-}
-
 function ManageDomain() {
   const { name } = useParams();
   const navigate = useNavigate();

src/utils/constants.ts

@@ -35,7 +35,7 @@ export const ARWEAVE_APP_API = new ArweaveWebWallet(
   { state: { url: 'arweave.app' } },
 );
 
-export const ARWEAVE_HOST = process.env.VITE_ARWEAVE_HOST ?? 'ar-io.dev';
+export const ARWEAVE_HOST = process.env.VITE_ARWEAVE_HOST ?? 'arweave.net';
 export const ARWEAVE_GRAPHQL_URL =
   process.env.VITE_ARWEAVE_GRAPHQL_URL ?? 'https://arweave.net/graphql';