Merge pull request xch-dev#552 from dkackman/refine-offer-page

Display xch ticker in xch amount

Author: Rigidity

src/components/dialogs/MakeOfferConfirmationDialog.tsx

@@ -182,10 +182,10 @@ function AssetDisplay({
     <div className='space-y-2'>
       {hasXch && (
         <div>
-          <h4 className='font-semibold'>XCH</h4>
+          <h4 className='font-semibold'>{xchToken?.ticker ?? 'XCH'}</h4>
           {loadingXch ? (
             <p className='text-sm text-muted-foreground'>
-              <Trans>Loading XCH details...</Trans>
+              <Trans>Loading {xchToken?.ticker ?? 'XCH'} details...</Trans>
             </p>
           ) : (
             <div className='flex items-center gap-2'>

src/components/selectors/AssetSelector.tsx

@@ -14,6 +14,7 @@ import {
 } from '@/components/ui/tooltip';
 import useOfferStateWithDefault from '@/hooks/useOfferStateWithDefault';
 import { usePrices } from '@/hooks/usePrices';
+import { useWalletState } from '@/state';
 import { t } from '@lingui/core/macro';
 import { Trans } from '@lingui/react/macro';
 import {
@@ -48,6 +49,7 @@ export function AssetSelector({
   const [includeAmount, setIncludeAmount] = useState(!!assets.xch);
   const [ownedTokens, setOwnedTokens] = useState<TokenRecord[]>([]);
   const { getCatAskPriceInXch } = usePrices();
+  const walletState = useWalletState();
 
   // Notify parent of XCH state changes
   useEffect(() => {
@@ -78,7 +80,7 @@ export function AssetSelector({
           onClick={() => setIncludeAmount(true)}
         >
           <PlusIcon className='mr-0.5 h-3 w-3' />
-          XCH
+          {walletState.sync.unit.ticker}
         </Button>
         <Button
           variant='outline'
@@ -108,14 +110,17 @@ export function AssetSelector({
 
       {includeAmount && (
         <div className='mt-4 flex flex-col space-y-1.5'>
-          <Label htmlFor={`${prefix}-amount`}>XCH</Label>
+          <Label htmlFor={`${prefix}-amount`}>
+            {walletState.sync.unit.ticker}
+          </Label>
           <div className='flex'>
             <TokenAmountInput
               id={`${prefix}-amount`}
               type='text'
               className='rounded-r-none z-10'
               placeholder={t`Enter amount`}
               value={assets.xch}
+              ticker='xch'
               onValueChange={(values) => {
                 setAssets({
                   ...assets,
@@ -146,7 +151,10 @@ export function AssetSelector({
                       </Button>
                     </TooltipTrigger>
                     <TooltipContent>
-                      <Trans>Convert to XCH at current asking price</Trans>
+                      <Trans>
+                        Convert to {walletState.sync.unit.ticker} at current
+                        asking price
+                      </Trans>
                     </TooltipContent>
                   </Tooltip>
                 </TooltipProvider>

src/components/ui/masked-input.tsx

@@ -60,22 +60,36 @@ function isLocaleNumber(stringNumber: string, locale?: string): boolean {
 MaskedInput.displayName = 'MaskedInput';
 
 // Extended Masked Input for XCH inputs
-interface XchInputProps extends MaskedInputProps {
+interface TokenInputProps extends MaskedInputProps {
   decimals?: number;
+  ticker?: string | null;
 }
 
-const TokenAmountInput = React.forwardRef<HTMLInputElement, XchInputProps>(
-  ({ decimals = 24, ...props }, ref) => (
-    <MaskedInput
-      placeholder='0.00'
-      {...props}
-      type='text'
-      inputRef={ref}
-      decimalScale={decimals}
-      allowLeadingZeros={true}
-      allowNegative={false}
-    />
-  ),
+const TokenAmountInput = React.forwardRef<HTMLInputElement, TokenInputProps>(
+  ({ decimals = 24, ticker = null, ...props }, ref) => {
+    const walletState = useWalletState();
+
+    return (
+      <div className='relative'>
+        <MaskedInput
+          placeholder='0.00'
+          {...props}
+          type='text'
+          inputRef={ref}
+          decimalScale={decimals}
+          allowLeadingZeros={true}
+          allowNegative={false}
+        />
+        {ticker && (
+          <div className='pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3'>
+            <span className='text-gray-500 text-sm'>
+              {ticker === 'xch' ? walletState.sync.unit.ticker : ticker}
+            </span>
+          </div>
+        )}
+      </div>
+    );
+  },
 );
 
 TokenAmountInput.displayName = 'TokenAmountInput';
@@ -112,7 +126,7 @@ const IntegerInput = React.forwardRef<HTMLInputElement, IntegerInputProps>(
 IntegerInput.displayName = 'IntegerInput';
 
 // Fee input that uses the default fee value as initial value
-interface FeeAmountInputProps extends Omit<XchInputProps, 'value'> {
+interface FeeAmountInputProps extends Omit<TokenInputProps, 'value'> {
   value?: string;
   className?: string;
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
@@ -125,7 +139,6 @@ interface FeeAmountInputProps extends Omit<XchInputProps, 'value'> {
 const FeeAmountInput = React.forwardRef<HTMLInputElement, FeeAmountInputProps>(
   ({ value, className, onChange, onValueChange, ...props }, ref) => {
     const { fee: defaultFee } = useDefaultFee();
-    const walletState = useWalletState();
     const hasSetInitialValue = React.useRef(false);
 
     // Set initial value when component mounts
@@ -154,12 +167,8 @@ const FeeAmountInput = React.forwardRef<HTMLInputElement, FeeAmountInputProps>(
           placeholder={t`Enter network fee`}
           aria-label={t`Network fee amount`}
           className={`pr-12 ${className || ''}`}
+          ticker='xch'
         />
-        <div className='pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3'>
-          <span className='text-gray-500 text-sm' id='price-currency'>
-            {walletState.sync.unit.ticker}
-          </span>
-        </div>
       </div>
     );
   },

src/pages/MakeOffer.tsx

@@ -80,15 +80,15 @@ export function MakeOffer() {
     if (hasOfferedXchAdded && !hasOfferedXchValid) {
       addError({
         kind: 'invalid',
-        reason: t`Offered XCH amount must be a positive number.`,
+        reason: t`Offered ${walletState.sync.unit.ticker} amount must be a positive number.`,
       });
       return;
     }
 
     if (hasRequestedXchAdded && !hasRequestedXchValid) {
       addError({
         kind: 'invalid',
-        reason: t`Requested XCH amount must be a positive number.`,
+        reason: t`Requested ${walletState.sync.unit.ticker} amount must be a positive number.`,
       });
       return;
     }

src/pages/Send.tsx

@@ -299,6 +299,7 @@ export default function Send() {
                       <div className='relative flex'>
                         <TokenAmountInput
                           {...field}
+                          ticker={asset?.ticker}
                           className='pr-12 rounded-r-none z-10'
                         />
                         <TooltipProvider>
@@ -331,14 +332,6 @@ export default function Send() {
                             </TooltipContent>
                           </Tooltip>
                         </TooltipProvider>
-                        <div className='pointer-events-none absolute inset-y-0 right-12 flex items-center pr-3'>
-                          <span
-                            className='text-gray-500 text-sm'
-                            id='price-currency'
-                          >
-                            {asset?.ticker}
-                          </span>
-                        </div>
                       </div>
                     </FormControl>
                     <FormMessage />