Fix: Don't combine asym with sym shares in PoolShare

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## Add
 
 - [Ledger] Add liquidity using Ledger [#1926](https://github.com/thorchain/asgardex-electron/pull/1926), [#1927](https://github.com/thorchain/asgardex-electron/issues/1927) [#1936](https://github.com/thorchain/asgardex-electron/issues/1936), [#1962](https://github.com/thorchain/asgardex-electron/pull/1962)
+- [Ledger] Support Ledger for withdrawals [#1963](https://github.com/thorchain/asgardex-electron/pull/1963)
 - [ADD] Update shares for Ledger [#1942](https://github.com/thorchain/asgardex-electron/pull/1942)
 - Restore previous windows dimensions with next start of ASGDX [#1879](https://github.com/thorchain/asgardex-electron/issues/1879)
 - Show asset icon in TxDetail (wallet history + pool details)[#1955](https://github.com/thorchain/asgardex-electron/pull/1955)
@@ -21,6 +22,7 @@
 - [PoolDetail] Make tx explorer accessible for locked / not imported wallet users [#1871](https://github.com/thorchain/asgardex-electron/issues/1871)
 - Fix Tooltip styles [#1944](https://github.com/thorchain/asgardex-electron/pull/1944)
 - [Swap] Limits added to memo needs to be 1e8 [#1946](https://github.com/thorchain/asgardex-electron/issues/1946)
+- [PoolShare] Don't combine `asym` with `sym` shares in PoolShare [#1964](https://github.com/thorchain/asgardex-electron/pull/1964)
 
 ## Internal
 

src/renderer/components/deposit/Deposit.stories.tsx

@@ -5,7 +5,7 @@ import { Story, Meta } from '@storybook/react'
 import { assetAmount, AssetBNB, AssetRuneNative, assetToBase, bn, BNBChain } from '@xchainjs/xchain-util'
 import * as O from 'fp-ts/lib/Option'
 
-import { BNB_ADDRESS_TESTNET } from '../../../shared/mock/address'
+import { BNB_ADDRESS_TESTNET, RUNE_ADDRESS_TESTNET } from '../../../shared/mock/address'
 import { BNB_DECIMAL, THORCHAIN_DECIMAL } from '../../helpers/assetHelper'
 import { mockWalletAddress } from '../../helpers/test/testWalletHelper'
 import { DEFAULT_MIMIR_HALT } from '../../services/thorchain/const'
@@ -24,18 +24,24 @@ const defaultProps: DepositProps = {
       units: bn('300000000'),
       asset: AssetBNB,
       type: 'sym',
+      assetAddress: O.some(BNB_ADDRESS_TESTNET),
+      runeAddress: O.some(RUNE_ADDRESS_TESTNET),
       assetAddedAmount: assetToBase(assetAmount(1.5, THORCHAIN_DECIMAL))
     },
     {
       units: bn('100000000'),
       asset: AssetBNB,
       type: 'asym',
+      assetAddress: O.some(BNB_ADDRESS_TESTNET),
+      runeAddress: O.none,
       assetAddedAmount: assetToBase(assetAmount(1, THORCHAIN_DECIMAL))
     },
     {
       units: bn('200000000'),
       asset: AssetRuneNative,
       type: 'asym',
+      assetAddress: O.none,
+      runeAddress: O.some(RUNE_ADDRESS_TESTNET),
       assetAddedAmount: assetToBase(assetAmount(2, THORCHAIN_DECIMAL))
     }
   ]),

src/renderer/components/deposit/Deposit.tsx

@@ -8,8 +8,9 @@ import * as O from 'fp-ts/Option'
 import { useIntl } from 'react-intl'
 
 import { WalletAddress } from '../../../shared/wallet/types'
+import { eqOAddress } from '../../helpers/fp/eq'
 import { PoolDetailRD, PoolShareRD, PoolSharesRD } from '../../services/midgard/types'
-import { getSharesByAssetAndType, combineSharesByAsset } from '../../services/midgard/utils'
+import { getSharesByAssetAndType } from '../../services/midgard/utils'
 import { MimirHalt } from '../../services/thorchain/types'
 import { KeystoreState } from '../../services/wallet/types'
 import { hasImportedKeystore, isLocked } from '../../services/wallet/util'
@@ -84,13 +85,24 @@ export const Deposit: React.FC<Props> = (props) => {
   const walletIsImported = useMemo(() => hasImportedKeystore(keystoreState), [keystoreState])
   const walletIsLocked = useMemo(() => isLocked(keystoreState), [keystoreState])
 
-  const symPoolShare = useMemo(
+  const symPoolShare: PoolShareRD = useMemo(
     () =>
       FP.pipe(
         poolSharesRD,
-        RD.map((shares) => getSharesByAssetAndType({ shares, asset, type: 'sym' }))
+        RD.map((shares) => getSharesByAssetAndType({ shares, asset, type: 'sym' })),
+        RD.map((oPoolShare) =>
+          FP.pipe(
+            oPoolShare,
+            O.filter(
+              ({ runeAddress, assetAddress }) =>
+                // use shares of current selected addresses only
+                eqOAddress.equals(runeAddress, O.some(runeWalletAddress.address)) &&
+                eqOAddress.equals(assetAddress, O.some(assetWalletAddress.address))
+            )
+          )
+        )
       ),
-    [asset, poolSharesRD]
+    [asset, assetWalletAddress, poolSharesRD, runeWalletAddress]
   )
 
   // TODO (@Veado) Temporary disabled #827
@@ -103,15 +115,6 @@ export const Deposit: React.FC<Props> = (props) => {
     [asset, poolSharesRD]
   )
 
-  const combinedPoolShare = useMemo(
-    () =>
-      FP.pipe(
-        poolSharesRD,
-        RD.map((shares) => combineSharesByAsset(shares, asset))
-      ),
-    [asset, poolSharesRD]
-  )
-
   const hasPoolShare = (poolShare: PoolShareRD): boolean => FP.pipe(poolShare, RD.toOption, O.flatten, O.isSome)
   const hasSymPoolShare: boolean = useMemo(() => hasPoolShare(symPoolShare), [symPoolShare])
   // TODO (@Veado) Temporary disabled #827
@@ -150,7 +153,7 @@ export const Deposit: React.FC<Props> = (props) => {
             asset={assetWD}
             runeWalletAddress={runeWalletAddress}
             assetWalletAddress={assetWalletAddress}
-            poolShare={combinedPoolShare}
+            poolShare={symPoolShare}
             haltedChains={haltedChains}
             mimirHalt={mimirHalt}
           />
@@ -174,24 +177,10 @@ export const Deposit: React.FC<Props> = (props) => {
       mimirHalt,
       hasSymPoolShare,
       WidthdrawContent,
-      combinedPoolShare
+      symPoolShare
     ]
   )
 
-  const alignTopShareContent: boolean = useMemo(
-    () =>
-      FP.pipe(
-        symPoolShare,
-        RD.toOption,
-        O.flatten,
-        O.fold(
-          () => false,
-          () => true
-        )
-      ),
-    [symPoolShare]
-  )
-
   return (
     <Styled.Container>
       <Styled.ContentContainer>
@@ -201,11 +190,11 @@ export const Deposit: React.FC<Props> = (props) => {
               <Styled.Tabs destroyInactiveTabPane tabs={tabs} centered={false} defaultActiveKey="deposit-sym" />
             </Styled.DepositContentCol>
             <Styled.ShareContentCol xs={24} xl={9}>
-              <Styled.ShareContentWrapper alignTop={alignTopShareContent}>
+              <Styled.ShareContentWrapper alignTop={hasSymPoolShare}>
                 <ShareContent
                   poolDetail={poolDetailRD}
                   asset={assetWD}
-                  poolShare={combinedPoolShare}
+                  poolShare={symPoolShare}
                   smallWidth={!isDesktopView}
                 />
               </Styled.ShareContentWrapper>

src/renderer/components/deposit/withdraw/Withdraw.styles.ts

@@ -6,7 +6,7 @@ import { AssetIcon as AssetIconBase } from '../../uielements/assets/assetIcon'
 import { AssetLabel as AssetLabelUI } from '../../uielements/assets/assetLabel'
 import { ViewTxButton as UIViewTxButton } from '../../uielements/button'
 import { Button as UIButton } from '../../uielements/button'
-import { WalletTypeLabel as WalletTypeLabelUI, Tooltip as UITooltip } from '../../uielements/common/Common.styles'
+import { WalletTypeLabel as WalletTypeLabelUI } from '../../uielements/common/Common.styles'
 import { Label as UILabel } from '../../uielements/label'
 import { Slider as BaseSlider } from '../../uielements/slider'
 
@@ -132,15 +132,6 @@ export const AssetLabel = styled(AssetLabelUI)`
   margin: 0;
 `
 
-export const Tooltip = styled(UITooltip).attrs({
-  overlayStyle: {
-    textTransform: 'none',
-    fontSize: 14,
-    maxWidth: '400px',
-    fontFamily: 'MainFontRegular'
-  }
-})``
-
 export const WalletTypeLabel = styled(WalletTypeLabelUI)`
   font-size: 8px;
   line-height: 12px;

src/renderer/components/deposit/withdraw/Withdraw.tsx

@@ -46,6 +46,7 @@ import { AssetWithDecimal } from '../../../types/asgardex'
 import { PasswordModal } from '../../modal/password'
 import { TxModal } from '../../modal/tx'
 import { DepositAssets } from '../../modal/tx/extra'
+import { TooltipAddress } from '../../uielements/common/Common.styles'
 import { Fees, UIFeesRD } from '../../uielements/fees'
 import { Label } from '../../uielements/label'
 import * as Helper from './Withdraw.helper'
@@ -448,15 +449,15 @@ export const Withdraw: React.FC<Props> = ({
       </Label>
 
       <Styled.AssetOutputContainer>
-        <Styled.Tooltip title={runeAddress}>
+        <TooltipAddress title={runeAddress}>
           <Styled.AssetContainer>
             <Styled.AssetIcon asset={AssetRuneNative} network={network} />
             <Styled.AssetLabel asset={AssetRuneNative} />
             {isLedgerWallet(runeWalletType) && (
               <Styled.WalletTypeLabel>{intl.formatMessage({ id: 'ledger.title' })}</Styled.WalletTypeLabel>
             )}
           </Styled.AssetContainer>
-        </Styled.Tooltip>
+        </TooltipAddress>
         <Styled.OutputContainer>
           <Styled.OutputLabel>
             {formatAssetAmount({
@@ -481,15 +482,15 @@ export const Withdraw: React.FC<Props> = ({
       </Styled.AssetOutputContainer>
 
       <Styled.AssetOutputContainer>
-        <Styled.Tooltip title={assetAddress}>
+        <TooltipAddress title={assetAddress}>
           <Styled.AssetContainer>
             <Styled.AssetIcon asset={asset} network={network} />
             <Styled.AssetLabel asset={asset} />
             {isLedgerWallet(assetWalletType) && (
               <Styled.WalletTypeLabel>{intl.formatMessage({ id: 'ledger.title' })}</Styled.WalletTypeLabel>
             )}
           </Styled.AssetContainer>
-        </Styled.Tooltip>
+        </TooltipAddress>
         <Styled.OutputContainer>
           <Styled.OutputLabel>
             {formatAssetAmount({

src/renderer/components/uielements/assets/assetCard/AssetCard.styles.ts

@@ -2,7 +2,6 @@ import styled from 'styled-components'
 import { palette } from 'styled-theme'
 
 import { CheckButton as CheckButtonUI } from '../../button/CheckButton'
-import { Tooltip as UITooltip } from '../../common/Common.styles'
 import { InputBigNumber as InputBigNumberUI } from '../../input'
 import { Label } from '../../label'
 import { AssetLabel as AssetLabelUI } from '../assetLabel'
@@ -95,15 +94,6 @@ export const Header = styled.div`
   border-bottom: 1px solid ${palette('gray', 0)};
 `
 
-export const Tooltip = styled(UITooltip).attrs({
-  overlayStyle: {
-    textTransform: 'none',
-    fontSize: 14,
-    maxWidth: '400px',
-    fontFamily: 'MainFontRegular'
-  }
-})``
-
 export const BalanceLabel = styled(Label)`
   width: auto;
   padding: 0;

src/renderer/components/uielements/assets/assetCard/AssetCard.tsx

@@ -25,6 +25,7 @@ import { isBtcAsset } from '../../../../helpers/assetHelper'
 import { ordAsset } from '../../../../helpers/fp/ord'
 import { useClickOutside } from '../../../../hooks/useOutsideClick'
 import { AssetWithAddress } from '../../../../types/asgardex'
+import { TooltipAddress } from '../../common/Common.styles'
 import { InfoIcon } from '../../info'
 import * as InfoIconStyled from '../../info/InfoIcon.styles'
 import { Slider } from '../../slider'
@@ -152,12 +153,12 @@ export const AssetCard: React.FC<Props> = (props): JSX.Element => {
     <Styled.AssetCardWrapper ref={ref}>
       <Dropdown overlay={renderMenu()} trigger={[]} visible={openDropdown}>
         <Styled.CardBorderWrapper error={minAmountError}>
-          <Styled.Tooltip title={assetAddress}>
+          <TooltipAddress title={assetAddress}>
             <Styled.Header>
               <Styled.AssetLabel asset={asset} />
               {balanceLabel}
             </Styled.Header>
-          </Styled.Tooltip>
+          </TooltipAddress>
           <Styled.CardTopRow>
             <Styled.AssetDataWrapper>
               <Styled.AssetData>

src/renderer/components/uielements/common/Common.styles.ts

@@ -36,3 +36,12 @@ export const Tooltip = styled(A.Tooltip).attrs({
     textTransform: 'uppercase'
   }
 })``
+
+export const TooltipAddress = styled(A.Tooltip).attrs({
+  overlayStyle: {
+    textTransform: 'none',
+    fontSize: 14,
+    maxWidth: '400px',
+    fontFamily: 'MainFontRegular'
+  }
+})``

src/renderer/components/uielements/poolShare/PoolShare.stories.tsx

@@ -2,7 +2,9 @@ import React from 'react'
 
 import { storiesOf } from '@storybook/react'
 import { bn, assetToBase, assetAmount, AssetBNB, AssetRuneNative } from '@xchainjs/xchain-util'
+import * as O from 'fp-ts/lib/Option'
 
+import { BNB_ADDRESS_TESTNET, RUNE_ADDRESS_TESTNET } from '../../../../shared/mock/address'
 import { ZERO_BN, ZERO_BASE_AMOUNT } from '../../../const'
 import { BNB_DECIMAL } from '../../../helpers/assetHelper'
 import { PoolShare } from './PoolShare'
@@ -11,7 +13,8 @@ export const DefaultPoolShare = () => (
   <PoolShare
     asset={{ asset: AssetBNB, decimal: BNB_DECIMAL }}
     assetPrice={assetToBase(assetAmount(120.1))}
-    shares={{ rune: assetToBase(assetAmount(500)), asset: assetToBase(assetAmount(500)) }}
+    shares={{ rune: assetToBase(assetAmount(1500)), asset: assetToBase(assetAmount(500)) }}
+    addresses={{ rune: O.some(RUNE_ADDRESS_TESTNET), asset: O.some(BNB_ADDRESS_TESTNET) }}
     priceAsset={AssetRuneNative}
     runePrice={assetToBase(assetAmount(400))}
     poolShare={bn(100)}
@@ -33,6 +36,7 @@ storiesOf('Components/PoolShare', module)
         asset={{ asset: AssetBNB, decimal: BNB_DECIMAL }}
         assetPrice={ZERO_BASE_AMOUNT}
         shares={{ rune: ZERO_BASE_AMOUNT, asset: ZERO_BASE_AMOUNT }}
+        addresses={{ rune: O.none, asset: O.some(BNB_ADDRESS_TESTNET) }}
         priceAsset={AssetRuneNative}
         loading={true}
         runePrice={ZERO_BASE_AMOUNT}