mirror of
https://github.com/oceanprotocol/market.git
synced 2024-12-02 05:57:29 +01:00
refactor
This commit is contained in:
parent
09edb9d42b
commit
56dc96a6c1
@ -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);
|
||||
}
|
32
src/components/organisms/AssetActions/Pool/Actions.tsx
Normal file
32
src/components/organisms/AssetActions/Pool/Actions.tsx
Normal file
@ -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>
|
||||
)
|
||||
}
|
@ -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}>
|
||||
{isLoading ? (
|
||||
<Loader message="Adding Liquidity..." />
|
||||
) : (
|
||||
<Button
|
||||
style="primary"
|
||||
size="small"
|
||||
onClick={() => handleAddLiquidity()}
|
||||
>
|
||||
Supply
|
||||
</Button>
|
||||
)}
|
||||
{txId && (
|
||||
<Alert
|
||||
text={`Liquidity added. Transaction ID: ${txId}`}
|
||||
state="success"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<Actions
|
||||
isLoading={isLoading}
|
||||
loaderMessage="Adding Liquidity..."
|
||||
actionName="Supply"
|
||||
action={handleAddLiquidity}
|
||||
txId={txId}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
@ -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}>
|
||||
{isLoading ? (
|
||||
<Loader message="Removing Liquidity..." />
|
||||
) : (
|
||||
<Button
|
||||
style="primary"
|
||||
size="small"
|
||||
onClick={() => handleRemoveLiquidity()}
|
||||
>
|
||||
Remove
|
||||
</Button>
|
||||
)}
|
||||
{txId && (
|
||||
<Alert
|
||||
text={`Liquidity removed. Transaction ID: ${txId}`}
|
||||
state="success"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<Actions
|
||||
isLoading={isLoading}
|
||||
loaderMessage="Removing Liquidity..."
|
||||
actionName="Remove"
|
||||
action={handleRemoveLiquidity}
|
||||
txId={txId}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
@ -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);
|
||||
}
|
||||
|
@ -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"
|
||||
|
Loading…
Reference in New Issue
Block a user