[account] Add ability to use aptid.xyz profiles for explorer images

src/api/hooks/useGetProfile.ts

@@ -0,0 +1,25 @@
+import {useQuery} from "@tanstack/react-query";
+import {ResponseError} from "../client";
+import {useGlobalState} from "../../global-config/GlobalConfig";
+
+export function useGetProfile(
+  address: string,
+  options?: {retry?: number | boolean},
+) {
+  const [state] = useGlobalState();
+
+  const result = useQuery<
+    {name?: string; bio?: string; avatar_url?: string},
+    ResponseError
+  >({
+    queryKey: ["account", {address}, state.network_value],
+    queryFn: () => {
+      return fetch("https://aptid.xyz/api/profile/bio?address=" + address).then(
+        (res) => res.json(),
+      );
+    },
+    retry: options?.retry ?? false,
+  });
+
+  return result;
+}

src/components/IdenticonImg.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import {createIcon} from "@download/blockies";
+import {useGetProfile} from "../api/hooks/useGetProfile";
 
 interface IdenticonImgProps {
   address: string;
@@ -8,6 +9,19 @@ interface IdenticonImgProps {
 const IdenticonImg: React.FunctionComponent<IdenticonImgProps> = ({
   address,
 }) => {
+  const {data: profile} = useGetProfile(address);
+  if (profile?.avatar_url) {
+    return (
+      <img
+        src={profile.avatar_url}
+        width={30}
+        height={30}
+        alt="Profile Avatar"
+        style={{borderRadius: 2}}
+      />
+    );
+  }
+
   const iconCanvas = createIcon({
     seed: address,
     size: 6,