# update ud resolver

src/modules/env/index.ts

@@ -105,3 +105,7 @@ export const infuraApiKey = process.env.NEXT_PUBLIC_INFURA_KEY;
 export const WC_BRIDGE = process.env.NEXT_PUBLIC_WC_BRIDGE;
 
 export const NETWORK_INFO_FETCH_RATE = 300 * 1000; // 5 minutes in milliseconds
+
+export enum ADDRESS_RESOLVER {
+  UD = 'UD',
+}

src/modules/scenes/Main/Explorer/StatsInfo/index.tsx

@@ -89,7 +89,7 @@
   const lockedAmount = Number(lockHistories[lockHistories.length - 1].amount);
   const floatAmount = Number(floatHistories[floatHistories.length - 1].amount);
 
   const rewardsTotal = reward ? reward.total : 0;
 
   const dataChart = usd && [
     {
@@ -268,7 +268,11 @@
                         placeholderLoader
                       ) : (
                         <Row>
-                          <TextValue variant="accent">{info.value}</TextValue>
+                          {info.description === formattedRewards ? (
+                            <ValidatorLinkSpan variant="accent">{info.value}</ValidatorLinkSpan>
+                          ) : (
+                            <TextValue variant="accent">{info.value}</TextValue>
+                          )}
                         </Row>
                       )}
                     </DataDiv>

src/modules/scenes/Main/Explorer/StatsInfo/styled.tsx

@@ -86,6 +86,7 @@ export const Row = styled.div`
 
 export const RowValidator = styled.div`
   display: flex;
+  gap: ${({ theme }) => rem(theme.pulsar.size.closet)};
   margin-bottom: ${({ theme }) => rem(-theme.pulsar.size.box)};
 `;
 
@@ -109,10 +110,14 @@ export const TextEst = styled(Text)`
 
 export const ValidatorLinkSpan = styled(Text)`
   font-size: ${({ theme }) => rem(theme.pulsar.size.room)};
-  margin-left: ${({ theme }) => rem(theme.pulsar.size.closet)};
   color: ${({ theme }) => theme.pulsar.color.primary.normal};
   border-bottom: 1px solid ${({ theme }) => theme.pulsar.color.primary.normal};
   cursor: pointer;
+
+  > a {
+    color: inherit;
+    text-decoration: none;
+  }
 `;
 
 export const Network = styled(Icon.NetworkVolume)`

src/modules/scenes/Main/Explorer/TxHistories/Item/index.tsx

@@ -1,21 +1,19 @@
-/* eslint-disable import/no-internal-modules */
-
+import { stringifyUrl } from 'query-string';
 import { Dropdown, getCryptoAssetFormatter, Text } from '@swingby-protocol/pulsar';
 import { DateTime } from 'luxon';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useMemo, useEffect } from 'react';
-import axios from 'axios';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { useTheme } from 'styled-components';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { reverseUDAddressSelector, fetchReverseUDAddress } from '../../../../../store';
+import { resolveAddressSelector, fetchResolvedAddress } from '../../../../../store';
 import type {
   Transaction,
   TransactionsHistoryQueryHookResult,
 } from '../../../../../../generated/graphql';
-import { PATH } from '../../../../../env';
+import { PATH, ADDRESS_RESOLVER } from '../../../../../env';
 import {
   castGraphQlType,
   castUiStatus,
@@ -28,6 +26,7 @@ import {
 import { transactionDetailByTxId } from '../../../../../swap';
 import { AddressLinkP } from '../../../../Common';
 import { swingbyTextDisplay } from '../../../../../coins';
+import { fetcher } from '../../../../../../modules/fetch';
 
 import {
   AmountSpan,
@@ -84,41 +83,35 @@ export const TxHistoriesItem = ({
 
   const txSendingAddress = tx.sendingAddress?.toLowerCase();
   const txReceivingAddress = tx.receivingAddress?.toLowerCase();
-  const sendingAddress = useSelector(reverseUDAddressSelector(txSendingAddress));
-  const receivingAddress = useSelector(reverseUDAddressSelector(txReceivingAddress));
+  const sendingAddress = useSelector(resolveAddressSelector(txSendingAddress));
+  const receivingAddress = useSelector(resolveAddressSelector(txReceivingAddress));
 
-  const reverseUD = async (search_value: String) => {
-    return search_value;
+  const resolveAddress = async (search_value: string) => {
+    const resolveAddressUrl = stringifyUrl({
+      url: `/api/v1/addr-resolve`,
+      query: { address: search_value, resolver: ADDRESS_RESOLVER.UD },
+    });
 
-    const API_URL = 'https://api.unstoppabledomains.com/resolve/reverse/';
-    const API_KEY1 = process.env.NEXT_PUBLIC_UD_API_KEY;
     try {
-      var res = await axios.get(API_URL + search_value, {
-        headers: {
-          Authorization: `bearer ${API_KEY1}`,
-        },
-      });
-
-      if (res.data.meta.domain !== '') {
-        return res.data.meta.domain;
-      }
-      return search_value;
-    } catch (err) {
+      const result = await fetcher<{ address: string; isResolved: boolean }>(resolveAddressUrl);
+      if (result.isResolved) return result.address;
+      else return search_value;
+    } catch {
       return search_value;
     }
   };
 
   useEffect(() => {
     if (sendingAddress || !txSendingAddress) return;
-    reverseUD(txSendingAddress).then((reversedUDAddress) => {
-      dispatch(fetchReverseUDAddress(reversedUDAddress, txSendingAddress));
+    resolveAddress(txSendingAddress).then((resolvedAddress) => {
+      dispatch(fetchResolvedAddress(resolvedAddress, txSendingAddress));
     });
   }, [dispatch, sendingAddress, txSendingAddress]);
 
   useEffect(() => {
     if (receivingAddress || !txReceivingAddress) return;
-    reverseUD(txReceivingAddress).then((reversedUDAddress) => {
-      dispatch(fetchReverseUDAddress(reversedUDAddress, txReceivingAddress));
+    resolveAddress(txReceivingAddress).then((resolvedAddress) => {
+      dispatch(fetchResolvedAddress(resolvedAddress, txReceivingAddress));
     });
   }, [dispatch, receivingAddress, txReceivingAddress]);
 

src/modules/scenes/Main/Liquidity/AddLiquidity/index.tsx

@@ -52,6 +52,7 @@ import {
   LiquidityAPR,
   LiquidityAPRValue,
   LiquidityStatInfo,
+  LiquidityStatValue,
   LiquidityHelpLink,
 } from './styled';
 
@@ -172,6 +173,14 @@ export const AddLiquidity = (props: Props) => {
             <FormattedMessage id="liquidity.help-url" />
           </LiquidityHelpLink>
         </LiquidityStatInfo>
+
+        <LiquidityStatInfo>
+          <FormattedMessage id="swap.limittx-stat-label" />
+          <LiquidityStatValue>10.00</LiquidityStatValue>
+
+          <FormattedMessage id="swap.fees-stat-label" />
+          <LiquidityStatValue>0.00%</LiquidityStatValue>
+        </LiquidityStatInfo>
       </LiquidityInfoContainer>
 
       <Box>

src/modules/scenes/Main/Liquidity/AddLiquidity/styled.tsx

@@ -224,6 +224,7 @@ export const LiquidityAPR = styled.div`
 export const LiquidityAPRValue = styled(Text)`
   color: ${({ theme }) => theme.pulsar.color.primary.normal};
   font-weight: bold;
+  text-decoration: underline;
 `;
 
 export const LiquidityStatInfo = styled.div`
@@ -235,6 +236,11 @@ export const LiquidityStatInfo = styled.div`
   color: ${({ theme }) => theme.pulsar.color.text.masked};
 `;
 
+export const LiquidityStatValue = styled(Text)`
+  color: ${({ theme }) => theme.pulsar.color.primary.normal};
+  font-weight: bold;
+`;
+
 export const LiquidityHelpLink = styled.a`
   color: ${({ theme }) => theme.pulsar.color.text.normal};
   text-decoration: none;

