Merge pull request #499 from reservoirprotocol/pedro/grwth-4315-missi…

…ng-wallet-icon-image-on-explorer-and-redstone-market Fix avatar loading issues
reservoirprotocol · Apr 17, 2024 · ba03b1c · ba03b1c
2 parents fea07d2 + bf64012
commit ba03b1c
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 11 deletions.
diff --git a/components/navbar/AccountSidebar.tsx b/components/navbar/AccountSidebar.tsx
@@ -23,6 +23,7 @@ import CopyText from 'components/common/CopyText'
 import Link from 'next/link'
 import Wallet from './Wallet'
 import { useRouter } from 'next/router'
+import { AvatarFallback } from '@radix-ui/react-avatar'
 
 export const AccountSidebar: FC = () => {
   const { address } = useAccount()
@@ -49,7 +50,16 @@ export const AccountSidebar: FC = () => {
       color="gray3"
     >
       {ensAvatar ? (
-        <Avatar size="medium" src={ensAvatar} />
+        <Avatar
+          size="medium"
+          src={ensAvatar}
+          fallback={
+            <Jazzicon
+              diameter={44}
+              seed={jsNumberForAddress(address as string)}
+            />
+          }
+        />
       ) : (
         <Jazzicon diameter={44} seed={jsNumberForAddress(address as string)} />
       )}
@@ -169,7 +179,10 @@ export const AccountSidebar: FC = () => {
                     </CopyText>
                   </Flex>
                   <Grid css={{ gridTemplateColumns: '1fr 1fr', mt: 32 }}>
-                    <Link href={`/portfolio/${address || ''}?tab=items`} replace={true}>
+                    <Link
+                      href={`/portfolio/${address || ''}?tab=items`}
+                      replace={true}
+                    >
                       <Flex
                         align="center"
                         css={{
@@ -183,7 +196,10 @@ export const AccountSidebar: FC = () => {
                         <Text style="body1">My Items</Text>
                       </Flex>
                     </Link>
-                    <Link href={`/portfolio/${address || ''}?tab=listings`} replace={true}>
+                    <Link
+                      href={`/portfolio/${address || ''}?tab=listings`}
+                      replace={true}
+                    >
                       <Flex
                         align="center"
                         css={{
@@ -197,7 +213,10 @@ export const AccountSidebar: FC = () => {
                         <Text style="body1">Listings</Text>
                       </Flex>
                     </Link>
-                    <Link href={`/portfolio/${address || ''}?tab=offers`} replace={true}>
+                    <Link
+                      href={`/portfolio/${address || ''}?tab=offers`}
+                      replace={true}
+                    >
                       <Flex
                         align="center"
                         css={{
@@ -211,7 +230,10 @@ export const AccountSidebar: FC = () => {
                         <Text style="body1">Offers Made</Text>
                       </Flex>
                     </Link>
-                    <Link href={`/portfolio/${address || ''}?tab=activity`} replace={true}>
+                    <Link
+                      href={`/portfolio/${address || ''}?tab=activity`}
+                      replace={true}
+                    >
                       <Flex
                         align="center"
                         css={{

diff --git a/components/navbar/HamburgerMenu.tsx b/components/navbar/HamburgerMenu.tsx
@@ -108,7 +108,16 @@ const HamburgerMenu = () => {
               >
                 <Flex css={{ alignItems: 'center' }}>
                   {ensAvatar ? (
-                    <Avatar size="medium" src={ensAvatar} />
+                    <Avatar
+                      size="medium"
+                      src={ensAvatar}
+                      fallback={
+                        <Jazzicon
+                          diameter={36}
+                          seed={jsNumberForAddress(address as string)}
+                        />
+                      }
+                    />
                   ) : (
                     <Jazzicon
                       diameter={36}
@@ -162,7 +171,6 @@ const HamburgerMenu = () => {
               </Text>
             </Link>
 
-
             <Anchor
               href="https://docs.reservoir.tools/docs"
               target="_blank"

diff --git a/components/primitives/Avatar.tsx b/components/primitives/Avatar.tsx
@@ -5,6 +5,7 @@ import {
   ComponentProps,
   ElementRef,
   forwardRef,
+  ReactElement,
 } from 'react'
 
 type AvatarRootProps = ComponentProps<typeof AvatarRoot>
@@ -72,7 +73,7 @@ const AvatarFallback = styled(AvatarPrimitive.Fallback, {
 export const Avatar = forwardRef<
   ElementRef<typeof AvatarImage>,
   ComponentPropsWithoutRef<typeof AvatarImage> & {
-    fallback?: string
+    fallback?: ReactElement
     size?: AvatarRootProps['size']
     corners?: AvatarRootProps['corners']
   }

diff --git a/pages/portfolio/[[...address]].tsx b/pages/portfolio/[[...address]].tsx
@@ -66,7 +66,7 @@ const IndexPage: NextPage = () => {
   const [tokenFiltersOpen, setTokenFiltersOpen] = useState(false)
   const [hideSpam, setHideSpam] = useState<boolean>(true)
   const [filterCollection, setFilterCollection] = useState<string | undefined>(
-    undefined
+    undefined,
   )
   const [sortByType, setSortByType] =
     useState<PortfolioSortingOption>('acquiredAt')
@@ -115,7 +115,7 @@ const IndexPage: NextPage = () => {
           tokenId: item.token?.tokenId as string,
           collectionId: item.token?.collection?.id as string,
         })),
-    [selectedItems]
+    [selectedItems],
   )
 
   const tokenTableRef = useRef<TokenTableRef>(null)
@@ -212,7 +212,16 @@ const IndexPage: NextPage = () => {
                   >
                     <Flex align="center">
                       {ensAvatar ? (
-                        <Avatar size="xxl" src={ensAvatar} />
+                        <Avatar
+                          size="xxl"
+                          src={ensAvatar}
+                          fallback={
+                            <Jazzicon
+                              diameter={64}
+                              seed={jsNumberForAddress(address as string)}
+                            />
+                          }
+                        />
                       ) : (
                         <Jazzicon
                           diameter={64}