diff --git a/src/components/Elements/ListingCard/index.tsx b/src/components/Elements/ListingCard/index.tsx index ede6cd1f..a6aadda8 100644 --- a/src/components/Elements/ListingCard/index.tsx +++ b/src/components/Elements/ListingCard/index.tsx @@ -86,7 +86,7 @@ const ListingCardInner = ({ const [endTimestamp, setEndTimestamp] = useState(0); const { - state: { api, apiState }, + state: { api, apiState, symbol }, } = useRelayApi(); const { timeslicePeriod } = useCommon(); @@ -196,7 +196,7 @@ const ListingCardInner = ({ > Price/timeslice: - {formatBalance(listing.timeslicePrice.toString(), true)} ROC + {`${formatBalance(listing.timeslicePrice.toString(),true)} ${symbol}`} Total: - {formatBalance(listing.currentPrice.toString(), true)} ROC + {`${formatBalance(listing.currentPrice.toString(), true)} ${symbol}`} diff --git a/src/components/Elements/SaleInfo/index.tsx b/src/components/Elements/SaleInfo/index.tsx index 7daec652..5e70657a 100644 --- a/src/components/Elements/SaleInfo/index.tsx +++ b/src/components/Elements/SaleInfo/index.tsx @@ -31,7 +31,7 @@ export const SaleInfoGrid = ({ const [saleStartTimestamp, setSaleStartTimestamp] = useState(0); const [saleEndTimestamp, setSaleEndTimestamp] = useState(0); const { - state: { api, apiState }, + state: { api, apiState, symbol }, } = useCoretimeApi(); const nextPhase = (): SalePhase => { @@ -79,12 +79,10 @@ export const SaleInfoGrid = ({ - {`Current price: ${formatBalance(currentPrice.toString(), false)}`}{' '} - ROC + {`Current price: ${formatBalance(currentPrice.toString(), false)} ${symbol}`} - {`Floor price: ${formatBalance(saleInfo.price.toString(), false)}`}{' '} - ROC + {`Floor price: ${formatBalance(saleInfo.price.toString(), false)} ${symbol}`} diff --git a/src/components/Modals/Sell/index.tsx b/src/components/Modals/Sell/index.tsx index 5550aac3..7f151c92 100644 --- a/src/components/Modals/Sell/index.tsx +++ b/src/components/Modals/Sell/index.tsx @@ -15,6 +15,7 @@ import { useEffect, useState } from 'react'; import { AmountInput, RegionCard } from '@/components/Elements'; import { RecipientSelector } from '@/components/Elements/Selectors/RecipientSelector'; +import { useCoretimeApi } from '@/contexts/apis'; import { useRegions } from '@/contexts/regions'; import { useToast } from '@/contexts/toast'; import { RegionMetadata } from '@/models'; @@ -31,6 +32,7 @@ export const SellModal = ({ regionMetadata, }: SellModalProps) => { const { activeAccount, api } = useInkathon(); + const {state: {symbol}} = useCoretimeApi(); const { fetchRegions } = useRegions(); const { toastError, toastSuccess } = useToast(); @@ -112,7 +114,7 @@ export const SellModal = ({ amount={regionPrice} title='Region price' caption='The price for the entire region' - currency='ROC' + currency={symbol} setAmount={setRegionPrice} /> diff --git a/src/contexts/apis/common.ts b/src/contexts/apis/common.ts index 57dc4df5..63ec0e11 100644 --- a/src/contexts/apis/common.ts +++ b/src/contexts/apis/common.ts @@ -12,6 +12,7 @@ export type State = { api: ApiPromise | null; apiError: any; apiState: ApiState; + symbol: string; }; export const initialState: State = { @@ -20,6 +21,7 @@ export const initialState: State = { api: null, apiError: null, apiState: ApiState.DISCONNECTED, + symbol: '', }; /// @@ -37,6 +39,8 @@ export const reducer = (state: any, action: any) => { return { ...state, apiState: ApiState.ERROR, apiError: action.payload }; case 'DISCONNECTED': return { ...state, apiState: ApiState.DISCONNECTED }; + case 'SET_SYMBOL': + return { ...state, symbol: action.payload }; default: throw new Error(`Unknown type: ${action.type}`); } @@ -66,7 +70,17 @@ export const connect = ( _api.on('connected', () => { dispatch({ type: 'CONNECT', payload: _api }); // `ready` event is not emitted upon reconnection and is checked explicitly here. - _api.isReady.then(() => dispatch({ type: 'CONNECT_SUCCESS' })); + _api.isReady.then(() => { + dispatch({ type: 'CONNECT_SUCCESS' }); + const chainInfo = _api.registry.getChainProperties(); + if (chainInfo?.tokenSymbol.isSome) { + const [symbol] = chainInfo.tokenSymbol.toHuman() as [string]; + dispatch({ + type: 'SET_SYMBOL', + payload: symbol, + }); + } + }); }); _api.on('ready', () => dispatch({ type: 'CONNECT_SUCCESS' })); _api.on('error', (err) => dispatch({ type: 'CONNECT_ERROR', payload: err })); diff --git a/src/pages/purchase.tsx b/src/pages/purchase.tsx index 2e1ebf93..8ad608be 100644 --- a/src/pages/purchase.tsx +++ b/src/pages/purchase.tsx @@ -55,7 +55,7 @@ const Purchase = () => { const [saleEndTimestamp, setSaleEndTimestamp] = useState(0); const { saleInfo, config, loading } = useSaleInfo(); const { - state: { api, apiState }, + state: { api, apiState, symbol }, } = useCoretimeApi(); const { fetchRegions } = useRegions(); @@ -71,7 +71,7 @@ const Purchase = () => { if (balance == 0) { toastWarning( - 'The selected account does not have any ROC tokens on the Coretime chain.' + `The selected account does not have any ${symbol} tokens on the Coretime chain.` ); } }, @@ -208,7 +208,7 @@ const Purchase = () => { - {`Your balance: ${formatBalance(balance.toString(), false)} ROC`} + {`Your balance: ${formatBalance(balance.toString(), false)} ${symbol}`}