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