diff --git a/src/components/molecules/FormFields/Price/Coin.module.css b/src/components/molecules/FormFields/Price/Coin.module.css
index 6e04ccf8e..5ee582cd9 100644
--- a/src/components/molecules/FormFields/Price/Coin.module.css
+++ b/src/components/molecules/FormFields/Price/Coin.module.css
@@ -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 {
diff --git a/src/components/molecules/FormFields/Price/Coin.tsx b/src/components/molecules/FormFields/Price/Coin.tsx
index 53c3590be..6f5a549e1 100644
--- a/src/components/molecules/FormFields/Price/Coin.tsx
+++ b/src/components/molecules/FormFields/Price/Coin.tsx
@@ -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({