mirror of
https://github.com/oceanprotocol/market.git
synced 2024-12-02 05:57:29 +01:00
style name & symbol output
This commit is contained in:
parent
7bda8b7c13
commit
bc6b9ec8b1
@ -18,14 +18,18 @@
|
||||
border: 1px solid var(--brand-grey-lighter);
|
||||
border-radius: 50%;
|
||||
background-color: var(--brand-white);
|
||||
margin-bottom: var(--spacer);
|
||||
margin-bottom: calc(var(--spacer) / 2);
|
||||
}
|
||||
|
||||
.coin:last-child .icon path {
|
||||
fill: var(--brand-grey-dimmed);
|
||||
stroke: var(--brand-black);
|
||||
stroke-width: 5px;
|
||||
stroke-linejoin: round;
|
||||
fill: var(--brand-violet);
|
||||
}
|
||||
|
||||
.tokenName {
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--brand-grey);
|
||||
text-align: center;
|
||||
margin-bottom: calc(var(--spacer) / 2);
|
||||
}
|
||||
|
||||
.data {
|
||||
|
@ -4,16 +4,17 @@ import styles from './Coin.module.css'
|
||||
import InputElement from '../../../atoms/Input/InputElement'
|
||||
import { ReactComponent as Logo } from '../../../../images/logo.svg'
|
||||
import Conversion from '../../../atoms/Price/Conversion'
|
||||
import { DataTokenOptions } from '@oceanprotocol/react'
|
||||
|
||||
export default function Coin({
|
||||
symbol,
|
||||
datatokenOptions,
|
||||
name,
|
||||
value,
|
||||
weight,
|
||||
onOceanChange,
|
||||
readOnly
|
||||
}: {
|
||||
symbol: string
|
||||
datatokenOptions: DataTokenOptions
|
||||
name: string
|
||||
value: string
|
||||
weight: string
|
||||
@ -26,6 +27,10 @@ export default function Coin({
|
||||
<Logo />
|
||||
</figure>
|
||||
|
||||
<h4 className={styles.tokenName}>
|
||||
{datatokenOptions?.name || 'Data Token'}
|
||||
</h4>
|
||||
|
||||
<div className={styles.data}>
|
||||
<InputElement
|
||||
value={value}
|
||||
@ -33,7 +38,7 @@ export default function Coin({
|
||||
type="number"
|
||||
onChange={onOceanChange}
|
||||
readOnly={readOnly}
|
||||
prefix={symbol}
|
||||
prefix={datatokenOptions?.symbol || 'DT'}
|
||||
/>
|
||||
<Conversion price={value} className={stylesIndex.conversion} />
|
||||
|
||||
|
@ -1,5 +1,4 @@
|
||||
import React, { ReactElement, useState, ChangeEvent, useEffect } from 'react'
|
||||
import { graphql, useStaticQuery } from 'gatsby'
|
||||
import stylesIndex from './index.module.css'
|
||||
import styles from './Dynamic.module.css'
|
||||
import FormHelp from '../../../atoms/Input/Help'
|
||||
@ -83,14 +82,14 @@ export default function Dynamic({
|
||||
<div className={styles.tokens}>
|
||||
<Coin
|
||||
name="ocean"
|
||||
symbol="OCEAN"
|
||||
datatokenOptions={{ symbol: 'OCEAN', name: 'Ocean Token' }}
|
||||
value={ocean}
|
||||
weight={`${100 - Number(Number(weightOnDataToken) * 10)}%`}
|
||||
onOceanChange={onOceanChange}
|
||||
/>
|
||||
<Coin
|
||||
name="tokensToMint"
|
||||
symbol={datatokenOptions.symbol}
|
||||
datatokenOptions={datatokenOptions}
|
||||
value={tokensToMint.toString()}
|
||||
weight={`${Number(weightOnDataToken) * 10}%`}
|
||||
readOnly
|
||||
|
@ -6,3 +6,11 @@
|
||||
.fixed label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.datatoken {
|
||||
color: var(--color-secondary);
|
||||
margin-top: calc(var(--spacer) / 4);
|
||||
text-align: center;
|
||||
font-size: var(--font-size-small);
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
@ -33,8 +33,12 @@ export default function Fixed({
|
||||
onChange={onChange}
|
||||
/>
|
||||
<Conversion price={ocean} className={stylesIndex.conversion} />
|
||||
</div>
|
||||
{datatokenOptions && (
|
||||
<div className={styles.datatoken}>
|
||||
{datatokenOptions?.symbol} | {datatokenOptions?.name}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
Loading…
Reference in New Issue
Block a user