oceanprotocol/market
1
0
Fork 0
mirror of https://github.com/oceanprotocol/market.git synced 2024-06-28 00:27:49 +02:00
Code Releases Activity

Add liquidity input changes&fixes (#893)

Browse Source 
* disable add liquidity input when not asset network

* clear amount on coin selection change

* fix switch token error

* disable trade tab inputs when not connected to asset network

* disable inputs and buttons inside remove when not connected

* remove ocean function calls when not connected to asset network

* fix send undefined as string inside Trade component to TokenApproval

* return from calculatePoolShares function if no wallet connected

* set amount on use max button click, use 3 digits after decimal
This commit is contained in:
Norbi 2021-10-14 15:48:20 +03:00 committed by GitHub
parent d1206c291b
commit b881fdd88f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 85 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/atoms/Input/InputElement.tsx
View File

@ -63,6 +63,7 @@ export default function InputElement({
id={name}
className={styleClasses}
{...props}
disabled={disabled}
multiple={multiple}
>
{field !== undefined && field.value === '' && (

5
src/components/molecules/TokenApproval.tsx
View File

@ -77,7 +77,7 @@ export default function TokenApproval({
amount: string
coin: string
}): ReactElement {
const { ddo, price } = useAsset()
const { ddo, price, isAssetNetwork } = useAsset()
const [tokenApproved, setTokenApproved] = useState(false)
const [loading, setLoading] = useState(false)
const { ocean } = useOcean()
@ -90,7 +90,8 @@ export default function TokenApproval({
const spender = price.address
const checkTokenApproval = useCallback(async () => {
if (!ocean || !tokenAddress || !spender) return
if (!ocean || !tokenAddress || !spender || !isAssetNetwork || !amount)
return
const allowance = await ocean.datatokens.allowance(
tokenAddress,

28
src/components/organisms/AssetActions/Pool/Add/FormAdd.tsx
View File

@ -17,6 +17,7 @@ import { useWeb3 } from '../../../../../providers/Web3'
import { isValidNumber } from './../../../../../utils/numberValidations'
import Decimal from 'decimal.js'
import { useAsset } from '../../../../../providers/Asset'
export default function FormAdd({
coin,
@ -45,6 +46,7 @@ export default function FormAdd({
}): ReactElement {
const { balance } = useWeb3()
const { ocean } = useOcean()
const { isAssetNetwork } = useAsset()
// Connect with form
const {
@ -68,7 +70,10 @@ export default function FormAdd({
useEffect(() => {
async function calculatePoolShares() {
if (!values.amount) {
if (!ocean) return
const tokenInAddress =
coin === 'OCEAN' ? ocean.pool.oceanAddress : ocean.pool.dtAddress
if (!values.amount || !tokenInAddress) {
setNewPoolTokens('0')
setNewPoolShare('0')
return
@ -78,7 +83,7 @@ export default function FormAdd({
const poolTokens = await ocean.pool.calcPoolOutGivenSingleIn(
poolAddress,
coin === 'OCEAN' ? ocean.pool.oceanAddress : ocean.pool.dtAddress,
tokenInAddress,
`${values.amount}`
)
@ -109,6 +114,10 @@ export default function FormAdd({
setNewPoolShare
])
useEffect(() => {
setFieldValue('amount', undefined)
}, [coin])
return (
<>
<UserLiquidity
@ -132,12 +141,18 @@ export default function FormAdd({
min="0"
value={`${values.amount}`}
step="any"
prefix={<CoinSelect dtSymbol={dtSymbol} setCoin={setCoin} />}
prefix={
<CoinSelect
dtSymbol={dtSymbol}
setCoin={setCoin}
disabled={!ocean || !isAssetNetwork}
/>
}
placeholder="0"
field={field}
form={form}
onChange={handleFieldChange}
disabled={!ocean}
disabled={!ocean || !isAssetNetwork}
/>
)}
</Field>
@ -148,7 +163,10 @@ export default function FormAdd({
style="text"
size="small"
disabled={!ocean}
onClick={() => setFieldValue('amount', amountMax)}
onClick={() => {
setAmount(amountMax)
setFieldValue('amount', amountMax)
}}
>
Use Max
</Button>

8
src/components/organisms/AssetActions/Pool/Add/index.tsx
View File

@ -14,6 +14,7 @@ import Output from './Output'
import DebugOutput from '../../../../atoms/DebugOutput'
import { useOcean } from '../../../../../providers/Ocean'
import { useWeb3 } from '../../../../../providers/Web3'
import { useAsset } from '../../../../../providers/Asset'
const contentQuery = graphql`
query PoolAddQuery {
@ -67,6 +68,7 @@ export default function Add({
const { accountId, balance } = useWeb3()
const { ocean } = useOcean()
const { isAssetNetwork } = useAsset()
const { debug } = useUserPreferences()
const [txId, setTxId] = useState<string>()
const [coin, setCoin] = useState('OCEAN')
@ -91,7 +93,7 @@ export default function Add({
// Get datatoken balance when datatoken selected
useEffect(() => {
if (!ocean || coin === 'OCEAN') return
if (!ocean || !isAssetNetwork || coin === 'OCEAN') return
async function getDtBalance() {
const dtBalance = await ocean.datatokens.balance(dtAddress, accountId)
@ -102,7 +104,7 @@ export default function Add({
// Get maximum amount for either OCEAN or datatoken
useEffect(() => {
if (!ocean || !poolAddress) return
if (!ocean || !isAssetNetwork || !poolAddress) return
async function getMaximum() {
const amountMaxPool =
@ -118,7 +120,7 @@ export default function Add({
: Number(dtBalance) > Number(amountMaxPool)
? amountMaxPool
: dtBalance
setAmountMax(amountMax)
setAmountMax(Number(amountMax).toFixed(3))
}
getMaximum()
}, [ocean, poolAddress, coin, dtBalance, balance.ocean])

3
src/components/organisms/AssetActions/Pool/CoinSelect.tsx
View File

@ -3,15 +3,18 @@ import styles from './CoinSelect.module.css'
export default function CoinSelect({
dtSymbol,
disabled,
setCoin
}: {
dtSymbol: string
disabled: boolean
setCoin: (coin: string) => void
}): ReactElement {
return (
<select
className={styles.coinSelect}
onChange={(e) => setCoin(e.target.value)}
disabled={disabled}
>
<option className={styles.option} value="OCEAN">
OCEAN

7
src/components/organisms/AssetActions/Pool/Remove.tsx
View File

@ -22,6 +22,7 @@ import InputElement from '../../../atoms/Input/InputElement'
import { useOcean } from '../../../../providers/Ocean'
import { useWeb3 } from '../../../../providers/Web3'
import Decimal from 'decimal.js'
import { useAsset } from '../../../../providers/Asset'
const contentQuery = graphql`
query PoolRemoveQuery {
@ -69,6 +70,7 @@ export default function Remove({
const slippagePresets = ['5', '10', '15', '25', '50']
const { accountId } = useWeb3()
const { ocean } = useOcean()
const { isAssetNetwork } = useAsset()
const [amountPercent, setAmountPercent] = useState('0')
const [amountMaxPercent, setAmountMaxPercent] = useState('100')
const [amountPoolShares, setAmountPoolShares] = useState('0')
@ -231,6 +233,7 @@ export default function Remove({
type="range"
min="0"
max={amountMaxPercent}
disabled={!isAssetNetwork}
value={amountPercent}
onChange={handleAmountPercentChange}
/>
@ -238,6 +241,7 @@ export default function Remove({
style="text"
size="small"
className={styles.maximum}
disabled={!isAssetNetwork}
onClick={handleMaxButton}
>
{`${amountMaxPercent}% max`}
@ -251,6 +255,7 @@ export default function Remove({
style="text"
size="small"
onClick={handleAdvancedButton}
disabled={!isAssetNetwork}
className={styles.toggle}
>
{isAdvanced === true ? 'Simple' : 'Advanced'}
@ -283,6 +288,7 @@ export default function Remove({
postfix="%"
sortOptions={false}
options={slippagePresets}
disabled={!isAssetNetwork}
value={slippage}
onChange={handleSlippageChange}
/>
@ -293,6 +299,7 @@ export default function Remove({
actionName={content.action}
action={handleRemoveLiquidity}
successMessage="Successfully removed liquidity."
isDisabled={!isAssetNetwork}
txId={txId}
/>
</div>

12
src/components/organisms/AssetActions/Trade/FormTrade.tsx
View File

@ -164,9 +164,15 @@ export default function FormTrade({
loaderMessage="Swapping tokens..."
successMessage="Successfully swapped tokens."
actionName={content.action}
amount={`${
values.type === 'sell' ? values.datatoken : values.ocean
}`}
amount={
values.type === 'sell'
? values.datatoken
? `${values.datatoken}`
: undefined
: values.ocean
? `${values.ocean}`
: undefined
}
action={submitForm}
coin={coinFrom}
txId={txId}

7
src/components/organisms/AssetActions/Trade/Slippage.tsx
View File

@ -5,7 +5,11 @@ import InputElement from '../../../atoms/Input/InputElement'
import Tooltip from '../../../atoms/Tooltip'
import styles from './Slippage.module.css'
export default function Slippage(): ReactElement {
export default function Slippage({
disabled
}: {
disabled: boolean
}): ReactElement {
// Connect with form
const { setFieldValue, values }: FormikContextType<FormTradeData> =
useFormikContext()
@ -26,6 +30,7 @@ export default function Slippage(): ReactElement {
sortOptions={false}
options={slippagePresets}
value={values.slippage}
disabled={disabled}
onChange={handleChange}
/>
<Tooltip content="Your transaction will revert if the price changes unfavorably by more than this percentage." />

15
src/components/organisms/AssetActions/Trade/Swap.tsx
View File

@ -14,6 +14,7 @@ import PriceImpact from './PriceImpact'
import Decimal from 'decimal.js'
import { BestPrice } from '../../../../models/BestPrice'
import { useAsset } from '../../../../providers/Asset'
Decimal.set({ toExpNeg: -18, precision: 18, rounding: 1 })
@ -36,7 +37,8 @@ export default function Swap({
setMaximumOcean: (value: string) => void
setCoin: (value: string) => void
}): ReactElement {
const { ocean, config } = useOcean()
const { ocean } = useOcean()
const { isAssetNetwork } = useAsset()
const [oceanItem, setOceanItem] = useState<TradeItem>({
amount: '0',
token: price.oceanSymbol,
@ -203,16 +205,23 @@ export default function Swap({
<TradeInput
name={values.type === 'sell' ? 'datatoken' : 'ocean'}
item={values.type === 'sell' ? dtItem : oceanItem}
disabled={!isAssetNetwork}
handleValueChange={handleValueChange}
/>
<Button className={styles.swapButton} style="text" onClick={switchTokens}>
<Button
className={styles.swapButton}
style="text"
onClick={switchTokens}
disabled={!isAssetNetwork}
>
<Arrow />
</Button>
<TradeInput
name={values.type === 'sell' ? 'ocean' : 'datatoken'}
item={values.type === 'sell' ? oceanItem : dtItem}
disabled={!isAssetNetwork}
handleValueChange={handleValueChange}
/>
@ -227,7 +236,7 @@ export default function Swap({
tokenAmount={tokenAmount}
spotPrice={spotPrice}
/>
<Slippage />
<Slippage disabled={!isAssetNetwork} />
</div>
)
}

5
src/components/organisms/AssetActions/Trade/TradeInput.tsx
View File

@ -15,10 +15,12 @@ import { useOcean } from '../../../../providers/Ocean'
export default function TradeInput({
name,
item,
disabled,
handleValueChange
}: {
name: string
item: TradeItem
disabled: boolean
handleValueChange: (name: string, value: number) => void
}): ReactElement {
const { ocean } = useOcean()
@ -62,13 +64,14 @@ export default function TradeInput({
validateForm()
handleChange(e)
}}
disabled={!ocean}
disabled={!ocean || disabled}
/>
)}
</Field>
{!isTopField && (
<Button
className={styles.buttonMax}
disabled={disabled}
style="text"
size="small"
onClick={() => {

14
src/components/organisms/AssetActions/Trade/index.tsx
View File

@ -13,6 +13,7 @@ Decimal.set({ toExpNeg: -18, precision: 18, rounding: 1 })
export default function Trade(): ReactElement {
const { accountId, balance } = useWeb3()
const { ocean } = useOcean()
const { isAssetNetwork } = useAsset()
const [tokenBalance, setTokenBalance] = useState<PoolBalance>()
const { price, ddo } = useAsset()
const [maxDt, setMaxDt] = useState('0')
@ -20,7 +21,14 @@ export default function Trade(): ReactElement {
// Get datatoken balance, and combine with OCEAN balance from hooks into one object
useEffect(() => {
if (!ocean || !balance?.ocean || !accountId || !ddo?.dataToken) return
if (
!ocean ||
!isAssetNetwork ||
!balance?.ocean ||
!accountId ||
!ddo?.dataToken
)
return
async function getTokenBalance() {
const dtBalance = await ocean.datatokens.balance(ddo.dataToken, accountId)
@ -34,12 +42,13 @@ export default function Trade(): ReactElement {
// Get maximum amount for either OCEAN or datatoken
useEffect(() => {
if (!ocean || !price || price.value === 0) return
if (!ocean || !isAssetNetwork || !price || price.value === 0) return
async function getMaximum() {
const maxTokensInPool = await ocean.pool.getDTMaxBuyQuantity(
price.address
)
setMaxDt(
isValidNumber(maxTokensInPool)
? new Decimal(maxTokensInPool).toString()
@ -49,6 +58,7 @@ export default function Trade(): ReactElement {
const maxOceanInPool = await ocean.pool.getOceanMaxBuyQuantity(
price.address
)
setMaxOcean(
isValidNumber(maxOceanInPool)
? new Decimal(maxOceanInPool).toString()