mirror of
https://github.com/oceanprotocol/market.git
synced 2024-12-02 05:57:29 +01:00
refactor transaction titles (#266)
* refactor transaction titles * refactor * refactor * bump @oceanprotocol/lib * shorter getTitle * remove util duplicate * table tweaks
This commit is contained in:
parent
000a369fd2
commit
7325e093ad
@ -24,7 +24,7 @@
|
|||||||
"@coingecko/cryptoformat": "^0.4.2",
|
"@coingecko/cryptoformat": "^0.4.2",
|
||||||
"@loadable/component": "^5.14.1",
|
"@loadable/component": "^5.14.1",
|
||||||
"@oceanprotocol/art": "^3.0.0",
|
"@oceanprotocol/art": "^3.0.0",
|
||||||
"@oceanprotocol/lib": "^0.9.16",
|
"@oceanprotocol/lib": "^0.9.17",
|
||||||
"@oceanprotocol/list-datapartners": "^1.0.3",
|
"@oceanprotocol/list-datapartners": "^1.0.3",
|
||||||
"@oceanprotocol/react": "^0.3.19",
|
"@oceanprotocol/react": "^0.3.19",
|
||||||
"@oceanprotocol/typographies": "^0.1.0",
|
"@oceanprotocol/typographies": "^0.1.0",
|
||||||
|
@ -6,51 +6,73 @@ import Time from '../atoms/Time'
|
|||||||
import Table from '../atoms/Table'
|
import Table from '../atoms/Table'
|
||||||
import AssetTitle from './AssetListTitle'
|
import AssetTitle from './AssetListTitle'
|
||||||
import styles from './PoolTransactions.module.css'
|
import styles from './PoolTransactions.module.css'
|
||||||
import { formatCurrency } from '@coingecko/cryptoformat'
|
|
||||||
import { useUserPreferences } from '../../providers/UserPreferences'
|
import { useUserPreferences } from '../../providers/UserPreferences'
|
||||||
|
import { Ocean } from '@oceanprotocol/lib'
|
||||||
|
import { formatPrice } from '../atoms/Price/PriceUnit'
|
||||||
|
|
||||||
function formatNumber(number: number, locale: string) {
|
async function getSymbol(
|
||||||
return formatCurrency(number, '', locale, true, {
|
ocean: Ocean,
|
||||||
significantFigures: 6
|
tokenAddress: string,
|
||||||
})
|
oceanTokenAddress: string
|
||||||
|
) {
|
||||||
|
const symbol =
|
||||||
|
oceanTokenAddress === tokenAddress
|
||||||
|
? 'OCEAN'
|
||||||
|
: await ocean.datatokens.getSymbol(tokenAddress)
|
||||||
|
|
||||||
|
return symbol
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getTitle(
|
||||||
|
ocean: Ocean,
|
||||||
|
row: PoolTransaction,
|
||||||
|
locale: string,
|
||||||
|
oceanTokenAddress: string
|
||||||
|
) {
|
||||||
|
const addRemoveSymbol = await getSymbol(
|
||||||
|
ocean,
|
||||||
|
row.tokenIn || row.tokenOut,
|
||||||
|
oceanTokenAddress
|
||||||
|
)
|
||||||
|
|
||||||
|
const title =
|
||||||
|
row.type === 'join'
|
||||||
|
? `Add ${formatPrice(row.tokenAmountIn, locale)} ${addRemoveSymbol}`
|
||||||
|
: row.type === 'exit'
|
||||||
|
? `Remove ${formatPrice(row.tokenAmountOut, locale)} ${addRemoveSymbol}`
|
||||||
|
: `Swap ${formatPrice(row.tokenAmountIn, locale)} ${await getSymbol(
|
||||||
|
ocean,
|
||||||
|
row.tokenIn,
|
||||||
|
oceanTokenAddress
|
||||||
|
)} for ${formatPrice(row.tokenAmountOut, locale)} ${await getSymbol(
|
||||||
|
ocean,
|
||||||
|
row.tokenOut,
|
||||||
|
oceanTokenAddress
|
||||||
|
)}`
|
||||||
|
|
||||||
|
return title
|
||||||
}
|
}
|
||||||
|
|
||||||
function Title({ row }: { row: PoolTransaction }) {
|
function Title({ row }: { row: PoolTransaction }) {
|
||||||
const { ocean, networkId } = useOcean()
|
const { ocean, networkId, config } = useOcean()
|
||||||
const [dtSymbol, setDtSymbol] = useState<string>()
|
const [title, setTitle] = useState<string>()
|
||||||
const { locale } = useUserPreferences()
|
const { locale } = useUserPreferences()
|
||||||
|
|
||||||
const symbol = dtSymbol || 'OCEAN'
|
|
||||||
const title =
|
|
||||||
row.type === 'join'
|
|
||||||
? `Add ${formatNumber(Number(row.tokenAmountIn), locale)} ${symbol}`
|
|
||||||
: row.type === 'exit'
|
|
||||||
? `Remove ${formatNumber(Number(row.tokenAmountOut), locale)} ${symbol}`
|
|
||||||
: `Swap ${formatNumber(
|
|
||||||
Number(row.tokenAmountIn),
|
|
||||||
locale
|
|
||||||
)} ${symbol} for ${formatNumber(
|
|
||||||
Number(row.tokenAmountOut),
|
|
||||||
locale
|
|
||||||
)} ${symbol}`
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!ocean) return
|
if (!ocean || !locale || !row || !config?.oceanTokenAddress) return
|
||||||
|
|
||||||
async function getSymbol() {
|
async function init() {
|
||||||
const symbol = await ocean.datatokens.getSymbol(
|
const title = await getTitle(ocean, row, locale, config.oceanTokenAddress)
|
||||||
row.tokenIn || row.tokenOut
|
setTitle(title)
|
||||||
)
|
|
||||||
setDtSymbol(symbol)
|
|
||||||
}
|
}
|
||||||
getSymbol()
|
init()
|
||||||
}, [ocean, row])
|
}, [ocean, row, locale, config?.oceanTokenAddress])
|
||||||
|
|
||||||
return (
|
return title ? (
|
||||||
<EtherscanLink networkId={networkId} path={`/tx/${row.transactionHash}`}>
|
<EtherscanLink networkId={networkId} path={`/tx/${row.transactionHash}`}>
|
||||||
{title}
|
{title}
|
||||||
</EtherscanLink>
|
</EtherscanLink>
|
||||||
)
|
) : null
|
||||||
}
|
}
|
||||||
|
|
||||||
function getColumns(minimal?: boolean) {
|
function getColumns(minimal?: boolean) {
|
||||||
@ -59,9 +81,7 @@ function getColumns(minimal?: boolean) {
|
|||||||
name: 'Title',
|
name: 'Title',
|
||||||
selector: function getTitleRow(row: PoolTransaction) {
|
selector: function getTitleRow(row: PoolTransaction) {
|
||||||
return <Title row={row} />
|
return <Title row={row} />
|
||||||
},
|
}
|
||||||
minWidth: '14rem',
|
|
||||||
grow: 1
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'Data Set',
|
name: 'Data Set',
|
||||||
@ -82,7 +102,8 @@ function getColumns(minimal?: boolean) {
|
|||||||
isUnix
|
isUnix
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
},
|
||||||
|
maxWidth: '10rem'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
@ -43,3 +43,15 @@
|
|||||||
.open .toggle svg {
|
.open .toggle svg {
|
||||||
transform: rotate(180deg);
|
transform: rotate(180deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.transactions [class*='Table-module--table'] {
|
||||||
|
/*
|
||||||
|
react-data-table-component sets a default width: 100%
|
||||||
|
which often leads to unneccessary overflows. Following lines make
|
||||||
|
sure table always spans between edges of container, without any overflow
|
||||||
|
when enough space is available. But it also destroys overflow table on narrow
|
||||||
|
viewports.
|
||||||
|
*/
|
||||||
|
width: fit-content !important;
|
||||||
|
min-width: 100%;
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user