Ads: support account in ads

app/soapbox/features/ads/components/ad.tsx

@@ -1,6 +1,8 @@
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import React, { useState, useEffect, useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
+import { Link } from 'react-router-dom';
+import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper';
 
 import { Avatar, Card, HStack, Icon, IconButton, Stack, Text } from 'soapbox/components/ui';
 import StatusCard from 'soapbox/features/status/components/card';
@@ -74,12 +76,29 @@ const Ad: React.FC<IAd> = ({ ad }) => {
       <Card className='py-6 sm:p-5' variant='rounded'>
         <Stack space={4}>
           <HStack alignItems='center' space={3}>
-            <Avatar src={instance.thumbnail} size={42} />
+            {ad.account ? (
+              <HoverRefWrapper accountId={ad.account.id} inline>
+                <Link to={`/@${ad.account.acct}`}>
+                  <Avatar src={ad.account.avatar} size={42} />
+                </Link>
+              </HoverRefWrapper>
+            ) : (
+              <Avatar src={instance.thumbnail} size={42} />
+            )}
 
             <Stack grow>
               <HStack space={1}>
                 <Text size='sm' weight='semibold' truncate>
-                  {instance.title}
+                  {ad.account ? (
+                    <HoverRefWrapper accountId={ad.account.id} inline>
+                      <Link
+                        to={`/@${ad.account.acct}`}
+                        dangerouslySetInnerHTML={{ __html: ad.account.display_name_html }}
+                      />
+                    </HoverRefWrapper>
+                  ) : (
+                    instance.title
+                  )}
                 </Text>
 
                 <Icon

app/soapbox/features/ads/providers/index.ts

@@ -1,7 +1,7 @@
 import { getSoapboxConfig } from 'soapbox/actions/soapbox';
 
 import type { RootState } from 'soapbox/store';
-import type { Card } from 'soapbox/types/entities';
+import type { Account, Card } from 'soapbox/types/entities';
 
 /** Map of available provider modules. */
 const PROVIDERS: Record<string, () => Promise<AdProvider>> = {
@@ -17,6 +17,8 @@ interface AdProvider {
 
 /** Entity representing an advertisement. */
 interface Ad {
+  /** Account associated with the ad. */
+  account: Account | null,
   /** Ad data in Card (OEmbed-ish) format. */
   card: Card,
   /** Impression URL to fetch when displaying the ad. */

app/soapbox/features/ads/providers/truth.ts

@@ -1,5 +1,6 @@
 import { getSettings } from 'soapbox/actions/settings';
-import { normalizeCard } from 'soapbox/normalizers';
+import api from 'soapbox/api';
+import { normalizeAd } from 'soapbox/normalizers';
 
 import type { AdProvider } from '.';
 import type { Card } from 'soapbox/types/entities';
@@ -18,21 +19,17 @@ const TruthAdProvider: AdProvider = {
     const state = getState();
     const settings = getSettings(state);
 
-    const response = await fetch('/api/v2/truth/ads?device=desktop', {
-      headers: {
-        'Accept-Language': settings.get('locale', '*') as string,
-      },
-    });
+    try {
+      const { data } = await api(getState).get<TruthAd[]>('/api/v2/truth/ads?device=desktop', {
+        headers: {
+          'Accept-Language': settings.get('locale', '*') as string,
+        },
+      });
 
-    if (response.ok) {
-      const data = await response.json() as TruthAd[];
-      return data.map(item => ({
-        ...item,
-        card: normalizeCard(item.card),
-      }));
+      return data.map(normalizeAd);
+    } catch (e) {
+      return [];
     }
-
-    return [];
   },
 };
 

app/soapbox/normalizers/soapbox/ad.ts

@@ -4,11 +4,14 @@ import {
   fromJS,
 } from 'immutable';
 
+import { normalizeAccount } from '../account';
 import { CardRecord, normalizeCard } from '../card';
 
 import type { Ad } from 'soapbox/features/ads/providers';
+import type { Account } from 'soapbox/types/entities';
 
 export const AdRecord = ImmutableRecord<Ad>({
+  account: null as Account | null,
   card: CardRecord(),
   impression: undefined as string | undefined,
   expires_at: undefined as string | undefined,
@@ -19,9 +22,11 @@ export const AdRecord = ImmutableRecord<Ad>({
 export const normalizeAd = (ad: Record<string, any>) => {
   const map = ImmutableMap<string, any>(fromJS(ad));
   const card = normalizeCard(map.get('card'));
+  const account = map.get('account') ? normalizeAccount(map.get('account')) : null;
   const expiresAt = map.get('expires_at') || map.get('expires');
 
   return AdRecord(map.merge({
+    account,
     card,
     expires_at: expiresAt,
   }));