Use AssetMenu2 / AssetSelect2

src/renderer/components/swap/Swap.styles.tsx

@@ -6,7 +6,6 @@ import { media } from '../../helpers/styleHelper'
 import { transition } from '../../settings/style-util'
 import { Tabs as TabsUI } from '../tabs/Tabs'
 import { AssetInput as AssetInputBase } from '../uielements/assets/assetInput'
-import { AssetSelect as AssetSelectUI } from '../uielements/assets/assetSelect'
 import { CheckButton as CheckButtonUI } from '../uielements/button/CheckButton'
 import { Label as UILabel } from '../uielements/label'
 
@@ -259,10 +258,6 @@ export const MinAmountLabel = styled(UILabel)`
   width: auto;
 `
 
-export const AssetSelect = styled(AssetSelectUI)``
-
-export const TargetAssetSelect = styled(AssetSelect)``
-
 export const FeeContainer = styled.div`
   width: 100%;
 `

src/renderer/components/swap/Swap.tsx

@@ -92,7 +92,7 @@ import { LedgerConfirmationModal, WalletPasswordConfirmationModal } from '../mod
 import { TxModal } from '../modal/tx'
 import { SwapAssets } from '../modal/tx/extra'
 import { LoadingView } from '../shared/loading'
-import { AssetSelect2 } from '../uielements/assets/assetSelect/AssetSelect2'
+import { AssetSelect } from '../uielements/assets/assetSelect'
 import { FlatButton, ViewTxButton } from '../uielements/button'
 import { WalletTypeLabel } from '../uielements/common/Common.styles'
 import { Fees, UIFeesRD } from '../uielements/fees'
