add dapp remarks (#59)

* chore: remove shadow effect from StatCard component for improved visibility

* feat: Add dapp remark

* chore: Add rounded class to OrmpInfo container

* feat: Remark fromDapp protocol name #55

---------

Co-authored-by: snoopy1412 <[email protected]>

src/app/message/[id]/components/AddressInfo.tsx

@@ -8,13 +8,13 @@ interface AddressInfoProps {
   address?: string;
   chain?: CHAIN;
 }
-const AddressInfo = ({ address, chain }: AddressInfoProps) => {
+const AddressInfo = ({ address, chain, children }: React.PropsWithChildren<AddressInfoProps>) => {
   if (!address) return null;
 
   return (
     <div className="flex w-full items-center gap-[0.62rem]">
       <span className={cn('max-w-[calc(100vw-10rem)] truncate', CodeFont.className)}>
-        {address}
+        {children ?? address}
       </span>
       <ClipboardIconButton text={address} size={16} />
       {chain ? (

src/app/message/[id]/components/OrmpInfo.tsx

@@ -31,7 +31,7 @@ const OrmpInfo = ({ ormpInfo }: OrmpInfoProps) => {
   ];
 
   return (
-    <div className="bg-background">
+    <div className="rounded bg-background">
       {data?.map((item, index) => (
         <div className={cn('flex items-center', 'border-b border-b-muted')} key={index}>
           <div className="w-[7.5rem] shrink-0 border-r border-r-muted p-5 text-xs text-muted-foreground">

src/app/message/[id]/components/TxDetail.tsx

@@ -9,7 +9,7 @@ import {
   SquareUser,
   Unplug
 } from 'lucide-react';
-import Card from './Card';
+
 import { FlipWords } from '@/components/ui/flip-words';
 import { cn } from '@/lib/utils';
 import { CodeFont } from '@/config/font';
@@ -21,9 +21,12 @@ import BackToTop from '@/components/ui/back-to-top';
 
 import TransactionHashInfo from './TransactionHashInfo';
 import AddressInfo from './AddressInfo';
-import { MessagePort } from '@/graphql/type';
 import ProtocolInfo from './ProtocolInfo';
 import OrmpInfo from './OrmpInfo';
+import Card from './Card';
+
+import { MessagePort } from '@/graphql/type';
+import AddressDisplayFilterDappRemark from '@/components/AddressDisplayFilterDappRemark';
 
 const words = ['Transaction Details'];
 
@@ -100,7 +103,13 @@ export default function TxDetail({ iconSize, sourceChain, targetChain, message }
             title="Source Dapp Address"
             icon={<LayoutGrid size={iconSize} strokeWidth={1.25} />}
           >
-            <AddressInfo address={message?.sourceDappAddress} chain={sourceChain} />
+            <AddressInfo address={message?.sourceDappAddress} chain={sourceChain}>
+              <AddressDisplayFilterDappRemark address={message?.sourceDappAddress || ''}>
+                <span className="max-w-[calc(100vw-10rem)] truncate">
+                  ({message?.sourceDappAddress})
+                </span>
+              </AddressDisplayFilterDappRemark>
+            </AddressInfo>
           </Card>
 
           <Card title="Source Port Address" icon={<Unplug size={iconSize} strokeWidth={1.25} />}>
@@ -111,7 +120,13 @@ export default function TxDetail({ iconSize, sourceChain, targetChain, message }
             title="Target Dapp Address"
             icon={<LayoutGrid size={iconSize} strokeWidth={1.25} />}
           >
-            <AddressInfo address={message?.targetDappAddress} chain={targetChain} />
+            <AddressInfo address={message?.targetDappAddress} chain={targetChain}>
+              <AddressDisplayFilterDappRemark address={message?.targetDappAddress || ''}>
+                <span className="max-w-[calc(100vw-10rem)] truncate">
+                  ({message?.targetDappAddress})
+                </span>
+              </AddressDisplayFilterDappRemark>
+            </AddressInfo>
           </Card>
           <Card title="Target Port Address" icon={<Unplug size={iconSize} strokeWidth={1.25} />}>
             <AddressInfo address={message?.targetPortAddress} chain={targetChain} />

src/components/AddressDisplayFilterDappRemark.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import Image from 'next/image';
+import { capitalize } from 'lodash-es';
+import { dappRemark } from '@/config/dapp_remark';
+import { getDAppInfo } from '@/utils/dapp';
+
+interface AddressDisplayFilterDappRemarkProps {
+  address: string;
+  formatAddress?: (address: string) => string;
+}
+const AddressDisplayFilterDappRemark = ({
+  address,
+  formatAddress,
+  children
+}: React.PropsWithChildren<AddressDisplayFilterDappRemarkProps>) => {
+  const { dappLogo, dappName } = getDAppInfo(address);
+
+  const { width, height } = dappName
+    ? dappRemark[dappName as keyof typeof dappRemark]
+    : { width: 35, height: 20 };
+  const displayAddress = formatAddress ? formatAddress(address) : address;
+
+  return dappName && dappLogo ? (
+    <span className="flex items-center gap-[0.31rem]">
+      <Image src={dappLogo} width={width} height={height} alt={`${capitalize(dappName)}`} />
+      <span>{capitalize(dappName)}</span>
+      {children}
+    </span>
+  ) : (
+    displayAddress
+  );
+};
+
+export default AddressDisplayFilterDappRemark;

src/components/blockchain-address-link.tsx

@@ -4,6 +4,7 @@ import { toShortText } from '@/utils';
 import { CHAIN } from '@/types/chains';
 import { cn } from '@/lib/utils';
 import { CodeFont } from '@/config/font';
+import AddressDisplayFilterDappRemark from './AddressDisplayFilterDappRemark';
 
 interface BlockchainAddressLinkProps {
   chain?: CHAIN;
@@ -28,7 +29,10 @@ const BlockchainAddressLink = ({
         href={href}
         className={cn('hover:underline', CodeFont.className, className)}
       >
-        {toShortText(address, frontLength, backLength)}
+        <AddressDisplayFilterDappRemark
+          address={address}
+          formatAddress={(address) => toShortText(address, frontLength, backLength)}
+        />
       </Link>
     );
   }
@@ -45,14 +49,20 @@ const BlockchainAddressLink = ({
         target="_blank"
         rel="noreferrer noopener"
       >
-        {toShortText(address, frontLength, backLength)}
+        <AddressDisplayFilterDappRemark
+          address={address}
+          formatAddress={(address) => toShortText(address, frontLength, backLength)}
+        />
       </Link>
     );
   }
 
   return (
     <span title={address} className={className}>
-      {toShortText(address, frontLength, backLength)}
+      <AddressDisplayFilterDappRemark
+        address={address}
+        formatAddress={(address) => toShortText(address, frontLength, backLength)}
+      />
     </span>
   );
 };

src/components/stat-card.tsx

@@ -13,7 +13,7 @@ interface StatCardProps {
 export const StatCard: React.FC<StatCardProps> = ({ title, value, percentageChange }) => {
   const numberValue = convertToNumber(value);
   return (
-    <Card className="border-none bg-transparent py-0 sm:py-5">
+    <Card className="border-none bg-transparent py-0 shadow-none sm:py-5">
       <CardHeader className="flex flex-row items-center justify-between p-0">
         <CardTitle className="text-xs font-normal leading-[1.4rem] text-secondary-foreground sm:text-sm">
           {title}

src/config/dapp_remark.ts

@@ -0,0 +1,6 @@
+export const dappRemark = {
+  helix: {
+    width: 28,
+    height: 16
+  }
+};

src/utils/dapp.ts

@@ -0,0 +1,18 @@
+import dappConfig from '@/dappRemark/config.json';
+
+export const getDAppInfo = (
+  address?: string
+): {
+  dappName: string | null;
+  dappLogo: string | null;
+} => {
+  if (!address) return { dappName: null, dappLogo: null };
+  for (const [key, addresses] of Object.entries(dappConfig)) {
+    if (addresses.includes(address)) {
+      const dappName = key;
+      const dappLogo = `/images/dapp_remark/${key}.svg`;
+      return { dappName, dappLogo };
+    }
+  }
+  return { dappName: null, dappLogo: null };
+};

src/utils/index.ts

@@ -2,3 +2,4 @@ export * from './number';
 export * from './date';
 export * from './string';
 export * from './network';
+export * from './dapp';