oceanprotocol/market
1
0
Fork 0
mirror of https://github.com/oceanprotocol/market.git synced 2024-12-02 05:57:29 +01:00
Code Releases Activity

add loading state

Browse Source
This commit is contained in:
Matthias Kretschmann 2020-08-18 19:20:25 +02:00
parent 5a8c864d6c
commit 2194b55753
Signed by: m
GPG Key ID: 606EEEF3C479A91F
1 changed files with 25 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/organisms/AssetActions/Pool/index.tsx
View File

@ -4,6 +4,7 @@ import { DDO } from '@oceanprotocol/lib'
import styles from './index.module.css'
import Token from './Token'
import PriceUnit from '../../../atoms/Price/PriceUnit'
import Loader from '../../../atoms/Loader'
interface Balance {
ocean: string
@ -18,6 +19,8 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
const [dtSymbol, setDtSymbol] = useState<string>()
const [userBalance, setUserBalance] = useState<Balance>()
const isLoading = !ocean || !totalBalance || !userBalance || !dtPrice
useEffect(() => {
async function init() {
try {
@ -58,32 +61,34 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
}
}
init()
}, [])
}, [ocean, accountId])
return (
<>
<div className={styles.dataToken}>
<PriceUnit price="1" symbol={dtSymbol} /> ={' '}
<PriceUnit price={dtPrice} />
</div>
<div className={styles.poolTokens}>
{userBalance && (
<div className={styles.tokens}>
<h3 className={styles.title}>Your Pooled Tokens</h3>
<Token symbol="OCEAN" balance={userBalance.ocean} />
<Token symbol={dtSymbol} balance={userBalance.dt} />
{isLoading ? (
<Loader message="Retrieving pools..." />
) : (
<>
<div className={styles.dataToken}>
<PriceUnit price="1" symbol={dtSymbol} /> ={' '}
<PriceUnit price={dtPrice} />
</div>
)}
{totalBalance && (
<div className={styles.tokens}>
<h3 className={styles.title}>Total Pooled Tokens</h3>
<Token symbol="OCEAN" balance={totalBalance.ocean} />
<Token symbol={dtSymbol} balance={totalBalance.dt} />
<div className={styles.poolTokens}>
<div className={styles.tokens}>
<h3 className={styles.title}>Your Pooled Tokens</h3>
<Token symbol="OCEAN" balance={userBalance.ocean} />
<Token symbol={dtSymbol} balance={userBalance.dt} />
</div>
<div className={styles.tokens}>
<h3 className={styles.title}>Total Pooled Tokens</h3>
<Token symbol="OCEAN" balance={totalBalance.ocean} />
<Token symbol={dtSymbol} balance={totalBalance.dt} />
</div>
</div>
)}
</div>
</>
)}
</>
)
}