Store avatar url

common/challenge.ts

@@ -45,6 +45,7 @@ export type Acceptance = {
   userId: string
   userUsername: string
   userName: string
+  userAvatarUrl: string
   // The ID of the successful bet that tracks the money moved
   betId: string
 

functions/src/accept-challenge.ts

@@ -155,6 +155,7 @@ export const acceptchallenge = newEndpoint({}, async (req, auth) => {
             createdTime: Date.now(),
             userUsername: user.username,
             userName: user.name,
+            userAvatarUrl: user.avatarUrl,
           } as Acceptance,
         ],
       })

web/components/nav/sidebar.tsx

@@ -54,6 +54,7 @@ function getMoreNavigation(user?: User | null) {
   if (!user) {
     return [
       { name: 'Leaderboards', href: '/leaderboards' },
+      { name: 'Challenges', href: '/challenges' },
       { name: 'Charity', href: '/charity' },
       { name: 'Blog', href: 'https://news.manifold.markets' },
       { name: 'Discord', href: 'https://discord.gg/eHQBNBqXuh' },
@@ -64,6 +65,7 @@ function getMoreNavigation(user?: User | null) {
   return [
     { name: 'Send M$', href: '/links' },
     { name: 'Leaderboards', href: '/leaderboards' },
+    { name: 'Challenges', href: '/challenges' },
     { name: 'Charity', href: '/charity' },
     { name: 'Discord', href: 'https://discord.gg/eHQBNBqXuh' },
     { name: 'About', href: 'https://docs.manifold.markets/$how-to' },
@@ -114,6 +116,7 @@ function getMoreMobileNav() {
       ? []
       : [
           { name: 'Send M$', href: '/links' },
+          { name: 'Challenges', href: '/challenges' },
           { name: 'Charity', href: '/charity' },
           { name: 'Discord', href: 'https://discord.gg/eHQBNBqXuh' },
         ]),

web/pages/challenges/index.tsx

@@ -24,6 +24,7 @@ import { ToastClipboard } from 'web/components/toast-clipboard'
 import { Tabs } from 'web/components/layout/tabs'
 import { SiteLink } from 'web/components/site-link'
 import { UserLink } from 'web/components/user-page'
+import { Avatar } from 'web/components/avatar'
 dayjs.extend(customParseFormat)
 
 export function getManalinkUrl(slug: string) {
@@ -271,7 +272,7 @@ function AllLinksTable(props: {
         <thead className="bg-gray-50 text-left text-sm font-semibold text-gray-900">
           <tr>
             <th className="px-5 py-3.5">Amount</th>
-            <th className="px-5 py-3.5">Link</th>
+            <th className="px-5 py-3.5">Challenge Link</th>
             <th className="px-5 py-3.5">Accepted By</th>
           </tr>
         </thead>
@@ -305,7 +306,7 @@ function PublicLinkSummaryRow(props: { link: Challenge; highlight: boolean }) {
       <td className="px-5 py-4 font-medium text-gray-900">
         {formatMoney(link.amount)}
       </td>
-      <td className="relative px-5 py-4">
+      <td className="relative px-2 py-4">
         <SiteLink href={getChallengeUrl(link)}>
           {getChallengeUrl(link)
             .replace('https://manifold.markets', '...')
@@ -313,11 +314,18 @@ function PublicLinkSummaryRow(props: { link: Challenge; highlight: boolean }) {
         </SiteLink>
       </td>
 
-      <td className="px-5 py-4">
-        <UserLink
-          name={link.acceptances[0].userName}
-          username={link.acceptances[0].userUsername}
-        />
+      <td className="px-2 py-4">
+        <Row className={'items-center justify-start gap-1'}>
+          <Avatar
+            username={link.acceptances[0].userUsername}
+            avatarUrl={link.acceptances[0].userAvatarUrl}
+            size={'sm'}
+          />
+          <UserLink
+            name={link.acceptances[0].userName}
+            username={link.acceptances[0].userUsername}
+          />
+        </Row>
       </td>
     </tr>
   )