Support video avatars

background/main.ts

@@ -1059,11 +1059,19 @@ export default class Main extends BaseService<never> {
         this.store.dispatch(updateAccountName({ ...addressOnNetwork, name }))
       },
     )
+
     this.nameService.emitter.on(
       "resolvedAvatar",
       async ({ from: { addressOnNetwork }, resolved: { avatar } }) => {
+        const fileTypeResponse = await fetch(avatar, { method: "HEAD" })
+        const avatarType = fileTypeResponse.headers.get("Content-Type")
+
         this.store.dispatch(
-          updateENSAvatar({ ...addressOnNetwork, avatar: avatar.toString() }),
+          updateENSAvatar({
+            ...addressOnNetwork,
+            avatar: avatar.toString(),
+            avatarType: avatarType ?? undefined,
+          }),
         )
       },
     )

background/redux-slices/accounts.ts

@@ -66,6 +66,7 @@ export type AccountData = {
   ens: {
     name?: DomainName
     avatarURL?: URI
+    avatarType?: string
   }
   defaultName: string
   defaultAvatar: string
@@ -386,8 +387,10 @@ const accountSlice = createSlice({
     updateENSAvatar: (
       immerState,
       {
-        payload: { address, network, avatar },
-      }: { payload: AddressOnNetwork & { avatar: URI } },
+        payload: { address, network, avatar, avatarType },
+      }: {
+        payload: AddressOnNetwork & { avatar: URI; avatarType?: string }
+      },
     ) => {
       const normalizedAddress = normalizeEVMAddress(address)
 
@@ -412,7 +415,7 @@ const accountSlice = createSlice({
 
       immerState.accountsData.evm[network.chainID][normalizedAddress] = {
         ...baseAccountData,
-        ens: { ...baseAccountData.ens, avatarURL: avatar },
+        ens: { ...baseAccountData.ens, avatarURL: avatar, avatarType },
       }
     },
     /**

background/redux-slices/migrations/index.ts

@@ -32,12 +32,13 @@ import to32 from "./to-32"
 import to33 from "./to-33"
 import to34 from "./to-34"
 import to35 from "./to-35"
+import to36 from "./to-36"
 
 /**
  * The version of persisted Redux state the extension is expecting. Any previous
  * state without this version, or with a lower version, ought to be migrated.
  */
-export const REDUX_STATE_VERSION = 35
+export const REDUX_STATE_VERSION = 36
 
 /**
  * Common type for all migration functions.
@@ -82,6 +83,7 @@ const allMigrations: { [targetVersion: string]: Migration } = {
   33: to33,
   34: to34,
   35: to35,
+  36: to36,
 }
 
 /**

background/redux-slices/migrations/to-36.ts

@@ -0,0 +1,82 @@
+import { DomainName, URI } from "../../types"
+
+type OldState = {
+  assets: unknown[]
+  account: {
+    accountsData: {
+      evm: {
+        [chainID: string]: {
+          [address: string]:
+            | "loading"
+            | {
+                ens: {
+                  name?: DomainName
+                  avatarURL?: URI
+                  avatarType?: string
+                }
+                [other: string]: unknown
+              }
+        }
+      }
+    }
+    [sliceKey: string]: unknown
+  }
+  [otherSlice: string]: unknown
+}
+
+type NewState = {
+  assets: unknown[]
+  account: {
+    accountsData: {
+      evm: {
+        [chainID: string]: {
+          [address: string]:
+            | "loading"
+            | {
+                ens: {
+                  name?: DomainName
+                  avatarURL?: URI
+                  avatarType?: string
+                }
+                [other: string]: unknown
+              }
+        }
+      }
+    }
+    [sliceKey: string]: unknown
+  }
+  [otherSlice: string]: unknown
+}
+
+export default (prevState: Record<string, unknown>): NewState => {
+  const typedPrevState = prevState as OldState
+
+  const {
+    account: { accountsData },
+  } = typedPrevState
+
+  Object.keys(accountsData.evm).forEach((chainID) =>
+    Object.keys(accountsData.evm[chainID]).forEach(async (address) => {
+      const account = accountsData.evm[chainID][address]
+
+      if (account !== "loading") {
+        const accountData = account.ens
+        const { avatarURL } = accountData
+
+        if (!avatarURL) {
+          accountData.avatarType = undefined
+        } else {
+          const fileTypeResponse = await fetch(avatarURL, { method: "HEAD" })
+          const avatarType = fileTypeResponse.headers.get("Content-Type")
+
+          accountData.avatarType = avatarType ?? undefined
+        }
+      }
+    }),
+  )
+
+  return {
+    ...typedPrevState,
+    assets: [],
+  }
+}

background/redux-slices/selectors/accountsSelectors.ts

@@ -336,6 +336,7 @@ export type AccountTotal = AddressOnNetwork & {
   accountSigner: AccountSigner
   name?: string
   avatarURL?: string
+  avatarType?: string
   localizedTotalMainCurrencyAmount?: string
 }
 
@@ -458,6 +459,8 @@ function getNetworkAccountTotalsByCategory(
         }
       }
 
+      const { name, avatarURL, avatarType } = accountData.ens
+
       return {
         address,
         network,
@@ -466,8 +469,9 @@ function getNetworkAccountTotalsByCategory(
         signerId,
         path,
         accountSigner,
-        name: accountData.ens.name ?? accountData.defaultName,
-        avatarURL: accountData.ens.avatarURL ?? accountData.defaultAvatar,
+        name: name ?? accountData.defaultName,
+        avatarURL: avatarURL ?? accountData.defaultAvatar,
+        avatarType,
         localizedTotalMainCurrencyAmount: formatCurrencyAmount(
           mainCurrencySymbol,
           getTotalBalance(accountData.balances, prices, mainCurrencySymbol),

ui/components/Shared/SharedAccountItemSummary.tsx

@@ -4,6 +4,23 @@ import { AccountTotal } from "@tallyho/tally-background/redux-slices/selectors"
 
 import { useTranslation } from "react-i18next"
 import SharedLoadingSpinner from "./SharedLoadingSpinner"
+import SharedAvatar from "./SharedAvatar"
+
+type AvatarProps = {
+  avatarURL?: string
+  avatarType?: string
+}
+
+function Avatar({ avatarURL, avatarType }: AvatarProps) {
+  return (
+    <SharedAvatar
+      avatarURL={avatarURL}
+      avatarType={avatarType}
+      width="48px"
+      backupAvatar="./images/avatar@2x.png"
+    />
+  )
+}
 
 interface Props {
   isSelected?: boolean
@@ -20,6 +37,7 @@ export default function SharedAccountItemSummary(props: Props): ReactElement {
     shortenedAddress,
     name,
     avatarURL,
+    avatarType,
     localizedTotalMainCurrencyAmount,
   } = accountTotal
 
@@ -33,10 +51,10 @@ export default function SharedAccountItemSummary(props: Props): ReactElement {
         <div className="left">
           {isSelected ? (
             <div className="avatar_selected_outline">
-              <div className="avatar" />
+              <Avatar avatarURL={avatarURL} avatarType={avatarType} />
             </div>
           ) : (
-            <div className="avatar" />
+            <Avatar avatarURL={avatarURL} avatarType={avatarType} />
           )}
 
           <div className="info">
@@ -91,16 +109,6 @@ export default function SharedAccountItemSummary(props: Props): ReactElement {
           padding: 5px 0;
           overflow: hidden;
         }
-        .avatar {
-          background: url("${avatarURL ?? "./images/avatar@2x.png"}") center
-            no-repeat;
-          background-color: var(--green-40);
-          background-size: cover;
-          width: 48px;
-          height: 48px;
-          border-radius: 12px;
-          flex-shrink: 0;
-        }
         .avatar_selected_outline {
           width: 52px;
           height: 52px;

ui/components/Shared/SharedAddressAvatar.tsx

@@ -1,4 +1,11 @@
 import React, { ReactElement } from "react"
+import SharedAvatar from "./SharedAvatar"
+
+type SharedAddressAvatarProps = {
+  address: string
+  url?: string
+  avatarType?: string
+}
 
 /*
 @TODO Switch to using our own resolution service, especially
@@ -7,25 +14,16 @@ once we upgrade our service to support whatever else Effigy can do.
 export default function SharedAddressAvatar({
   address,
   url,
-}: {
-  address: string
-  url?: string
-}): ReactElement {
+  avatarType,
+}: SharedAddressAvatarProps): ReactElement {
   return (
-    <div className="avatar">
-      <style jsx>{`
-        .avatar {
-          width: 40px;
-          height: 40px;
-          background-color: var(--castle-black);
-          background-image: url("${typeof url !== "undefined"
-            ? url
-            : `https://effigy.im/a/${address}.png`}");
-          background-size: cover;
-          border-radius: 999px;
-          flex-shrink: 0;
-        }
-      `}</style>
-    </div>
+    <SharedAvatar
+      width="40px"
+      background="var(--castle-black)"
+      avatarURL={url}
+      avatarType={avatarType}
+      backupAvatar={`https://effigy.im/a/${address}.png`}
+      borderRadius="999px"
+    />
   )
 }

ui/components/Shared/SharedAvatar.tsx

@@ -0,0 +1,58 @@
+import React, { CSSProperties } from "react"
+
+type SharedAvatarProps = {
+  width: string
+  background?: string
+  borderRadius?: string
+  avatarURL?: string
+  avatarType?: string
+  backupAvatar: string
+  style?: CSSProperties
+}
+
+export default function SharedAvatar({
+  width,
+  background = "var(--green-40)",
+  borderRadius = "12px",
+  avatarURL,
+  avatarType,
+  backupAvatar,
+  style,
+}: SharedAvatarProps) {
+  return (
+    <>
+      {avatarType === "video/mp4" ? (
+        <div className="video" style={style}>
+          <video src={avatarURL} autoPlay muted loop />
+        </div>
+      ) : (
+        <div className="avatar" style={style} />
+      )}
+      <style jsx>{`
+        .avatar {
+          width: ${width};
+          height: ${width};
+          border-radius: ${borderRadius};
+          flex-shrink: 0;
+          background-color: ${background};
+          background: url("${avatarURL ?? backupAvatar}");
+          background-size: cover;
+          background-position: center;
+          background-repeat: no-repeat;
+        }
+        .video {
+          width: ${width};
+          height: ${width};
+          border-radius: ${borderRadius};
+          background-color: ${background};
+          overflow: hidden;
+        }
+        .video > video {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      `}</style>
+    </>
+  )
+}