Release v0.3.2 to Main (#73)

onbloc · Jul 21, 2023 · 685a97d · 685a97d
1 parent b2e9293
commit 685a97d
Show file tree

Hide file tree

Showing 48 changed files with 390 additions and 174 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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();