prepare add/remove screens

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

@@ -0,0 +1,2 @@
+.add {
+}

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

@@ -0,0 +1,24 @@
+import React, { ReactElement } from 'react'
+import styles from './Add.module.css'
+import stylesIndex from './index.module.css'
+import Button from '../../../atoms/Button'
+
+export default function Add({
+  setShowAdd
+}: {
+  setShowAdd: (show: boolean) => void
+}): ReactElement {
+  return (
+    <div className={styles.add}>
+      <Button
+        className={stylesIndex.back}
+        style="text"
+        size="small"
+        onClick={() => setShowAdd(false)}
+      >
+        ← Back
+      </Button>
+      <h3 className={stylesIndex.title}>Add Liquidity</h3>
+    </div>
+  )
+}

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

@@ -0,0 +1,24 @@
+import React, { ReactElement } from 'react'
+import styles from './Remove.module.css'
+import stylesIndex from './index.module.css'
+import Button from '../../../atoms/Button'
+
+export default function Remove({
+  setShowRemove
+}: {
+  setShowRemove: (show: boolean) => void
+}): ReactElement {
+  return (
+    <div className={styles.remove}>
+      <Button
+        className={stylesIndex.back}
+        style="text"
+        size="small"
+        onClick={() => setShowRemove(false)}
+      >
+        ← Back
+      </Button>
+      <h3 className={stylesIndex.title}>Remove Liquidity</h3>
+    </div>
+  )
+}

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

@@ -1,6 +1,7 @@
 .token {
   font-weight: var(--font-weight-bold);
   margin-bottom: calc(var(--spacer) / 4);
+  white-space: nowrap;
 }
 
 .symbol {

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

@@ -23,3 +23,23 @@
 
 .tokens {
 }
+
+.actions {
+  margin-left: -2rem;
+  margin-right: -2rem;
+  padding-left: var(--spacer);
+  padding-right: var(--spacer);
+  margin-top: calc(var(--spacer) / 2);
+  padding-top: calc(var(--spacer) / 1.5);
+  border-top: 1px solid var(--brand-grey-lighter);
+  text-align: center;
+}
+
+.actions button {
+  margin-left: calc(var(--spacer) / 4);
+  margin-right: calc(var(--spacer) / 4);
+}
+
+.back {
+  margin-bottom: var(--spacer);
+}

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

@@ -5,6 +5,9 @@ import styles from './index.module.css'
 import Token from './Token'
 import PriceUnit from '../../../atoms/Price/PriceUnit'
 import Loader from '../../../atoms/Loader'
+import Button from '../../../atoms/Button'
+import Add from './Add'
+import Remove from './Remove'
 
 interface Balance {
   ocean: string
@@ -18,8 +21,12 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
   const [dtPrice, setDtPrice] = useState<string>()
   const [dtSymbol, setDtSymbol] = useState<string>()
   const [userBalance, setUserBalance] = useState<Balance>()
+  const [showAdd, setShowAdd] = useState<boolean>()
+  const [showRemove, setShowRemove] = useState<boolean>()
 
   const isLoading = !ocean || !totalBalance || !userBalance || !dtPrice
+  const hasAddedLiquidity =
+    userBalance && (Number(userBalance.ocean) > 0 || Number(userBalance.dt) > 0)
 
   useEffect(() => {
     async function init() {
@@ -67,6 +74,10 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
     <>
       {isLoading ? (
         <Loader message="Retrieving pools..." />
+      ) : showAdd ? (
+        <Add setShowAdd={setShowAdd} />
+      ) : showRemove ? (
+        <Remove setShowRemove={setShowRemove} />
       ) : (
         <>
           <div className={styles.dataToken}>
@@ -87,6 +98,22 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
               <Token symbol={dtSymbol} balance={totalBalance.dt} />
             </div>
           </div>
+
+          <div className={styles.actions}>
+            <Button
+              style="primary"
+              size="small"
+              onClick={() => setShowAdd(true)}
+            >
+              Add Liquidity
+            </Button>
+
+            {hasAddedLiquidity && (
+              <Button size="small" onClick={() => setShowRemove(true)}>
+                Remove
+              </Button>
+            )}
+          </div>
         </>
       )}
     </>

src/components/organisms/AssetContent/index.module.css

@@ -1,6 +1,6 @@
 .grid {
   display: grid;
-  gap: calc(var(--spacer) * 2);
+  gap: calc(var(--spacer) * 1.5);
   position: relative;
   margin-top: -1.5rem;
 }

src/components/templates/AssetDetails.tsx

@@ -26,7 +26,6 @@ export default function PageTemplateAssetDetails({
       try {
         const metadataStore = new MetadataStore(config.metadataStoreUri, Logger)
         const ddo = await metadataStore.retrieveDDO(did)
-        setDdo(ddo)
 
         if (!ddo) {
           setTitle('Could not retrieve asset')
@@ -34,6 +33,8 @@ export default function PageTemplateAssetDetails({
           return
         }
 
+        setDdo(ddo)
+
         const { attributes }: ServiceMetadataMarket = ddo.findServiceByType(
           'metadata'
         )