From 685a97dad22c04f393aeffc6995d05b0ba5d4451 Mon Sep 17 00:00:00 2001
From: jinoosss <112360739+jinoosss@users.noreply.github.com>
Date: Sat, 22 Jul 2023 02:00:44 +0900
Subject: [PATCH] Release v0.3.2 to Main (#73)

---
 .../core/layout/details-page-layout.tsx       | 28 ++++++++++
 src/components/ui/badge/badge.tsx             |  2 +-
 .../ui/chart/area-chart/tooltip.tsx           |  4 +-
 .../ui/datatable/data/data-row-item.tsx       |  9 +++-
 src/components/ui/datatable/data/data-row.tsx |  2 +-
 src/components/ui/datatable/datatable.tsx     | 13 ++++-
 .../ui/datatable/header/header-row-item.tsx   |  6 ++-
 .../ui/datatable/header/header-row.tsx        |  1 +
 src/components/ui/datatable/option/builder.ts |  8 +++
 src/components/ui/datatable/option/option.tsx |  1 +
 .../ui/detail-page-common-styles/index.tsx    | 10 ++++
 src/components/ui/text/amount-text.tsx        | 31 +++++++----
 .../account-detail/account-detail.tsx         | 26 +++++-----
 .../datatable/block-detail/block-detail.tsx   | 20 +++----
 .../view/datatable/item/account.tsx           |  6 ++-
 src/components/view/datatable/item/amount.tsx |  2 +-
 .../view/datatable/item/block-hash.tsx        |  8 +--
 src/components/view/datatable/item/block.tsx  |  8 +--
 .../view/datatable/item/functions.tsx         | 36 +++++++++++--
 .../view/datatable/item/has-link.tsx          |  2 +-
 src/components/view/datatable/item/owner.tsx  |  2 +-
 .../view/datatable/item/publisher.tsx         | 14 +++--
 .../view/datatable/item/realm-package.tsx     | 42 ++++++++++++---
 .../view/datatable/item/token-title.tsx       |  2 +-
 .../view/datatable/item/tx-hash.tsx           | 17 +++---
 src/components/view/datatable/item/type.tsx   |  8 +--
 .../datatable/realm-detail/realm-detail.tsx   | 14 ++---
 src/components/view/datatable/realm/realm.tsx | 25 ++++++---
 .../datatable/token-detail/token-detail.tsx   | 14 ++---
 src/components/view/datatable/token/token.tsx | 52 ++++++++++---------
 .../datatable/transaction/transaction.tsx     | 14 ++---
 src/components/view/footer/footer.tsx         |  2 +-
 .../active-account/active-account.tsx         |  2 +-
 .../active-boards/active-boards.tsx           |  2 +-
 .../active-newest/active-newest.tsx           |  6 +--
 .../main-active-list/main-active-list.tsx     |  2 +-
 .../total-gas-share/total-gas-share-model.ts  | 11 ++--
 .../total-daily-fee/total-daily-fee-model.ts  |  5 +-
 .../total-transaction-model.ts                |  2 +-
 src/models/block-details-model.ts             |  1 +
 src/pages/accounts/[address].tsx              |  4 +-
 src/pages/blocks/[height].tsx                 | 10 ++--
 src/pages/realms/details.tsx                  | 31 ++++++++++-
 src/pages/tokens/[...path].tsx                | 41 ++++++++++++++-
 .../{[hash].tsx => [...hash].tsx}             | 10 ++--
 .../api/fetchers/api-transaction-details.ts   |  4 +-
 .../api/selector/select-realm-details.ts      |  2 +-
 src/types/data-type.ts                        |  2 +-
 48 files changed, 390 insertions(+), 174 deletions(-)
 rename src/pages/transactions/{[hash].tsx => [...hash].tsx} (98%)

diff --git a/src/components/core/layout/details-page-layout.tsx b/src/components/core/layout/details-page-layout.tsx
index b6699a13..af176ebc 100644
--- a/src/components/core/layout/details-page-layout.tsx
+++ b/src/components/core/layout/details-page-layout.tsx
@@ -68,4 +68,32 @@ const Content = styled.div<StyleProps>`
     ${({titleAlign}) => mixins.flexbox('row', 'center', titleAlign ?? 'center')};
   }
   ${({visible}) => !visible && 'display: none;'}
+
+  .address-tooltip {
+    vertical-align: text-bottom;
+  }
+  .svg-icon {
+    stroke: ${({theme}) => theme.colors.primary};
+    margin-left: 5px;
+  }
+
+  dt {
+    display: flex;
+  }
+
+  .tooltip-wrapper {
+    position: inherit;
+    display: inline-flex;
+    width: 32px;
+    height: 24px;
+    justify-content: center;
+    align-items: center;
+
+    svg {
+      fill: ${({theme}) => theme.colors.tertiary};
+      & .icon-tooltip_svg__bg {
+        fill: ${({theme}) => theme.colors.surface};
+      }
+    }
+  }
 `;
diff --git a/src/components/ui/badge/badge.tsx b/src/components/ui/badge/badge.tsx
index 96ca0c01..57020228 100644
--- a/src/components/ui/badge/badge.tsx
+++ b/src/components/ui/badge/badge.tsx
@@ -30,7 +30,7 @@ const BadgeWrapper = styled.div<BadgeProps>`
   max-width: fit-content;
   height: 28px;
   background-color: ${({type, theme}) => (type ? theme.colors[type] : theme.colors.surface)};
-  padding: ${({padding}) => (padding ? padding : '0px 16px')};
+  padding: ${({padding}) => (padding ? padding : '4px 16px')};
   margin-right: ${({desktop}) => (desktop ? '15px' : '10px')};
   border-radius: 4px;
   margin-top: ${({desktop}) => !desktop && '12px'};
diff --git a/src/components/ui/chart/area-chart/tooltip.tsx b/src/components/ui/chart/area-chart/tooltip.tsx
index 787c6c32..a65febee 100644
--- a/src/components/ui/chart/area-chart/tooltip.tsx
+++ b/src/components/ui/chart/area-chart/tooltip.tsx
@@ -88,7 +88,7 @@ export const AreaChartTooltip = ({
       return <></>;
     }
     const data = datas[packagePath][activeElements[0].index];
-    const {integer, decimal} = parseValue(data?.value ?? 0);
+    const {integer, decimal} = parseValue(data?.value || 0);
     return (
       <div key={cIndex} className="tooltip-row">
         <span
@@ -99,7 +99,7 @@ export const AreaChartTooltip = ({
           <strong>{integer}</strong>
           {`.${decimal}`}
         </span>
-        <span className="rate">{`${Math.round(data?.rate ?? 0)}%`}</span>
+        <span className="rate">{`${Math.round(data?.rate || 0)}%`}</span>
       </div>
     );
   };
diff --git a/src/components/ui/datatable/data/data-row-item.tsx b/src/components/ui/datatable/data/data-row-item.tsx
index 12910027..5aace38c 100644
--- a/src/components/ui/datatable/data/data-row-item.tsx
+++ b/src/components/ui/datatable/data/data-row-item.tsx
@@ -7,14 +7,19 @@ import {DatatableOption} from '..';
 interface Props<T> {
   header: DatatableHeader.Header<T>;
   data: T;
+  className?: string;
 }
 
-export const DataRowItem = <T extends {[key in string]: any}>({header, data}: Props<T>) => {
+export const DataRowItem = <T extends {[key in string]: any}>({
+  header,
+  data,
+  className,
+}: Props<T>) => {
   const option = DatatableOption.dataOptionByHeader(header);
   const value = data[header.key];
 
   return (
-    <ItemContainer options={option}>
+    <ItemContainer className={className || ''} options={option}>
       {option.renderOption ? (
         option.renderOption(value, data)
       ) : (
diff --git a/src/components/ui/datatable/data/data-row.tsx b/src/components/ui/datatable/data/data-row.tsx
index 6c7ac59d..5f93cbc8 100644
--- a/src/components/ui/datatable/data/data-row.tsx
+++ b/src/components/ui/datatable/data/data-row.tsx
@@ -12,7 +12,7 @@ export const DataRow = <T extends {[key in string]: any}>({headers, data}: Props
   return (
     <DataRowContainer>
       {headers.map((header, index) => (
-        <DataRowItem key={index} header={header} data={data} />
+        <DataRowItem key={index} header={header} data={data} className={header.itemClassName} />
       ))}
     </DataRowContainer>
   );
diff --git a/src/components/ui/datatable/datatable.tsx b/src/components/ui/datatable/datatable.tsx
index 354b755b..2d594196 100644
--- a/src/components/ui/datatable/datatable.tsx
+++ b/src/components/ui/datatable/datatable.tsx
@@ -77,7 +77,7 @@ const Container = styled.div<{maxWidth?: number}>`
     flex-direction: column;
     width: 100%;
     height: auto;
-    padding: 20px;
+    padding: 20px 24px;
     background-color: ${({theme}) => theme.colors.base};
     border-radius: 10px;
     overflow-x: auto;
@@ -86,7 +86,7 @@ const Container = styled.div<{maxWidth?: number}>`
       display: flex;
       flex-direction: column;
       width: 100%;
-      min-width: ${({maxWidth}) => (maxWidth ? `${maxWidth}px` : '1150px')};
+      min-width: ${({maxWidth}) => (maxWidth ? `${maxWidth}px` : '1146px')};
       z-index: ${zindex.scrollbar};
     }
 
@@ -131,5 +131,14 @@ const Container = styled.div<{maxWidth?: number}>`
         font-weight: 400;
       }
     }
