allow to add OCEAN or Datatoken

src/components/atoms/Input/index.tsx

@@ -35,8 +35,8 @@ export interface InputProps {
   readOnly?: boolean
   field?: any
   form?: any
-  prefix?: string
-  postfix?: string
+  prefix?: ReactNode | string
+  postfix?: ReactNode | string
   step?: string
   defaultChecked?: boolean
   small?: boolean

src/components/atoms/Tooltip.module.css

@@ -5,7 +5,6 @@
 .content {
   composes: box from './Box.module.css';
   padding: calc(var(--spacer) / 4);
-  min-width: 20rem;
   max-width: 25rem;
   font-size: var(--font-size-small);
 }

src/components/atoms/Tooltip.tsx

@@ -4,6 +4,7 @@ import loadable from '@loadable/component'
 import { useSpring, animated } from 'react-spring'
 import styles from './Tooltip.module.css'
 import { ReactComponent as Info } from '../../images/info.svg'
+import { Placement } from 'tippy.js'
 
 const cx = classNames.bind(styles)
 
@@ -26,13 +27,15 @@ export default function Tooltip({
   children,
   trigger,
   disabled,
-  className
+  className,
+  placement
 }: {
   content: ReactNode
   children?: ReactNode
   trigger?: string
   disabled?: boolean
   className?: string
+  placement?: Placement
 }): ReactElement {
   const [props, setSpring] = useSpring(() => animation.from)
 
@@ -64,6 +67,7 @@ export default function Tooltip({
       zIndex={1}
       trigger={trigger || 'mouseenter focus'}
       disabled={disabled || null}
+      placement={placement}
       render={(attrs: any) => (
         <animated.div style={props}>
           <div className={styles.content} {...attrs}>

src/components/organisms/AssetActions/Pool/Add.module.css

@@ -1,6 +1,3 @@
-.add {
-}
-
 .addInput {
   margin: 0 auto calc(var(--spacer) / 1.5) auto;
   background: var(--brand-grey-dimmed);
@@ -24,7 +21,7 @@
   right: calc(var(--spacer) * 3);
 }
 
-.userBalance {
+.userLiquidity {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -33,11 +30,29 @@
   color: var(--color-secondary);
 }
 
-.userBalance span + div {
+.userLiquidity span + div {
   transform: scale(0.8);
   transform-origin: right center;
 }
 
+.coinswitch,
+.coinPopover li {
+  cursor: pointer;
+}
+
+.coinswitch svg {
+  width: 0.6em;
+  height: 0.6em;
+  display: inline-block;
+  fill: currentColor;
+  margin-right: 0.5rem;
+  margin-left: 0.25rem;
+}
+
+.coinPopover li {
+  padding: calc(var(--spacer) / 4) calc(var(--spacer) / 2);
+}
+
 .output {
   display: grid;
   gap: var(--spacer);

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

@@ -10,25 +10,30 @@ import { Balance } from './'
 import PriceUnit from '../../../atoms/Price/PriceUnit'
 import Actions from './Actions'
 import { useUserPreferences } from '../../../../providers/UserPreferences'
+import Tooltip from '../../../atoms/Tooltip'
+import { ReactComponent as Caret } from '../../../../images/caret.svg'
 
 export default function Add({
   setShowAdd,
   poolAddress,
   totalPoolTokens,
   totalBalance,
-  swapFee
+  swapFee,
+  dtSymbol
 }: {
   setShowAdd: (show: boolean) => void
   poolAddress: string
   totalPoolTokens: string
   totalBalance: Balance
   swapFee: string
+  dtSymbol: string
 }): ReactElement {
   const { debug } = useUserPreferences()
   const { ocean, accountId, balance } = useOcean()
   const [amount, setAmount] = useState('')
   const [txId, setTxId] = useState<string>('')
   const [isLoading, setIsLoading] = useState<boolean>()
+  const [coin, setCoin] = useState<string>('OCEAN')
 
   const newPoolTokens =
     totalBalance &&
@@ -41,12 +46,13 @@ export default function Add({
   async function handleAddLiquidity() {
     setIsLoading(true)
 
+    const addMethod =
+      coin === 'OCEAN'
+        ? ocean.pool.addOceanLiquidity
+        : ocean.pool.addDTLiquidity
+
     try {
-      const result = await ocean.pool.addOceanLiquidity(
-        accountId,
-        poolAddress,
-        amount
-      )
+      const result = await addMethod(accountId, poolAddress, amount)
       setTxId(result.transactionHash)
     } catch (error) {
       console.error(error.message)
@@ -64,21 +70,38 @@ export default function Add({
     setAmount(balance.ocean)
   }
 
+  const CoinSelect = () => (
+    <ul className={styles.coinPopover}>
+      <li onClick={() => setCoin('OCEAN')}>OCEAN</li>
+      <li onClick={() => setCoin(dtSymbol)}>{dtSymbol}</li>
+    </ul>
+  )
+
   return (
-    <div className={styles.add}>
+    <>
       <Header title="Add Liquidity" backAction={() => setShowAdd(false)} />
 
       <div className={styles.addInput}>
-        <div className={styles.userBalance}>
+        <div className={styles.userLiquidity}>
           <span>Available: </span>
           <PriceUnit price={balance.ocean} symbol="OCEAN" small />
         </div>
 
         <InputElement
           value={amount}
-          name="ocean"
+          name="coin"
           type="number"
-          prefix="OCEAN"
+          prefix={
+            <Tooltip
+              content={<CoinSelect />}
+              trigger="click focus"
+              className={styles.coinswitch}
+              placement="bottom"
+            >
+              {coin}
+              <Caret aria-hidden="true" />
+            </Tooltip>
+          }
           placeholder="0"
           onChange={handleAmountChange}
         />
@@ -114,6 +137,6 @@ export default function Add({
         action={handleAddLiquidity}
         txId={txId}
       />
-    </div>
+    </>
   )
 }

src/components/organisms/AssetActions/Pool/Remove.module.css

@@ -6,6 +6,6 @@
   composes: buttonMax from './Add.module.css';
 }
 
-.userBalance {
-  composes: userBalance from './Add.module.css';
+.userLiquidity {
+  composes: userLiquidity from './Add.module.css';
 }

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

@@ -14,12 +14,12 @@ export default function Remove({
   setShowRemove,
   poolAddress,
   totalPoolTokens,
-  userBalance
+  userLiquidity
 }: {
   setShowRemove: (show: boolean) => void
   poolAddress: string
   totalPoolTokens: string
-  userBalance: Balance
+  userLiquidity: Balance
 }): ReactElement {
   const { ocean, accountId } = useOcean()
   const [amount, setAmount] = useState('')
@@ -50,7 +50,7 @@ export default function Remove({
   }
 
   function handleMax() {
-    setAmount(userBalance.ocean)
+    setAmount(userLiquidity.ocean)
   }
 
   return (
@@ -61,9 +61,9 @@ export default function Remove({
       />
 
       <form className={styles.removeInput}>
-        <div className={styles.userBalance}>
+        <div className={styles.userLiquidity}>
           <span>Your pool liquidity: </span>
-          <PriceUnit price={userBalance.ocean} symbol="OCEAN" small />
+          <PriceUnit price={userLiquidity.ocean} symbol="OCEAN" small />
         </div>
         <InputElement
           value={amount}
@@ -74,7 +74,7 @@ export default function Remove({
           onChange={handleAmountChange}
         />
 
-        {userBalance.ocean > amount && (
+        {userLiquidity.ocean > amount && (
           <Button
             className={styles.buttonMax}
             style="text"

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

@@ -32,7 +32,7 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
   const [totalPoolTokens, setTotalPoolTokens] = useState<string>()
   const [totalBalance, setTotalBalance] = useState<Balance>()
   const [dtSymbol, setDtSymbol] = useState<string>()
-  const [userBalance, setUserBalance] = useState<Balance>()
+  const [userLiquidity, setUserBalance] = useState<Balance>()
   const [swapFee, setSwapFee] = useState<string>()
 
   const [showAdd, setShowAdd] = useState(false)
@@ -40,11 +40,12 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
   const [isLoading, setIsLoading] = useState(true)
 
   const hasAddedLiquidity =
-    userBalance && (Number(userBalance.ocean) > 0 || Number(userBalance.dt) > 0)
+    userLiquidity &&
+    (Number(userLiquidity.ocean) > 0 || Number(userLiquidity.dt) > 0)
 
   const poolShare =
     totalBalance &&
-    userBalance &&
+    userLiquidity &&
     ((Number(poolTokens) / Number(totalPoolTokens)) * 100).toFixed(2)
 
   useEffect(() => {
@@ -89,12 +90,12 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
         const userDtBalance =
           (Number(poolTokens) / Number(totalPoolTokens)) * Number(dtReserve)
 
-        const userBalance = {
+        const userLiquidity = {
           ocean: `${userOceanBalance}`,
           dt: `${userDtBalance}`
         }
 
-        setUserBalance(userBalance)
+        setUserBalance(userLiquidity)
 
         // Get swap fee
         // swapFee is tricky: to get 0.1% you need to convert from 0.001
@@ -111,7 +112,7 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
 
   return (
     <>
-      {isLoading && !userBalance ? (
+      {isLoading && !userLiquidity ? (
         <Loader message="Retrieving pools..." />
       ) : showAdd ? (
         <Add
@@ -120,13 +121,14 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
           totalPoolTokens={totalPoolTokens}
           totalBalance={totalBalance}
           swapFee={swapFee}
+          dtSymbol={dtSymbol}
         />
       ) : showRemove ? (
         <Remove
           setShowRemove={setShowRemove}
           poolAddress={price.address}
           totalPoolTokens={totalPoolTokens}
-          userBalance={userBalance}
+          userLiquidity={userLiquidity}
         />
       ) : (
         <>
@@ -154,8 +156,8 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
                 Your Liquidity
                 <Tooltip content="Explain what this represents, advantage of providing liquidity..." />
               </h3>
-              <Token symbol="OCEAN" balance={userBalance.ocean} />
-              <Token symbol={dtSymbol} balance={userBalance.dt} />
+              <Token symbol="OCEAN" balance={userLiquidity.ocean} />
+              <Token symbol={dtSymbol} balance={userLiquidity.dt} />
               {debug === true && <Token symbol="BPT" balance={poolTokens} />}
               <Token symbol="% of pool" balance={poolShare} />
             </div>