-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add trading buttons and deposit disclosure
- Loading branch information
Yavorski
committed
Feb 26, 2024
1 parent
3c9ba4d
commit 8deebec
Showing
20 changed files
with
527 additions
and
98 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
16 changes: 16 additions & 0 deletions
16
packages/trading-widget/src/components/deposit/button/trade-button/trade-button.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| import { useHandleTrade } from '@dhedge/core-ui-kit/hooks/trading' | ||
| import { useDeposit } from '@dhedge/core-ui-kit/hooks/trading/deposit' | ||
| import type { FC } from 'react' | ||
|
|
||
| import { ActionButton } from 'components/common' | ||
|
|
||
| export const DepositTradeButton: FC = () => { | ||
| const deposit = useDeposit() | ||
| const { disabled, label, handleTrade } = useHandleTrade(deposit) | ||
|
|
||
| return ( | ||
| <ActionButton onClick={handleTrade} disabled={disabled} highlighted> | ||
| {label} | ||
| </ActionButton> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
98 changes: 98 additions & 0 deletions
98
...widget/src/components/deposit/meta/transaction-disclosure/transaction-disclosure.hooks.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| import { | ||
| usePoolFees, | ||
| usePoolManagerLogicData, | ||
| } from '@dhedge/core-ui-kit/hooks/pool' | ||
| import { | ||
| useReceiveTokenInput, | ||
| useSendTokenInput, | ||
| useTradingPanelApprovingStatus, | ||
| useTradingPanelLockTime, | ||
| useTradingPanelPoolConfig, | ||
| useTradingPanelSettings, | ||
| } from '@dhedge/core-ui-kit/hooks/state' | ||
| import { useProjectedEarnings } from '@dhedge/core-ui-kit/hooks/trading/deposit' | ||
| import { formatToUsd } from '@dhedge/core-ui-kit/utils' | ||
| import BigNumber from 'bignumber.js' | ||
|
|
||
| import { useGetSlippagePlaceholder, useGetThemeTypeBySlippage } from 'hooks' | ||
| import { useConfigContextParams } from 'providers/config-provider' | ||
| import { useTranslationContext } from 'providers/translation-provider' | ||
|
|
||
| import { THEME_TYPE } from 'types' | ||
|
|
||
| export const useDepositTransactionDisclosure = () => { | ||
| const t = useTranslationContext() | ||
| const { customLockTime } = useConfigContextParams() | ||
| const [approvingStatus] = useTradingPanelApprovingStatus() | ||
| const [{ slippage, minSlippage, isInfiniteAllowance, isMaxSlippageLoading }] = | ||
| useTradingPanelSettings() | ||
| const [receiveToken] = useReceiveTokenInput() | ||
| const [sendToken] = useSendTokenInput() | ||
| const { address, chainId } = useTradingPanelPoolConfig() | ||
|
|
||
| const { entryFee, hasPoolEntryFee } = usePoolFees({ address, chainId }) | ||
| const { minDepositUSD } = usePoolManagerLogicData(address, chainId) | ||
| const projectedEarnings = useProjectedEarnings() | ||
| const lockTime = useTradingPanelLockTime() | ||
|
|
||
| const minDeposit = minDepositUSD | ||
| ? formatToUsd({ value: minDepositUSD, minimumFractionDigits: 0 }) | ||
| : '' | ||
|
|
||
| const isAutoSlippage = slippage === 'auto' | ||
|
|
||
| const themeType = useGetThemeTypeBySlippage( | ||
| isAutoSlippage ? minSlippage ?? 0 : slippage, | ||
| ) | ||
|
|
||
| const slippagePlaceholder = useGetSlippagePlaceholder( | ||
| 'deposit', | ||
| slippage, | ||
| minSlippage, | ||
| ) | ||
| const slippageTooltipText = | ||
| themeType === THEME_TYPE.DEFAULT ? t.slippageWarning : t.highSlippageWarning | ||
|
|
||
| const getMinReceiveText = () => { | ||
| if (isAutoSlippage) { | ||
| return `${new BigNumber(receiveToken.value ?? 0).toFixed( | ||
| 4, | ||
| )} ${receiveToken.symbol.toUpperCase()}` | ||
| } | ||
| if (receiveToken.symbol === 'all') { | ||
| return t.estimatedMultiAssetFractions | ||
| } | ||
|
|
||
| const receiveBalance = new BigNumber(receiveToken.value ?? 0) | ||
| const receiveValueAfterSlippage = | ||
| receiveToken.value && receiveBalance.isFinite() | ||
| ? receiveBalance.times(1 - slippage / 100).toFixed(4) | ||
| : '0' | ||
|
|
||
| return `${receiveValueAfterSlippage} ${receiveToken.symbol.toUpperCase()}` | ||
| } | ||
|
|
||
| const tokenAllowance = isInfiniteAllowance | ||
| ? t.infinite | ||
| : `${new BigNumber(sendToken.value || '0').toFixed(4)} ${sendToken.symbol}` | ||
|
|
||
| const entryFeeTooltipText = hasPoolEntryFee | ||
| ? t.entryFeeExplanation | ||
| : t.easySwapperEntryFee.replace('{time}', customLockTime) | ||
|
|
||
| return { | ||
| projectedEarnings, | ||
| themeType, | ||
| slippageTooltipText, | ||
| isMaxSlippageLoading, | ||
| slippagePlaceholder, | ||
| minReceive: getMinReceiveText(), | ||
| allowanceRequired: !approvingStatus, | ||
| tokenAllowance, | ||
| sendTokenSymbol: sendToken.symbol, | ||
| entryFee, | ||
| entryFeeTooltipText, | ||
| minDeposit, | ||
| lockTime, | ||
| } | ||
| } |
127 changes: 107 additions & 20 deletions
127
...ding-widget/src/components/deposit/meta/transaction-disclosure/transaction-disclosure.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,38 +1,125 @@ | ||
| import classNames from 'classnames' | ||
|
|
||
| import { useMemo } from 'react' | ||
|
|
||
| import type { TransactionDisclosureItemProps } from 'components/common' | ||
| import { TransactionOverviewDisclosure } from 'components/common' | ||
| import { Spinner, TransactionOverviewDisclosure } from 'components/common' | ||
| import { useTranslationContext } from 'providers/translation-provider' | ||
|
|
||
| import { THEME_TYPE } from 'types' | ||
|
|
||
| import { useDepositTransactionDisclosure } from './transaction-disclosure.hooks' | ||
|
|
||
| export const DepositTransactionOverviewDisclosure = () => { | ||
| const staticItems = useMemo<TransactionDisclosureItemProps[]>( | ||
| () => [ | ||
| const t = useTranslationContext() | ||
| const { | ||
| projectedEarnings: { yearlyEarnings, dailyEarnings }, | ||
| slippageTooltipText, | ||
| slippagePlaceholder, | ||
| isMaxSlippageLoading, | ||
| minReceive, | ||
| themeType, | ||
| allowanceRequired, | ||
| tokenAllowance, | ||
| sendTokenSymbol, | ||
| entryFee, | ||
| entryFeeTooltipText, | ||
| minDeposit, | ||
| lockTime, | ||
| } = useDepositTransactionDisclosure() | ||
|
|
||
| const staticItems: TransactionDisclosureItemProps[] = [ | ||
| { | ||
| tooltipText: t.projectedDailyEarningsTooltip, | ||
| label: t.dailyEarnings, | ||
| value: dailyEarnings, | ||
| emphasised: true, | ||
| }, | ||
| { | ||
| tooltipText: t.projectedYearlyEarningsTooltip, | ||
| label: t.yearlyEarnings, | ||
| value: yearlyEarnings, | ||
| emphasised: true, | ||
| }, | ||
| ] | ||
|
|
||
| const collapseItems = useMemo<TransactionDisclosureItemProps[]>(() => { | ||
| const items: TransactionDisclosureItemProps[] = [ | ||
| { | ||
| tooltipText: 'Deposit static tooltip text', | ||
| label: 'Deposit static label', | ||
| value: 'Deposit static value', | ||
| emphasised: true, | ||
| tooltipText: slippageTooltipText, | ||
| label: t.maxSlippage, | ||
| value: ( | ||
| <div className="dtw-flex dtw-gap-1"> | ||
| {isMaxSlippageLoading && ( | ||
| <Spinner | ||
| type={THEME_TYPE.CUSTOM} | ||
| className="dtw-stroke-[color:var(--panel-accent-from-color)] dtw-h-[var(--panel-icon-secondary-size)] sm:dtw-h-[var(--panel-icon-secondary-size-sm)] dtw-w-[var(--panel-icon-secondary-size)] sm:dtw-w-[var(--panel-icon-secondary-size-sm)]" | ||
| /> | ||
| )} | ||
| <span | ||
| className={classNames({ | ||
| 'dtw-text-[color:var(--panel-loading-content-color)]': | ||
| isMaxSlippageLoading, | ||
| })} | ||
| > | ||
| {slippagePlaceholder}% | ||
| </span> | ||
| </div> | ||
| ), | ||
| }, | ||
| ], | ||
| [], | ||
| ) | ||
|
|
||
| const collapseItems = useMemo<TransactionDisclosureItemProps[]>( | ||
| () => [ | ||
| { | ||
| tooltipText: 'Deposit collapse tooltip text', | ||
| label: 'Deposit collapse label', | ||
| value: 'Deposit collapse value', | ||
| tooltipText: t.minReceiveAmount, | ||
| label: t.minReceived, | ||
| value: minReceive, | ||
| }, | ||
| ], | ||
| [], | ||
| ) | ||
| ] | ||
|
|
||
| if (allowanceRequired) { | ||
| items.push({ | ||
| tooltipText: t.amountToBeApproved.replace('{symbol}', sendTokenSymbol), | ||
| label: t.tokenAllowance, | ||
| value: tokenAllowance, | ||
| }) | ||
| } | ||
|
|
||
| items.push({ | ||
| tooltipText: entryFeeTooltipText, | ||
| label: t.entryFee, | ||
| value: entryFee, | ||
| }) | ||
|
|
||
| if (minDeposit) { | ||
| items.push({ | ||
| tooltipText: t.minDepositUsd, | ||
| label: t.minDeposit, | ||
| value: minDeposit, | ||
| }) | ||
| } | ||
|
|
||
| return items | ||
| }, [ | ||
| slippageTooltipText, | ||
| t, | ||
| isMaxSlippageLoading, | ||
| slippagePlaceholder, | ||
| minReceive, | ||
| allowanceRequired, | ||
| sendTokenSymbol, | ||
| tokenAllowance, | ||
| entryFeeTooltipText, | ||
| entryFee, | ||
| minDeposit, | ||
| ]) | ||
|
|
||
| return ( | ||
| <TransactionOverviewDisclosure | ||
| staticItems={staticItems} | ||
| collapseItems={collapseItems} | ||
| themeType={themeType} | ||
| > | ||
| Deposit TransactionOverviewDisclosure Children | ||
| <p className="dtw-py-1"> | ||
| {t.tokensLockTime.replace('{lockTime}', lockTime)} | ||
| </p> | ||
| </TransactionOverviewDisclosure> | ||
| ) | ||
| } |
Oops, something went wrong.