diff --git a/lib/address/parseMetaPayload.ts b/lib/address/parseMetaPayload.ts index 07321027eb..e8b067b148 100644 --- a/lib/address/parseMetaPayload.ts +++ b/lib/address/parseMetaPayload.ts @@ -16,6 +16,7 @@ export default function parseMetaPayload(meta: AddressMetadataTag['meta']): Addr const stringFields: Array = [ 'textColor', 'bgColor', + 'tagIcon', 'tagUrl', 'tooltipIcon', 'tooltipTitle', @@ -25,6 +26,7 @@ export default function parseMetaPayload(meta: AddressMetadataTag['meta']): Addr 'appMarketplaceURL', 'appLogoURL', 'appActionButtonText', + 'warpcastHandle', ]; for (const stringField of stringFields) { diff --git a/mocks/metadata/address.ts b/mocks/metadata/address.ts index 9ab9a9a744..f708fcb319 100644 --- a/mocks/metadata/address.ts +++ b/mocks/metadata/address.ts @@ -76,3 +76,17 @@ export const protocolTagWithMeta: AddressMetadataTagApi = { bgColor: '#FF007A', }, }; + +export const warpcastTag: AddressMetadataTagApi = { + slug: 'warpcast-account', + name: 'Farcaster', + tagType: 'protocol', + ordinal: 0, + meta: { + bgColor: '#8465CB', + tagIcon: 'data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2032%2029%22%3E%3Cpath%20d%3D%22M%205.507%200.072%20L%2026.097%200.072%20L%2026.097%204.167%20L%2031.952%204.167%20L%2030.725%208.263%20L%2029.686%208.263%20L%2029.686%2024.833%20C%2030.207%2024.833%2030.63%2025.249%2030.63%2025.763%20L%2030.63%2026.88%20L%2030.819%2026.88%20C%2031.341%2026.88%2031.764%2027.297%2031.764%2027.811%20L%2031.764%2028.928%20L%2021.185%2028.928%20L%2021.185%2027.811%20C%2021.185%2027.297%2021.608%2026.88%2022.13%2026.88%20L%2022.319%2026.88%20L%2022.319%2025.763%20C%2022.319%2025.316%2022.639%2024.943%2023.065%2024.853%20L%2023.045%2015.71%20C%2022.711%2012.057%2019.596%209.194%2015.802%209.194%20C%2012.008%209.194%208.893%2012.057%208.559%2015.71%20L%208.539%2024.845%20C%209.043%2024.919%209.663%2025.302%209.663%2025.763%20L%209.663%2026.88%20L%209.852%2026.88%20C%2010.373%2026.88%2010.796%2027.297%2010.796%2027.811%20L%2010.796%2028.928%20L%200.218%2028.928%20L%200.218%2027.811%20C%200.218%2027.297%200.641%2026.88%201.162%2026.88%20L%201.351%2026.88%20L%201.351%2025.763%20C%201.351%2025.249%201.774%2024.833%202.296%2024.833%20L%202.296%208.263%20L%201.257%208.263%20L%200.029%204.167%20L%205.507%204.167%20L%205.507%200.072%20Z%22%20fill%3D%22rgb(255%2C%20255%2C%20255)%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M%2026.097%200.072%20L%2026.166%200.072%20L%2026.166%200.004%20L%2026.097%200.004%20Z%20M%205.507%200.072%20L%205.507%200.004%20L%205.438%200.004%20L%205.438%200.072%20Z%20M%2026.097%204.167%20L%2026.028%204.167%20L%2026.028%204.235%20L%2026.097%204.235%20Z%20M%2031.952%204.167%20L%2032.019%204.187%20L%2032.045%204.099%20L%2031.952%204.099%20L%2031.952%204.167%20Z%20M%2030.725%208.263%20L%2030.725%208.331%20L%2030.776%208.331%20L%2030.791%208.282%20Z%20M%2029.686%208.263%20L%2029.686%208.195%20L%2029.617%208.195%20L%2029.617%208.263%20Z%20M%2029.686%2024.833%20L%2029.617%2024.833%20L%2029.617%2024.901%20L%2029.686%2024.901%20Z%20M%2030.63%2026.88%20L%2030.561%2026.88%20L%2030.561%2026.948%20L%2030.63%2026.948%20Z%20M%2031.764%2028.928%20L%2031.764%2028.996%20L%2031.832%2028.996%20L%2031.832%2028.928%20Z%20M%2021.185%2028.928%20L%2021.116%2028.928%20L%2021.116%2028.996%20L%2021.185%2028.996%20Z%20M%2022.319%2026.88%20L%2022.319%2026.948%20L%2022.388%2026.948%20L%2022.388%2026.88%20Z%20M%2023.065%2024.853%20L%2023.08%2024.919%20L%2023.134%2024.908%20L%2023.134%2024.853%20Z%20M%2023.045%2015.71%20L%2023.114%2015.71%20L%2023.114%2015.707%20L%2023.113%2015.704%20Z%20M%208.559%2015.71%20L%208.49%2015.704%20L%208.49%2015.707%20L%208.49%2015.71%20Z%20M%208.539%2024.845%20L%208.47%2024.845%20L%208.469%2024.904%20L%208.528%2024.913%20Z%20M%209.663%2026.88%20L%209.594%2026.88%20L%209.594%2026.948%20L%209.663%2026.948%20Z%20M%2010.796%2028.928%20L%2010.796%2028.996%20L%2010.865%2028.996%20L%2010.865%2028.928%20Z%20M%200.218%2028.928%20L%200.149%2028.928%20L%200.149%2028.996%20L%200.218%2028.996%20Z%20M%201.351%2026.88%20L%201.351%2026.948%20L%201.42%2026.948%20L%201.42%2026.88%20Z%20M%202.296%2024.833%20L%202.296%2024.901%20L%202.365%2024.901%20L%202.365%2024.833%20Z%20M%202.296%208.263%20L%202.365%208.263%20L%202.365%208.195%20L%202.296%208.195%20Z%20M%201.257%208.263%20L%201.191%208.282%20L%201.205%208.331%20L%201.257%208.331%20Z%20M%200.029%204.167%20L%200.029%204.1%20L%20-0.063%204.1%20L%20-0.037%204.187%20L%200.029%204.167%20Z%20M%205.507%204.167%20L%205.507%204.235%20L%205.576%204.235%20L%205.576%204.167%20Z%20M%2026.097%200.004%20L%205.507%200.004%20L%205.507%200.139%20L%2026.097%200.139%20Z%20M%2026.166%204.167%20L%2026.166%200.072%20L%2026.028%200.072%20L%2026.028%204.167%20L%2026.166%204.167%20Z%20M%2031.952%204.099%20L%2026.097%204.099%20L%2026.097%204.235%20L%2031.952%204.235%20Z%20M%2030.791%208.282%20L%2032.019%204.187%20L%2031.886%204.148%20L%2030.658%208.244%20Z%20M%2029.686%208.331%20L%2030.725%208.331%20L%2030.725%208.195%20L%2029.686%208.195%20Z%20M%2029.755%2024.833%20L%2029.755%208.263%20L%2029.617%208.263%20L%2029.617%2024.833%20Z%20M%2030.699%2025.763%20C%2030.699%2025.212%2030.245%2024.765%2029.686%2024.765%20L%2029.686%2024.9%20C%2030.169%2024.9%2030.561%2025.287%2030.561%2025.763%20Z%20M%2030.699%2026.88%20L%2030.699%2025.763%20L%2030.561%2025.763%20L%2030.561%2026.88%20Z%20M%2030.819%2026.813%20L%2030.63%2026.813%20L%2030.63%2026.948%20L%2030.819%2026.948%20Z%20M%2031.832%2027.811%20C%2031.832%2027.26%2031.379%2026.813%2030.819%2026.813%20L%2030.819%2026.948%20C%2031.303%2026.948%2031.695%2027.335%2031.695%2027.811%20Z%20M%2031.832%2028.928%20L%2031.832%2027.811%20L%2031.695%2027.811%20L%2031.695%2028.928%20Z%20M%2026.097%2028.996%20L%2031.764%2028.996%20L%2031.764%2028.86%20L%2026.097%2028.86%20Z%20M%2023.074%2028.996%20L%2026.097%2028.996%20L%2026.097%2028.86%20L%2023.074%2028.86%20Z%20M%2021.185%2028.996%20L%2023.074%2028.996%20L%2023.074%2028.86%20L%2021.185%2028.86%20Z%20M%2021.116%2027.811%20L%2021.116%2028.928%20L%2021.254%2028.928%20L%2021.254%2027.811%20Z%20M%2022.13%2026.813%20C%2021.57%2026.813%2021.116%2027.26%2021.116%2027.811%20L%2021.254%2027.811%20C%2021.254%2027.335%2021.646%2026.948%2022.13%2026.948%20Z%20M%2022.319%2026.813%20L%2022.13%2026.813%20L%2022.13%2026.948%20L%2022.319%2026.948%20Z%20M%2022.25%2025.763%20L%2022.25%2026.88%20L%2022.388%2026.88%20L%2022.388%2025.763%20Z%20M%2023.051%2024.787%20C%2022.593%2024.883%2022.25%2025.284%2022.25%2025.763%20L%2022.388%2025.763%20C%2022.388%2025.349%2022.684%2025.003%2023.08%2024.919%20Z%20M%2022.976%2015.71%20L%2022.996%2024.853%20L%2023.134%2024.853%20L%2023.114%2015.71%20Z%20M%2015.802%209.262%20C%2019.559%209.262%2022.645%2012.098%2022.976%2015.716%20L%2023.113%2015.704%20C%2022.776%2012.016%2019.632%209.126%2015.802%209.126%20Z%20M%208.628%2015.716%20C%208.959%2012.098%2012.044%209.262%2015.802%209.262%20L%2015.802%209.126%20C%2011.972%209.126%208.828%2012.016%208.49%2015.704%20Z%20M%208.608%2024.845%20L%208.628%2015.71%20L%208.49%2015.71%20L%208.47%2024.845%20Z%20M%209.732%2025.763%20C%209.732%2025.502%209.557%2025.273%209.331%2025.105%20C%209.104%2024.935%208.812%2024.817%208.549%2024.778%20L%208.528%2024.912%20C%208.769%2024.948%209.039%2025.057%209.248%2025.213%20C%209.459%2025.37%209.594%2025.563%209.594%2025.763%20Z%20M%209.732%2026.88%20L%209.732%2025.763%20L%209.594%2025.763%20L%209.594%2026.88%20Z%20M%209.852%2026.813%20L%209.663%2026.813%20L%209.663%2026.948%20L%209.852%2026.948%20Z%20M%2010.865%2027.811%20C%2010.865%2027.26%2010.411%2026.813%209.852%2026.813%20L%209.852%2026.948%20C%2010.335%2026.948%2010.727%2027.335%2010.727%2027.811%20Z%20M%2010.865%2028.928%20L%2010.865%2027.811%20L%2010.727%2027.811%20L%2010.727%2028.928%20Z%20M%208.529%2028.996%20L%2010.796%2028.996%20L%2010.796%2028.86%20L%208.529%2028.86%20Z%20M%208.372%2028.996%20L%208.529%2028.996%20L%208.529%2028.86%20L%208.372%2028.86%20Z%20M%205.507%2028.996%20L%208.372%2028.996%20L%208.372%2028.86%20L%205.507%2028.86%20Z%20M%200.218%2028.996%20L%205.507%2028.996%20L%205.507%2028.86%20L%200.218%2028.86%20Z%20M%200.149%2027.811%20L%200.149%2028.928%20L%200.287%2028.928%20L%200.287%2027.811%20Z%20M%201.162%2026.813%20C%200.603%2026.813%200.149%2027.26%200.149%2027.811%20L%200.287%2027.811%20C%200.287%2027.335%200.679%2026.948%201.162%2026.948%20Z%20M%201.351%2026.813%20L%201.162%2026.813%20L%201.162%2026.948%20L%201.351%2026.948%20Z%20M%201.282%2025.763%20L%201.282%2026.88%20L%201.42%2026.88%20L%201.42%2025.763%20Z%20M%202.296%2024.765%20C%201.736%2024.765%201.282%2025.212%201.282%2025.763%20L%201.42%2025.763%20C%201.42%2025.287%201.812%2024.9%202.296%2024.9%20Z%20M%202.227%208.263%20L%202.227%2024.833%20L%202.365%2024.833%20L%202.365%208.263%20Z%20M%201.257%208.331%20L%202.296%208.331%20L%202.296%208.195%20L%201.257%208.195%20Z%20M%20-0.037%204.187%20L%201.191%208.282%20L%201.323%208.244%20L%200.095%204.148%20Z%20M%205.507%204.099%20L%200.029%204.099%20L%200.029%204.235%20L%205.507%204.235%20L%205.507%204.099%20Z%20M%205.438%200.072%20L%205.438%204.167%20L%205.576%204.167%20L%205.576%200.072%20Z%22%20fill%3D%22rgb(255%2C255%2C255)%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E', tagUrl: 'https://warpcast.com/mbj357', + textColor: '#FFFFFF', + tooltipDescription: 'This address is linked to a Farcaster account', + warpcastHandle: 'duckYduck', + }, +}; diff --git a/types/api/addressMetadata.ts b/types/api/addressMetadata.ts index f7cbe869bd..b956c21216 100644 --- a/types/api/addressMetadata.ts +++ b/types/api/addressMetadata.ts @@ -21,6 +21,7 @@ export interface AddressMetadataTagApi extends Omit meta: { textColor?: string; bgColor?: string; + tagIcon?: string; tagUrl?: string; tooltipIcon?: string; tooltipTitle?: string; @@ -30,5 +31,6 @@ export interface AddressMetadataTagApi extends Omit appMarketplaceURL?: string; appLogoURL?: string; appActionButtonText?: string; + warpcastHandle?: string; } | null; } diff --git a/ui/shared/EntityTags/EntityTag.pw.tsx b/ui/shared/EntityTags/EntityTag.pw.tsx index 299c48cf31..538f255441 100644 --- a/ui/shared/EntityTags/EntityTag.pw.tsx +++ b/ui/shared/EntityTags/EntityTag.pw.tsx @@ -13,6 +13,11 @@ test('custom name tag +@dark-mode', async({ render }) => { await expect(component).toHaveScreenshot(); }); +test('warpcast tag', async({ render }) => { + const component = await render(); + await expect(component).toHaveScreenshot(); +}); + test('generic tag +@dark-mode', async({ render }) => { const component = await render(); await expect(component).toHaveScreenshot(); diff --git a/ui/shared/EntityTags/EntityTag.tsx b/ui/shared/EntityTags/EntityTag.tsx index 5a83b3d4b4..95501b2b7b 100644 --- a/ui/shared/EntityTags/EntityTag.tsx +++ b/ui/shared/EntityTags/EntityTag.tsx @@ -1,4 +1,4 @@ -import { chakra, Skeleton, Tag } from '@chakra-ui/react'; +import { chakra, Image, Skeleton, Tag } from '@chakra-ui/react'; import React from 'react'; import type { EntityTag as TEntityTag } from './types'; @@ -8,6 +8,7 @@ import TruncatedValue from 'ui/shared/TruncatedValue'; import EntityTagLink from './EntityTagLink'; import EntityTagPopover from './EntityTagPopover'; +import { getTagLinkParams } from './utils'; interface Props { data: TEntityTag; @@ -21,11 +22,33 @@ const EntityTag = ({ data, isLoading, truncate }: Props) => { return ; } - // const hasLink = Boolean(data.meta?.tagUrl || data.tagType === 'generic' || data.tagType === 'protocol'); - // Change the condition when "Tag search" page is ready - issue #1869 - const hasLink = Boolean(data.meta?.tagUrl); + const hasLink = Boolean(getTagLinkParams(data)); const iconColor = data.meta?.textColor ?? 'gray.400'; + const name = (() => { + if (data.meta?.warpcastHandle) { + return `@${ data.meta.warpcastHandle }`; + } + + return data.name; + })(); + + const icon = (() => { + if (data.meta?.tagIcon) { + return {; + } + + if (data.tagType === 'name') { + return ; + } + + if (data.tagType === 'protocol' || data.tagType === 'generic') { + return # ; + } + + return null; + })(); + return ( { _hover={ hasLink ? { opacity: 0.76 } : undefined } > - { data.tagType === 'name' && } - { (data.tagType === 'protocol' || data.tagType === 'generic') && # } - + { icon } + diff --git a/ui/shared/EntityTags/EntityTagLink.tsx b/ui/shared/EntityTags/EntityTagLink.tsx index 00f6b23115..423032f311 100644 --- a/ui/shared/EntityTags/EntityTagLink.tsx +++ b/ui/shared/EntityTags/EntityTagLink.tsx @@ -5,9 +5,9 @@ import type { EntityTag } from './types'; import * as mixpanel from 'lib/mixpanel/index'; import LinkExternal from 'ui/shared/LinkExternal'; +import LinkInternal from 'ui/shared/LinkInternal'; -// import { route } from 'nextjs-routes'; -// import LinkInternal from 'ui/shared/LinkInternal'; +import { getTagLinkParams } from './utils'; interface Props { data: EntityTag; @@ -16,17 +16,19 @@ interface Props { const EntityTagLink = ({ data, children }: Props) => { + const linkParams = getTagLinkParams(data); + const handleLinkClick = React.useCallback(() => { - if (!data.meta?.tagUrl) { + if (!linkParams?.href) { return; } mixpanel.logEvent(mixpanel.EventTypes.PAGE_WIDGET, { Type: 'Address tag', Info: data.slug, - URL: data.meta.tagUrl, + URL: linkParams.href, }); - }, [ data.meta?.tagUrl, data.slug ]); + }, [ linkParams?.href, data.slug ]); const linkProps: LinkProps = { color: 'inherit', @@ -36,27 +38,23 @@ const EntityTagLink = ({ data, children }: Props) => { onClick: handleLinkClick, }; - // Uncomment this block when "Tag search" page is ready - issue #1869 - // switch (data.tagType) { - // case 'generic': - // case 'protocol': { - // return ( - // - // { children } - // - // ); - // } - // } + if (linkParams?.type === 'internal') { + return ( + + { children } + + ); + } - if (data.meta?.tagUrl) { + if (linkParams?.type === 'external') { return ( { children } diff --git a/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_default_warpcast-tag-1.png b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_default_warpcast-tag-1.png new file mode 100644 index 0000000000..cda31b21a6 Binary files /dev/null and b/ui/shared/EntityTags/__screenshots__/EntityTag.pw.tsx_default_warpcast-tag-1.png differ diff --git a/ui/shared/EntityTags/utils.ts b/ui/shared/EntityTags/utils.ts new file mode 100644 index 0000000000..5a8ce88b4b --- /dev/null +++ b/ui/shared/EntityTags/utils.ts @@ -0,0 +1,27 @@ +import type { EntityTag } from './types'; + +// import { route } from 'nextjs-routes'; + +export function getTagLinkParams(data: EntityTag): { type: 'external' | 'internal'; href: string } | undefined { + if (data.meta?.warpcastHandle) { + return { + type: 'external', + href: `https://warpcast.com/${ data.meta.warpcastHandle }`, + }; + } + + if (data.meta?.tagUrl) { + return { + type: 'external', + href: data.meta.tagUrl, + }; + } + + // Uncomment this block when "Tag search" page is ready - issue #1869 +// if (data.tagType === 'generic' || data.tagType === 'protocol') { +// return { +// type: 'internal', +// href: route({ pathname: '/' }), +// }; +// } +}