bug fixes and translations

DistributedCollective · Dec 18, 2020 · 7f67c5e · 7f67c5e
1 parent b610241
commit 7f67c5e
Show file tree

Hide file tree

Showing 17 changed files with 127 additions and 85 deletions.
diff --git a/src/app/components/ActiveBorrowTable/index.tsx b/src/app/components/ActiveBorrowTable/index.tsx
@@ -11,34 +11,40 @@ import { InterestAPR } from '../ActiveUserLoanContainer/components/InterestAPR';
 import { DisplayDate } from '../ActiveUserLoanContainer/components/DisplayDate';
 import { BorrowAmount } from './BorrowAmount';
 import { CollateralAmount } from './CollateralAmount';
+import { useTranslation } from 'react-i18next';
+import { translations } from '../../../locales/i18n';
 
 interface Props {
   data: any;
 }
 
 export function ActiveBorrowTable(props: Props) {
   const dispatch = useDispatch();
+  const { t } = useTranslation();
   const columns = React.useMemo(
     () => [
       {
-        Header: 'Borrowed',
+        Header: t(translations.activeBorrowTable.headers.borrowAmount),
         accessor: 'borrowAmount',
         sortType: 'alphanumeric',
+        headerProps: {
+          className: 'test',
+        },
         sortable: true,
       },
       {
-        Header: 'Collateral',
+        Header: t(translations.activeBorrowTable.headers.collateralAmount),
         accessor: 'collateralAmount',
         sortType: 'alphanumeric',
         sortable: true,
       },
       {
-        Header: 'Interest APR',
+        Header: t(translations.activeBorrowTable.headers.interestAPR),
         accessor: 'interestAPR',
         sortable: true,
       },
       {
-        Header: 'Payback until',
+        Header: t(translations.activeBorrowTable.headers.endTimestamp),
         accessor: 'endTimestamp',
         sortable: true,
       },
@@ -47,7 +53,7 @@ export function ActiveBorrowTable(props: Props) {
         accessor: 'actions',
       },
     ],
-    [],
+    [t],
   );
   const data = React.useMemo(() => {
     return props.data.map(item => {
@@ -83,14 +89,14 @@ export function ActiveBorrowTable(props: Props) {
               <StyledRepayButton
                 onClick={() => dispatch(actions.openRepayModal(item.loanId))}
               >
-                Repay
+                {t(translations.activeBorrowTable.repayButton)}
               </StyledRepayButton>
             </div>
           </div>
         ),
       };
     });
-  }, [props.data, dispatch]);
+  }, [props.data, dispatch, t]);
   const {
     getTableProps,
     getTableBodyProps,
@@ -99,7 +105,7 @@ export function ActiveBorrowTable(props: Props) {
     prepareRow,
   } = useTable({ columns, data }, useSortBy);
   return (
-    <div className="bg-primary sovryn-border p-3">
+    <div className="bg-primary sovryn-border p-3 table-responsive">
       <table {...getTableProps()} className="sovryn-table">
         <thead>
           {headerGroups.map(headerGroup => (

diff --git a/src/app/components/BorrowInterestRate/index.tsx b/src/app/components/BorrowInterestRate/index.tsx
@@ -12,6 +12,8 @@ import { usePriceFeeds_QueryRate } from 'app/hooks/price-feeds/useQueryRate';
 import { LoadableValue } from '../LoadableValue';
 import { FieldGroup } from '../FieldGroup';
 import { DummyField } from '../DummyField';
+import { useTranslation } from 'react-i18next';
+import { translations } from '../../../locales/i18n';
 
 interface Props {
   asset: Asset;
@@ -22,6 +24,7 @@ interface Props {
 }
 
 export function BorrowInterestRate(props: Props) {
+  const { t } = useTranslation();
   const { value: result } = usePriceFeeds_QueryRate(
     props.collateral,
     props.asset,
@@ -63,7 +66,10 @@ export function BorrowInterestRate(props: Props) {
   );
 
   return (
-    <FieldGroup label="Interest APR" labelColor={props.labelColor}>
+    <FieldGroup
+      label={t(translations.global.interestApr)}
+      labelColor={props.labelColor}
+    >
       <DummyField>
         <LoadableValue
           value={

diff --git a/src/app/components/BorrowLiquidationPrice/index.tsx b/src/app/components/BorrowLiquidationPrice/index.tsx
@@ -12,6 +12,8 @@ import { useBorrowLiquidationPrice } from 'app/hooks/trading/useBorrowLiquidatio
 import { LoadableValue } from '../LoadableValue';
 import { FieldGroup } from '../FieldGroup';
 import { DummyField } from '../DummyField';
+import { useTranslation } from 'react-i18next';
+import { translations } from '../../../locales/i18n';
 
 interface Props {
   asset: Asset;
@@ -21,6 +23,7 @@ interface Props {
 }
 
 export function BorrowLiquidationPrice(props: Props) {
+  const { t } = useTranslation();
   const { value: price, loading: loadingPrice } = useBorrowAssetPrice(
     props.asset,
     Asset.DOC,
@@ -32,7 +35,10 @@ export function BorrowLiquidationPrice(props: Props) {
     props.position,
   );
   return (
-    <FieldGroup label="Liquidation Price" labelColor={props.labelColor}>
+    <FieldGroup
+      label={t(translations.global.liquidationPrice)}
+      labelColor={props.labelColor}
+    >
       <DummyField>
         <LoadableValue
           value={

diff --git a/src/app/components/LoanTokenGraphs/index.tsx b/src/app/components/LoanTokenGraphs/index.tsx
@@ -20,6 +20,8 @@ import { useSelector } from 'react-redux';
 import { selectWalletProvider } from '../../containers/WalletProvider/selectors';
 import { databaseRpcNodes } from '../../../utils/classifiers';
 import { getLendingContract } from '../../../utils/blockchain/contract-helpers';
+import { translations } from '../../../locales/i18n';
+import { useTranslation } from 'react-i18next';
 
 interface DataItem {
   date: Date;
@@ -86,6 +88,7 @@ interface BarsProps {
 }
 
 function BarsGraph({ width, asset, data }: BarsProps) {
+  const { t } = useTranslation();
   const [activeStep, setActiveStap] = useState<number>(null as any);
 
   const height = 115;
@@ -175,8 +178,8 @@ function BarsGraph({ width, asset, data }: BarsProps) {
     setActiveStap(null as any);
   }, [hideTooltip]);
 
-  // @ts-ignore
-  // @ts-ignore
+  const interestAPRText: string = t(translations.global.interestApr);
+
   return width < 10 ? null : (
     <div
       className="position-relative"
@@ -212,7 +215,7 @@ function BarsGraph({ width, asset, data }: BarsProps) {
         </Group>
         <Group top={33} left={xSupplyScale.bandwidth() / 2}>
           <Text verticalAnchor="start" fill="#f89b2b" fontSize={10}>
-            % Interest APR
+            {interestAPRText}
           </Text>
         </Group>
         <Group top={50} left={xSupplyScale.bandwidth() / 2}>

diff --git a/src/app/components/TopUpHistory/index.tsx b/src/app/components/TopUpHistory/index.tsx
@@ -34,10 +34,6 @@ export function TopUpHistory() {
     }
   }, [account, isConnected, dispatch]);
 
-  useEffect(() => {
-    console.log(state.history);
-  }, [state.history]);
-
   return (
     <section>
       <div className="d-flex align-items-center justify-content-start mb-3">
@@ -144,33 +140,6 @@ export function TopUpHistory() {
                     />
                   )}
                 </td>
-                {/*<td>*/}
-                {/*  <div*/}
-                {/*    className="d-flex flex-row justify-content-between w-100"*/}
-                {/*  >*/}
-                {/*    <div className="d-flex flex-row align-items-center mr-3">*/}
-                {/*      <div className="mr-3">*/}
-                {/*        <Icon*/}
-                {/*          icon={*/}
-                {/*            item.type === 'deposit'*/}
-                {/*              ? 'chevron-right'*/}
-                {/*              : 'chevron-left'*/}
-                {/*          }*/}
-                {/*        />*/}
-                {/*      </div>*/}
-                {/*      <LinkToExplorer*/}
-                {/*        txHash={item.txHash}*/}
-                {/*        realBtc={item.type === 'deposit'}*/}
-                {/*      />*/}
-                {/*    </div>*/}
-                {/*    <div>*/}
-                {/*      {weiToFixed(item.valueBtc * 1e10, 4)}{' '}*/}
-                {/*      <span className="text-muted">*/}
-                {/*        {item.type === 'deposit' ? 'BTC' : 'rBTC'}*/}
-                {/*      </span>{' '}*/}
-                {/*    </div>*/}
-                {/*  </div>*/}
-                {/*</td>*/}
               </tr>
             ))}
           </tbody>

diff --git a/src/app/components/TradingViewChart/index.tsx b/src/app/components/TradingViewChart/index.tsx
@@ -86,13 +86,6 @@ export function TradingViewChart(props: ChartContainerProps) {
           'mainSeriesProperties.areaStyle.color2': '#0098c4',
           'mainSeriesProperties.areaStyle.linecolor': '#4ecdc4',
           'mainSeriesProperties.areaStyle.transparency': 90,
-          'mainSeriesProperties.barStyle.wickUpColor': '#4ecdc4',
-          'mainSeriesProperties.barStyle.upColor': '#4ecdc4',
-          'mainSeriesProperties.barStyle.wickDownColor': '#fec006',
-          'mainSeriesProperties.barStyle.downColor': '#fec006',
-          'mainSeriesProperties.barStyle.borderColor': '#4ecdc4',
-          'mainSeriesProperties.barStyle.borderUpColor': '#4ecdc4',
-          'mainSeriesProperties.barStyle.borderDownColor': '#fec006',
         },
       });
       setHasCharts(true);

diff --git a/src/app/containers/BorrowHistory/index.tsx b/src/app/containers/BorrowHistory/index.tsx
@@ -99,7 +99,7 @@ export function BorrowHistory(props: Props) {
     prepareRow,
   } = useTable({ columns, data }, useSortBy);
   return (
-    <div className="bg-primary sovryn-border p-3">
+    <div className="bg-primary sovryn-border p-3 table-responsive">
       <table {...getTableProps()} className="sovryn-table">
         <thead>
           {headerGroups.map(headerGroup => (

diff --git a/src/app/containers/CloseTradingPositionHandler/index.tsx b/src/app/containers/CloseTradingPositionHandler/index.tsx
@@ -62,6 +62,8 @@ export function CloseTradingPositionHandler(props: Props) {
     '0x',
   );
 
+  console.log(isCollateral);
+
   const handleConfirmSwap = () => {
     send();
   };

diff --git a/src/app/containers/LendBorrowSovryn/LendingContainer/index.tsx b/src/app/containers/LendBorrowSovryn/LendingContainer/index.tsx
@@ -19,6 +19,7 @@ import { actions } from '../slice';
 import '../assets/index.scss';
 import { SendTxResponse } from '../../../hooks/useSendContractTx';
 import { TxType } from '../../../../store/global/transactions-store/types';
+import { ButtonType } from '../types';
 
 type Props = {
   currency: Asset;
@@ -45,14 +46,14 @@ const LendingContainer: React.FC<Props> = ({ currency }) => {
     loading: loadingLimit,
   } = useLending_transactionLimit(currency, currency);
 
-  const onMaxChange = (type: string) => {
+  const onMaxChange = (type: ButtonType) => {
     let amount = '0';
-    if (type === 'Deposit') {
+    if (type === ButtonType.DEPOSIT) {
       amount = userBalance;
       if (maxAmount !== '0') {
         amount = min(userBalance, maxAmount);
       }
-    } else if (type === 'Redeem') {
+    } else if (type === ButtonType.REDEEM) {
       amount = depositedBalance;
     }
     setAmount(weiTo18(amount));
@@ -115,8 +116,8 @@ const LendingContainer: React.FC<Props> = ({ currency }) => {
       txState={txState}
       isConnected={isConnected}
       valid={valid}
-      leftButton="Deposit"
-      rightButton="Redeem"
+      leftButton={ButtonType.DEPOSIT}
+      rightButton={ButtonType.REDEEM}
       amountValue={amount}
       onChangeAmount={onChangeAmount}
       handleSubmit={handleLendSubmit}

diff --git a/src/app/containers/LendBorrowSovryn/components/AccountBalance/index.tsx b/src/app/containers/LendBorrowSovryn/components/AccountBalance/index.tsx
@@ -6,10 +6,13 @@ import { SendTxProgress } from 'app/components/SendTxProgress';
 import { TradeButton } from 'app/components/TradeButton';
 
 import '../../assets/index.scss';
+import { ButtonType } from '../../types';
+import { useTranslation } from 'react-i18next';
+import { translations } from '../../../../../locales/i18n';
 
 type Props = {
   currency: Asset;
-  title?: string;
+  title: ButtonType;
   isConnected: boolean;
   valid: boolean;
   txState: any;
@@ -28,6 +31,7 @@ const AccountBalance: React.FC<Props> = ({
   txState,
   title,
 }) => {
+  const { t } = useTranslation();
   return (
     <>
       <SendTxProgress
@@ -38,11 +42,13 @@ const AccountBalance: React.FC<Props> = ({
       <div className="account-balance-container position-relative">
         <AssetWalletBalance asset={currency} />
         <TradeButton
-          text={`${title} ${currency}`}
+          text={t(translations.lendingPage.tradeButtons[title], {
+            asset: currency,
+          })}
           onClick={
-            title === 'Redeem'
+            title === ButtonType.REDEEM
               ? handleSubmitWithdraw
-              : title === 'Repay'
+              : title === ButtonType.REPAY
               ? handleSubmitRepay
               : handleSubmit
           }

diff --git a/src/app/containers/LendBorrowSovryn/components/ButtonGroup/index.tsx b/src/app/containers/LendBorrowSovryn/components/ButtonGroup/index.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { Button, Nav, Tab } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
+import { Tooltip, Text } from '@blueprintjs/core';
 import { translations } from 'locales/i18n';
 import '../../assets/index.scss';
 import clsx from 'clsx';
@@ -11,13 +12,13 @@ import { useLending_supplyInterestRate } from '../../../../hooks/lending/useLend
 import { bignumber } from 'mathjs';
 import { useAccount } from '../../../../hooks/useAccount';
 import { useLending_assetBalanceOf } from '../../../../hooks/lending/useLending_assetBalanceOf';
-import { Tooltip } from '@blueprintjs/core';
+import { ButtonType } from '../../types';
 
 type Props = {
   currency: Asset;
-  rightButton: string;
-  leftButton: string;
-  setCurrentButton: (current: string) => void;
+  rightButton: ButtonType;
+  leftButton: ButtonType;
+  setCurrentButton: (current: ButtonType) => void;
   setBorrowAmount?: (amount: string) => void;
 };
 
@@ -84,7 +85,7 @@ const ButtonGroup: React.FC<Props> = ({
       <div className="row">
         <Tab.Container id="button-group " defaultActiveKey={leftButton}>
           <Nav
-            onSelect={k => setKey(k as string)}
+            onSelect={k => setKey((k as unknown) as ButtonType)}
             className="deposit-button-group w-100"
             variant="pills"
           >
@@ -116,11 +117,13 @@ const ButtonGroup: React.FC<Props> = ({
         </Tab.Container>
       </div>
 
-      {key === 'Redeem' && (
+      {key === ButtonType.REDEEM && (
         <div className="container my-3">
           <div className="withdraw-content py-3 row">
             <div className="col-6">
-              <h4>{t(translations.lend.container.balance)}</h4>
+              <h4>
+                <Text ellipsize>{t(translations.lend.container.balance)}</Text>
+              </h4>
               <div>
                 <span className="text-muted">{currency} </span>
                 <strong>
@@ -134,7 +137,9 @@ const ButtonGroup: React.FC<Props> = ({
               </div>
             </div>
             <div className="col-6">
-              <h4>{t(translations.lend.container.profit)}</h4>
+              <h4>
+                <Text ellipsize>{t(translations.lend.container.profit)}</Text>
+              </h4>
               <div>
                 <span className="text-muted">{currency} </span>
                 <strong>
-Original file line number
+Diff line change
@@ Expand Up / @@ -62,6 +62,8 @@ export function CloseTradingPositionHandler(props: Props) { @@
         '0x',
       );
+      console.log(isCollateral);
       const handleConfirmSwap = () => {
         send();
       };
@@ Expand Down @@