fix(prices): remove unused dep and fix tbody y scroll

blockchain · May 18, 2022 · 39cc673 · 39cc673
1 parent b29bb2e
commit 39cc673
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 33 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/package.json b/packages/blockchain-wallet-v4-frontend/package.json
@@ -142,7 +142,6 @@
     "react-router-bootstrap": "0.25.0",
     "react-router-dom": "4.3.1",
     "react-table": "7.8.0",
-    "react-table-container": "2.0.3",
     "react-tooltip": "3.10.0",
     "react-use-measure": "2.0.4",
     "react-virtualized-auto-sizer": "1.0.6",

diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Table/index.tsx b/packages/blockchain-wallet-v4-frontend/src/components/Table/index.tsx
@@ -30,6 +30,10 @@ export const TableWrapper = styled.div<{
       display: table-header-group;
     }
 
+    .tbody {
+      overflow: scroll;
+    }
+
     .th,
     .td {
       padding: 16px;

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Prices/Table/actions.column.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Prices/Table/actions.column.tsx
@@ -17,33 +17,56 @@ const CellWrapper = styled.div`
 
 export const getActionsColumn = (
   modalActions: TableColumnsType['modalActions'],
-  buySellActions: TableColumnsType['buySellActions']
+  buySellActions: TableColumnsType['buySellActions'],
+  swapActions: TableColumnsType['swapActions'],
+  formActions: TableColumnsType['formActions']
 ) => ({
   Cell: ({ row: { original: values } }) => (
     <CellWrapper>
       {values.products.includes('CustodialWalletBalance') ? (
-        <Button
-          data-e2e={`${values.coin}BuySellBtn`}
-          height='32px'
-          nature='primary'
-          onClick={() => {
-            buySellActions.showModal({
-              cryptoCurrency: values.coin,
-              orderType: OrderType.BUY,
-              origin: 'Prices'
-            })
-          }}
-          width='96px'
-          style={{ marginRight: '12px' }}
-        >
-          <Text size='14px' color='white' weight={600}>
-            {Number(values.balance) > 0 ? (
-              <FormattedMessage id='buttons.buy_sell' defaultMessage='Buy & Sell' />
-            ) : (
-              <FormattedMessage id='buttons.buy' defaultMessage='Buy' />
-            )}
-          </Text>
-        </Button>
+        <>
+          <Button
+            data-e2e={`${values.coin}BuySellBtn`}
+            height='32px'
+            nature='primary'
+            onClick={() => {
+              buySellActions.showModal({
+                cryptoCurrency: values.coin,
+                orderType: OrderType.BUY,
+                origin: 'Prices'
+              })
+            }}
+            width='96px'
+            style={{ marginRight: '12px' }}
+          >
+            <Text size='14px' color='white' weight={600}>
+              {Number(values.balance) > 0 ? (
+                <FormattedMessage id='buttons.buy_sell' defaultMessage='Buy & Sell' />
+              ) : (
+                <FormattedMessage id='buttons.buy' defaultMessage='Buy' />
+              )}
+            </Text>
+          </Button>
+          <Button
+            data-e2e={`${values.coin}SwapBtn`}
+            height='32px'
+            nature='empty-blue'
+            onClick={() => {
+              formActions.destroy('initSwap')
+              modalActions.showModal('SWAP_MODAL', {
+                origin: 'Prices'
+              })
+              swapActions.setStep({
+                step: 'INIT_SWAP'
+              })
+            }}
+            width='68px'
+          >
+            <Text size='14px' color='blue600' weight={600}>
+              <FormattedMessage id='buttons.swap' defaultMessage='Swap' />
+            </Text>
+          </Button>
+        </>
       ) : null}
     </CellWrapper>
   ),

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Prices/Table/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Prices/Table/index.tsx
@@ -7,13 +7,13 @@ import { getPriceColumn } from './price.column'
 import { getPriceChangeColumn } from './priceChange.column'
 
 export const getTableColumns =
-  ({ buySellActions, modalActions, walletCurrency }: TableColumnsType) =>
+  ({ buySellActions, formActions, modalActions, swapActions, walletCurrency }: TableColumnsType) =>
   () =>
     [
       getNameColumn(modalActions),
       getPriceColumn(walletCurrency),
       getPriceChangeColumn(),
       getMarketCapColumn(walletCurrency),
       getBalanceColumn(),
-      getActionsColumn(modalActions, buySellActions)
+      getActionsColumn(modalActions, buySellActions, swapActions, formActions)
     ]
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Prices/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Prices/index.tsx
@@ -110,18 +110,22 @@ const mapStateToProps = (state) => ({
 
 const mapDispatchToProps = (dispatch) => ({
   buySellActions: bindActionCreators(actions.components.buySell, dispatch),
+  formActions: bindActionCreators(actions.form, dispatch),
   modalActions: bindActionCreators(actions.modals, dispatch),
   priceActions: bindActionCreators(actions.prices, dispatch),
-  routerActions: bindActionCreators(actions.router, dispatch)
+  routerActions: bindActionCreators(actions.router, dispatch),
+  swapActions: bindActionCreators(actions.components.swap, dispatch)
 })
 
 const connector = connect(mapStateToProps, mapDispatchToProps)
 const enhance = compose(reduxForm({ form: 'prices' }), connector)
 
 export type TableColumnsType = {
   buySellActions: ReturnType<typeof mapDispatchToProps>['buySellActions']
+  formActions: ReturnType<typeof mapDispatchToProps>['formActions']
   modalActions: ReturnType<typeof mapDispatchToProps>['modalActions']
   routerActions: ReturnType<typeof mapDispatchToProps>['routerActions']
+  swapActions: ReturnType<typeof mapDispatchToProps>['swapActions']
   walletCurrency: ReturnType<typeof selectors.core.settings.getCurrency>
 }
 export type Props = ConnectedProps<typeof connector>

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Prices/template.success.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Prices/template.success.tsx
@@ -26,13 +26,23 @@ const initialState = {
 }
 
 const PricesTable = (props: Props) => {
-  const { buySellActions, data, modalActions, routerActions, walletCurrency } = props
+  const {
+    buySellActions,
+    data,
+    formActions,
+    modalActions,
+    routerActions,
+    swapActions,
+    walletCurrency
+  } = props
 
   const columns = useMemo(
     getTableColumns({
       buySellActions,
+      formActions,
       modalActions,
       routerActions,
+      swapActions,
       walletCurrency
     }),
     []

diff --git a/yarn.lock b/yarn.lock
@@ -20443,11 +20443,6 @@ react-syntax-highlighter@^13.5.3:
     prismjs "^1.21.0"
     refractor "^3.1.0"
 
-react-table-container@2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/react-table-container/-/react-table-container-2.0.3.tgz#f30cebd1143b1a753e57078c7512036a3bab092b"
-  integrity sha512-15g+4t7IvKOKrJvb3erhjpTOmjFN+7ikmdRl3lQBDZrX4PIJS/zvJi40Q/Dw6PQ5L0HBucrb9UiDBGO3P9LA0A==
-
 react-table@7.8.0:
   version "7.8.0"
   resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.8.0.tgz#07858c01c1718c09f7f1aed7034fcfd7bda907d2"