@@ -1546,10 +1546,11 @@ export const Swap = ({
                         () => <></>,
                         (asset) => (
                           <Styled.AssetSelectContainer>
-                            <Styled.AssetSelect
+                            <AssetSelect
                               onSelect={setSourceAsset}
                               asset={asset}
                               assets={selectableSourceAssets}
+                              dialogHeadline={intl.formatMessage({ id: 'common.asset.change' })}
                               network={network}
                             />
 
@@ -1600,10 +1601,11 @@ export const Swap = ({
                         () => <></>,
                         (asset) => (
                           <Styled.AssetSelectContainer>
-                            <AssetSelect2
+                            <AssetSelect
                               onSelect={setTargetAsset}
                               asset={asset}
                               assets={selectableTargetAssets}
+                              dialogHeadline={intl.formatMessage({ id: 'common.asset.change' })}
                               network={network}
                             />
                             <Styled.CheckButton

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

@@ -5,7 +5,6 @@ import { CheckButton as CheckButtonUI } from '../../button/CheckButton'
 import { InputBigNumber as InputBigNumberUI } from '../../input'
 import { Label } from '../../label'
 import { AssetLabel as AssetLabelUI } from '../assetLabel'
-import { AssetSelect as AssetSelectUI } from '../assetSelect'
 
 export const AssetCardWrapper = styled.div`
   width: 100%;
@@ -70,8 +69,6 @@ export const AssetDataWrapper = styled.div`
   justify-content: center;
 `
 
-export const AssetSelect = styled(AssetSelectUI)``
-
 export const InputBigNumber = styled(InputBigNumberUI).attrs({
   size: 'large'
 })`

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

@@ -1,4 +1,4 @@
-import React, { useRef, useState, RefObject, useCallback, useMemo } from 'react'
+import React, { useState, useCallback, useMemo } from 'react'
 
 import { BTC_DECIMAL } from '@xchainjs/xchain-bitcoin'
 import {
@@ -11,7 +11,6 @@ import {
   assetAmount
 } from '@xchainjs/xchain-util'
 import * as AU from '@xchainjs/xchain-util'
-import { Dropdown } from 'antd'
 import BigNumber from 'bignumber.js'
 import * as FP from 'fp-ts/lib/function'
 import * as O from 'fp-ts/lib/Option'
@@ -23,13 +22,13 @@ import { WalletType } from '../../../../../shared/wallet/types'
 import { ZERO_BASE_AMOUNT } from '../../../../const'
 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'
 import { AssetMenu } from '../assetMenu'
+import { AssetSelect } from '../assetSelect'
 import * as Styled from './AssetCard.styles'
 
 export type Props = {
@@ -47,9 +46,7 @@ export type Props = {
   price: BigNumber
   priceAsset?: Asset
   slip?: number
-  searchDisable?: string[]
   percentValue?: number
-  withSearch?: boolean
   onChangeAssetAmount?: (value: BaseAmount) => void
   inputOnBlurHandler?: FP.Lazy<void>
   inputOnFocusHandler?: FP.Lazy<void>
@@ -75,8 +72,6 @@ export const AssetCard: React.FC<Props> = (props): JSX.Element => {
     slip,
     priceAsset,
     percentValue = NaN,
-    withSearch = false,
-    searchDisable = [],
     onChangeAssetAmount = (_: BaseAmount) => {},
     inputOnBlurHandler = FP.constVoid,
     inputOnFocusHandler = FP.constVoid,
@@ -98,13 +93,10 @@ export const AssetCard: React.FC<Props> = (props): JSX.Element => {
   const { asset, address: assetAddress } = assetWA
 
   const [openDropdown, setOpenDropdown] = useState(false)
-  const ref: RefObject<HTMLDivElement> = useRef(null)
 
   const selectedAmountBn = useMemo(() => baseToAsset(selectedAmount).amount(), [selectedAmount])
   const maxAmountBn = useMemo(() => baseToAsset(maxAmount).amount(), [maxAmount])
 
-  useClickOutside<HTMLDivElement>(ref, () => setOpenDropdown(false))
-
   const handleChangeAsset = useCallback(
     (asset: Asset) => {
       onChangeAsset(asset)
@@ -113,20 +105,20 @@ export const AssetCard: React.FC<Props> = (props): JSX.Element => {
     [onChangeAsset, onChangeAssetAmount]
   )
 
-  const renderMenu = useCallback(() => {
+  const renderMenu = useMemo(() => {
     const sortedAssets = assets.sort(ordAsset.compare)
 
     return (
       <AssetMenu
-        assets={sortedAssets}
         asset={asset}
-        withSearch={withSearch}
-        searchDisable={searchDisable}
+        assets={sortedAssets}
         onSelect={handleChangeAsset}
         network={network}
+        open={openDropdown}
+        onClose={() => setOpenDropdown(false)}
       />
     )
-  }, [assets, asset, withSearch, searchDisable, handleChangeAsset, network])
+  }, [assets, asset, handleChangeAsset, network, openDropdown])
 
   const withPercentSlider = useMemo(() => !isNaN(percentValue), [percentValue])
 
@@ -151,67 +143,68 @@ export const AssetCard: React.FC<Props> = (props): JSX.Element => {
   }, [asset, assetBalance])
 
   return (
-    <Styled.AssetCardWrapper ref={ref}>
-      <Dropdown overlay={renderMenu()} trigger={[]} visible={openDropdown}>
-        <Styled.CardBorderWrapper error={minAmountError}>
-          <TooltipAddress title={assetAddress}>
-            <Styled.Header>
-              <Styled.AssetLabel asset={asset} />
-              {balanceLabel}
-            </Styled.Header>
-          </TooltipAddress>
-          <Styled.CardTopRow>
-            <Styled.AssetDataWrapper>
-              <Styled.AssetData>
-                <Styled.InputBigNumber
-                  disabled={disabled}
-                  value={selectedAmountBn}
-                  onChange={changeAssetAmountHandler}
-                  decimal={selectedAmount.decimal}
-                  max={maxAmountBn.toString()}
-                  onBlur={inputOnBlurHandler}
-                  onFocus={inputOnFocusHandler}
-                />
-                <Styled.AssetCardFooter>
-                  <Styled.FooterLabel>{priceLabel}</Styled.FooterLabel>
-                  {slip !== undefined && (
-                    <Styled.FooterLabel className="asset-slip-label">SLIP: {slip.toFixed(0)} %</Styled.FooterLabel>
-                  )}
-                </Styled.AssetCardFooter>
-              </Styled.AssetData>
-              <Styled.AssetSelectContainer>
-                <Styled.AssetSelect
-                  showAssetName={false}
-                  assets={assets}
-                  asset={asset}
-                  onSelect={handleChangeAsset}
-                  network={network}
-                />
-
-                <Styled.WalletTypeContainer>
-                  {FP.pipe(
-                    oWalletType,
-                    O.fold(
-                      () => <></>,
-                      (walletType) => (
-                        <>
-                          <Styled.CheckButton
-                            checked={isLedgerWallet(walletType)}
-                            clickHandler={(checked) => onChangeWalletType(checked ? 'ledger' : 'keystore')}
-                            disabled={walletTypeDisabled}>
-                            {intl.formatMessage({ id: 'ledger.title' })}
-                          </Styled.CheckButton>
-                          {walletTypeTooltip && <InfoIcon color={walletTypeTooltipColor} tooltip={walletTypeTooltip} />}
-                        </>
-                      )
+    <Styled.AssetCardWrapper>
+      {renderMenu}
+      <Styled.CardBorderWrapper error={minAmountError}>
+        <TooltipAddress title={assetAddress}>
+          <Styled.Header>
+            <Styled.AssetLabel asset={asset} />
+            {balanceLabel}
+          </Styled.Header>
+        </TooltipAddress>
+        <Styled.CardTopRow>
+          <Styled.AssetDataWrapper>
+            <Styled.AssetData>
+              <Styled.InputBigNumber
+                disabled={disabled}
+                value={selectedAmountBn}
+                onChange={changeAssetAmountHandler}
+                decimal={selectedAmount.decimal}
+                max={maxAmountBn.toString()}
+                onBlur={inputOnBlurHandler}
+                onFocus={inputOnFocusHandler}
+              />
+              <Styled.AssetCardFooter>
+                <Styled.FooterLabel>{priceLabel}</Styled.FooterLabel>
+                {slip !== undefined && (
+                  <Styled.FooterLabel className="asset-slip-label">SLIP: {slip.toFixed(0)} %</Styled.FooterLabel>
+                )}
+              </Styled.AssetCardFooter>
+            </Styled.AssetData>
+            <Styled.AssetSelectContainer>
+              <AssetSelect
+                className="w-[100px]"
+                showAssetName={false}
+                assets={assets}
+                asset={asset}
+                onSelect={handleChangeAsset}
+                dialogHeadline={intl.formatMessage({ id: 'common.asset.change' })}
+                network={network}
+              />
+
+              <Styled.WalletTypeContainer>
+                {FP.pipe(
+                  oWalletType,
+                  O.fold(
+                    () => <></>,
+                    (walletType) => (
+                      <>
+                        <Styled.CheckButton
+                          checked={isLedgerWallet(walletType)}
+                          clickHandler={(checked) => onChangeWalletType(checked ? 'ledger' : 'keystore')}
+                          disabled={walletTypeDisabled}>
+                          {intl.formatMessage({ id: 'ledger.title' })}
+                        </Styled.CheckButton>
+                        {walletTypeTooltip && <InfoIcon color={walletTypeTooltipColor} tooltip={walletTypeTooltip} />}
+                      </>
                     )
-                  )}
-                </Styled.WalletTypeContainer>
-              </Styled.AssetSelectContainer>
-            </Styled.AssetDataWrapper>
-          </Styled.CardTopRow>
-        </Styled.CardBorderWrapper>
-      </Dropdown>
+                  )
+                )}
+              </Styled.WalletTypeContainer>
+            </Styled.AssetSelectContainer>
+          </Styled.AssetDataWrapper>
+        </Styled.CardTopRow>
+      </Styled.CardBorderWrapper>
       {minAmountLabel && (
         <Styled.MinAmountLabel color={minAmountError ? 'error' : 'normal'}>{minAmountLabel}</Styled.MinAmountLabel>
       )}

src/renderer/components/uielements/assets/assetMenu/AssetMenu.stories.tsx

@@ -1,27 +1,45 @@
+import { useState } from 'react'
+
 import { ComponentMeta } from '@storybook/react'
-import { AssetBNB, AssetBTC, AssetRuneNative } from '@xchainjs/xchain-util'
-import * as FP from 'fp-ts/lib/function'
+import {
+  Asset,
+  AssetBCH,
+  AssetBNB,
+  AssetBTC,
+  AssetDOGE,
+  AssetETH,
+  AssetLTC,
+  AssetRuneNative
+} from '@xchainjs/xchain-util'
 
-import { Network } from '../../../../../shared/api/types'
+import { AssetBUSDBD1 } from '../../../../const'
 import * as AT from '../../../../storybook/argTypes'
-import { AssetMenu as Component } from './AssetMenu'
+import { AssetMenu as Component, Props } from './AssetMenu'
 
-type Args = {
-  withSearch: boolean
-  network: Network
-  onSelect: FP.Lazy<void>
-}
+const assets = [AssetBTC, AssetBNB, AssetRuneNative, AssetETH, AssetLTC, AssetBCH, AssetDOGE, AssetBUSDBD1]
 
-const Template = ({ network, withSearch, onSelect }: Args) => (
-  <Component
-    withSearch={withSearch}
-    asset={AssetBNB}
-    assets={[AssetBNB, AssetBTC, AssetRuneNative]}
-    onSelect={onSelect}
-    searchDisable={[]}
-    network={network}
-  />
-)
+const Template = ({ network, onSelect, open, onClose, headline }: Props) => {
+  const [asset, setAsset] = useState<Asset>(AssetBNB)
+  const [openMenu, setOpenMenu] = useState(open)
+  return (
+    <Component
+      asset={asset}
+      assets={assets}
+      open={openMenu}
+      headline={headline}
+      onSelect={(asset) => {
+        onSelect(asset)
+        setAsset(asset)
+        setOpenMenu(false)
+      }}
+      onClose={() => {
+        onClose()
+        setOpenMenu(false)
+      }}
+      network={network}
+    />
+  )
+}
 export const Default = Template.bind({})
 
 const meta: ComponentMeta<typeof Template> = {
@@ -31,12 +49,15 @@ const meta: ComponentMeta<typeof Template> = {
     network: AT.network,
     onSelect: {
       action: 'onSelect'
+    },
+    onClose: {
+      action: 'onClose'
     }
   },
-  args: { network: 'mainnet', withSearch: false },
+  args: { network: 'mainnet', open: true, headline: 'Menu headline' },
   decorators: [
     (Story) => (
-      <div style={{ display: 'flex', padding: '20px' }}>
+      <div className="flex min-h-full w-full bg-white">
         <Story />
       </div>
     )