Show ADA symbol according to the network (#23)

* Show ADA symbol according to the network

* Add option

components/currency.tsx

@@ -1,5 +1,6 @@
-import { ChangeEvent, KeyboardEvent, useState } from "react"
+import { ChangeEvent, useContext } from "react"
 import NumberFormat from "react-number-format"
+import { Config, ConfigContext } from "../cardano/config"
 
 type Props = {
   value: bigint
@@ -33,6 +34,7 @@ const CurrencyInput = ({ value, onChange, decimals, ...props }: Props) => {
       type='text'
       value={inputValue}
       decimalSeparator='.'
+      isNumericString={true}
       displayType='input'
       thousandSeparator={false}
       allowNegative={false}
@@ -43,6 +45,36 @@ const CurrencyInput = ({ value, onChange, decimals, ...props }: Props) => {
   )
 }
 
-const toADA = (lovelace: bigint) => toDecimal(lovelace, 6)
+const getADASymbol = (config: Config) => config.isMainnet ? '₳' : 't₳'
 
-export { toADA, toDecimal, CurrencyInput }
+type AssetAmountProps = {
+  quantity: bigint
+  decimals: number
+  symbol: string
+  className?: string
+}
+
+const AssetAmount = ({quantity, decimals, symbol, className}: AssetAmountProps) => (
+  <NumberFormat
+    className={className}
+    value={toDecimal(quantity, decimals)}
+    decimalSeparator='.'
+    isNumericString={true}
+    thousandSeparator={false}
+    allowNegative={false}
+    decimalScale={decimals}
+    suffix={` ${symbol}`}
+    displayType='text' />
+)
+
+type ADAAmountProps = {
+  lovelace: bigint
+  className?: string
+}
+
+const ADAAmount = ({ lovelace, className }: ADAAmountProps) => {
+  const [config, _] = useContext(ConfigContext)
+  return <AssetAmount quantity={lovelace} decimals={6} symbol={getADASymbol(config)} className={className} />
+}
+
+export { getADASymbol, toDecimal, ADAAmount, AssetAmount, CurrencyInput }

components/transaction.tsx

@@ -1,12 +1,13 @@
-import { useState } from 'react'
-import { toADA, toDecimal, CurrencyInput } from './currency'
+import { useContext, useState } from 'react'
+import { toDecimal, CurrencyInput, getADASymbol, AssetAmount, ADAAmount } from './currency'
 import { getBalance, ProtocolParameters, UTxO, Value } from '../cardano/query-api'
 import { Cardano } from '../cardano/serialization-lib'
 import type { Result } from '../cardano/serialization-lib'
 import type { Address, TransactionBody, TransactionOutput } from '@emurgo/cardano-serialization-lib-browser'
 import { nanoid } from 'nanoid'
 import { ArrowRightIcon, XIcon } from '@heroicons/react/solid'
 import Link from 'next/link'
+import { ConfigContext } from '../cardano/config'
 
 type Recipient = {
   id: string
@@ -74,6 +75,7 @@ type RecipientProps = {
 }
 
 const Recipient = ({ recipient, budget, onChange }: RecipientProps) => {
+  const [ config, _ ] = useContext(ConfigContext)
   const { address, value } = recipient
   const setRecipient = (recipient: Recipient) => {
     onChange(recipient)
@@ -115,7 +117,7 @@ const Recipient = ({ recipient, budget, onChange }: RecipientProps) => {
         </label>
       </div>
       <LabeledCurrencyInput
-        symbol='₳'
+        symbol={getADASymbol(config)}
         decimal={6}
         value={value.lovelace}
         max={value.lovelace + budget.lovelace}
@@ -325,7 +327,7 @@ const NewTransaction = ({ senderAddress, cardano, protocolParameters, utxos }: N
           {buildTxResult.isOk &&
             <p className='flex space-x-1 font-bold'>
               <span>Fee:</span>
-              <span>{toADA(BigInt(buildTxResult.data.fee().to_str()))}</span>
+              <span><ADAAmount lovelace={BigInt(buildTxResult.data.fee().to_str())} /></span>
             </p>
           }
         </div>
@@ -422,24 +424,24 @@ const TransactionViewer = ({ txBody }: TransactionViewerProps) => {
           {recipients.map(({ id, address, value }) =>
             <li key={id} className='p-2 border rounded-md'>
               <p className='flex space-x-1 break-all'>{address}</p>
-              <p className='flex space-x-1'>
-                <span>{toADA(value.lovelace)}</span>
-                <span>₳</span>
+              <p>
+                <ADAAmount lovelace={value.lovelace} />
               </p>
               <ul>
                 {Array.from(value.assets).map(([id, quantity]) =>
-                  <li key={id} className='flex space-x-1'>
-                    <span>{quantity.toString()}</span>
-                    <span>{decodeASCII(getAssetName(id))}</span>
+                  <li key={id}>
+                    <AssetAmount
+                      quantity={quantity}
+                      decimals={0}
+                      symbol={decodeASCII(getAssetName(id))} />
                   </li>
                 )}
               </ul>
             </li>
           )}
           <li className='p-2 border rounded-md space-x-1'>
             <span>Fee:</span>
-            <span>{toADA(fee)}</span>
-            <span>₳</span>
+            <ADAAmount lovelace={fee} />
           </li>
         </ul>
       </div>