src/modules/scenes/Main/Liquidity/Withdraw/index.tsx

@@ -54,6 +54,7 @@ import {
   CoinInfoIcon,
   CoinName,
   LiquidityStatInfo,
+  LiquidityStatValue,
   LiquidityHelpLink,
   AccountIdContainer,
   AccountIdSbBtcBalanceContainer,
@@ -197,6 +198,14 @@ export const Withdraw = (props: Props) => {
             <FormattedMessage id="liquidity.help-url" />
           </LiquidityHelpLink>
         </LiquidityStatInfo>
+
+        <LiquidityStatInfo>
+          <FormattedMessage id="swap.limittx-stat-label" />
+          <LiquidityStatValue>10.00</LiquidityStatValue>
+
+          <FormattedMessage id="swap.fees-stat-label" />
+          <LiquidityStatValue>0.20%</LiquidityStatValue>
+        </LiquidityStatInfo>
       </LiquidityInfoContainer>
 
       <Box>

src/modules/scenes/Main/Liquidity/Withdraw/styled.tsx

@@ -220,6 +220,11 @@ export const LiquidityStatInfo = styled.div`
   color: ${({ theme }) => theme.pulsar.color.text.masked};
 `;
 
+export const LiquidityStatValue = styled(Text)`
+  color: ${({ theme }) => theme.pulsar.color.primary.normal};
+  font-weight: bold;
+`;
+
 export const LiquidityHelpLink = styled.a`
   color: ${({ theme }) => theme.pulsar.color.text.normal};
   text-decoration: none;

src/modules/store/explorer/index.tsx

@@ -16,7 +16,7 @@ enum Actions {
   FetchUsdPrice = 'Explorer/FETCH_USD_PRICE',
   FetchTransactionFees = 'Explorer/FETCH_TRANSACTION_FEES',
   UpdateNetworkInfos = 'Explorer/UPDATE_NETWORK_INFOS',
-  FetchReverseUDAddress = 'Explorer/FETCH_REVERSE_UD_ADDRESS',
+  FetchResolvedAddress = 'Explorer/FETCH_RESOLVED_ADDRESS',
 }
 
 const initialState: ExplorerState = {
@@ -27,7 +27,7 @@ const initialState: ExplorerState = {
   networkInfos: initial.networkInfos,
   transactionFees: null,
   isExistPreviousPage: false,
-  reversedUDAddresses: {},
+  resolvedAddresses: {},
 };
 
 export const explorer: Reducer<ExplorerState, Action> = (state = initialState, action) => {
@@ -63,10 +63,10 @@ export const explorer: Reducer<ExplorerState, Action> = (state = initialState, a
     return { ...state, networkInfos: action.data };
   }
 
-  if (action.type === Actions.FetchReverseUDAddress) {
+  if (action.type === Actions.FetchResolvedAddress) {
     return {
       ...state,
-      reversedUDAddresses: { ...state.reversedUDAddresses, [action.address]: action.data },
+      resolvedAddresses: { ...state.resolvedAddresses, [action.address]: action.data },
     };
   }
 
@@ -94,8 +94,8 @@ export const fetchTransactionFees = (data: IFee[]) =>
 export const updateNetworkInfos = (data: INetworkInfos) =>
   ({ type: Actions.UpdateNetworkInfos, data } as const);
 
-export const fetchReverseUDAddress = (data: string, address: string) =>
-  ({ type: Actions.FetchReverseUDAddress, data, address } as const);
+export const fetchResolvedAddress = (data: string, address: string) =>
+  ({ type: Actions.FetchResolvedAddress, data, address } as const);
 
 type Action =
   | ReturnType<typeof toggleIsLoading>
@@ -106,7 +106,7 @@ type Action =
   | ReturnType<typeof fetchUsdPrice>
   | ReturnType<typeof fetchTransactionFees>
   | ReturnType<typeof updateNetworkInfos>
-  | ReturnType<typeof fetchReverseUDAddress>;
+  | ReturnType<typeof fetchResolvedAddress>;
 
 export {
   btcUSDPriceSelector,
@@ -117,5 +117,5 @@ export {
   explorerSelector,
   explorerLoadingSelector,
   statsSelector,
-  reverseUDAddressSelector,
+  resolveAddressSelector,
 } from './selectors';

src/modules/store/explorer/selectors.ts

@@ -29,6 +29,6 @@ export const swingbyUSDPriceSelector = (state: DefaultRootState): number =>
 export const explorerLoadingSelector = (state: DefaultRootState): boolean =>
   state.explorer.isLoading;
 
-export const reverseUDAddressSelector = (address: string) => (
+export const resolveAddressSelector = (address: string) => (
   state: DefaultRootState,
-): string | undefined => state.explorer.reversedUDAddresses[address];
+): string | undefined => state.explorer.resolvedAddresses[address];

src/modules/store/index.tsx

@@ -20,8 +20,8 @@ export {
   usdPricesSelector,
   transactionFeesSelector,
   statsSelector,
-  reverseUDAddressSelector,
-  fetchReverseUDAddress,
+  resolveAddressSelector,
+  fetchResolvedAddress,
 } from './explorer';
 
 export {

src/modules/store/types.ts

@@ -67,7 +67,7 @@ export type ExplorerState = {
   isExistPreviousPage: boolean;
   swapHistory: ITransactions | null;
   swapHistoryTemp: TTxRawObject[] | null;
-  reversedUDAddresses: Record<string, string>;
+  resolvedAddresses: Record<string, string>;
 };
 
 export type SettingsState = {

src/pages/api/v1/addr-resolve.ts

@@ -0,0 +1,50 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+
+import { corsMiddleware, getParam } from '../../../modules/api';
+import { fetcher } from '../../../modules/fetch';
+
+const ACTIVE_RESOLVERS = {
+  UD: {
+    isEnabled: true,
+    resolve: async (address: string) => {
+      try {
+        const result = await fetcher<{ meta: { domain: string } }>(
+          'https://api.unstoppabledomains.com/resolve/reverse/' + address.toLowerCase(),
+          {
+            headers: {
+              Authorization: `Bearer ${process.env.NEXT_PUBLIC_UD_API_KEY}`,
+            },
+          },
+        );
+
+        if (result.meta.domain !== '') {
+          return result.meta.domain;
+        }
+      } catch {
+        return null;
+      }
+    },
+  },
+};
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<{ address: string; isResolved: boolean }>,
+) {
+  await corsMiddleware({ req, res });
+
+  const address = getParam({ req, name: 'address' });
+  const resolver = getParam({ req, name: 'resolver' });
+
+  if (!ACTIVE_RESOLVERS[resolver] || !ACTIVE_RESOLVERS[resolver].isEnabled) {
+    return res.status(200).json({ address, isResolved: false });
+  }
+
+  const resolvedAddress = await ACTIVE_RESOLVERS[resolver].resolve(address);
+
+  if (!resolvedAddress) {
+    return res.status(200).json({ address, isResolved: false });
+  }
+
+  return res.status(200).json({ address: resolvedAddress, isResolved: true });
+}