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

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

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,

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 (
     <>
       <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>

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<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])

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 (
     <select
       className={styles.coinSelect}
       onChange={(e) => setCoin(e.target.value)}
+      disabled={disabled}
     >
       <option className={styles.option} value="OCEAN">
         OCEAN

src/components/organisms/AssetActions/Pool/Remove.tsx

@@ -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>

src/components/organisms/AssetActions/Trade/FormTrade.tsx

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

src/components/organisms/AssetActions/Trade/Slippage.tsx

@@ -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." />

src/components/organisms/AssetActions/Trade/Swap.tsx

@@ -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>
   )
 }

src/components/organisms/AssetActions/Trade/TradeInput.tsx

@@ -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={() => {

src/components/organisms/AssetActions/Trade/index.tsx

@@ -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()