add subplebbit.suggested.avatarUrl to Home

src/App.js

@@ -89,7 +89,7 @@ export default function App() {
       {subplebbitAddresses: defaultSubplebbits.map(
         (subplebbit) => subplebbit.address
       ), sortType: 'new'},
-      {subplebbitAddresses: account.subscriptions, sortType: 'new'}
+      {subplebbitAddresses: account?.subscriptions, sortType: 'new'}
     ]
   });
   

src/components/styled/Home.styled.jsx

@@ -216,8 +216,8 @@ export const BoardsContent = styled.div`
   img {
     border: 1px solid #800;
     display: inline-block;
-    width: 150px;
-    height: 150px;
+    max-width: 150px;
+    max-height: 150px;
   }
 
   .board-text {

src/components/views/Home.jsx

@@ -1,5 +1,6 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Helmet } from 'react-helmet-async';
+import { useSubplebbit } from '@plebbit/plebbit-react-hooks';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import { Link, useNavigate } from 'react-router-dom';
 import { Container, Header, Logo, Page, Search, About, AboutTitle, AboutContent, Boards, BoardsTitle, BoardsContent, Footer } from '../styled/Home.styled';
@@ -7,6 +8,21 @@ import packageJson from '../../../package.json'
 const {version} = packageJson
 
 
+const BoardAvatar = ({ address }) => {
+  const [avatarUrl, setAvatarUrl] = useState('assets/plebchan.png');
+  const subplebbit = useSubplebbit({ subplebbitAddress: address });
+
+  useEffect(() => {
+    if (subplebbit.suggested?.avatarUrl) {
+      setAvatarUrl(subplebbit.suggested.avatarUrl);
+    }
+    console.log(subplebbit);
+  }, [subplebbit.suggested?.avatarUrl, subplebbit]);
+
+  return <img alt="board logo" src={avatarUrl} />;
+};
+
+
 const Home = () => {
   const { 
     setBodyStyle,
@@ -92,7 +108,7 @@ const Home = () => {
                       setSelectedTitle(subplebbit.title);
                       setSelectedAddress(subplebbit.address);
                     }} >
-                      <img alt="board logo" src="assets/plebchan.png" />
+                      <BoardAvatar address={subplebbit.address} />
                     </Link>
                     <div className="board-text">
                       <b>{subplebbit.address}</b>