Release 2021.09.21 (#1744)

- SOV margin trading (long)
- swaps external
- origin fish withdrawal from unlocked vestings
- rdoc in portfolio page
- sov/esov deposit / withdraw over bridge

src/app/components/AssetRenderer/index.tsx

@@ -3,7 +3,7 @@ import cn from 'classnames';
 
 import { Asset } from 'types/asset';
 import { AssetsDictionary } from 'utils/dictionaries/assets-dictionary';
-import { AssetSymbolRenderer } from '../AssetSymbolRenderer/index';
+import { AssetSymbolRenderer } from '../AssetSymbolRenderer';
 
 type ImageSizes = 4 | 5 | 6 | 8 | 12;
 

src/app/components/AssetSymbolRenderer/index.tsx

@@ -24,6 +24,11 @@ const symbolMap = {
       BNB<em>S</em>
     </>
   ),
+  [Asset.RDOC]: (
+    <>
+      <em>R</em>DOC
+    </>
+  ),
 };
 
 export function getAssetSymbol(asset: Asset) {

src/app/components/CurrentPositionProfit/index.tsx

@@ -3,16 +3,15 @@ import { useTranslation } from 'react-i18next';
 import { translations } from 'locales/i18n';
 import { Asset } from 'types/asset';
 import {
-  numberToUSD,
   toNumberFormat,
   weiToNumberFormat,
+  weiToUSD,
 } from 'utils/display-text/format';
 import { useCurrentPositionPrice } from 'app/hooks/trading/useCurrentPositionPrice';
 import { LoadableValue } from '../LoadableValue';
 import { bignumber } from 'mathjs';
 import { AssetRenderer } from '../AssetRenderer';
 import { useGetProfitDollarValue } from 'app/hooks/trading/useGetProfitDollarValue';
-import { weiToFixed } from 'utils/blockchain/math-helpers';
 
 interface Props {
   source: Asset;
@@ -105,7 +104,7 @@ export function CurrentPositionProfit({
               </div>
               ≈{' '}
               <LoadableValue
-                value={numberToUSD(Number(weiToFixed(dollarValue, 4)), 4)}
+                value={weiToUSD(dollarValue)}
                 loading={dollarsLoading}
               />
             </span>

src/app/components/Pagination/index.module.scss

@@ -0,0 +1,7 @@
+.pageButton {
+  @apply tw-flex tw-justify-center tw-items-center
+      tw-h-9 tw-min-w-9 tw-p-0 tw-mx-0.5
+      tw-font-medium tw-text-lg tw-text-center tw-text-white
+      tw-bg-transparent hover:tw-bg-secondary tw-border-0 tw-rounded-full
+      tw-transition-colors tw-duration-300;
+}

src/app/components/Pagination/index.stories.tsx

@@ -0,0 +1,20 @@
+import React, { ComponentProps } from 'react';
+import { Story } from '@storybook/react';
+
+import { Pagination } from './index';
+
+export default {
+  title: 'Atoms/Pagination',
+  component: Pagination,
+};
+
+const Template: Story<ComponentProps<typeof Pagination>> = args => (
+  <Pagination {...args} />
+);
+
+export const Basic = Template.bind({});
+Basic.args = {
+  totalRecords: 10,
+  pageLimit: 1,
+  pageNeighbours: 1,
+};

src/app/components/Pagination/index.tsx

@@ -1,6 +1,12 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import styled from 'styled-components/macro';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import classNames from 'classnames';
 import iconBack from 'assets/images/genesis/arrow_back.svg';
+import {
+  generatePageNumbers,
+  PAGINATION_LEFT_PAGE,
+  PAGINATION_RIGHT_PAGE,
+} from './index.utils';
+import styles from './index.module.scss';
 
 interface ChangeEvent {
   currentPage: number;
@@ -9,117 +15,43 @@ interface ChangeEvent {
   totalRecords: number;
 }
 
-interface Props {
+interface IPaginationProps {
   totalRecords: number;
   pageLimit: number;
   pageNeighbours: number;
   onChange: (value: ChangeEvent) => void;
   className?: string;
 }
 
-export function Pagination(props: Props) {
+export const Pagination: React.FC<IPaginationProps> = ({
+  totalRecords,
+  pageLimit,
+  pageNeighbours,
+  onChange,
+  className,
+}) => {
   const [mount, setMount] = useState(false);
-  const totalPages = Math.ceil(props.totalRecords / props.pageLimit);
+  const totalPages = useMemo(() => Math.ceil(totalRecords / pageLimit), [
+    totalRecords,
+    pageLimit,
+  ]);
   const [currentPage, setCurrentPage] = useState<number>(1);
-  const LEFT_PAGE = 'LEFT';
-  const RIGHT_PAGE = 'RIGHT';
 
-  /**
-   * Helper method for creating a range of numbers
-   * range(1, 5) => [1, 2, 3, 4, 5]
-   */
-  const range = (from: number, to: number, step = 1) => {
-    let i = from;
-    const range: number[] = [];
-
-    while (i <= to) {
-      range.push(i);
-      i += step;
-    }
-
-    return range;
-  };
-
-  /**
-   * Let's say we have 10 pages and we set pageNeighbours to 2
-   * Given that the current page is 6
-   * The pagination control will look like the following:
-   *
-   * (1) < {4 5} [6] {7 8} > (10)
-   *
-   * (x) => terminal pages: first and last page(always visible)
-   * [x] => represents current page
-   * {...x} => represents page neighbours
-   */
-
-  const fetchPageNumbers = () => {
-    const pageNeighbours = props.pageNeighbours;
-    /**
-     * totalNumbers: the total page numbers to show on the control
-     * totalBlocks: totalNumbers + 2 to cover for the left(<) and right(>) controls
-     */
-    const totalNumbers = pageNeighbours * 2 + 3;
-    const totalBlocks = totalNumbers + 2;
-
-    if (totalPages > totalBlocks) {
-      const startPage = Math.max(2, currentPage - pageNeighbours);
-      const endPage = Math.min(totalPages - 1, currentPage + pageNeighbours);
-      let pages: (string | number)[] = range(startPage, endPage);
-
-      /**
-       * hasLeftSpill: has hidden pages to the left
-       * hasRightSpill: has hidden pages to the right
-       * spillOffset: number of hidden pages either to the left or to the right
-       */
-      const hasLeftSpill = startPage > 2;
-      const hasRightSpill = totalPages - endPage > 1;
-      const spillOffset = totalNumbers - (pages.length + 1);
-
-      switch (true) {
-        // handle: (1) < {5 6} [7] {8 9} (10)
-        case hasLeftSpill && !hasRightSpill: {
-          const extraPages = range(startPage - spillOffset, startPage - 1);
-          pages = [LEFT_PAGE, ...extraPages, ...pages];
-          break;
-        }
-
-        // handle: (1) {2 3} [4] {5 6} > (10)
-        case !hasLeftSpill && hasRightSpill: {
-          const extraPages = range(endPage + 1, endPage + spillOffset);
-          pages = [...pages, ...extraPages, RIGHT_PAGE];
-          break;
-        }
-
-        // handle: (1) < {4 5} [6] {7 8} > (10)
-        case hasLeftSpill && hasRightSpill:
-        default: {
-          pages = [LEFT_PAGE, ...pages, RIGHT_PAGE];
-          break;
-        }
-      }
-
-      return [1, ...pages, totalPages];
-    }
-
-    return range(1, totalPages);
-  };
-
-  const pages = fetchPageNumbers();
+  const pages = generatePageNumbers(currentPage, totalPages, pageNeighbours);
 
   const gotoPage = useCallback(
     page => {
-      const { onChange = f => f } = props;
       const currentPage = Math.max(0, Math.min(page, totalPages));
       setCurrentPage(currentPage);
       const paginationData = {
         currentPage,
         totalPages: totalPages,
-        pageLimit: props.pageLimit,
-        totalRecords: props.totalRecords,
+        pageLimit: pageLimit,
+        totalRecords: totalRecords,
       };
       onChange(paginationData);
     },
-    [props, totalPages],
+    [totalPages, pageLimit, totalRecords, onChange],
   );
 
   useEffect(() => {
@@ -129,112 +61,83 @@ export function Pagination(props: Props) {
     }
   }, [totalPages, gotoPage, mount]);
 
-  if (!props.totalRecords || totalPages === 1) return null;
+  const handleClick = useCallback(
+    page => evt => {
+      evt.preventDefault();
+      gotoPage(page);
+    },
+    [gotoPage],
+  );
 
-  const handleClick = page => evt => {
-    evt.preventDefault();
-    gotoPage(page);
-  };
+  const handleMoveLeft = useCallback(
+    evt => {
+      evt.preventDefault();
+      gotoPage(currentPage - pageNeighbours * 2 - 1);
+    },
+    [currentPage, pageNeighbours, gotoPage],
+  );
 
-  const handleMoveLeft = evt => {
-    evt.preventDefault();
-    gotoPage(currentPage - props.pageNeighbours * 2 - 1);
-  };
+  const handleMoveRight = useCallback(
+    evt => {
+      evt.preventDefault();
+      gotoPage(currentPage + pageNeighbours * 2 + 1);
+    },
+    [currentPage, pageNeighbours, gotoPage],
+  );
 
-  const handleMoveRight = evt => {
-    evt.preventDefault();
-    gotoPage(currentPage + props.pageNeighbours * 2 + 1);
-  };
+  if (!totalRecords || totalPages === 1) return null;
 
   return (
     <>
-      <nav className={props.className} aria-label="Pagination">
-        <StyledList>
+      <nav className={className} aria-label="Pagination">
+        <ul className="tw-flex tw-justify-center tw-items-center tw-mt-6 tw-mb-0">
           {pages.map((page, index) => {
-            if (page === LEFT_PAGE)
+            if (page === PAGINATION_LEFT_PAGE)
               return (
-                <li key={index + 'pagination'} className="page-item">
-                  <a
-                    className="page-link"
-                    href="#!"
-                    aria-label="Previous"
+                <li key={page}>
+                  <button
+                    className={styles.pageButton}
+                    aria-label="Previous Page"
                     onClick={handleMoveLeft}
                   >
-                    <img src={iconBack} alt="Previous" />
+                    <img className="tw-max-w-8" src={iconBack} alt="Previous" />
                     <span className="tw-sr-only">Previous</span>
-                  </a>
+                  </button>
                 </li>
               );
-            if (page === RIGHT_PAGE)
+            if (page === PAGINATION_RIGHT_PAGE)
               return (
-                <li key={index} className="page-item">
-                  <a
-                    className="page-link"
-                    href="#!"
-                    aria-label="Next"
+                <li key={page}>
+                  <button
+                    className={styles.pageButton}
+                    aria-label="Next Page"
                     onClick={handleMoveRight}
                   >
-                    <img src={iconBack} className="icon-rotated" alt="Next" />
+                    <img
+                      src={iconBack}
+                      className="tw-max-w-8 tw-transform tw-rotate-180"
+                      alt="Next"
+                    />
                     <span className="tw-sr-only">Next</span>
-                  </a>
+                  </button>
                 </li>
               );
             return (
-              <li
-                key={index}
-                className={`page-item${currentPage === page ? ' active' : ''}`}
-              >
-                <a className="page-link" href="#!" onClick={handleClick(page)}>
+              <li key={page}>
+                <button
+                  className={classNames(
+                    styles.pageButton,
+                    currentPage === page && 'tw-bg-secondary',
+                  )}
+                  onClick={handleClick(page)}
+                >
                   {page}
-                </a>
+                </button>
               </li>
             );
           })}
-        </StyledList>
+        </ul>
       </nav>
     </>
   );
-}
-
-const StyledList = styled.ul.attrs(_ => ({
-  className: 'pagination',
-}))`
-  margin-top: 1.5rem;
-  justify-content: center;
-  display: flex;
-  align-items: center;
-  margin-bottom: 0;
-  li.page-item.active a.page-link {
-    background-color: #2274a5;
-  }
-  .page-item:last-child .page-link,
-  .page-item:first-child .page-link {
-    border-radius: 50%;
-  }
-  .page-link {
-    padding: 0;
-    min-height: 35px;
-    min-width: 35px;
-    text-align: center;
-    color: white;
-    align-items: center;
-    justify-content: center;
-    display: flex;
-    font-weight: 500;
-    font-size: 1.125rem;
-    border: none;
-    background: transparent;
-    margin: 0 0.1rem;
-    transition: all 0.3s;
-    border-radius: 50%;
-    &:hover {
-      background-color: #2274a5;
-    }
-    img {
-      max-width: 32px;
-    }
-  }
-  .icon-rotated {
-    transform: rotate(180deg);
-  }
-`;
+};