+
+    .time,
+    .fee {
+      padding: 16px 0 16px 8px;
+    }
+
+    .functions {
+      padding: 16px 0 16px 16px;
+    }
   }
 `;
diff --git a/src/components/ui/datatable/header/header-row-item.tsx b/src/components/ui/datatable/header/header-row-item.tsx
index 95e21181..8975dd4f 100644
--- a/src/components/ui/datatable/header/header-row-item.tsx
+++ b/src/components/ui/datatable/header/header-row-item.tsx
@@ -12,12 +12,14 @@ interface Props<T> {
   header: Header<T>;
   sortOption?: {field: string; order: string};
   setSortOption?: (sortOption: {field: string; order: string}) => void;
+  className?: string;
 }
 
 export const HeaderRowItem = <T extends {[key in string]: any}>({
   header,
   sortOption,
   setSortOption,
+  className,
 }: Props<T>) => {
   const renderTooltip = () => {
     return (
@@ -78,7 +80,9 @@ export const HeaderRowItem = <T extends {[key in string]: any}>({
   };
 
   return (
-    <ItemContainer options={DatatableOption.headerOptionByHeader(header)}>
+    <ItemContainer
+      className={className || ''}
+      options={DatatableOption.headerOptionByHeader(header)}>
       <div className="content">{header.name}</div>
       {renderSort()}
       {renderTooltip()}
diff --git a/src/components/ui/datatable/header/header-row.tsx b/src/components/ui/datatable/header/header-row.tsx
index 3e4497af..922bb28f 100644
--- a/src/components/ui/datatable/header/header-row.tsx
+++ b/src/components/ui/datatable/header/header-row.tsx
@@ -22,6 +22,7 @@ export const HeaderRow = <T extends {[key in string]: any}>({
           header={header}
           sortOption={sortOption}
           setSortOption={setSortOption}
+          className={header.itemClassName}
         />
       ))}
     </HeaderRowContainer>
diff --git a/src/components/ui/datatable/option/builder.ts b/src/components/ui/datatable/option/builder.ts
index c4ee8d19..ab17d3d6 100644
--- a/src/components/ui/datatable/option/builder.ts
+++ b/src/components/ui/datatable/option/builder.ts
@@ -98,6 +98,14 @@ export class Builder<T> {
     return this;
   }
 
+  public className(className: string) {
+    this.options = {
+      ...this.options,
+      itemClassName: className,
+    };
+    return this;
+  }
+
   public renderOption(renderOption: (value: any, data: T) => React.ReactNode) {
     this.options = {
       ...this.options,
diff --git a/src/components/ui/datatable/option/option.tsx b/src/components/ui/datatable/option/option.tsx
index 7b6defdd..71e058f8 100644
--- a/src/components/ui/datatable/option/option.tsx
+++ b/src/components/ui/datatable/option/option.tsx
@@ -10,6 +10,7 @@ export interface Option<T> {
   align?: 'left' | 'center' | 'right';
   flex?: boolean;
   sort?: boolean;
+  itemClassName?: string;
   renderOption?: (value: any, data: T) => React.ReactNode;
 }
 
diff --git a/src/components/ui/detail-page-common-styles/index.tsx b/src/components/ui/detail-page-common-styles/index.tsx
index b5ae5be2..d25b348e 100644
--- a/src/components/ui/detail-page-common-styles/index.tsx
+++ b/src/components/ui/detail-page-common-styles/index.tsx
@@ -42,6 +42,7 @@ export const DLWrap = styled.dl<StyleProps>`
     }
   }
   dt {
+    color: ${({theme}) => theme.colors.tertiary};
     width: ${({desktop}) => (desktop ? '200px' : '100%')};
     ${({desktop, theme}) => (desktop ? theme.fonts.p3 : theme.fonts.p4)};
   }
@@ -54,6 +55,15 @@ export const DLWrap = styled.dl<StyleProps>`
       line-height: 40px;
     }
   }
+
+  .badge {
+    height: auto;
+
+    .multi-line {
+      word-break: break-all;
+      white-space: pre-line;
+    }
+  }
 `;
 
 export const DateDiffText = styled.span`
diff --git a/src/components/ui/text/amount-text.tsx b/src/components/ui/text/amount-text.tsx
index df929aa0..919cb14d 100644
--- a/src/components/ui/text/amount-text.tsx
+++ b/src/components/ui/text/amount-text.tsx
@@ -24,29 +24,34 @@ export const AmountText = ({
   className,
 }: AmountTextProps) => {
   // console.log('Value: ', value);
-  const num: string[] | string = decimalPointWithCommas(BigNumber(value));
+  const num: string[] | string = decimalPointWithCommas(BigNumber(value === '' ? 0 : value));
   const decimalValue = (num: string[] | string) => {
     if (denom === '' && num[1]) return `.${num[1]}`;
     if (!Array.isArray(num)) {
-      return ` ${denom}`;
+      return '';
     }
 
     if (num.length < 2) {
-      return ` ${denom}`;
+      return '';
     }
 
-    return `.${num[1]} ${denom}`;
+    return `.${num[1]}`;
   };
 
   return (
     <Wrapper className={className}>
       {num && (
-        <Text className="text-wrapper" type={maxSize} color={color} display="inline-block">
-          {num[0]}
-          <Text type={minSize} color={color} display="inline-block">
+        <>
+          <Text className="text-wrapper" type={maxSize} color={color} display="contents">
+            {num[0]}
+          </Text>
+          <Text type={minSize} color={color} display="contents" className="decimals">
             {decimalValue(num)}
           </Text>
-        </Text>
+          <Text type={maxSize} color={color} display="contents">
+            {denom}
+          </Text>
+        </>
       )}
     </Wrapper>
   );
@@ -55,7 +60,13 @@ export const AmountText = ({
 const Wrapper = styled.div`
   ${mixins.flexbox('row', 'center', 'flex-start')};
 
