Support TNS reverse record

app/src/@libs/use-tns-reverse-record-query/index.ts

@@ -0,0 +1,55 @@
+import { LCDClient } from '@terra-money/terra.js';
+import { useWallet } from '@terra-money/use-wallet';
+import { useMemo } from 'react';
+import { useQuery, UseQueryResult } from 'react-query';
+
+const REVERSE_RECORD_ADDRESS = 'terra13efj2whf6rm7yedc2v7rnz0e6ltzytyhydy98a';
+enum TNS_QUERY_KEY {
+  REVERSE_RECORD = 'TNS_QUERY_REVERSE_RECORD',
+}
+
+export function useTnsReverseRecordQuery(
+  walletAddress: string,
+): UseQueryResult<string | null> {
+  const wallet = useWallet();
+  const network = wallet?.network;
+  const lcd = useMemo(() => {
+    if (!network) {
+      return null;
+    }
+    return new LCDClient({
+      chainID: network.chainID,
+      URL: network.lcd,
+    });
+  }, [network]);
+
+  const result = useQuery(
+    [
+      TNS_QUERY_KEY.REVERSE_RECORD,
+      walletAddress ?? undefined,
+      REVERSE_RECORD_ADDRESS,
+    ],
+    async () => {
+      if (!lcd || network?.chainID !== 'columbus-5') {
+        return null;
+      }
+      try {
+        const res = await lcd.wasm.contractQuery<{ name: string }>(
+          REVERSE_RECORD_ADDRESS,
+          {
+            get_name: {
+              address: walletAddress,
+            },
+          },
+        );
+        return res?.name;
+      } catch (error) {
+        return null;
+      }
+    },
+    {
+      enabled: !!walletAddress,
+    },
+  );
+  return result;
+}

app/src/components/Header/desktop/ConnectedButton.tsx

@@ -3,6 +3,7 @@ import { truncate } from '@libs/formatter';
 import { IconSpan } from '@libs/neumorphism-ui/components/IconSpan';
 import React, { ButtonHTMLAttributes, DetailedHTMLProps } from 'react';
 import styled from 'styled-components';
+import { useTnsReverseRecordQuery } from '@libs/use-tns-reverse-record-query';
 import { u, UST } from '@anchor-protocol/types';
 import { useFormatters } from '@anchor-protocol/formatter/useFormatters';
 
@@ -23,6 +24,8 @@ function ConnectedButtonBase({
   totalUST,
   ...buttonProps
 }: ConnectedButtonProps) {
+  const { data: reverseRecord } = useTnsReverseRecordQuery(walletAddress);
+
   const {
     ust: { formatOutput, demicrofy, symbol },
   } = useFormatters();
@@ -32,7 +35,9 @@ function ConnectedButtonBase({
         <span className="wallet-icon">
           <Wallet />
         </span>
-        <span className="wallet-address">{truncate(walletAddress)}</span>
+        <span className="wallet-address">
+          {reverseRecord || truncate(walletAddress)}
+        </span>
         <div className="wallet-balance">
           {`${formatOutput(demicrofy(totalUST))} ${symbol}`}
         </div>

app/src/components/Header/wallet/WalletContent.tsx

@@ -6,6 +6,7 @@ import useClipboard from 'react-use-clipboard';
 import styled from 'styled-components';
 import { UIElementProps } from '@libs/ui';
 import { ConnectionIcons } from './ConnectionIcons';
+import { useTnsReverseRecordQuery } from '@libs/use-tns-reverse-record-query';
 
 interface WalletContentProps extends UIElementProps {
   walletAddress: string;
@@ -26,6 +27,7 @@ export function WalletContentBase(props: WalletContentProps) {
     onDisconnectWallet,
   } = props;
 
+  const { data: reverseRecord } = useTnsReverseRecordQuery(walletAddress);
   const [isCopied, setCopied] = useClipboard(walletAddress, {
     successDuration: 1000 * 5,
   });
@@ -39,7 +41,9 @@ export function WalletContentBase(props: WalletContentProps) {
           icon={connectionIcon}
           readonly={readonly}
         />
-        <h2 className="wallet-address">{truncate(walletAddress)}</h2>
+        <h2 className="wallet-address">
+          {reverseRecord || truncate(walletAddress)}
+        </h2>
         <button className="copy-wallet-address" onClick={setCopied}>
           <IconSpan>COPY ADDRESS {isCopied && <Check />}</IconSpan>
         </button>