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/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>
+    </>
+  )
+}

ui/components/Shared/SharedCurrentAccountInformation.tsx

@@ -2,11 +2,13 @@ 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
   name: string | undefined
   avatarURL: string | undefined
+  avatarType: string | undefined
   showHoverStyle: boolean
   showLockStatus?: boolean
 }
@@ -15,6 +17,7 @@ export default function SharedCurrentAccountInformation({
   shortenedAddress,
   name,
   avatarURL,
+  avatarType,
   showHoverStyle,
   showLockStatus,
 }: Props): ReactElement {
@@ -25,7 +28,13 @@ export default function SharedCurrentAccountInformation({
       <span className="account_info_label ellipsis">
         {name ?? shortenedAddress}
       </span>
-      <div className="avatar" />
+      <SharedAvatar
+        avatarURL={avatarURL}
+        avatarType={avatarType}
+        backupAvatar="./images/portrait.png"
+        width="32px"
+        style={{ marginLeft: 8 }}
+      />
       {showLockStatus && (
         <div data-testid="lock" className="lock_icon_wrap">
           <SharedIcon
@@ -45,16 +54,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);
           }

ui/components/Shared/__tests__/SharedCurrentAccountInformation.test.tsx

@@ -16,6 +16,7 @@ describe("SharedCurrentAccountInformation", () => {
         name={name}
         shortenedAddress=""
         avatarURL={undefined}
+        avatarType={undefined}
       />,
     )
 
@@ -28,6 +29,7 @@ describe("SharedCurrentAccountInformation", () => {
         name={undefined}
         shortenedAddress={shortenedAddress}
         avatarURL={undefined}
+        avatarType={undefined}
       />,
     )
 
@@ -40,6 +42,7 @@ describe("SharedCurrentAccountInformation", () => {
         name={name}
         shortenedAddress=""
         avatarURL={undefined}
+        avatarType={undefined}
         showLockStatus={false}
       />,
     )
@@ -54,6 +57,7 @@ describe("SharedCurrentAccountInformation", () => {
         name={name}
         shortenedAddress=""
         avatarURL={undefined}
+        avatarType={undefined}
         showLockStatus
       />,
     )
@@ -70,6 +74,7 @@ describe("SharedCurrentAccountInformation", () => {
         name={name}
         shortenedAddress=""
         avatarURL={undefined}
+        avatarType={undefined}
         showLockStatus
       />,
       {

ui/components/Signing/SigningNetworkAccountInfoTopBar.tsx

@@ -12,7 +12,8 @@ export default function SigningNetworkAccountInfoTopBar({
   accountTotal,
 }: Props): ReactElement {
   const { t } = useTranslation()
-  const { network, shortenedAddress, name, avatarURL } = accountTotal
+  const { network, shortenedAddress, name, avatarURL, avatarType } =
+    accountTotal
 
   return (
     <div className="top_bar_wrap standard_width">
@@ -29,6 +30,7 @@ export default function SigningNetworkAccountInfoTopBar({
           shortenedAddress={shortenedAddress}
           name={name}
           avatarURL={avatarURL}
+          avatarType={avatarType}
         />
       </div>
       <style jsx>

ui/components/TopMenu/TopMenuProfileButton.tsx

@@ -18,7 +18,7 @@ export default function TopMenuProfileButton(props: {
 }): ReactElement {
   const { t } = useTranslation()
   const dispatch = useDispatch()
-  const { name, avatarURL, address, accountType } =
+  const { name, avatarURL, avatarType, address, accountType } =
     useBackgroundSelector(selectCurrentAccountTotal) ?? {}
 
   const { truncatedAddress } = useBackgroundSelector(selectCurrentAccount) ?? {}
@@ -68,6 +68,7 @@ export default function TopMenuProfileButton(props: {
             shortenedAddress={truncatedAddress}
             name={name}
             avatarURL={avatarURL}
+            avatarType={avatarType}
             showHoverStyle
             showLockStatus={accountType && isAccountWithSecrets(accountType)}
           />