mirror of
https://github.com/oceanprotocol/market.git
synced 2024-06-29 00:57:50 +02:00
define token address & symbol only once
This commit is contained in:
parent
0db0bea3f6
commit
a9aeed4aec
|
@ -6,8 +6,6 @@ import ExplorerLink from '@shared/ExplorerLink'
|
||||||
import SuccessConfetti from '@shared/SuccessConfetti'
|
import SuccessConfetti from '@shared/SuccessConfetti'
|
||||||
import { useWeb3 } from '@context/Web3'
|
import { useWeb3 } from '@context/Web3'
|
||||||
import TokenApproval from '@shared/TokenApproval'
|
import TokenApproval from '@shared/TokenApproval'
|
||||||
import { getOceanConfig } from '@utils/ocean'
|
|
||||||
import { useAsset } from '@context/Asset'
|
|
||||||
|
|
||||||
export default function Actions({
|
export default function Actions({
|
||||||
isLoading,
|
isLoading,
|
||||||
|
@ -16,9 +14,10 @@ export default function Actions({
|
||||||
txId,
|
txId,
|
||||||
actionName,
|
actionName,
|
||||||
amount,
|
amount,
|
||||||
coin,
|
|
||||||
action,
|
action,
|
||||||
isDisabled
|
isDisabled,
|
||||||
|
tokenAddress,
|
||||||
|
tokenSymbol
|
||||||
}: {
|
}: {
|
||||||
isLoading: boolean
|
isLoading: boolean
|
||||||
loaderMessage: string
|
loaderMessage: string
|
||||||
|
@ -26,12 +25,12 @@ export default function Actions({
|
||||||
txId: string
|
txId: string
|
||||||
actionName: string
|
actionName: string
|
||||||
amount?: string
|
amount?: string
|
||||||
coin?: string
|
|
||||||
action: () => void
|
action: () => void
|
||||||
isDisabled?: boolean
|
isDisabled?: boolean
|
||||||
|
tokenAddress: string
|
||||||
|
tokenSymbol: string
|
||||||
}): ReactElement {
|
}): ReactElement {
|
||||||
const { networkId } = useWeb3()
|
const { networkId } = useWeb3()
|
||||||
const { ddo } = useAsset()
|
|
||||||
|
|
||||||
const actionButton = (
|
const actionButton = (
|
||||||
<Button
|
<Button
|
||||||
|
@ -44,10 +43,6 @@ export default function Actions({
|
||||||
</Button>
|
</Button>
|
||||||
)
|
)
|
||||||
|
|
||||||
const config = getOceanConfig(ddo?.chainId)
|
|
||||||
const tokenAddress = config.oceanTokenAddress
|
|
||||||
const tokenSymbol = config.oceanTokenSymbol
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className={styles.actions}>
|
<div className={styles.actions}>
|
||||||
|
|
|
@ -30,7 +30,8 @@ export default function Add({
|
||||||
totalBalance,
|
totalBalance,
|
||||||
swapFee,
|
swapFee,
|
||||||
datatokenSymbol,
|
datatokenSymbol,
|
||||||
baseTokenSymbol,
|
tokenInSymbol,
|
||||||
|
tokenInAddress,
|
||||||
fetchAllData
|
fetchAllData
|
||||||
}: {
|
}: {
|
||||||
setShowAdd: (show: boolean) => void
|
setShowAdd: (show: boolean) => void
|
||||||
|
@ -39,7 +40,8 @@ export default function Add({
|
||||||
totalBalance: PoolBalance
|
totalBalance: PoolBalance
|
||||||
swapFee: string
|
swapFee: string
|
||||||
datatokenSymbol: string
|
datatokenSymbol: string
|
||||||
baseTokenSymbol: string
|
tokenInSymbol: string
|
||||||
|
tokenInAddress: string
|
||||||
fetchAllData: () => void
|
fetchAllData: () => void
|
||||||
}): ReactElement {
|
}): ReactElement {
|
||||||
const { accountId, balance, web3 } = useWeb3()
|
const { accountId, balance, web3 } = useWeb3()
|
||||||
|
@ -51,7 +53,6 @@ export default function Add({
|
||||||
const [newPoolTokens, setNewPoolTokens] = useState('0')
|
const [newPoolTokens, setNewPoolTokens] = useState('0')
|
||||||
const [newPoolShare, setNewPoolShare] = useState('0')
|
const [newPoolShare, setNewPoolShare] = useState('0')
|
||||||
const [isWarningAccepted, setIsWarningAccepted] = useState(false)
|
const [isWarningAccepted, setIsWarningAccepted] = useState(false)
|
||||||
const [tokenInAddress, setTokenInAddress] = useState<string>()
|
|
||||||
|
|
||||||
// Live validation rules
|
// Live validation rules
|
||||||
// https://github.com/jquense/yup#number
|
// https://github.com/jquense/yup#number
|
||||||
|
@ -72,8 +73,6 @@ export default function Add({
|
||||||
async function getMaximum() {
|
async function getMaximum() {
|
||||||
try {
|
try {
|
||||||
const poolInstance = new Pool(web3, LoggerInstance)
|
const poolInstance = new Pool(web3, LoggerInstance)
|
||||||
const tokenInAddress = await poolInstance.getBaseToken(poolAddress)
|
|
||||||
setTokenInAddress(tokenInAddress)
|
|
||||||
|
|
||||||
const amountMaxPool = await poolInstance.getReserve(
|
const amountMaxPool = await poolInstance.getReserve(
|
||||||
poolAddress,
|
poolAddress,
|
||||||
|
@ -90,7 +89,14 @@ export default function Add({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
getMaximum()
|
getMaximum()
|
||||||
}, [web3, accountId, isAssetNetwork, poolAddress, balance?.ocean])
|
}, [
|
||||||
|
web3,
|
||||||
|
accountId,
|
||||||
|
isAssetNetwork,
|
||||||
|
poolAddress,
|
||||||
|
tokenInAddress,
|
||||||
|
balance?.ocean
|
||||||
|
])
|
||||||
|
|
||||||
// Submit
|
// Submit
|
||||||
async function handleAddLiquidity(amount: number, resetForm: () => void) {
|
async function handleAddLiquidity(amount: number, resetForm: () => void) {
|
||||||
|
@ -134,7 +140,7 @@ export default function Add({
|
||||||
{isWarningAccepted ? (
|
{isWarningAccepted ? (
|
||||||
<FormAdd
|
<FormAdd
|
||||||
tokenInAddress={tokenInAddress}
|
tokenInAddress={tokenInAddress}
|
||||||
tokenInSymbol={baseTokenSymbol}
|
tokenInSymbol={tokenInSymbol}
|
||||||
amountMax={amountMax}
|
amountMax={amountMax}
|
||||||
setAmount={setAmount}
|
setAmount={setAmount}
|
||||||
totalPoolTokens={totalPoolTokens}
|
totalPoolTokens={totalPoolTokens}
|
||||||
|
@ -182,6 +188,8 @@ export default function Add({
|
||||||
actionName={content.pool.add.action}
|
actionName={content.pool.add.action}
|
||||||
action={submitForm}
|
action={submitForm}
|
||||||
amount={amount}
|
amount={amount}
|
||||||
|
tokenAddress={tokenInAddress}
|
||||||
|
tokenSymbol={tokenInSymbol}
|
||||||
txId={txId}
|
txId={txId}
|
||||||
/>
|
/>
|
||||||
{debug && <DebugOutput output={values} />}
|
{debug && <DebugOutput output={values} />}
|
||||||
|
|
|
@ -29,16 +29,16 @@ export default function Remove({
|
||||||
poolAddress,
|
poolAddress,
|
||||||
poolTokens,
|
poolTokens,
|
||||||
totalPoolTokens,
|
totalPoolTokens,
|
||||||
baseTokenAddress,
|
tokenOutAddress,
|
||||||
baseTokenSymbol,
|
tokenOutSymbol,
|
||||||
fetchAllData
|
fetchAllData
|
||||||
}: {
|
}: {
|
||||||
setShowRemove: (show: boolean) => void
|
setShowRemove: (show: boolean) => void
|
||||||
poolAddress: string
|
poolAddress: string
|
||||||
poolTokens: string
|
poolTokens: string
|
||||||
totalPoolTokens: string
|
totalPoolTokens: string
|
||||||
baseTokenAddress: string
|
tokenOutAddress: string
|
||||||
baseTokenSymbol: string
|
tokenOutSymbol: string
|
||||||
fetchAllData: () => void
|
fetchAllData: () => void
|
||||||
}): ReactElement {
|
}): ReactElement {
|
||||||
const { accountId, web3 } = useWeb3()
|
const { accountId, web3 } = useWeb3()
|
||||||
|
@ -64,7 +64,7 @@ export default function Remove({
|
||||||
const result = await poolInstance.exitswapPoolAmountIn(
|
const result = await poolInstance.exitswapPoolAmountIn(
|
||||||
accountId,
|
accountId,
|
||||||
poolAddress,
|
poolAddress,
|
||||||
baseTokenAddress,
|
tokenOutAddress,
|
||||||
amountPoolShares,
|
amountPoolShares,
|
||||||
minOceanAmount
|
minOceanAmount
|
||||||
)
|
)
|
||||||
|
@ -78,7 +78,7 @@ export default function Remove({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Get and set max percentage
|
// TODO: Get and set max percentage
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!accountId || !poolTokens) return
|
if (!accountId || !poolTokens) return
|
||||||
|
|
||||||
|
@ -93,7 +93,7 @@ export default function Remove({
|
||||||
debounce(async (newAmountPoolShares) => {
|
debounce(async (newAmountPoolShares) => {
|
||||||
const newAmountOcean = await poolInstance.calcSingleOutGivenPoolIn(
|
const newAmountOcean = await poolInstance.calcSingleOutGivenPoolIn(
|
||||||
poolAddress,
|
poolAddress,
|
||||||
baseTokenAddress,
|
tokenOutAddress,
|
||||||
newAmountPoolShares
|
newAmountPoolShares
|
||||||
)
|
)
|
||||||
setAmountOcean(newAmountOcean)
|
setAmountOcean(newAmountOcean)
|
||||||
|
@ -185,7 +185,7 @@ export default function Remove({
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<p>{content.pool.remove.output.titleOut} minimum</p>
|
<p>{content.pool.remove.output.titleOut} minimum</p>
|
||||||
<Token symbol={baseTokenSymbol} balance={minOceanAmount} />
|
<Token symbol={tokenOutSymbol} balance={minOceanAmount} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.slippage}>
|
<div className={styles.slippage}>
|
||||||
|
@ -210,6 +210,8 @@ export default function Remove({
|
||||||
successMessage="Successfully removed liquidity."
|
successMessage="Successfully removed liquidity."
|
||||||
isDisabled={!isAssetNetwork}
|
isDisabled={!isAssetNetwork}
|
||||||
txId={txId}
|
txId={txId}
|
||||||
|
tokenAddress={tokenOutAddress}
|
||||||
|
tokenSymbol={tokenOutSymbol}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
|
@ -345,7 +345,8 @@ export default function Pool(): ReactElement {
|
||||||
}}
|
}}
|
||||||
swapFee={poolInfo?.poolFee}
|
swapFee={poolInfo?.poolFee}
|
||||||
datatokenSymbol={poolInfo?.datatokenSymbol}
|
datatokenSymbol={poolInfo?.datatokenSymbol}
|
||||||
baseTokenSymbol={poolInfo?.baseTokenSymbol}
|
tokenInAddress={poolInfo?.baseTokenAddress}
|
||||||
|
tokenInSymbol={poolInfo?.baseTokenSymbol}
|
||||||
fetchAllData={fetchAllData}
|
fetchAllData={fetchAllData}
|
||||||
/>
|
/>
|
||||||
) : showRemove ? (
|
) : showRemove ? (
|
||||||
|
@ -354,8 +355,8 @@ export default function Pool(): ReactElement {
|
||||||
poolAddress={price?.address}
|
poolAddress={price?.address}
|
||||||
poolTokens={poolInfoUser?.poolShares}
|
poolTokens={poolInfoUser?.poolShares}
|
||||||
totalPoolTokens={poolInfo?.totalPoolTokens}
|
totalPoolTokens={poolInfo?.totalPoolTokens}
|
||||||
baseTokenAddress={poolInfo?.baseTokenAddress}
|
tokenOutAddress={poolInfo?.baseTokenAddress}
|
||||||
baseTokenSymbol={poolInfo?.baseTokenSymbol}
|
tokenOutSymbol={poolInfo?.baseTokenSymbol}
|
||||||
fetchAllData={fetchAllData}
|
fetchAllData={fetchAllData}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
|
|
|
@ -38,6 +38,9 @@ export default function FormTrade({
|
||||||
const [maximumDt, setMaximumDt] = useState(maxDt)
|
const [maximumDt, setMaximumDt] = useState(maxDt)
|
||||||
const [isWarningAccepted, setIsWarningAccepted] = useState(false)
|
const [isWarningAccepted, setIsWarningAccepted] = useState(false)
|
||||||
|
|
||||||
|
const tokenAddress = ''
|
||||||
|
const tokenSymbol = ''
|
||||||
|
|
||||||
const validationSchema: Yup.SchemaOf<FormTradeData> = Yup.object()
|
const validationSchema: Yup.SchemaOf<FormTradeData> = Yup.object()
|
||||||
.shape({
|
.shape({
|
||||||
ocean: Yup.number()
|
ocean: Yup.number()
|
||||||
|
@ -152,8 +155,9 @@ export default function FormTrade({
|
||||||
: undefined
|
: undefined
|
||||||
}
|
}
|
||||||
action={submitForm}
|
action={submitForm}
|
||||||
coin={coinFrom}
|
|
||||||
txId={txId}
|
txId={txId}
|
||||||
|
tokenAddress={tokenAddress}
|
||||||
|
tokenSymbol={tokenSymbol}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{debug && (
|
{debug && (
|
||||||
|
|
Loading…
Reference in New Issue
Block a user