ui: update types in the React components

Author: jamaljsr

app/src/components/pool/OrderFormSection.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { LeaseDuration } from 'types/state';
 import styled from '@emotion/styled';
-import Big from 'big.js';
 import { usePrefixedTranslation } from 'hooks';
 import { Unit, Units } from 'util/constants';
 import { useStore } from 'store';
@@ -110,7 +109,7 @@ const OrderFormSection: React.FC = () => {
             label={l(`amountLabel${orderFormView.orderType}`)}
             placeholder={l('amountPlaceholder')}
             extra={Units[Unit.sats].suffix}
-            value={orderFormView.amount}
+            value={orderFormView.amount.toNumber()}
             onChange={orderFormView.setAmount}
           />
         </FormField>
@@ -121,7 +120,7 @@ const OrderFormSection: React.FC = () => {
           <FormInputNumber
             label={l(`premiumLabel${orderFormView.orderType}`)}
             placeholder={l('premiumPlaceholder')}
-            value={orderFormView.premium}
+            value={orderFormView.premium.toNumber()}
             onChange={orderFormView.setPremium}
             extra={
               <>
@@ -194,7 +193,7 @@ const OrderFormSection: React.FC = () => {
               {orderFormView.quoteLoading ? (
                 <LoaderLines />
               ) : (
-                <UnitCmp sats={Big(orderFormView.executionFee)} />
+                <UnitCmp sats={orderFormView.executionFee} />
               )}
             </span>
           </SummaryItem>
@@ -207,7 +206,7 @@ const OrderFormSection: React.FC = () => {
             {orderFormView.quoteLoading ? (
               <LoaderLines />
             ) : (
-              <UnitCmp sats={Big(orderFormView.worstChainFee)} />
+              <UnitCmp sats={orderFormView.worstChainFee} />
             )}
           </span>
         </SummaryItem>

app/src/components/pool/account/FundNewAccountForm.tsx

@@ -35,7 +35,7 @@ const FundNewAccountForm: React.FC = () => {
           label={l(`amountLabel`)}
           placeholder={l('amountPlaceholder')}
           extra={Units[Unit.sats].suffix}
-          value={fundNewAccountView.amount}
+          value={fundNewAccountView.amount.toNumber()}
           onChange={fundNewAccountView.setAmount}
         />
       </FormField>

app/src/components/pool/batches/BatchStats.tsx

@@ -61,7 +61,7 @@ const BatchStats: React.FC = () => {
       <div>
         <BatchCountdown
           label={l('nextBatch')}
-          timestamp={batchesView.nextBatchTimestamp}
+          timestamp={batchesView.nextBatchTimestamp.toNumber()}
           tip={l('nextBatchTip')}
         />
         <Stat

app/src/components/pool/orders/OrdersList.tsx

@@ -68,7 +68,7 @@ const OrderRow: React.FC<{
       <TableCell right>
         <Unit sats={order.amount} suffix={false} />
       </TableCell>
-      <TableCell className="text-center">{order.duration}</TableCell>
+      <TableCell className="text-center">{order.duration.toNumber()}</TableCell>
       <TableCell right>{order.basisPoints}</TableCell>
       <TableCell>
         <OrderStatus status={order.stateLabel}>{order.stateWithCount}</OrderStatus>