Add token metadata

packages/ui/package.json

@@ -34,6 +34,7 @@
     "copy-to-clipboard": "^3.3.3",
     "date-fns": "^2.30.0",
     "dateformat": "^5.0.3",
+    "flow-native-token-registry": "^0.1.4",
     "formik": "^2.2.9",
     "mixpanel-browser": "^2.47.0",
     "react-helmet": "^6.1.0",

packages/ui/src/accounts/InternalStorageCard/InternalStorageCard.module.scss

@@ -62,6 +62,12 @@
     margin: $spacing-base;
     row-gap: $spacing-base;
 
+    .titleAndLogo {
+      display: flex;
+      align-items: center;
+      column-gap: $spacing-s;
+    }
+
     .title {
       display: inline-block;
       font-weight: bold;

packages/ui/src/accounts/InternalStorageCard/InternalStorageCard.tsx

@@ -6,6 +6,8 @@ import { JsonView } from "../../common/code/JsonView/JsonView";
 import { StorageDataTypes } from "../StorageDataTypes/StorageDataTypes";
 import { FlowUtils } from "../../utils/flow-utils";
 import { FlowAccountStorage } from "@onflowser/api";
+import { useGetTokenMetadataList } from "../../api";
+import { TokenIcon } from "../../common/icons/TokenIcon/TokenIcon";
 
 type ExtendableStorageCardProps = {
   storageItem: FlowAccountStorage;
@@ -25,8 +27,13 @@ export function InternalStorageCard({
     [classes.gridItemExtended]: isExpanded,
     [classes.introAnimation]: false,
   });
-
+  const { data: tokenMetadataList } = useGetTokenMetadataList();
   const pathIdentifier = storageItem.path.split("/").reverse()[0];
+  const tokenMetadata = tokenMetadataList?.find((token) =>
+    new Set([token.path.balance, token.path.vault, token.path.receiver]).has(
+      storageItem.path,
+    ),
+  );
 
   return (
     <div id={storageItem.id} className={extendClass}>
@@ -39,7 +46,10 @@ export function InternalStorageCard({
         </div>
       </SimpleButton>
       <div className={classes.body}>
-        <div className={classes.title}>{pathIdentifier}</div>
+        <div className={classes.titleAndLogo}>
+          {tokenMetadata && <TokenIcon token={tokenMetadata} />}
+          <div className={classes.title}>{pathIdentifier}</div>
+        </div>
         {isExpanded ? (
           <JsonView
             name="data"

packages/ui/src/accounts/PublicPrivateStorageCard/PublicPrivateStorageCard.module.scss

@@ -37,6 +37,12 @@
       justify-content: end;
     }
 
+    .identifierAndLogo {
+      display: flex;
+      align-items: center;
+      column-gap: $spacing-s;
+    }
+
     .identifier {
       font-size: $font-size-large;
       color: $gray-10;

packages/ui/src/accounts/PublicPrivateStorageCard/PublicPrivateStorageCard.tsx

@@ -6,6 +6,8 @@ import classNames from "classnames";
 import { ProjectLink } from "../../common/links/ProjectLink";
 import { FlowserIcon } from "../../common/icons/FlowserIcon";
 import { FlowAccountStorage } from "@onflowser/api";
+import { useGetTokenMetadataList } from "../../api";
+import { TokenIcon } from "../../common/icons/TokenIcon/TokenIcon";
 
 type StorageCardProps = {
   currentAccountAddress: string;
@@ -22,6 +24,12 @@ export function PublicPrivateStorageCard({
     currentAccountAddress,
     storageItem,
   });
+  const { data: tokenMetadataList } = useGetTokenMetadataList();
+  const tokenMetadata = tokenMetadataList?.find((token) =>
+    new Set([token.path.balance, token.path.vault, token.path.receiver]).has(
+      storageItem.targetPath,
+    ),
+  );
 
   const pathIdentifier = storageItem.path.split("/").reverse()[0];
 
@@ -36,7 +44,10 @@ export function PublicPrivateStorageCard({
         <div className={classes.domainBadgeWrapper}>
           <StorageDomainBadge pathDomain={storageItem.domain} />
         </div>
-        <div className={classes.identifier}>{pathIdentifier}</div>
+        <div className={classes.identifierAndLogo}>
+          {tokenMetadata && <TokenIcon token={tokenMetadata} />}
+          <div className={classes.identifier}>{pathIdentifier}</div>
+        </div>
         <ProjectLink className={classes.link} to={targetStorageCardUrl} replace>
           <FlowserIcon.Link />
           <div className={classes.linkText}>{storageItem.targetPath}</div>

packages/ui/src/api.ts

@@ -18,6 +18,7 @@ import {
 import { useServiceRegistry } from "./contexts/service-registry.context";
 import { InteractionDefinition } from "./interactions/core/core-types";
 import { useEffect } from "react";
+import { TokenListProvider } from "flow-native-token-registry";
 
 export function useGetAccounts(): SWRResponse<FlowAccount[]> {
   const { accountIndex } = useServiceRegistry();
@@ -236,3 +237,10 @@ export function useGetInteractionTemplates(): SWRResponse<
     interactionsService.getTemplates(),
   );
 }
+
+export function useGetTokenMetadataList() {
+  return useSWR("token-list", async () => {
+    const tokenListContainer = await new TokenListProvider().resolve();
+    return tokenListContainer.getList();
+  });
+}

packages/ui/src/common/icons/TokenIcon/TokenIcon.tsx

@@ -0,0 +1,35 @@
+import { TokenInfo } from "flow-native-token-registry";
+import React from "react";
+import { ExternalLink } from "../../links/ExternalLink/ExternalLink";
+
+type TokenIconProps = {
+  token: TokenInfo;
+};
+
+export function TokenIcon(props: TokenIconProps) {
+  const { token } = props;
+  const link =
+    token.extensions?.website ??
+    token.extensions?.github ??
+    token.extensions?.explorer;
+
+  if (link) {
+    return (
+      <ExternalLink href={link} inline>
+        <Icon {...props} />
+      </ExternalLink>
+    );
+  } else {
+    return <Icon {...props} />;
+  }
+}
+
+function Icon(props: TokenIconProps) {
+  return (
+    <img
+      style={{ height: 20, width: 20 }}
+      alt="Token logo"
+      src={props.token.logoURI}
+    />
+  );
+}

packages/ui/src/common/links/ExternalLink/ExternalLink.tsx

@@ -21,7 +21,7 @@ export function ExternalLink({
       rel="noreferrer"
       href={href}
       className={classes.root}
-      style={{ display: inline ? "inline" : "flex", ...style }}
+      style={{ display: "flex", ...style }}
     >
       {!inline && <FlowserIcon.Link className={classes.icon} />}
       {children ?? <span className={classes.url}>{prettifyUrl(href)}</span>}
@@ -30,5 +30,5 @@ export function ExternalLink({
 }
 
 function prettifyUrl(url: string) {
-  return url.replace(/https?:\/\//, "");
+  return url.replace(/https?:\/\//, "").replace(/www\./, "");
 }

packages/ui/src/contracts/ContractDetails/ContractDetails.tsx

@@ -10,7 +10,10 @@ import { CadenceEditor } from "../../common/code/CadenceEditor/CadenceEditor";
 import { DateDisplay } from "../../common/time/DateDisplay/DateDisplay";
 import { ProjectLink } from "../../common/links/ProjectLink";
 import { IdeLink } from "../../common/links/IdeLink";
-import { useGetContract } from "../../api";
+import { useGetContract, useGetTokenMetadataList } from "../../api";
+import { ContractName } from "../ContractName/ContractName";
+import { ExternalLink } from "../../common/links/ExternalLink/ExternalLink";
+import { TokenExtensions } from "flow-native-token-registry";
 
 type ContractDetailsProps = {
   contractId: string;
@@ -21,15 +24,20 @@ export const ContractDetails: FunctionComponent<ContractDetailsProps> = (
 ) => {
   const { contractId } = props;
   const { isLoading, data: contract } = useGetContract(contractId);
+  const { data: tokenMetadataList } = useGetTokenMetadataList();
 
   if (isLoading || !contract) {
     return <FullScreenLoading />;
   }
 
-  const rows: DetailsCardColumn = [
+  const tokenMetadata = tokenMetadataList?.find(
+    (token) => token.contractName === contract.name,
+  );
+
+  const primaryColumn: DetailsCardColumn = [
     {
       label: "Name",
-      value: contract.name,
+      value: <ContractName contract={contract} />,
     },
     {
       label: "Account",
@@ -42,13 +50,13 @@ export const ContractDetails: FunctionComponent<ContractDetailsProps> = (
   ];
 
   if (contract.localConfig) {
-    rows.push({
+    primaryColumn.push({
       label: "Project path",
       value: <span>{contract.localConfig.relativePath}</span>,
     });
   }
 
-  rows.push(
+  primaryColumn.push(
     {
       label: "Updated date",
       value: <DateDisplay date={contract.updatedAt.toISOString()} />,
@@ -59,9 +67,15 @@ export const ContractDetails: FunctionComponent<ContractDetailsProps> = (
     },
   );
 
+  const columns: DetailsCardColumn[] = [primaryColumn];
+
+  if (tokenMetadata?.extensions) {
+    columns.push(buildMetadataUrlsColumn(tokenMetadata.extensions));
+  }
+
   return (
     <div className={classes.root}>
-      <DetailsCard columns={[rows]} />
+      <DetailsCard columns={columns} />
       <SizedBox height={30} />
       <div className={classes.codeWrapper}>
         {contract.localConfig && (
@@ -79,3 +93,58 @@ export const ContractDetails: FunctionComponent<ContractDetailsProps> = (
     </div>
   );
 };
+
+function buildMetadataUrlsColumn(
+  extensions: TokenExtensions,
+): DetailsCardColumn {
+  const metadataColumn: DetailsCardColumn = [];
+
+  if (extensions.website) {
+    metadataColumn.push({
+      label: "Website",
+      value: <ExternalLink href={extensions.website} inline />,
+    });
+  }
+
+  if (extensions.github) {
+    metadataColumn.push({
+      label: "Github",
+      value: <ExternalLink href={extensions.github} inline />,
+    });
+  }
+
+  if (extensions.discord) {
+    metadataColumn.push({
+      label: "Discord",
+      value: <ExternalLink href={extensions.discord} inline />,
+    });
+  }
+
+  if (extensions.twitter) {
+    metadataColumn.push({
+      label: "Twitter",
+      value: <ExternalLink href={extensions.twitter} inline />,
+    });
+  }
+
+  if (extensions.medium) {
+    metadataColumn.push({
+      label: "Medium",
+      value: <ExternalLink href={extensions.medium} inline />,
+    });
+  }
+
+  if (extensions.coingeckoId) {
+    metadataColumn.push({
+      label: "CoinGecko",
+      value: (
+        <ExternalLink
+          href={`https://www.coingecko.com/en/coins/${extensions.coingeckoId}`}
+          inline
+        />
+      ),
+    });
+  }
+
+  return metadataColumn;
+}

packages/ui/src/contracts/ContractName/ContractName.module.scss

@@ -0,0 +1,7 @@
+@import "../../styles/spacings";
+
+.root {
+  display: flex;
+  align-items: center;
+  column-gap: $spacing-s;
+}

packages/ui/src/contracts/ContractName/ContractName.tsx

@@ -0,0 +1,23 @@
+import { FlowContract } from "@onflowser/api";
+import classes from "./ContractName.module.scss";
+import { useGetTokenMetadataList } from "../../api";
+import { TokenIcon } from "../../common/icons/TokenIcon/TokenIcon";
+
+type ContractNameProps = {
+  contract: FlowContract;
+};
+
+export function ContractName(props: ContractNameProps) {
+  const { contract } = props;
+  const { data: tokenMetadataList } = useGetTokenMetadataList();
+  const tokenMetadata = tokenMetadataList?.find(
+    (token) => token.contractName === contract.name,
+  );
+
+  return (
+    <div className={classes.root}>
+      <span>{contract.name}</span>
+      {tokenMetadata && <TokenIcon token={tokenMetadata} />}
+    </div>
+  );
+}

packages/ui/src/contracts/ContractsTable/ContractsTable.tsx

@@ -10,6 +10,7 @@ import { BaseBadge } from "../../common/misc/BaseBadge/BaseBadge";
 import classes from "./ContractsTable.module.scss";
 import { TimeAgo } from "../../common/time/TimeAgo/TimeAgo";
 import { FlowContract } from "@onflowser/api";
+import { ContractName } from "../ContractName/ContractName";
 
 const columnHelper = createColumnHelper<FlowContract>();
 
@@ -19,7 +20,7 @@ const columns = [
     cell: (info) => (
       <Value>
         <ProjectLink to={`/contracts/${info.row.original.id}`}>
-          {info.row.original.name}
+          <ContractName contract={info.row.original} />
         </ProjectLink>
       </Value>
     ),