-  .text-wrapper {
-    white-space: nowrap;
+  &,
+  & * {
+    display: inline;
+    word-break: break-all;
+  }
+
+  .decimals::after {
+    content: ' ';
   }
 `;
diff --git a/src/components/view/datatable/account-detail/account-detail.tsx b/src/components/view/datatable/account-detail/account-detail.tsx
index ec00e555..38be9ddb 100644
--- a/src/components/view/datatable/account-detail/account-detail.tsx
+++ b/src/components/view/datatable/account-detail/account-detail.tsx
@@ -21,13 +21,13 @@ interface AccountTransactionData {
   height: number;
   num_msgs: number;
   amount: {
-    value_out: number;
-    value_in: number;
+    value_out: string;
+    value_in: string;
     denom: string;
   };
   time: string;
   fee: {
-    value: number;
+    value: string;
     denom: string;
   };
 }
@@ -121,7 +121,7 @@ export const AccountDetailDatatable = ({address}: Props) => {
     return DatatableOption.Builder.builder<AccountTransactionData>()
       .key('hash')
       .name('Tx Hash')
-      .width(210)
+      .width(215)
       .colorName('blue')
       .renderOption((value, data) => (
         <DatatableItem.TxHash
@@ -157,7 +157,7 @@ export const AccountDetailDatatable = ({address}: Props) => {
     return DatatableOption.Builder.builder<AccountTransactionData>()
       .key('height')
       .name('Block')
-      .width(93)
+      .width(113)
       .colorName('blue')
       .renderOption(height => <DatatableItem.Block height={height} />)
       .build();
@@ -167,8 +167,8 @@ export const AccountDetailDatatable = ({address}: Props) => {
     return DatatableOption.Builder.builder<AccountTransactionData>()
       .key('amount')
       .name('Amount (In)')
-      .width(160)
-      .renderOption((amount: {value_in: number; value_out: number; denom: string}, data) =>
+      .width(180)
+      .renderOption((amount: {value_in: string; value_out: string; denom: string}, data) =>
         data.num_msgs > 1 ? (
           <DatatableItem.HasLink text="More" path={`/transactions/${data.hash}`} />
         ) : (
@@ -182,8 +182,8 @@ export const AccountDetailDatatable = ({address}: Props) => {
     return DatatableOption.Builder.builder<AccountTransactionData>()
       .key('amount')
       .name('Amount (Out)')
-      .width(160)
-      .renderOption((amount: {value_in: number; value_out: number; denom: string}, data) =>
+      .width(180)
+      .renderOption((amount: {value_in: string; value_out: string; denom: string}, data) =>
         data.num_msgs > 1 ? (
           <DatatableItem.HasLink text="More" path={`/transactions/${data.hash}`} />
         ) : (
@@ -197,7 +197,8 @@ export const AccountDetailDatatable = ({address}: Props) => {
     return DatatableOption.Builder.builder<AccountTransactionData>()
       .key('time')
       .name('Time')
-      .width(204)
+      .width(160)
+      .className('time')
       .renderOption(date => <DatatableItem.Date date={date} />)
       .build();
   };
@@ -206,8 +207,9 @@ export const AccountDetailDatatable = ({address}: Props) => {
     return DatatableOption.Builder.builder<AccountTransactionData>()
       .key('fee')
       .name('Fee')
-      .width(129)
-      .renderOption(({value, denom}: {value: number; denom: string}) => (
+      .className('fee')
+      .width(113)
+      .renderOption(({value, denom}: {value: string; denom: string}) => (
         <DatatableItem.Amount value={value} denom={denom} />
       ))
       .build();
diff --git a/src/components/view/datatable/block-detail/block-detail.tsx b/src/components/view/datatable/block-detail/block-detail.tsx
index 2875913d..17ba18b2 100644
--- a/src/components/view/datatable/block-detail/block-detail.tsx
+++ b/src/components/view/datatable/block-detail/block-detail.tsx
@@ -23,12 +23,12 @@ interface BlockTransactionData {
   pkg_path: string | null;
   num_msgs: number;
   amount: {
-    value: number;
+    value: string;
     denom: string;
   };
   time: string;
   fee: {
-    value: number;
+    value: string;
     denom: string;
   };
 }
@@ -126,7 +126,7 @@ export const BlockDetailDatatable = ({height}: Props) => {
     return DatatableOption.Builder.builder<BlockTransactionData>()
       .key('height')
       .name('Block')
-      .width(93)
+      .width(113)
       .colorName('blue')
       .renderOption(height => <DatatableItem.Block height={height} />)
       .build();
@@ -136,7 +136,7 @@ export const BlockDetailDatatable = ({height}: Props) => {
     return DatatableOption.Builder.builder<BlockTransactionData>()
       .key('from_address')
       .name('From')
-      .width(160)
+      .width(170)
       .colorName('blue')
       .renderOption((fromAddress, data) => (
         <DatatableItem.Publisher address={fromAddress} username={data.from_username} />
@@ -148,8 +148,8 @@ export const BlockDetailDatatable = ({height}: Props) => {
     return DatatableOption.Builder.builder<BlockTransactionData>()
       .key('amount')
       .name('Amount')
-      .width(160)
-      .renderOption((amount: {value: number; denom: string}, data) =>
+      .width(190)
+      .renderOption((amount: {value: string; denom: string}, data) =>
         data.num_msgs > 1 ? (
           <DatatableItem.HasLink text="More" path={`/transactions/${data.hash}`} />
         ) : (
@@ -163,7 +163,8 @@ export const BlockDetailDatatable = ({height}: Props) => {
     return DatatableOption.Builder.builder<BlockTransactionData>()
       .key('time')
       .name('Time')
-      .width(204)
+      .width(160)
+      .className('time')
       .renderOption(date => <DatatableItem.Date date={date} />)
       .build();
   };
@@ -172,8 +173,9 @@ export const BlockDetailDatatable = ({height}: Props) => {
     return DatatableOption.Builder.builder<BlockTransactionData>()
       .key('fee')
       .name('Fee')
-      .width(129)
-      .renderOption(({value, denom}: {value: number; denom: string}) => (
+      .width(113)
+      .className('fee')
+      .renderOption(({value, denom}: {value: string; denom: string}) => (
         <DatatableItem.Amount value={value} denom={denom} />
       ))
       .build();
diff --git a/src/components/view/datatable/item/account.tsx b/src/components/view/datatable/item/account.tsx
index c0983188..d2ac1652 100644
--- a/src/components/view/datatable/item/account.tsx
+++ b/src/components/view/datatable/item/account.tsx
@@ -14,7 +14,7 @@ export const Account = ({address}: Props) => {
 
   return (
     <Tooltip content={renderTooltip()}>
-      <a href={`/accounts/${address}`} target={'_blank'} rel={'noopener noreferrer'}>
+      <a className="ellipsis" href={`/accounts/${address}`}>
         {textEllipsis(address ?? '', 6)}
       </a>
     </Tooltip>
@@ -31,5 +31,9 @@ const TooltipWrapper = styled.span`
     align-items: center;
     word-break: keep-all;
     white-space: nowrap;
+
+    .ellipsis {
+      max-width: 128px;
+    }
   }
 `;
diff --git a/src/components/view/datatable/item/amount.tsx b/src/components/view/datatable/item/amount.tsx
index 8a958aa3..9da01df4 100644
--- a/src/components/view/datatable/item/amount.tsx
+++ b/src/components/view/datatable/item/amount.tsx
@@ -4,7 +4,7 @@ import {FontsType} from '@/styles';
 import React from 'react';
 
 interface Props {
-  value: number;
+  value: string;
   denom: string;
   maxSize?: FontsType;
   minSize?: FontsType;
diff --git a/src/components/view/datatable/item/block-hash.tsx b/src/components/view/datatable/item/block-hash.tsx
index 8d608073..b40e739b 100644
--- a/src/components/view/datatable/item/block-hash.tsx
+++ b/src/components/view/datatable/item/block-hash.tsx
@@ -7,11 +7,5 @@ interface Props {
 }
 
 export const BlockHash = ({hash, height}: Props) => {
-  return height ? (
-    <a href={`/blocks/${height}`} target={'_blank'} rel={'noopener noreferrer'}>
-      {textEllipsis(hash ?? '', 8)}
-    </a>
-  ) : (
-    <span>-</span>
-  );
+  return height ? <a href={`/blocks/${height}`}>{textEllipsis(hash ?? '', 8)}</a> : <span>-</span>;
 };
diff --git a/src/components/view/datatable/item/block.tsx b/src/components/view/datatable/item/block.tsx
index d516f761..1d56ed1f 100644
--- a/src/components/view/datatable/item/block.tsx
+++ b/src/components/view/datatable/item/block.tsx
@@ -6,11 +6,5 @@ interface Props {
 }
 
 export const Block = ({height}: Props) => {
-  return height ? (
-    <a href={`/blocks/${height}`} target={'_blank'} rel={'noopener noreferrer'}>
-      {height}
-    </a>
-  ) : (
-    <span>-</span>
-  );
+  return height ? <a href={`/blocks/${height}`}>{height}</a> : <span>-</span>;
 };
diff --git a/src/components/view/datatable/item/functions.tsx b/src/components/view/datatable/item/functions.tsx
index 4f29c2c3..848b8d6f 100644
--- a/src/components/view/datatable/item/functions.tsx
+++ b/src/components/view/datatable/item/functions.tsx
@@ -1,14 +1,42 @@
+import Badge from '@/components/ui/badge';
+import Text from '@/components/ui/text';
 import React from 'react';
 import styled from 'styled-components';
 
 interface Props {
-  funcLength: number;
+  functions: string[];
 }
 
-export const Functions = ({funcLength}: Props) => {
-  return <FunctionsWrapper>{funcLength}</FunctionsWrapper>;
+export const Functions = ({functions}: Props) => {
+  return (
+    <FunctionsWrapper className="ellipsis">
+      {functions.map((func, index) => (
+        <Badge className="function" type="blue" key={index}>
+          <Text type="p4" color="white">
+            {func}
+          </Text>
+        </Badge>
+      ))}
+    </FunctionsWrapper>
+  );
 };
 
 const FunctionsWrapper = styled.span`
