refactor

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

@@ -0,0 +1,17 @@
+.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;
+  display: flex;
+  justify-content: center;
+}
+
+.actions button {
+  margin-left: calc(var(--spacer) / 4);
+  margin-right: calc(var(--spacer) / 4);
+}

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

@@ -0,0 +1,32 @@
+import React, { ReactElement } from 'react'
+import Loader from '../../../atoms/Loader'
+import Button from '../../../atoms/Button'
+import Alert from '../../../atoms/Alert'
+import styles from './Actions.module.css'
+
+export default function Actions({
+  isLoading,
+  loaderMessage,
+  txId,
+  actionName,
+  action
+}: {
+  isLoading: boolean
+  loaderMessage: string
+  txId: string
+  actionName: string
+  action: () => void
+}): ReactElement {
+  return (
+    <div className={styles.actions}>
+      {isLoading ? (
+        <Loader message={loaderMessage} />
+      ) : (
+        <Button style="primary" size="small" onClick={() => action()}>
+          {actionName}
+        </Button>
+      )}
+      {txId && <Alert text={`Transaction ID: ${txId}`} state="success" />}
+    </div>
+  )
+}

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

@@ -1,16 +1,13 @@
 import React, { ReactElement, useState, ChangeEvent } from 'react'
 import styles from './Add.module.css'
-import stylesIndex from './index.module.css'
-import Button from '../../../atoms/Button'
 import { useOcean } from '@oceanprotocol/react'
 import Header from './Header'
-import Loader from '../../../atoms/Loader'
 import { toast } from 'react-toastify'
 import InputElement from '../../../atoms/Input/InputElement'
 import Token from './Token'
 import { Balance } from './'
 import PriceUnit from '../../../atoms/Price/PriceUnit'
-import Alert from '../../../atoms/Alert'
+import Actions from './Actions'
 
 // TODO: handle and display all fees somehow
 
@@ -86,25 +83,13 @@ export default function Add({
         <Token symbol="% of pool" balance={newPoolShare} />
       </div>
 
-      <div className={stylesIndex.actions}>
+      <Actions
-        {isLoading ? (
+        isLoading={isLoading}
-          <Loader message="Adding Liquidity..." />
+        loaderMessage="Adding Liquidity..."
-        ) : (
+        actionName="Supply"
-          <Button
+        action={handleAddLiquidity}
-            style="primary"
+        txId={txId}
-            size="small"
+      />
-            onClick={() => handleAddLiquidity()}
-          >
-            Supply
-          </Button>
-        )}
-        {txId && (
-          <Alert
-            text={`Liquidity added. Transaction ID: ${txId}`}
-            state="success"
-          />
-        )}
-      </div>
     </div>
   )
 }

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

@@ -1,13 +1,10 @@
 import React, { ReactElement, useState, ChangeEvent } from 'react'
 import styles from './Remove.module.css'
-import stylesIndex from './index.module.css'
-import Button from '../../../atoms/Button'
 import { useOcean } from '@oceanprotocol/react'
 import Header from './Header'
 import { toast } from 'react-toastify'
-import Loader from '../../../atoms/Loader'
 import InputElement from '../../../atoms/Input/InputElement'
-import Alert from '../../../atoms/Alert'
+import Actions from './Actions'
 
 export default function Remove({
   setShowRemove,
@@ -68,25 +65,13 @@ export default function Remove({
 
       <p>You will receive</p>
 
-      <div className={stylesIndex.actions}>
+      <Actions
-        {isLoading ? (
+        isLoading={isLoading}
-          <Loader message="Removing Liquidity..." />
+        loaderMessage="Removing Liquidity..."
-        ) : (
+        actionName="Remove"
-          <Button
+        action={handleRemoveLiquidity}
-            style="primary"
+        txId={txId}
-            size="small"
+      />
-            onClick={() => handleRemoveLiquidity()}
-          >
-            Remove
-          </Button>
-        )}
-        {txId && (
-          <Alert
-            text={`Liquidity removed. Transaction ID: ${txId}`}
-            state="success"
-          />
-        )}
-      </div>
     </div>
   )
 }

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

@@ -32,26 +32,3 @@
   font-size: var(--font-size-base);
   margin-bottom: calc(var(--spacer) / 1.5);
 }
-
-.tokens {
-}
-
-/* Shared Styles for all screens */
-
-.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;
-  display: flex;
-  justify-content: center;
-}
-
-.actions button {
-  margin-left: calc(var(--spacer) / 4);
-  margin-right: calc(var(--spacer) / 4);
-}

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

@@ -2,6 +2,7 @@ import React, { ReactElement, useEffect, useState } from 'react'
 import { useOcean, useMetadata } from '@oceanprotocol/react'
 import { DDO } from '@oceanprotocol/lib'
 import styles from './index.module.css'
+import stylesActions from './Actions.module.css'
 import Token from './Token'
 import PriceUnit from '../../../atoms/Price/PriceUnit'
 import Loader from '../../../atoms/Loader'
@@ -160,7 +161,7 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
             </div>
           </div>
 
-          <div className={styles.actions}>
+          <div className={stylesActions.actions}>
             <Button
               style="primary"
               size="small"