Support video avatars

background/main.ts

@@ -1059,11 +1059,15 @@ export default class Main extends BaseService<never> {
         this.store.dispatch(updateAccountName({ ...addressOnNetwork, name }))
       },
     )
+
     this.nameService.emitter.on(
       "resolvedAvatar",
       async ({ from: { addressOnNetwork }, resolved: { avatar } }) => {
         this.store.dispatch(
-          updateENSAvatar({ ...addressOnNetwork, avatar: avatar.toString() }),
+          updateENSAvatar({
+            ...addressOnNetwork,
+            avatar: avatar.toString(),
+          }),
         )
       },
     )

background/redux-slices/accounts.ts

@@ -387,7 +387,9 @@ const accountSlice = createSlice({
       immerState,
       {
         payload: { address, network, avatar },
-      }: { payload: AddressOnNetwork & { avatar: URI } },
+      }: {
+        payload: AddressOnNetwork & { avatar: URI }
+      },
     ) => {
       const normalizedAddress = normalizeEVMAddress(address)
 

background/redux-slices/selectors/accountsSelectors.ts

@@ -458,6 +458,8 @@ function getNetworkAccountTotalsByCategory(
         }
       }
 
+      const { name, avatarURL } = accountData.ens
+
       return {
         address,
         network,
@@ -466,8 +468,8 @@ 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,
         localizedTotalMainCurrencyAmount: formatCurrencyAmount(
           mainCurrencySymbol,
           getTotalBalance(accountData.balances, prices, mainCurrencySymbol),

ui/components/Shared/SharedAccountItemSummary.tsx

@@ -4,6 +4,17 @@ import { AccountTotal } from "@tallyho/tally-background/redux-slices/selectors"
 
 import { useTranslation } from "react-i18next"
 import SharedLoadingSpinner from "./SharedLoadingSpinner"
+import SharedAvatar from "./SharedAvatar"
+
+function Avatar({ avatarURL }: { avatarURL?: string }) {
+  return (
+    <SharedAvatar
+      avatarURL={avatarURL}
+      width="48px"
+      backupAvatar="./images/avatar@2x.png"
+    />
+  )
+}
 
 interface Props {
   isSelected?: boolean
@@ -33,10 +44,10 @@ export default function SharedAccountItemSummary(props: Props): ReactElement {
         <div className="left">
           {isSelected ? (
             <div className="avatar_selected_outline">
-              <div className="avatar" />
+              <Avatar avatarURL={avatarURL} />
             </div>
           ) : (
-            <div className="avatar" />
+            <Avatar avatarURL={avatarURL} />
           )}
 
           <div className="info">
@@ -91,16 +102,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,10 @@
 import React, { ReactElement } from "react"
+import SharedAvatar from "./SharedAvatar"
+
+type SharedAddressAvatarProps = {
+  address: string
+  url?: string
+}
 
 /*
 @TODO Switch to using our own resolution service, especially
@@ -7,25 +13,14 @@ once we upgrade our service to support whatever else Effigy can do.
 export default function SharedAddressAvatar({
   address,
   url,
-}: {
-  address: string
-  url?: string
-}): ReactElement {
+}: 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}
+      backupAvatar={`https://effigy.im/a/${address}.png`}
+      borderRadius="999px"
+    />
   )
 }

ui/components/Shared/SharedAvatar.tsx

@@ -0,0 +1,87 @@
+import React, { CSSProperties, useEffect, useState } from "react"
+
+type SharedAvatarProps = {
+  width: string
+  background?: string
+  borderRadius?: string
+  avatarURL?: string
+  backupAvatar: string
+  style?: CSSProperties
+}
+
+async function getAvatarType(url?: string) {
+  if (!url) return null
+
+  try {
+    const fileTypeFetch = await fetch(url, { method: "HEAD" })
+    const fileType = fileTypeFetch.headers.get("Content-Type")
+
+    return fileType
+  } catch {
+    return null
+  }
+}
+
+export default function SharedAvatar({
+  width,
+  background = "var(--green-40)",
+  borderRadius = "12px",
+  avatarURL,
+  backupAvatar,
+  style,
+}: SharedAvatarProps) {
+  const [avatarType, setAvatarType] = useState<string | null>(null)
+
+  useEffect(() => {
+    const fetchAvatarType = async () => {
+      const type = await getAvatarType(avatarURL)
+      setAvatarType(type)
+    }
+
+    fetchAvatarType()
+  }, [avatarURL])
+
+  return (
+    <>
+      <div className="avatar_container" style={style}>
+        {avatarType === "video/mp4" ? (
+          <div className="video">
+            <video src={avatarURL} autoPlay muted loop />
+          </div>
+        ) : (
+          <div className="avatar" />
+        )}
+      </div>
+      <style jsx>{`
+        .avatar_container {
+          width: ${width};
+          height: ${width};
+          border-radius: ${borderRadius};
+          background-color: ${background};
+          flex-shrink: 0;
+        }
+        .avatar {
+          width: 100%;
+          height: 100%;
+          border-radius: ${borderRadius};
+          flex-shrink: 0;
+          background: url("${avatarURL ?? backupAvatar}");
+          background-size: cover;
+          background-position: center;
+          background-repeat: no-repeat;
+        }
+        .video {
+          width: 100%;
+          height: 100%;
+          border-radius: ${borderRadius};
+          overflow: hidden;
+        }
+        .video > video {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      `}</style>
+    </>
+  )
+}

ui/components/Shared/SharedCurrentAccountInformation.tsx

@@ -2,6 +2,7 @@ import React, { ReactElement } from "react"
 import classNames from "classnames"
 import SharedIcon from "./SharedIcon"
 import { useAreInternalSignersUnlocked } from "../../hooks/signing-hooks"
+import SharedAvatar from "./SharedAvatar"
 
 type Props = {
   shortenedAddress: string
@@ -25,7 +26,12 @@ export default function SharedCurrentAccountInformation({
       <span className="account_info_label ellipsis">
         {name ?? shortenedAddress}
       </span>
-      <div className="avatar" />
+      <SharedAvatar
+        avatarURL={avatarURL}
+        backupAvatar="./images/portrait.png"
+        width="32px"
+        style={{ marginLeft: 8 }}
+      />
       {showLockStatus && (
         <div data-testid="lock" className="lock_icon_wrap">
           <SharedIcon
@@ -45,16 +51,6 @@ export default function SharedCurrentAccountInformation({
             position: relative;
             min-width: 0; // Allow the account address/name to collapse to an ellipsis.
           }
-          .avatar {
-            border-radius: 12px;
-            width: 32px;
-            height: 32px;
-            margin-left: 8px;
-            background: url("${avatarURL ?? "./images/portrait.png"}");
-            background-color: var(--green-40);
-            background-size: cover;
-            flex-shrink: 0;
-          }
           .hover:hover .account_info_label {
             color: var(--trophy-gold);
           }