-  color: ${({theme}) => theme.colors.reverse};
+  & {
+    display: inline-flex;
+    width: fit-content;
+    max-width: 100%;
+    height: auto;
+    justify-content: flex-start;
+    align-items: center;
+    overflow: hidden;
+
+    &.ellipsis {
+      display: block;
+    }
+
+    .function {
+      margin-right: 8px;
+    }
+  }
 `;
diff --git a/src/components/view/datatable/item/has-link.tsx b/src/components/view/datatable/item/has-link.tsx
index 22ce5ca2..75037f39 100644
--- a/src/components/view/datatable/item/has-link.tsx
+++ b/src/components/view/datatable/item/has-link.tsx
@@ -14,7 +14,7 @@ interface Props {
 export const HasLink = ({text, textSize = 'p4', path, color = 'blue'}: Props) => {
   return (
     <Link href={path} passHref>
-      <StyledA target="_blank">
+      <StyledA>
         <Text type={textSize} color={color}>
           {text}
         </Text>
diff --git a/src/components/view/datatable/item/owner.tsx b/src/components/view/datatable/item/owner.tsx
index d6d1a807..cf61fb23 100644
--- a/src/components/view/datatable/item/owner.tsx
+++ b/src/components/view/datatable/item/owner.tsx
@@ -29,7 +29,7 @@ export const Owner = ({publisher, publisherUsername}: Props) => {
     <Container>
       {publisher && publisher !== 'genesis' ? (
         <Tooltip content={renderTooltip()}>
-          <OwnerLink href={`/accounts/${publisher}`} target={'_blank'} rel={'noopener noreferrer'}>
+          <OwnerLink href={`/accounts/${publisher}`}>
             <OwnerText>{getDisplayUsername(publisher)}</OwnerText>
           </OwnerLink>
         </Tooltip>
diff --git a/src/components/view/datatable/item/publisher.tsx b/src/components/view/datatable/item/publisher.tsx
index 106e9c75..53f5aa18 100644
--- a/src/components/view/datatable/item/publisher.tsx
+++ b/src/components/view/datatable/item/publisher.tsx
@@ -27,21 +27,15 @@ export const Publisher = ({username, address}: Props) => {
 
   return address && address !== 'genesis' ? (
     <Tooltip content={renderTooltip()}>
-      <a href={`/accounts/${address}`} target={'_blank'} rel={'noopener noreferrer'}>
+      <PublisherLink className="ellipsis" href={`/accounts/${address}`}>
         {getDisplayUsername(address)}
-      </a>
+      </PublisherLink>
     </Tooltip>
   ) : (
     <>{getDisplayUsername()}</>
   );
 };
 
-const PublisherWrapper = styled.span`
-  & a {
-    color: ${({theme}) => theme.colors.blue};
-  }
-`;
-
 const TooltipWrapper = styled.span`
   & {
     display: flex;
@@ -54,3 +48,7 @@ const TooltipWrapper = styled.span`
     white-space: nowrap;
   }
 `;
+
+const PublisherLink = styled.a`
+  max-width: 128px;
+`;
diff --git a/src/components/view/datatable/item/realm-package.tsx b/src/components/view/datatable/item/realm-package.tsx
index dd7760b8..f029debd 100644
--- a/src/components/view/datatable/item/realm-package.tsx
+++ b/src/components/view/datatable/item/realm-package.tsx
@@ -1,16 +1,44 @@
-import Link from 'next/link';
+import Tooltip from '@/components/ui/tooltip';
 import React from 'react';
+import styled from 'styled-components';
 
 interface Props {
   packagePath: string;
+  maxWidth?: number;
 }
 
-export const RealmPakage = ({packagePath}: Props) => {
+export const RealmPakage = ({packagePath, maxWidth}: Props) => {
+  const displayPackagePath = packagePath.replace('gno.land', '');
+
   return (
-    <a href={`/realms/details?path=${packagePath}`} target={'_blank'} rel={'noopener noreferrer'}>
-      <span className="ellipsis link">
-        {packagePath ? packagePath.replace('gno.land', '') : '-'}
-      </span>
-    </a>
+    <Tooltip content={<TooltipContent packagePath={packagePath} />}>
+      <PackagePathLink
+        className="ellipsis"
+        maxWidth={maxWidth || 170}
+        href={`/realms/details?path=${packagePath}`}>
+        <span className="link">{displayPackagePath}</span>
+      </PackagePathLink>
+    </Tooltip>
   );
 };
+
+const PackagePathLink = styled.a<{maxWidth: number}>`
+  max-width: ${({maxWidth}) => `${maxWidth}px`};
+`;
+
+const TooltipContent: React.FC<{packagePath: string}> = ({packagePath}) => (
+  <TooltipWrapper>{packagePath}</TooltipWrapper>
+);
+
+const TooltipWrapper = styled.span`
+  & {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: auto;
+    justify-content: center;
+    align-items: center;
+    word-break: keep-all;
+    white-space: nowrap;
+  }
+`;
diff --git a/src/components/view/datatable/item/token-title.tsx b/src/components/view/datatable/item/token-title.tsx
index 1d5c90a3..f5f18986 100644
--- a/src/components/view/datatable/item/token-title.tsx
+++ b/src/components/view/datatable/item/token-title.tsx
@@ -13,7 +13,7 @@ interface Props {
 
 export const TokenTitle = ({name, symbol, pkgPath, imagePath}: Props) => {
   return (
-    <a href={`/tokens/${pkgPath}`} target={'_blank'} rel={'noopener noreferrer'}>
+    <a href={`/tokens/${pkgPath}`}>
       <TokenTitleWrapper>
         {imagePath && imagePath !== '' ? (
           <img className="token" src={imagePath} alt="token logo" />
diff --git a/src/components/view/datatable/item/tx-hash.tsx b/src/components/view/datatable/item/tx-hash.tsx
index 6eacb5e7..fb3ebbaa 100644
--- a/src/components/view/datatable/item/tx-hash.tsx
+++ b/src/components/view/datatable/item/tx-hash.tsx
@@ -4,6 +4,7 @@ import IconSuccess from '@/assets/svgs/icon-status-success.svg';
 import IconFail from '@/assets/svgs/icon-status-fail.svg';
 import {RPC_URI} from '@/common/values/constant-value';
 import {StatusKeyType} from '@/common/utils';
+import {textEllipsis} from '@/common/utils/string-util';
 
 interface Props {
   txHash: string;
@@ -22,12 +23,8 @@ export const TxHash = ({txHash, status, development, height}: Props) => {
 
   return (
     <TxHashWrapper>
-      <a
-        className="ellipsis"
-        href={`/transactions/${txHash}`}
-        target={'_blank'}
-        rel={'noopener noreferrer'}>
-        {txHash}
+      <a className="ellipsis" href={`/transactions/${txHash}`}>
+        {textEllipsis(txHash ?? '', 8)}
       </a>
       <span className="status" onClick={onClickIcon}>
         {status === 'failure' ? <IconFail /> : <IconSuccess />}
@@ -39,16 +36,20 @@ export const TxHash = ({txHash, status, development, height}: Props) => {
 const TxHashWrapper = styled.div`
   & {
     display: flex;
-    width: fit-content;
+    width: 100%;
     height: auto;
     justify-content: center;
     align-items: center;
 
+    a {
+      width: 100%;
+    }
+
     .status {
       display: flex;
-      padding: 0 16px;
       justify-content: center;
       align-items: center;
+      padding-right: 5px;
     }
   }
 `;
diff --git a/src/components/view/datatable/item/type.tsx b/src/components/view/datatable/item/type.tsx
index 31c63692..fc62ebda 100644
--- a/src/components/view/datatable/item/type.tsx
+++ b/src/components/view/datatable/item/type.tsx
@@ -26,8 +26,8 @@ export const Type = ({type, func, packagePath, msgNum}: Props) => {
 
   return func ? (
     <TypeWrapper>
-      <Tooltip content={renderTooltip()}>
-        <span className="function">{func}</span>
+      <Tooltip className={'ellipsis'} content={renderTooltip()}>
+        <span className="function ellipsis">{func}</span>
       </Tooltip>
       {msgNum && msgNum > 1 && (
         <Text type="p4" color="reverse" margin="0px 0px 0px 8px">
@@ -44,12 +44,14 @@ const TypeWrapper = styled.div`
   & {
     display: flex;
     width: fit-content;
+    max-width: 100%;
     height: auto;
     justify-content: center;
     align-items: center;
 
     .function {
-      display: flex;
+      display: block;
+      width: 100%;
       padding: 4px 16px;
       color: #fff;
       background-color: ${({theme}) => theme.colors.blue};
diff --git a/src/components/view/datatable/realm-detail/realm-detail.tsx b/src/components/view/datatable/realm-detail/realm-detail.tsx
index 3ff965fb..e1f8680e 100644
--- a/src/components/view/datatable/realm-detail/realm-detail.tsx
+++ b/src/components/view/datatable/realm-detail/realm-detail.tsx
@@ -119,7 +119,7 @@ export const RealmDetailDatatable = ({pkgPath}: Props) => {
     return DatatableOption.Builder.builder<RealmTransactionData>()
       .key('height')
       .name('Block')
-      .width(93)
+      .width(113)
       .colorName('blue')
       .renderOption(height => <DatatableItem.Block height={height} />)
       .build();
@@ -129,7 +129,7 @@ export const RealmDetailDatatable = ({pkgPath}: Props) => {
     return DatatableOption.Builder.builder<RealmTransactionData>()
       .key('caller_address')
       .name('From')
-      .width(160)
+      .width(170)
       .colorName('blue')
       .renderOption(address => <DatatableItem.Account address={address} />)
       .build();
@@ -139,8 +139,8 @@ export const RealmDetailDatatable = ({pkgPath}: Props) => {
     return DatatableOption.Builder.builder<RealmTransactionData>()
       .key('amount')
       .name('Amount')
-      .width(160)
-      .renderOption((amount: {value: number; denom: string}, data) =>
+      .width(190)
+      .renderOption((amount: {value: string; denom: string}, data) =>
         data.msg_num > 1 ? (
           <DatatableItem.HasLink text="More" path={`/transactions/${data.hash}`} />
         ) : (
@@ -154,7 +154,8 @@ export const RealmDetailDatatable = ({pkgPath}: Props) => {
     return DatatableOption.Builder.builder<RealmTransactionData>()
       .key('time')
       .name('Time')
-      .width(204)
+      .width(160)
+      .className('time')
       .renderOption(date => <DatatableItem.Date date={date} />)
       .build();
   };
@@ -163,7 +164,8 @@ export const RealmDetailDatatable = ({pkgPath}: Props) => {
     return DatatableOption.Builder.builder<RealmTransactionData>()
       .key('fee')
       .name('Fee')
-      .width(129)
+      .width(113)
+      .className('fee')
       .renderOption(fee => <DatatableItem.Amount value={fee.value} denom={fee.denom} />)
       .build();
   };
diff --git a/src/components/view/datatable/realm/realm.tsx b/src/components/view/datatable/realm/realm.tsx
index 68810d4b..f4fcde85 100644
--- a/src/components/view/datatable/realm/realm.tsx
+++ b/src/components/view/datatable/realm/realm.tsx
@@ -4,7 +4,6 @@ import React from 'react';
 import Datatable, {DatatableOption} from '@/components/ui/datatable';
 import usePageQuery from '@/common/hooks/use-page-query';
 import {DatatableItem} from '..';
-import Link from 'next/link';
 import {Button} from '@/components/ui/button';
 import styled from 'styled-components';
 import theme from '@/styles/theme';
@@ -32,6 +31,13 @@ interface ResponseData {
   realms: Array<Realms>;
 }
 
+const TOOLTIP_PATH = (
+  <>
+    A unique identifier that serves as
+    <br />a contract address on Gnoland.
+  </>
+);
+
 export const RealmDatatable = () => {
   const media = eachMedia();
   const themeMode = useRecoilValue(themeState);
@@ -69,7 +75,7 @@ export const RealmDatatable = () => {
       .key('name')
       .name('Name')
       .sort()
-      .width(172)
+      .width(174)
       .build();
   };
 
@@ -77,9 +83,12 @@ export const RealmDatatable = () => {
     return DatatableOption.Builder.builder<Realms>()
       .key('path')
       .name('Path')
-      .width(200)
+      .width(202)
       .colorName('blue')
-      .renderOption(packagePath => <DatatableItem.RealmPakage packagePath={packagePath} />)
+      .tooltip(TOOLTIP_PATH)
+      .renderOption(packagePath => (
+        <DatatableItem.RealmPakage packagePath={packagePath} maxWidth={186} />
+      ))
       .build();
   };
 
@@ -95,7 +104,7 @@ export const RealmDatatable = () => {
     return DatatableOption.Builder.builder<Realms>()
       .key('height')
       .name('Block')
-      .width(93)
+      .width(121)
       .colorName('blue')
       .renderOption(height => <DatatableItem.Block height={height} />)
       .build();
@@ -105,7 +114,7 @@ export const RealmDatatable = () => {
     return DatatableOption.Builder.builder<Realms>()
       .key('publisher')
       .name('Publisher')
-      .width(201)
+      .width(202)
       .colorName('blue')
       .renderOption((_, data) => (
         <DatatableItem.Publisher address={data.publisher} username={data.publisher_username} />
@@ -118,7 +127,7 @@ export const RealmDatatable = () => {
       .key('total_calls')
       .name('Total Calls')
       .sort()
-      .width(166)
+      .width(163)
       .renderOption(numberWithCommas)
       .build();
   };
@@ -127,7 +136,7 @@ export const RealmDatatable = () => {
     return DatatableOption.Builder.builder<Realms>()
       .key('total_fees')
       .name('Total Gas Used')
-      .width(166)
+      .width(163)
       .renderOption(fee => <DatatableItem.Amount value={fee.value} denom={fee.denom} />)
       .build();
   };
diff --git a/src/components/view/datatable/token-detail/token-detail.tsx b/src/components/view/datatable/token-detail/token-detail.tsx
index df86dd1c..531e699b 100644
--- a/src/components/view/datatable/token-detail/token-detail.tsx
+++ b/src/components/view/datatable/token-detail/token-detail.tsx
@@ -125,7 +125,7 @@ export const TokenDetailDatatable = ({path}: Props) => {
     return DatatableOption.Builder.builder<TokenTransactionData>()
       .key('height')
       .name('Block')
-      .width(93)
+      .width(113)
       .colorName('blue')
       .renderOption(height => <DatatableItem.Block height={height} />)
       .build();
@@ -135,7 +135,7 @@ export const TokenDetailDatatable = ({path}: Props) => {
     return DatatableOption.Builder.builder<TokenTransactionData>()
       .key('caller_address')
       .name('From')
-      .width(160)
+      .width(170)
       .colorName('blue')
       .renderOption(address => <DatatableItem.Account address={address} />)
       .build();
@@ -145,8 +145,8 @@ export const TokenDetailDatatable = ({path}: Props) => {
     return DatatableOption.Builder.builder<TokenTransactionData>()
       .key('amount')
       .name('Amount')
-      .width(160)
-      .renderOption((amount: {value: number; denom: string}, data) =>
+      .width(190)
+      .renderOption((amount: {value: string; denom: string}, data) =>
         data.msg_num > 1 ? (
           <DatatableItem.HasLink text="More" path={`/transactions/${data.tx_hash}`} />
         ) : (
@@ -163,7 +163,8 @@ export const TokenDetailDatatable = ({path}: Props) => {
     return DatatableOption.Builder.builder<TokenTransactionData>()
       .key('time')
       .name('Time')
-      .width(204)
+      .width(160)
+      .className('time')
       .renderOption(date => <DatatableItem.Date date={date} />)
       .build();
   };
@@ -172,7 +173,8 @@ export const TokenDetailDatatable = ({path}: Props) => {
     return DatatableOption.Builder.builder<TokenTransactionData>()
       .key('fee')
       .name('Fee')
-      .width(129)
+      .width(113)
+      .className('fee')
       .renderOption(fee => <DatatableItem.Amount value={fee.value} denom={fee.denom} />)
       .build();
   };
diff --git a/src/components/view/datatable/token/token.tsx b/src/components/view/datatable/token/token.tsx
index b971f007..eb4028fa 100644
--- a/src/components/view/datatable/token/token.tsx
+++ b/src/components/view/datatable/token/token.tsx
@@ -37,6 +37,13 @@ interface TokenData {
   publisher_username: string;
 }
 
+const TOOLTIP_PACAKGE_PATH = (
+  <>
+    A unique identifier that serves as
+    <br />a contract address on Gnoland.
+  </>
+);
+
 export const TokenDatatable = () => {
   const media = eachMedia();
   const themeMode = useRecoilValue(themeState);
@@ -80,7 +87,6 @@ export const TokenDatatable = () => {
     return [
       createHeaderToken(),
       createHeaderHolder(),
-      createHeaderOwner(),
       createHeaderFunction(),
       createHeaderDecimal(),
       createHeaderTotalSupply(),
@@ -92,7 +98,7 @@ export const TokenDatatable = () => {
     return DatatableOption.Builder.builder<TokenData>()
       .key('token')
       .name('Token')
-      .width(210)
+      .width(220)
       .renderOption((_, data) => (
         <DatatableItem.TokenTitle
           token={data.token}
@@ -109,31 +115,18 @@ export const TokenDatatable = () => {
     return DatatableOption.Builder.builder<TokenData>()
       .key('holders_count')
       .name('Holders')
-      .width(120)
+      .width(110)
       .renderOption(numberWithCommas)
       .build();
   };
 
-  const createHeaderOwner = () => {
-    return DatatableOption.Builder.builder<TokenData>()
-      .key('name')
-      .name('Owner')
-      .width(180)
-      .renderOption((_, data) => (
-        <DatatableItem.Owner
-          publisher={data.publisher}
-          publisherUsername={data.publisher_username}
-        />
-      ))
-      .build();
-  };
-
   const createHeaderFunction = () => {
     return DatatableOption.Builder.builder<TokenData>()
       .key('functions')
       .name('Functions')
-      .width(100)
-      .renderOption(functions => <DatatableItem.Functions funcLength={functions.length} />)
+      .width(350)
+      .className('functions')
+      .renderOption(functions => <DatatableItem.Functions functions={functions} />)
       .build();
   };
 
@@ -141,7 +134,7 @@ export const TokenDatatable = () => {
     return DatatableOption.Builder.builder<TokenData>()
       .key('decimals')
       .name('Decimals')
-      .width(100)
+      .width(110)
       .build();
   };
 
@@ -149,9 +142,14 @@ export const TokenDatatable = () => {
     return DatatableOption.Builder.builder<TokenData>()
       .key('total_supply')
       .name('Total Supply')
-      .width(188)
+      .width(180)
       .renderOption((_, data) => (
-        <DatatableItem.Amount value={data.total_supply} denom={''} maxSize="p4" minSize="body3" />
+        <DatatableItem.Amount
+          value={`${data.total_supply}`}
+          denom={''}
+          maxSize="p4"
+          minSize="body3"
+        />
       ))
       .build();
   };
@@ -159,9 +157,13 @@ export const TokenDatatable = () => {
   const createHeaderPkgPath = () => {
     return DatatableOption.Builder.builder<TokenData>()
       .key('pkg_path')
-      .name('Pkg Path')
-      .width(248)
-      .renderOption((_, data) => <DatatableItem.PkgPath pkgPath={data.pkg_path} />)
+      .name('Path')
+      .width(176)
+      .colorName('blue')
+      .tooltip(TOOLTIP_PACAKGE_PATH)
+      .renderOption((_, data) => (
+        <DatatableItem.RealmPakage packagePath={data.pkg_path} maxWidth={160} />
+      ))
       .build();
   };
 
diff --git a/src/components/view/datatable/transaction/transaction.tsx b/src/components/view/datatable/transaction/transaction.tsx
index 439bd5ce..3628f828 100644
--- a/src/components/view/datatable/transaction/transaction.tsx
+++ b/src/components/view/datatable/transaction/transaction.tsx
@@ -118,7 +118,7 @@ export const TransactionDatatable = () => {
     return DatatableOption.Builder.builder<TransactionData>()
       .key('hash')
       .name('Tx Hash')
-      .width(210)
+      .width(215)
       .colorName('blue')
       .renderOption((value, data) => (
         <DatatableItem.TxHash
@@ -154,7 +154,7 @@ export const TransactionDatatable = () => {
     return DatatableOption.Builder.builder<TransactionData>()
       .key('height')
       .name('Block')
-      .width(93)
+      .width(113)
       .colorName('blue')
       .renderOption(height => <DatatableItem.Block height={height} />)
       .build();
@@ -164,7 +164,7 @@ export const TransactionDatatable = () => {
     return DatatableOption.Builder.builder<TransactionData>()
       .key('from_address')
       .name('From')
-      .width(160)
+      .width(170)
       .colorName('blue')
       .renderOption((address, data) => (
         <DatatableItem.Publisher address={address} username={data?.from_username} />
@@ -176,7 +176,7 @@ export const TransactionDatatable = () => {
     return DatatableOption.Builder.builder<TransactionData>()
       .key('amount')
       .name('Amount')
-      .width(204)
+      .width(190)
       .renderOption((_, data) =>
         data.num_msgs > 1 ? (
           <DatatableItem.HasLink text="More" path={`/transactions/${data.hash}`} />
@@ -191,7 +191,8 @@ export const TransactionDatatable = () => {
     return DatatableOption.Builder.builder<TransactionData>()
       .key('time')
       .name('Time')
-      .width(204)
+      .width(160)
+      .className('time')
       .renderOption(date => <DatatableItem.Date date={date} />)
       .build();
   };
@@ -200,7 +201,8 @@ export const TransactionDatatable = () => {
     return DatatableOption.Builder.builder<TransactionData>()
       .key('fee')
       .name('Fee')
-      .width(129)
+      .width(113)
+      .className('fee')
       .renderOption(fee => <DatatableItem.Amount value={fee.value} denom={fee.denom} />)
       .build();
   };
diff --git a/src/components/view/footer/footer.tsx b/src/components/view/footer/footer.tsx
index a9dea00c..c510f548 100644
--- a/src/components/view/footer/footer.tsx
+++ b/src/components/view/footer/footer.tsx
@@ -51,7 +51,7 @@ const Copyright = ({isDesktop}: ModProps) => {
 const Terms = ({isDesktop}: ModProps) => (
   <FTextWrapper isDesktop={isDesktop}>
     {termsText.map((v, i) => (
-      <a className="hr-text" href={v.path} target="_blank" key={v1()}>
+      <a className="hr-text" href={v.path} key={v1()}>
         <Text type={isDesktop ? 'p4' : 'body1'} color="tertiary">
           {v.title}
         </Text>
diff --git a/src/components/view/main-active-list/active-account/active-account.tsx b/src/components/view/main-active-list/active-account/active-account.tsx
index 2c97ea05..7b64421e 100644
--- a/src/components/view/main-active-list/active-account/active-account.tsx
+++ b/src/components/view/main-active-list/active-account/active-account.tsx
@@ -49,7 +49,7 @@ const ActiveAccount = () => {
               </StyledText>
               <StyledText className="with-link" type="p4" width={colWidth.accounts[1]} color="blue">
                 <Link href={`/accounts/${v.address}`} passHref>
-                  <a target="_blank">
+                  <a>
                     <Tooltip content={v.address}>{v.account}</Tooltip>
                   </a>
                 </Link>
diff --git a/src/components/view/main-active-list/active-boards/active-boards.tsx b/src/components/view/main-active-list/active-boards/active-boards.tsx
index 71e9c307..04c237a3 100644
--- a/src/components/view/main-active-list/active-boards/active-boards.tsx
+++ b/src/components/view/main-active-list/active-boards/active-boards.tsx
@@ -40,7 +40,7 @@ const ActiveBoards = () => {
                 {v.no}
               </StyledText>
               <StyledText type="p4" width={colWidth.boards[1]} color="blue" className="with-link">
-                <a href={v.boardLink} target="_blank" rel="noreferrer">
+                <a href={v.boardLink}>
                   <Tooltip content={v.hovertext}>
                     <>
                       {v.formatName}
diff --git a/src/components/view/main-active-list/active-newest/active-newest.tsx b/src/components/view/main-active-list/active-newest/active-newest.tsx
index be29145d..d5f7aa25 100644
--- a/src/components/view/main-active-list/active-newest/active-newest.tsx
+++ b/src/components/view/main-active-list/active-newest/active-newest.tsx
@@ -41,14 +41,14 @@ const ActiveNewest = () => {
               </StyledText>
               <StyledText type="p4" width={colWidth.newest[1]} color="blue">
                 <Link href={`/realms/details?path=${v.originName}`}>
-                  <a target="_blank">
+                  <a>
                     <Tooltip content={v.originPkgName}>{v.formatName}</Tooltip>
                   </a>
                 </Link>
               </StyledText>
               <StyledText type="p4" width={colWidth.newest[2]} color="blue">
                 <Link href={`/accounts/${v.originAddress}`} passHref>
-                  <FitContentA target="_blank">
+                  <FitContentA>
                     <Tooltip content={v.originAddress}>{v.publisher}</Tooltip>
                   </FitContentA>
                 </Link>
@@ -61,7 +61,7 @@ const ActiveNewest = () => {
               </StyledText>
               <StyledText type="p4" width={colWidth.newest[5]} color="blue">
                 <Link href={`/blocks/${v.block}`} passHref>
-                  <FitContentA target="_blank">{v.block}</FitContentA>
+                  <FitContentA>{v.block}</FitContentA>
                 </Link>
               </StyledText>
             </List>
diff --git a/src/components/view/main-active-list/main-active-list.tsx b/src/components/view/main-active-list/main-active-list.tsx
index 25856c94..9574df98 100644
--- a/src/components/view/main-active-list/main-active-list.tsx
+++ b/src/components/view/main-active-list/main-active-list.tsx
@@ -74,7 +74,7 @@ export const StyledCard = styled(Card)`
   }
   .icon-link {
     stroke: ${({theme}) => theme.colors.reverse};
-    margin-left: 4px;
+    margin-left: 5px;
   }
 `;
 
diff --git a/src/components/view/main-realm/total-gas-share/total-gas-share-model.ts b/src/components/view/main-realm/total-gas-share/total-gas-share-model.ts
index 071abf67..d30da41b 100644
--- a/src/components/view/main-realm/total-gas-share/total-gas-share-model.ts
+++ b/src/components/view/main-realm/total-gas-share/total-gas-share-model.ts
@@ -1,4 +1,5 @@
 import {ValueWithDenomType} from '@/types/data-type';
+import BigNumber from 'bignumber.js';
 
 interface TotalGasShareData {
   date: string;
@@ -109,8 +110,8 @@ export class TotalGasShareModel {
         const currentData = result.find(data => data.packagePath === currentPackagePath);
 
         accum[currentPackagePath][dateIndex] = {
-          value: currentData?.packageDailyFee ?? 0,
-          rate: currentData?.percent ?? 0,
+          value: currentData?.packageDailyFee || 0,
+          rate: currentData?.percent || 0,
         };
       }
       return accum;
@@ -136,9 +137,9 @@ export class TotalGasShareModel {
       return {
         date: date ?? '',
         packagePath: `${item.path}`.replace('gno.land', ''),
-        packageDailyFee: item.daily_fee ?? 0,
-        totalDailyFee: daily_total_fee.value ?? 0,
-        percent: item.percent ?? 0,
+        packageDailyFee: BigNumber(item.daily_fee || 0).toNumber(),
+        totalDailyFee: BigNumber(daily_total_fee.value || 0).toNumber(),
+        percent: BigNumber(item.percent || 0).toNumber(),
       };
     });
   };
diff --git a/src/components/view/main-transaction-news/total-daily-fee/total-daily-fee-model.ts b/src/components/view/main-transaction-news/total-daily-fee/total-daily-fee-model.ts
index 7da4ded7..8a971cc7 100644
--- a/src/components/view/main-transaction-news/total-daily-fee/total-daily-fee-model.ts
+++ b/src/components/view/main-transaction-news/total-daily-fee/total-daily-fee-model.ts
@@ -1,4 +1,5 @@
 import {ValueWithDenomType} from '@/types/data-type';
+import BigNumber from 'bignumber.js';
 
 interface TotalDailyFeeData {
   date: string;
@@ -41,10 +42,10 @@ export class TotalDailyFeeModel {
     date?: string;
     fee?: ValueWithDenomType;
   }): TotalDailyFeeData => {
-    const gasFee = fee?.value ?? 0;
+    const gasFee = fee?.value || '0';
     return {
       date: date ?? '',
-      fee: gasFee,
+      fee: new BigNumber(gasFee).toNumber(),
     };
   };
 }
diff --git a/src/components/view/main-transaction-news/total-transaction/total-transaction-model.ts b/src/components/view/main-transaction-news/total-transaction/total-transaction-model.ts
index c4b43bb3..43f4e461 100644
--- a/src/components/view/main-transaction-news/total-transaction/total-transaction-model.ts
+++ b/src/components/view/main-transaction-news/total-transaction/total-transaction-model.ts
@@ -41,7 +41,7 @@ export class TotalTransactionModel {
   }): TotalTransactionData => {
     return {
       date: date ?? '',
-      transactionCount: num_txs ?? 0,
+      transactionCount: num_txs || 0,
     };
   };
 }
diff --git a/src/models/block-details-model.ts b/src/models/block-details-model.ts
index f88956d4..7b92110c 100644
--- a/src/models/block-details-model.ts
+++ b/src/models/block-details-model.ts
@@ -9,4 +9,5 @@ export interface BlockDetailsModel {
   address: string;
   prev: boolean;
   next: boolean;
+  hash: string;
 }
diff --git a/src/pages/accounts/[address].tsx b/src/pages/accounts/[address].tsx
index 2fababad..4a4fb78a 100644
--- a/src/pages/accounts/[address].tsx
+++ b/src/pages/accounts/[address].tsx
@@ -66,7 +66,7 @@ const AccountDetails = () => {
                 trigger="click"
                 copyText={detail?.address}
                 width={85}>
-                <IconCopy className="svg-icon" />
+                <IconCopy className={`svg-icon ${detail.username ? '' : 'tidy'}`} />
               </Tooltip>
               {detail.username && (
                 <Text type="p4" color="blue" className="username-text">
@@ -121,7 +121,7 @@ const AddressTextBox = styled(Text)<StyleProps>`
   }
   .svg-icon {
     stroke: ${({theme}) => theme.colors.primary};
-    margin-left: 10px;
+    margin-left: 5px;
   }
   .username-text {
     ${mixins.flexbox('row', 'center', 'center', false)};
diff --git a/src/pages/blocks/[height].tsx b/src/pages/blocks/[height].tsx
index f2fc90ed..977d0f4a 100644
--- a/src/pages/blocks/[height].tsx
+++ b/src/pages/blocks/[height].tsx
@@ -9,10 +9,6 @@ import IconArrow from '@/assets/svgs/icon-arrow.svg';
 import {isDesktop} from '@/common/hooks/use-media';
 import {useRouter} from 'next/router';
 import {useQuery, UseQueryResult} from 'react-query';
-import axios from 'axios';
-import dayjs from 'dayjs';
-import {numberWithCommas} from '@/common/utils';
-import {getDateDiff, getLocalDateString} from '@/common/utils/date-util';
 import Text from '@/components/ui/text';
 import {DateDiffText, DLWrap, FitContentA} from '@/components/ui/detail-page-common-styles';
 import DataSection from '@/components/view/details-data-section';
@@ -22,6 +18,7 @@ import {BlockDetailDatatable} from '@/components/view/datatable';
 import {BlockDetailsModel} from '@/models/block-details-model';
 import {getBlockDetails} from '@/repositories/api/fetchers/api-block-details';
 import {blockDetailSelector} from '@/repositories/api/selector/select-block-details';
+import IconCopy from '@/assets/svgs/icon-copy.svg';
 
 interface TitleOptionProps {
   prevProps: {
@@ -166,4 +163,9 @@ const ArrowButton = styled.a<ButtonProps>`
   }
 `;
 
+const StyledIconCopy = styled(IconCopy)`
+  stroke: ${({theme}) => theme.colors.primary};
+  margin-left: 5px;
+`;
+
 export default BlockDetails;
diff --git a/src/pages/realms/details.tsx b/src/pages/realms/details.tsx
index 3b8b215b..8dd472aa 100644
--- a/src/pages/realms/details.tsx
+++ b/src/pages/realms/details.tsx
@@ -15,6 +15,16 @@ import {RealmDetailDatatable} from '@/components/view/datatable';
 import {RealmDetailsModel} from '@/models/realm-details-model';
 import {getRealmDetails} from '@/repositories/api/fetchers/api-realm-details';
 import {realmDetailSelector} from '@/repositories/api/selector/select-realm-details';
+import Tooltip from '@/components/ui/tooltip';
+import IconTooltip from '@/assets/svgs/icon-tooltip.svg';
+import IconCopy from '@/assets/svgs/icon-copy.svg';
+
+const TOOLTIP_PACKAGE_PATH = (
+  <>
+    A unique identifier that serves as
+    <br />a contract address on Gnoland.
+  </>
+);
 
 const RealmsDetails = () => {
   const desktop = isDesktop();
@@ -105,9 +115,26 @@ const RealmsDetails = () => {
               </dd>
             </DLWrap>
             <DLWrap desktop={desktop}>
-              <dt>Path</dt>
+              <dt>
+                Path
+                <div className="tooltip-wrapper">
+                  <Tooltip content={TOOLTIP_PACKAGE_PATH}>
+                    <IconTooltip />
+                  </Tooltip>
+                </div>
+              </dt>
               <dd>
-                <Badge>{realm.path}</Badge>
+                <Badge>
+                  {realm.path}
+                  <Tooltip
+                    className="path-copy-tooltip"
+                    content="Copied!"
+                    trigger="click"
+                    copyText={realm.path}
+                    width={85}>
+                    <IconCopy className="svg-icon" />
+                  </Tooltip>
+                </Badge>
               </dd>
             </DLWrap>
             <DLWrap desktop={desktop}>
diff --git a/src/pages/tokens/[...path].tsx b/src/pages/tokens/[...path].tsx
index 2935cac5..a8c87d9c 100644
--- a/src/pages/tokens/[...path].tsx
+++ b/src/pages/tokens/[...path].tsx
@@ -14,6 +14,18 @@ import {TokenDetailDatatable} from '@/components/view/datatable';
 import {getTokenDetails} from '@/repositories/api/fetchers/api-token-details';
 import {tokenDetailSelector} from '@/repositories/api/selector/select-token-details';
 import {TokenDetailsModel} from '@/models/token-details-model';
+import Tooltip from '@/components/ui/tooltip';
+import IconTooltip from '@/assets/svgs/icon-tooltip.svg';
+import IconCopy from '@/assets/svgs/icon-copy.svg';
+import styled from 'styled-components';
+import mixins from '@/styles/mixins';
+
+const TOOLTIP_PACKAGE_PATH = (
+  <>
+    A unique identifier that serves as
+    <br />a contract address on Gnoland.
+  </>
+);
 
 const TokenDetails = () => {
   const desktop = isDesktop();
@@ -68,9 +80,30 @@ const TokenDetails = () => {
               </dd>
             </DLWrap>
             <DLWrap desktop={desktop}>
-              <dt>Path</dt>
+              <dt>
+                Path
+                <div className="tooltip-wrapper">
+                  <Tooltip content={TOOLTIP_PACKAGE_PATH}>
+                    <IconTooltip />
+                  </Tooltip>
+                </div>
+              </dt>
               <dd>
-                <Badge>{token.pkgPath}</Badge>
+                <Badge>
+                  <Text type="p4" color="blue" className="username-text">
+                    <StyledA href={`/realms/details?path=${token.pkgPath}`}>
+                      {token.pkgPath}
+                    </StyledA>
+                  </Text>
+                  <Tooltip
+                    className="path-copy-tooltip"
+                    content="Copied!"
+                    trigger="click"
+                    copyText={token.pkgPath}
+                    width={85}>
+                    <IconCopy className="svg-icon" />
+                  </Tooltip>
+                </Badge>
               </dd>
             </DLWrap>
             <DLWrap desktop={desktop}>
@@ -123,4 +156,8 @@ const TokenDetails = () => {
   );
 };
 
+const StyledA = styled.a`
+  ${mixins.flexbox('row', 'center', 'center')};
+`;
+
 export default TokenDetails;
diff --git a/src/pages/transactions/[hash].tsx b/src/pages/transactions/[...hash].tsx
similarity index 98%
rename from src/pages/transactions/[hash].tsx
rename to src/pages/transactions/[...hash].tsx
index 257cef9d..539a12b3 100644
--- a/src/pages/transactions/[hash].tsx
+++ b/src/pages/transactions/[...hash].tsx
@@ -19,7 +19,7 @@ import {TransactionDetailsModel} from '@/models/transaction-details-model';
 import {getTransactionDetails} from '@/repositories/api/fetchers/api-transaction-details';
 import {transactionDetailSelector} from '@/repositories/api/selector/select-transaction-details';
 
-const ellipsisTextKey = ['Caller', 'Body'];
+const ellipsisTextKey = ['Caller'];
 
 const TransactionDetails = () => {
   const desktop = isDesktop();
@@ -131,7 +131,7 @@ const TransactionDetails = () => {
             {tx.contract.contract_list.map((v: any, i: number) => (
               <ContractListBox key={v1()}>
                 {tx.contract.num_msgs > 1 && (
-                  <Text type="h6" color="tertiary" margin="0px 0px 12px">{`#${i + 1}`}</Text>
+                  <Text type="h6" color="white" margin="0px 0px 12px">{`#${i + 1}`}</Text>
                 )}
                 <DLWrap desktop={desktop}>
                   <dt>Type</dt>
@@ -177,7 +177,7 @@ const CallerContract = ({contract, desktop}: any) => {
                     <Text
                       type="p4"
                       color="blue"
-                      className={ellipsisTextKey.includes(v) ? 'ellipsis' : ''}>
+                      className={ellipsisTextKey.includes(v) ? 'ellipsis' : 'multi-line'}>
                       {contract.args.data[v] ? (
                         <Tooltip content={contract.caller_address}>{contract.args.data[v]}</Tooltip>
                       ) : (
@@ -197,7 +197,7 @@ const CallerContract = ({contract, desktop}: any) => {
                 <Text
                   type="p4"
                   color="inherit"
-                  className={ellipsisTextKey.includes(v) ? 'ellipsis' : ''}>
+                  className={ellipsisTextKey.includes(v) ? 'ellipsis' : 'multi-line'}>
                   {contract.args.data[v] || '-'}
                 </Text>
               </Badge>
@@ -326,7 +326,7 @@ const AddressTextBox = styled.div`
 
 const StyledIconCopy = styled(IconCopy)`
   stroke: ${({theme}) => theme.colors.primary};
-  margin-left: 10px;
+  margin-left: 5px;
 `;
 
 export default TransactionDetails;
diff --git a/src/repositories/api/fetchers/api-transaction-details.ts b/src/repositories/api/fetchers/api-transaction-details.ts
index b002be61..43de1be5 100644
--- a/src/repositories/api/fetchers/api-transaction-details.ts
+++ b/src/repositories/api/fetchers/api-transaction-details.ts
@@ -2,7 +2,7 @@ import axios, {AxiosResponse} from 'axios';
 import {API_URI, API_VERSION} from '@/common/values/constant-value';
 
 export const getTransactionDetails = async (
-  hash: string | any,
+  hash: string[] | any,
 ): Promise<AxiosResponse<any, any>> => {
-  return await axios.get(API_URI + API_VERSION + `/tx/${hash}`);
+  return await axios.get(API_URI + API_VERSION + `/tx/${hash.join('/')}`);
 };
diff --git a/src/repositories/api/selector/select-realm-details.ts b/src/repositories/api/selector/select-realm-details.ts
index 13a06d9f..58fa2eb9 100644
--- a/src/repositories/api/selector/select-realm-details.ts
+++ b/src/repositories/api/selector/select-realm-details.ts
@@ -10,7 +10,7 @@ export const realmDetailSelector = (data: any) => {
     path: data.path,
     ContractCalls: data.total_calls,
     totalUsedFee: {
-      value: BigNumber(data.total_used_fees?.value ?? 0),
+      value: BigNumber(data.total_used_fees?.value || '0'),
       denom: `${data.total_used_fees?.denom ?? ''}`.toUpperCase(),
     },
     log: {
diff --git a/src/types/data-type.ts b/src/types/data-type.ts
index 104336b2..8d61e702 100644
--- a/src/types/data-type.ts
+++ b/src/types/data-type.ts
@@ -1,4 +1,4 @@
 export interface ValueWithDenomType {
-  value: number;
+  value: string;
   denom: string;
 }