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

move all pool copy into content data file

Browse Source
This commit is contained in:
Matthias Kretschmann 2020-10-14 19:08:46 +02:00
parent abc70b9cae
commit 287eea3c94
Signed by: m
GPG Key ID: 606EEEF3C479A91F
4 changed files with 112 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
content/price.json Normal file
View File

@ -0,0 +1,26 @@
{
"pool": {
"tooltips": {
"price": "Explain how this price is determined...",
"liquidity": "Explain what this represents, advantage of providing liquidity..."
},
"add": {
"title": "Add Liquidity",
"output": {
"titleIn": "You will receive",
"titleOut": "You will earn"
},
"action": "Supply"
},
"remove": {
"title": "Remove Liquidity",
"simple": "Set the amount of your pool shares to spend. You will get the equivalent value in OCEAN, limited to maximum amount for pool protection.",
"advanced": "Set the amount of your pool shares to spend. You will get OCEAN and Datatokens equivalent to your pool share, without any limit.",
"output": {
"titleIn": "You will spend",
"titleOut": "You will receive"
},
"action": "Remove"
}
}
}

34
src/components/organisms/AssetActions/Pool/Add.tsx
View File

@ -11,6 +11,29 @@ import PriceUnit from '../../../atoms/Price/PriceUnit'
import Actions from './Actions'
import Tooltip from '../../../atoms/Tooltip'
import { ReactComponent as Caret } from '../../../../images/caret.svg'
import { graphql, useStaticQuery } from 'gatsby'
const contentQuery = graphql`
query PoolAddQuery {
content: allFile(filter: { relativePath: { eq: "price.json" } }) {
edges {
node {
childContentJson {
pool {
add {
output {
titleIn
titleOut
}
action
}
}
}
}
}
}
}
`
export default function Add({
setShowAdd,
@ -29,6 +52,9 @@ export default function Add({
dtSymbol: string
dtAddress: string
}): ReactElement {
const data = useStaticQuery(contentQuery)
const content = data.content.edges[0].node.childContentJson.pool.add
const { ocean, accountId, balance } = useOcean()
const [amount, setAmount] = useState('')
const [txId, setTxId] = useState<string>('')
@ -93,7 +119,7 @@ export default function Add({
return (
<>
<Header title="Add Liquidity" backAction={() => setShowAdd(false)} />
<Header title={content.title} backAction={() => setShowAdd(false)} />
<div className={styles.addInput}>
<div className={styles.userLiquidity}>
@ -138,12 +164,12 @@ export default function Add({
<div className={styles.output}>
<div>
<p>You will receive</p>
<p>{content.output.titleIn}</p>
<Token symbol="pool shares" balance={newPoolTokens} />
<Token symbol="% of pool" balance={newPoolShare} />
</div>
<div>
<p>You will earn</p>
<p>{content.output.titleOut}</p>
<Token symbol="% swap fee" balance={swapFee} />
</div>
</div>
@ -151,7 +177,7 @@ export default function Add({
<Actions
isLoading={isLoading}
loaderMessage="Adding Liquidity..."
actionName="Supply"
actionName={content.action}
action={handleAddLiquidity}
txId={txId}
/>

48
src/components/organisms/AssetActions/Pool/Remove.tsx
View File

@ -15,13 +15,31 @@ import Token from './Token'
import FormHelp from '../../../atoms/Input/Help'
import Button from '../../../atoms/Button'
import { getMaxValuesRemove } from './utils'
import { graphql, useStaticQuery } from 'gatsby'
const help = {
simple:
'You will get the equivalent value in OCEAN, limited to 60% of the total liquidity.',
advanced:
'You will get OCEAN and Datatokens equivalent to your pool share, without any limit.'
}
const contentQuery = graphql`
query PoolRemoveQuery {
content: allFile(filter: { relativePath: { eq: "price.json" } }) {
edges {
node {
childContentJson {
pool {
remove {
simple
advanced
output {
titleIn
titleOut
}
action
}
}
}
}
}
}
}
`
export default function Remove({
setShowRemove,
@ -34,6 +52,9 @@ export default function Remove({
poolTokens: string
dtSymbol: string
}): ReactElement {
const data = useStaticQuery(contentQuery)
const content = data.content.edges[0].node.childContentJson.pool.remove
const { ocean, accountId } = useOcean()
const [amountPercent, setAmountPercent] = useState('0')
const [amountMaxPercent, setAmountMaxPercent] = useState('100')
@ -114,10 +135,7 @@ export default function Remove({
return (
<div className={styles.remove}>
<Header
title="Remove Liquidity"
backAction={() => setShowRemove(false)}
/>
<Header title={content.title} backAction={() => setShowRemove(false)} />
<form className={styles.removeInput}>
<div className={styles.range}>
@ -139,9 +157,7 @@ export default function Remove({
</div>
<FormHelp>
{`Set the amount of your pool shares to spend. ${
isAdvanced === true ? help.advanced : help.simple
}`}
{isAdvanced === true ? content.advanced : content.simple}
</FormHelp>
<Button style="text" size="small" onClick={handleAdvancedButton}>
{isAdvanced === true ? 'Simple' : 'Advanced'}
@ -151,11 +167,11 @@ export default function Remove({
<div className={styles.output}>
<div>
<p>You will spend</p>
<p>{content.output.titleIn}</p>
<Token symbol="pool shares" balance={amountPoolShares} noIcon />
</div>
<div>
<p>You will receive</p>
<p>{content.output.titleOut}</p>
<Token symbol="OCEAN" balance={amountOcean} />
{isAdvanced === true && (
<Token symbol={dtSymbol} balance={amountDatatoken} />
@ -166,7 +182,7 @@ export default function Remove({
<Actions
isLoading={isLoading}
loaderMessage="Removing Liquidity..."
actionName="Remove"
actionName={content.action}
action={handleRemoveLiquidity}
txId={txId}
/>

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

@ -13,17 +13,36 @@ import Conversion from '../../../atoms/Price/Conversion'
import EtherscanLink from '../../../atoms/EtherscanLink'
import Token from './Token'
import TokenList from './TokenList'
import { graphql, useStaticQuery } from 'gatsby'
export interface Balance {
ocean: number
datatoken: number
}
/*
TODO: create tooltip copy
*/
const contentQuery = graphql`
query PoolQuery {
content: allFile(filter: { relativePath: { eq: "price.json" } }) {
edges {
node {
childContentJson {
pool {
tooltips {
price
liquidity
}
}
}
}
}
}
}
`
export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
const data = useStaticQuery(contentQuery)
const content = data.content.edges[0].node.childContentJson.pool
const { ocean, accountId } = useOcean()
const { price } = useMetadata(ddo)
@ -137,7 +156,7 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
<PriceUnit price="1" symbol={dtSymbol} /> ={' '}
<PriceUnit price={`${price.value}`} />
<Conversion price={`${price.value}`} />
<Tooltip content="Explain how this price is determined..." />
<Tooltip content={content.tooltips.price} />
<div className={styles.dataTokenLinks}>
<EtherscanLink
network="rinkeby"
@ -155,7 +174,7 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
title={
<>
Your Liquidity
<Tooltip content="Explain what this represents, advantage of providing liquidity..." />
<Tooltip content={content.tooltips.liquidity} />
</>
}
ocean={`${userLiquidity.ocean}`}