From b881fdd88ff35f82c3ca2ad448f30d91d892b49a Mon Sep 17 00:00:00 2001
From: Norbi <37236152+KatunaNorbert@users.noreply.github.com>
Date: Thu, 14 Oct 2021 15:48:20 +0300
Subject: [PATCH] Add liquidity input changes&fixes (#893)
* 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
---
src/components/atoms/Input/InputElement.tsx | 1 +
src/components/molecules/TokenApproval.tsx | 5 ++--
.../AssetActions/Pool/Add/FormAdd.tsx | 28 +++++++++++++++----
.../organisms/AssetActions/Pool/Add/index.tsx | 8 ++++--
.../AssetActions/Pool/CoinSelect.tsx | 3 ++
.../organisms/AssetActions/Pool/Remove.tsx | 7 +++++
.../AssetActions/Trade/FormTrade.tsx | 12 ++++++--
.../organisms/AssetActions/Trade/Slippage.tsx | 7 ++++-
.../organisms/AssetActions/Trade/Swap.tsx | 15 ++++++++--
.../AssetActions/Trade/TradeInput.tsx | 5 +++-
.../organisms/AssetActions/Trade/index.tsx | 14 ++++++++--
11 files changed, 85 insertions(+), 20 deletions(-)
diff --git a/src/components/atoms/Input/InputElement.tsx b/src/components/atoms/Input/InputElement.tsx
index 25423f973..c6a077d1d 100644
--- a/src/components/atoms/Input/InputElement.tsx
+++ b/src/components/atoms/Input/InputElement.tsx
@@ -63,6 +63,7 @@ export default function InputElement({
id={name}
className={styleClasses}
{...props}
+ disabled={disabled}
multiple={multiple}
>
{field !== undefined && field.value === '' && (
diff --git a/src/components/molecules/TokenApproval.tsx b/src/components/molecules/TokenApproval.tsx
index 33aa66d88..cea5ae020 100644
--- a/src/components/molecules/TokenApproval.tsx
+++ b/src/components/molecules/TokenApproval.tsx
@@ -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,
diff --git a/src/components/organisms/AssetActions/Pool/Add/FormAdd.tsx b/src/components/organisms/AssetActions/Pool/Add/FormAdd.tsx
index cfc98040f..44bc177da 100644
--- a/src/components/organisms/AssetActions/Pool/Add/FormAdd.tsx
+++ b/src/components/organisms/AssetActions/Pool/Add/FormAdd.tsx
@@ -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 (
<>
}
+ prefix={
+
+ }
placeholder="0"
field={field}
form={form}
onChange={handleFieldChange}
- disabled={!ocean}
+ disabled={!ocean || !isAssetNetwork}
/>
)}
@@ -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
diff --git a/src/components/organisms/AssetActions/Pool/Add/index.tsx b/src/components/organisms/AssetActions/Pool/Add/index.tsx
index 588aa5e2f..81023768e 100644
--- a/src/components/organisms/AssetActions/Pool/Add/index.tsx
+++ b/src/components/organisms/AssetActions/Pool/Add/index.tsx
@@ -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()
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])
diff --git a/src/components/organisms/AssetActions/Pool/CoinSelect.tsx b/src/components/organisms/AssetActions/Pool/CoinSelect.tsx
index bae29b724..463a0e46a 100644
--- a/src/components/organisms/AssetActions/Pool/CoinSelect.tsx
+++ b/src/components/organisms/AssetActions/Pool/CoinSelect.tsx
@@ -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 (