Skip to content
This repository has been archived by the owner on Oct 10, 2023. It is now read-only.

Commit

Permalink
[AssetInput] Add Ledger + extraContent (#2505)
Browse files Browse the repository at this point in the history 
Extracted from #2502 to be part of #2503
  • Loading branch information
@veado
veado authored Dec 30, 2022
1 parent 02e62cd commit 6a49ef3
Show file tree
Hide file tree
Showing 4 changed files with 146 additions and 167 deletions.
56 changes: 22 additions & 34 deletions src/renderer/components/savers/AddSavers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ import { AssetWithAmount, AssetWithDecimal } from '../../types/asgardex'
import { PricePool } from '../../views/pools/Pools.types'
import { AssetInput } from '../uielements/assets/assetInput'
import { BaseButton, FlatButton } from '../uielements/button'
import { CheckButton } from '../uielements/button/CheckButton'
import { MaxBalanceButton } from '../uielements/button/MaxBalanceButton'
import { TooltipAddress } from '../uielements/common/Common.styles'

Expand Down Expand Up @@ -98,41 +97,30 @@ export const AddSavers: React.FC<Props> = (props): JSX.Element => {
onChange={setAmountToSendMax1e8}
onBlur={reloadFeesHandler}
showError={minAmountError}
hasLedger={hasLedger}
useLedger={useLedger}
useLedgerHandler={onClickUseLedger}
extraContent={
<div className="flex flex-col">
<MaxBalanceButton
className="ml-10px mt-5px"
classNameButton="!text-gray2 dark:!text-gray2d"
classNameIcon={
// show warn icon if maxAmountToSwapMax <= 0
maxAmountToSendMax1e8.gt(zeroBaseAmountMax1e8)
? `text-gray2 dark:text-gray2d`
: 'text-warning0 dark:text-warning0d'
}
size="medium"
balance={{ amount: maxAmountToSendMax1e8, asset }}
onClick={() => setAmountToSendMax1e8(maxAmountToSendMax1e8)}
maxInfoText={maxBalanceInfoTxt}
/>
{minAmountError && renderMinAmount}
</div>
}
/>

<div className="flex flex-row">
<div className="flex w-full flex-col">
<MaxBalanceButton
className="ml-10px mt-5px"
classNameButton="!text-gray2 dark:!text-gray2d"
classNameIcon={
// show warn icon if maxAmountToSwapMax <= 0
maxAmountToSendMax1e8.gt(zeroBaseAmountMax1e8)
? `text-gray2 dark:text-gray2d`
: 'text-warning0 dark:text-warning0d'
}
size="medium"
balance={{ amount: maxAmountToSendMax1e8, asset }}
onClick={() => setAmountToSendMax1e8(maxAmountToSendMax1e8)}
maxInfoText={maxBalanceInfoTxt}
/>
{minAmountError && renderMinAmount}
</div>
{/* Note: 'items-start' needed to avoid stretch button in height of parent container */}
<div className="flex w-full items-start justify-end">
<CheckButton
size="medium"
color="neutral"
className={`${ASSET_SELECT_BUTTON_WIDTH} rounded-b-lg bg-gray0 py-5px dark:bg-gray0d ${
!hasLedger ? 'hidden' : ''
}`}
checked={useLedger}
clickHandler={onClickUseLedger}>
{intl.formatMessage({ id: 'ledger.title' })}
</CheckButton>
</div>
</div>

<div className="flex flex-col items-center justify-center">
<FlatButton
className="my-30px min-w-[200px]"
Expand Down
56 changes: 22 additions & 34 deletions src/renderer/components/savers/WithdrawSavers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ import { AssetWithAmount, AssetWithDecimal } from '../../types/asgardex'
import { PricePool } from '../../views/pools/Pools.types'
import { AssetInput } from '../uielements/assets/assetInput'
import { BaseButton, FlatButton } from '../uielements/button'
import { CheckButton } from '../uielements/button/CheckButton'
import { MaxBalanceButton } from '../uielements/button/MaxBalanceButton'
import { TooltipAddress } from '../uielements/common/Common.styles'

Expand Down Expand Up @@ -98,41 +97,30 @@ export const WithdrawSavers: React.FC<Props> = (props): JSX.Element => {
onChange={setAmountToSendMax1e8}
onBlur={reloadFeesHandler}
showError={minAmountError}
hasLedger={hasLedger}
useLedger={useLedger}
useLedgerHandler={onClickUseLedger}
extraContent={
<div className="flex flex-col">
<MaxBalanceButton
className="ml-10px mt-5px"
classNameButton="!text-gray2 dark:!text-gray2d"
classNameIcon={
// show warn icon if maxAmountToSwapMax <= 0
maxAmountToSendMax1e8.gt(zeroBaseAmountMax1e8)
? `text-gray2 dark:text-gray2d`
: 'text-warning0 dark:text-warning0d'
}
size="medium"
balance={{ amount: maxAmountToSendMax1e8, asset }}
onClick={() => setAmountToSendMax1e8(maxAmountToSendMax1e8)}
maxInfoText={maxBalanceInfoTxt}
/>
{minAmountError && renderMinAmount}
</div>
}
/>

<div className="flex flex-row">
<div className="flex w-full flex-col">
<MaxBalanceButton
className="ml-10px mt-5px"
classNameButton="!text-gray2 dark:!text-gray2d"
classNameIcon={
// show warn icon if maxAmountToSwapMax <= 0
maxAmountToSendMax1e8.gt(zeroBaseAmountMax1e8)
? `text-gray2 dark:text-gray2d`
: 'text-warning0 dark:text-warning0d'
}
size="medium"
balance={{ amount: maxAmountToSendMax1e8, asset }}
onClick={() => setAmountToSendMax1e8(maxAmountToSendMax1e8)}
maxInfoText={maxBalanceInfoTxt}
/>
{minAmountError && renderMinAmount}
</div>
{/* Note: 'items-start' needed to avoid stretch button in height of parent container */}
<div className="flex w-full items-start justify-end">
<CheckButton
size="medium"
color="neutral"
className={`${ASSET_SELECT_BUTTON_WIDTH} rounded-b-lg bg-gray0 py-5px dark:bg-gray0d ${
!hasLedger ? 'hidden' : ''
}`}
checked={useLedger}
clickHandler={onClickUseLedger}>
{intl.formatMessage({ id: 'ledger.title' })}
</CheckButton>
</div>
</div>

<div className="flex flex-col items-center justify-center">
<FlatButton
className="my-30px min-w-[200px]"
Expand Down
74 changes: 24 additions & 50 deletions src/renderer/components/swap/Swap.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,9 +100,7 @@ import { TxModal } from '../modal/tx'
import { SwapAssets } from '../modal/tx/extra'
import { LoadingView } from '../shared/loading'
import { AssetInput } from '../uielements/assets/assetInput'
import { ASSET_SELECT_BUTTON_WIDTH } from '../uielements/assets/assetInput/AssetInput'
import { BaseButton, FlatButton, ViewTxButton } from '../uielements/button'
import { CheckButton } from '../uielements/button/CheckButton'
import { MaxBalanceButton } from '../uielements/button/MaxBalanceButton'
import { Tooltip, TooltipAddress, WalletTypeLabel } from '../uielements/common/Common.styles'
import { Fees, UIFeesRD } from '../uielements/fees'
Expand Down Expand Up @@ -1648,24 +1646,24 @@ export const Swap = ({
return (
<div className="my-50px flex w-full max-w-[500px] flex-col justify-between">
<div>
<div className="flex flex-col">
{/* Note: Input value is shown as AssetAmount */}

<AssetInput
className="w-full"
title={intl.formatMessage({ id: 'swap.input' })}
amount={{ amount: amountToSwapMax1e8, asset: sourceAsset }}
priceAmount={priceAmountToSwapMax1e8}
assets={selectableSourceAssets}
network={network}
onChangeAsset={setSourceAsset}
onChange={setAmountToSwapMax1e8}
onBlur={reloadFeesHandler}
showError={minAmountError}
/>

<div className="flex flex-row">
<div className="flex w-full flex-col">
{/* Note: Input value is shown as AssetAmount */}

<AssetInput
className="w-full"
title={intl.formatMessage({ id: 'swap.input' })}
amount={{ amount: amountToSwapMax1e8, asset: sourceAsset }}
priceAmount={priceAmountToSwapMax1e8}
assets={selectableSourceAssets}
network={network}
onChangeAsset={setSourceAsset}
onChange={setAmountToSwapMax1e8}
onBlur={reloadFeesHandler}
showError={minAmountError}
hasLedger={hasSourceAssetLedger}
useLedger={useSourceAssetLedger}
useLedgerHandler={onClickUseSourceAssetLedger}
extraContent={
<div className="flex flex-col">
<MaxBalanceButton
className="ml-10px mt-5px"
classNameButton="!text-gray2 dark:!text-gray2d"
Expand All @@ -1682,21 +1680,8 @@ export const Swap = ({
/>
{minAmountError && renderMinAmount}
</div>
{/* Note: 'items-start' needed to avoid stretch button in height of parent container */}
<div className="flex w-full items-start justify-end">
<CheckButton
size="medium"
color="neutral"
className={`${ASSET_SELECT_BUTTON_WIDTH} rounded-b-lg bg-gray0 py-5px dark:bg-gray0d ${
!hasSourceAssetLedger ? 'hidden' : ''
}`}
checked={useSourceAssetLedger}
clickHandler={onClickUseSourceAssetLedger}>
{intl.formatMessage({ id: 'ledger.title' })}
</CheckButton>
</div>
</div>
</div>
}
/>

<div className="mb-20px flex w-full justify-center">
<BaseButton
Expand All @@ -1721,20 +1706,10 @@ export const Swap = ({
assets={selectableTargetAssets}
network={network}
asLabel
useLedger={useTargetAssetLedger}
useLedgerHandler={onClickUseTargetAssetLedger}
hasLedger={hasTargetAssetLedger}
/>
{/* Note: 'items-start' needed to avoid stretch button in height of parent container */}
<div className="flex w-full items-start justify-end">
<CheckButton
size="medium"
color="neutral"
className={`${ASSET_SELECT_BUTTON_WIDTH} rounded-b-lg bg-gray0 py-5px dark:bg-gray0d ${
!hasTargetAssetLedger ? 'hidden' : ''
}`}
checked={useTargetAssetLedger}
clickHandler={onClickUseTargetAssetLedger}>
{intl.formatMessage({ id: 'ledger.title' })}
</CheckButton>
</div>
</div>
{!lockedWallet &&
FP.pipe(
Expand Down Expand Up @@ -1849,8 +1824,7 @@ export const Swap = ({
<div>{rateLabel}</div>
</div>
{/* fees */}
<div
className={`flex w-full items-center justify-between font-mainBold ${showDetails ? 'pt-10px' : ''}`}>
<div className="flex w-full items-center justify-between font-mainBold">
<BaseButton
disabled={RD.isPending(swapFeesRD) || RD.isInitial(swapFeesRD)}
className="group !p-0 !font-mainBold !text-gray2 dark:!text-gray2d"
Expand Down
Loading

0 comments on commit 6a49ef3

Please sign in to comment.