improve action button, add real data

lib/address/parseMetaPayload.ts

 import type { AddressMetadataTag } from 'types/api/addressMetadata';
 import type { AddressMetadataTagFormatted } from 'types/client/addressMetadata';
 
+type MetaParsed = NonNullable<AddressMetadataTagFormatted['meta']>;
+
 export default function parseMetaPayload(meta: AddressMetadataTag['meta']): AddressMetadataTagFormatted['meta'] {
   try {
     const parsedMeta = JSON.parse(meta || '');
@@ -11,16 +13,23 @@ export default function parseMetaPayload(meta: AddressMetadataTag['meta']): Addr
 
     const result: AddressMetadataTagFormatted['meta'] = {};
 
-    if ('textColor' in parsedMeta && typeof parsedMeta.textColor === 'string') {
-      result.textColor = parsedMeta.textColor;
-    }
-
-    if ('bgColor' in parsedMeta && typeof parsedMeta.bgColor === 'string') {
-      result.bgColor = parsedMeta.bgColor;
-    }
+    const stringFields: Array<keyof MetaParsed> = [
+      'textColor',
+      'bgColor',
+      'actionURL',
+      'appID',
+      'logoURL',
+      'text',
+      'tooltipIcon',
+      'tooltipTitle',
+      'tooltipDescription',
+      'tooltipUrl',
+    ];
 
-    if ('actionURL' in parsedMeta && typeof parsedMeta.actionURL === 'string') {
-      result.actionURL = parsedMeta.actionURL;
+    for (const stringField of stringFields) {
+      if (stringField in parsedMeta && typeof parsedMeta[stringField as keyof typeof parsedMeta] === 'string') {
+        result[stringField] = parsedMeta[stringField as keyof typeof parsedMeta];
+      }
     }
 
     return result;

types/client/addressMetadata.ts

@@ -16,5 +16,12 @@ export interface AddressMetadataTagFormatted {
     textColor?: string;
     bgColor?: string;
     actionURL?: string;
+    appID?: string;
+    logoURL?: string;
+    text?: string;
+    tooltipIcon?: string;
+    tooltipTitle?: string;
+    tooltipDescription?: string;
+    tooltipUrl?: string;
   } | null;
 }

ui/shared/ActionButton.tsx → ui/shared/ActionButton/ActionButton.tsx

-import { Button, Image, Text, useColorModeValue } from '@chakra-ui/react';
+import { Button, Image, Text, useColorModeValue, chakra } from '@chakra-ui/react';
 import React from 'react';
 
+import type { AddressMetadataTagFormatted } from 'types/client/addressMetadata';
+
 import { route } from 'nextjs-routes';
 
-import LinkExternal from './LinkExternal';
+import config from 'configs/app';
+
+import LinkExternal from '../LinkExternal';
 
 type Props = {
-  data?: {
-    appId?: string;
-    actionUrl: string;
-    textColor: string;
-    bgColor: string;
-    text: string;
-    logoUrl: string;
-  };
+  data?: AddressMetadataTagFormatted['meta'];
+  className?: string;
+  txHash?: string;
 }
 
-const mockData = {
-  appId: 'uniswap',
-  actionUrl: 'https://app.uniswap.org/swap?inputCurrency=ETH&outputCurrency=0x6B175474E89094C44Da98b954EedeAC495271d0F',
-  textColor: '#E2E8F0',
-  bgColor: '#9747FF',
-  text: 'Mint NFT',
-  logoUrl: 'https://i.ibb.co/PGZ0y9r/tg-image-883021928.jpg',
-};
-
-const ActionButton = ({ data = mockData }: Props) => {
-  const { appId, actionUrl, textColor, bgColor, text, logoUrl } = data;
-
+const ActionButton = ({ data, className, txHash }: Props) => {
   const defaultTextColor = useColorModeValue('blue.600', 'blue.300');
   const defaultBg = useColorModeValue('gray.100', 'gray.700');
 
+  if (!data) {
+    return null;
+  }
+
+  const { appID, textColor, bgColor, text, logoURL } = data;
+
+  const actionURL = data.actionURL?.replace('{chainId}', config.chain.id || '').replace('{txHash}', txHash || '');
+
   const content = (
     <>
       <Image
-        src={ logoUrl }
+        src={ logoURL }
         alt={ `${ text } button` }
         boxSize={ 5 }
         borderRadius="sm"
@@ -46,10 +42,11 @@ const ActionButton = ({ data = mockData }: Props) => {
     </>
   );
 
-  return appId ? (
+  return appID ? (
     <Button
+      className={ className }
       as="a"
-      href={ route({ pathname: '/apps/[id]', query: { id: appId, action: 'connect', url: actionUrl } }) }
+      href={ route({ pathname: '/apps/[id]', query: { id: appID, action: 'connect', ...(actionURL ? { url: actionURL } : {}) } }) }
       display="flex"
       size="sm"
       px={ 2 }
@@ -62,7 +59,8 @@ const ActionButton = ({ data = mockData }: Props) => {
     </Button>
   ) : (
     <LinkExternal
-      href={ actionUrl }
+      className={ className }
+      href={ actionURL }
       variant="subtle"
       display="flex"
       px={ 2 }
@@ -76,4 +74,4 @@ const ActionButton = ({ data = mockData }: Props) => {
   );
 };
 
-export default ActionButton;
+export default chakra(ActionButton);

ui/shared/ActionButton/useActionData.tsx

+import useAddressMetadataInfoQuery from 'lib/address/useAddressMetadataInfoQuery';
+
+export default function useActionData(address: string | undefined = '') {
+  const { data } = useAddressMetadataInfoQuery([ address ]);
+  const metadata = data?.addresses[address?.toLowerCase()];
+  const tag = metadata?.tags?.find(({ tagType }) => tagType === 'protocol');
+  if (tag?.meta?.actionURL || tag?.meta?.appID) {
+    return tag.meta;
+  }
+  return null;
+}