[Wallet] Add Swap to ActionButton (#2512)

to jump to swap view with one click only

CHANGELOG.md

@@ -12,7 +12,8 @@
 - [AssetInput] Add Ledger + extraContent [#2505](https://github.com/thorchain/asgardex-electron/pull/2505)
 - Refactor styles for 'warning` components (TW only) [#2504](https://github.com/thorchain/asgardex-electron/pull/2504)
 - [Deposit] Wallet types based on routes [#2506](https://github.com/thorchain/asgardex-electron/pull/2506)
-- [SWAP] Persistant wallet state while reloading or switching asset pair [#2511](https://github.com/thorchain/asgardex-electron/pull/2511/)
+- [SWAP] Persistant wallet state while reloading or switching asset pair [#2511](https://github.com/thorchain/asgardex-electron/pull/2511)
+- [Wallet] Add `Swap` to `ActionButton` to jump to swap view with one click only [#2512](https://github.com/thorchain/asgardex-electron/pull/2512)
 
 ## Fix
 

src/renderer/components/wallet/assets/AssetsTableCollapsable.stories.tsx

@@ -178,6 +178,7 @@ const Template = (args: Partial<Record<Chain, RDStatus>>) => {
         A.flatten
       )}
       poolDetails={[]}
+      poolsData={{}}
       pricePool={RUNE_PRICE_POOL}
       network="testnet"
       mimirHalt={RD.initial}

src/renderer/components/wallet/assets/AssetsTableCollapsable.tsx

@@ -4,10 +4,14 @@ import * as RD from '@devexperts/remote-data-ts'
 import {
   Address,
   Asset,
+  assetFromString,
+  AssetRuneNative,
+  assetToString,
   baseAmount,
   baseToAsset,
   chainToString,
   formatAssetAmountCurrency,
+  isAssetRuneNative,
   isSynthAsset
 } from '@xchainjs/xchain-util'
 import { Col, Collapse, Grid, Row } from 'antd'
@@ -17,15 +21,18 @@ import * as A from 'fp-ts/lib/Array'
 import * as FP from 'fp-ts/lib/function'
 import * as O from 'fp-ts/lib/Option'
 import { useIntl } from 'react-intl'
+import { useNavigate } from 'react-router'
 
 import { Network } from '../../../../shared/api/types'
 import { isKeystoreWallet } from '../../../../shared/utils/guard'
+import { DEFAULT_WALLET_TYPE } from '../../../const'
 import { disableRuneUpgrade, isNonNativeRuneAsset, isRuneNativeAsset, isUSDAsset } from '../../../helpers/assetHelper'
 import { getChainAsset } from '../../../helpers/chainHelper'
-import { getPoolPriceValue } from '../../../helpers/poolHelper'
+import { getDeepestPool, getPoolPriceValue } from '../../../helpers/poolHelper'
 import { noDataString } from '../../../helpers/stringHelper'
+import * as poolsRoutes from '../../../routes/pools'
 import { WalletBalancesRD } from '../../../services/clients'
-import { PoolDetails } from '../../../services/midgard/types'
+import { PoolDetails, PoolsDataMap } from '../../../services/midgard/types'
 import { MimirHaltRD } from '../../../services/thorchain/types'
 import {
   ApiError,
@@ -51,6 +58,7 @@ type Props = {
   chainBalances: ChainBalances
   pricePool: PricePool
   poolDetails: PoolDetails
+  poolsData: PoolsDataMap
   selectAssetHandler: (asset: SelectedWalletAsset) => void
   assetHandler: (asset: SelectedWalletAsset, action: AssetAction) => void
   network: Network
@@ -62,13 +70,15 @@ export const AssetsTableCollapsable: React.FC<Props> = (props): JSX.Element => {
     chainBalances = [],
     pricePool,
     poolDetails,
+    poolsData,
     selectAssetHandler,
     assetHandler,
     mimirHalt: mimirHaltRD,
     network
   } = props
 
   const intl = useIntl()
+  const navigate = useNavigate()
   const screenMap: ScreenMap = Grid.useBreakpoint()
 
   const [showQRModal, setShowQRModal] = useState<O.Option<{ asset: Asset; address: Address }>>(O.none)
@@ -161,8 +171,53 @@ export const AssetsTableCollapsable: React.FC<Props> = (props): JSX.Element => {
   const renderActionColumn = useCallback(
     ({ asset, walletAddress, walletIndex, walletType, hdMode }: WalletBalance) => {
       const walletAsset: SelectedWalletAsset = { asset, walletAddress, walletIndex, walletType, hdMode }
+      const hasActivePool: boolean = FP.pipe(O.fromNullable(poolsData[assetToString(asset)]), O.isSome)
+      const deepestPoolAsset = FP.pipe(
+        getDeepestPool(poolDetails),
+        O.chain(({ asset }) => O.fromNullable(assetFromString(asset))),
+        O.toNullable
+      )
+
       const actions: ActionButtonAction[] = FP.pipe(
-        [
+        // 'swap' for RUNE
+        isAssetRuneNative(asset) && deepestPoolAsset !== null
+          ? [
+              {
+                label: intl.formatMessage({ id: 'common.swap' }),
+                callback: () => {
+                  navigate(
+                    poolsRoutes.swap.path({
+                      source: assetToString(asset),
+                      target: assetToString(deepestPoolAsset),
+                      sourceWalletType: walletType,
+                      targetWalletType: DEFAULT_WALLET_TYPE
+                    })
+                  )
+                }
+              }
+            ]
+          : [],
+        // 'swap' for assets of active pools only
+        A.concatW<ActionButtonAction>(
+          hasActivePool
+            ? [
+                {
+                  label: intl.formatMessage({ id: 'common.swap' }),
+                  callback: () => {
+                    navigate(
+                      poolsRoutes.swap.path({
+                        source: assetToString(asset),
+                        target: assetToString(AssetRuneNative),
+                        sourceWalletType: walletType,
+                        targetWalletType: DEFAULT_WALLET_TYPE
+                      })
+                    )
+                  }
+                }
+              ]
+            : []
+        ),
+        A.concat([
           {
             label: intl.formatMessage({ id: 'wallet.action.send' }),
             callback: () => {
@@ -175,7 +230,7 @@ export const AssetsTableCollapsable: React.FC<Props> = (props): JSX.Element => {
               setShowQRModal(O.some({ asset: getChainAsset(asset.chain), address: walletAddress }))
             }
           }
-        ],
+        ]),
         // 'deposit'  for RuneNativeAsset only
         A.concatW<ActionButtonAction>(
           isRuneNativeAsset(asset)
@@ -189,7 +244,7 @@ export const AssetsTableCollapsable: React.FC<Props> = (props): JSX.Element => {
               ]
             : []
         ),
-        // 'upgrade'  for non-RuneNativeAsset only
+        // 'upgrade' for non-RuneNativeAsset only
         A.concatW<ActionButtonAction>(
           isNonNativeRuneAsset(asset, network)
             ? [
@@ -212,7 +267,7 @@ export const AssetsTableCollapsable: React.FC<Props> = (props): JSX.Element => {
         </div>
       )
     },
-    [assetHandler, haltBnbChain, haltEthChain, haltThorChain, intl, network]
+    [assetHandler, haltBnbChain, haltEthChain, haltThorChain, intl, navigate, network, poolDetails, poolsData]
   )
 
   const actionColumn: ColumnType<WalletBalance> = useMemo(

src/renderer/views/wallet/AssetsView.tsx

@@ -99,6 +99,7 @@ export const AssetsView: React.FC = (): JSX.Element => {
   )
 
   const poolDetails = RD.toNullable(poolsRD)?.poolDetails ?? []
+  const poolsData = RD.toNullable(poolsRD)?.poolsData ?? {}
 
   const { mimirHaltRD } = useMimirHalt()
 
@@ -125,6 +126,7 @@ export const AssetsView: React.FC = (): JSX.Element => {
         chainBalances={chainBalances}
         pricePool={selectedPricePool}
         poolDetails={poolDetails}
+        poolsData={poolsData}
         selectAssetHandler={selectAssetHandler}
         assetHandler={assetHandler}
         mimirHalt={mimirHaltRD}