diff --git a/app/components/money-display.tsx b/app/components/money-display.tsx
index 30b69139..f7adc3c2 100644
--- a/app/components/money-display.tsx
+++ b/app/components/money-display.tsx
@@ -1,6 +1,6 @@
 import { type VariantProps, cva } from 'class-variance-authority';
 import type { Currency, CurrencyUnit } from '~/lib/money';
-import { Money } from '~/lib/money';
+import type { Money } from '~/lib/money';
 import { cn } from '~/lib/utils';
 
 const textVariants = cva('', {
@@ -54,72 +54,6 @@ type Variants = VariantProps<typeof textVariants> &
   VariantProps<typeof symbolVariants> &
   VariantProps<typeof valueVariants>;
 
-interface MoneyInputDisplayProps<C extends Currency = Currency> {
-  /** Raw input value from user (e.g., "1", "1.", "1.0") */
-  inputValue: string;
-  currency: C;
-  unit: CurrencyUnit<C>;
-  locale?: string;
-}
-
-export function MoneyInputDisplay<C extends Currency>({
-  inputValue,
-  currency,
-  unit,
-  locale,
-}: MoneyInputDisplayProps<C>) {
-  const money = new Money({ amount: inputValue, currency, unit });
-  const {
-    currencySymbol,
-    currencySymbolPosition,
-    integer,
-    numberOfDecimals,
-    decimalSeparator,
-  } = money.toLocalizedStringParts({
-    locale,
-    unit,
-    minimumFractionDigits: 'max',
-  });
-
-  // Get decimal part of the input value
-  const inputHasDecimalPoint = decimalSeparator
-    ? inputValue.includes(decimalSeparator)
-    : false;
-  const inputDecimals = inputHasDecimalPoint
-    ? inputValue.split(decimalSeparator)[1]
-    : '';
-
-  // If decimal part exists in the input value, pad with zeros to numberOfDecimals places
-  const needsPaddedZeros =
-    inputHasDecimalPoint && inputDecimals.length < numberOfDecimals;
-  const paddedZeros = needsPaddedZeros
-    ? '0'.repeat(numberOfDecimals - inputDecimals.length)
-    : '';
-
-  const symbol = (
-    <span className={symbolVariants({ size: 'lg' })}>{currencySymbol}</span>
-  );
-
-  return (
-    <span className={textVariants({ size: 'lg' })}>
-      {currencySymbolPosition === 'prefix' && symbol}
-      <span className={valueVariants({ size: 'lg' })}>
-        {integer}
-        {(inputDecimals || needsPaddedZeros) && (
-          <>
-            <span>{decimalSeparator}</span>
-            <span>{inputDecimals}</span>
-            {paddedZeros && (
-              <span className="text-gray-400">{paddedZeros}</span>
-            )}
-          </>
-        )}
-      </span>
-      {currencySymbolPosition === 'suffix' && symbol}
-    </span>
-  );
-}
-
 type MoneyDisplayProps<C extends Currency = Currency> = {
   money: Money<C>;
   locale?: string;
diff --git a/app/features/receive/receive-input.tsx b/app/features/receive/receive-input.tsx
index c9e24723..0493919f 100644
--- a/app/features/receive/receive-input.tsx
+++ b/app/features/receive/receive-input.tsx
@@ -1,29 +1,24 @@
 import { getEncodedToken } from '@cashu/cashu-ts';
-import { ArrowUpDown, Clipboard, Scan } from 'lucide-react';
-import { MoneyDisplay, MoneyInputDisplay } from '~/components/money-display';
-import { Numpad } from '~/components/numpad';
+import { Clipboard, Scan } from 'lucide-react';
 import {
   ClosePageButton,
-  PageContent,
-  PageFooter,
   PageHeader,
   PageHeaderTitle,
 } from '~/components/page';
-import { Button } from '~/components/ui/button';
-import { Skeleton } from '~/components/ui/skeleton';
 import {
   AccountSelector,
   toAccountSelectorOption,
 } from '~/features/accounts/account-selector';
 import { accountOfflineToast } from '~/features/accounts/utils';
 import { getDefaultUnit } from '~/features/shared/currencies';
-import useAnimation from '~/hooks/use-animation';
-import { useMoneyInput } from '~/hooks/use-money-input';
+import {
+  MoneyInputLayout,
+  useMoneyInputField,
+} from '~/features/shared/money-input-layout';
 import { useRedirectTo } from '~/hooks/use-redirect-to';
 import { useBuildLinkWithSearchParams } from '~/hooks/use-search-params-link';
 import { useToast } from '~/hooks/use-toast';
 import { extractCashuToken } from '~/lib/cashu';
-import type { Money } from '~/lib/money';
 import { readClipboard } from '~/lib/read-clipboard';
 import {
   LinkWithViewTransition,
@@ -32,44 +27,11 @@ import {
 import { useAccount, useAccounts } from '../accounts/account-hooks';
 import { useReceiveStore } from './receive-provider';
 
-type ConvertedMoneySwitcherProps = {
-  onSwitchInputCurrency: () => void;
-  money?: Money;
-};
-
-const ConvertedMoneySwitcher = ({
-  onSwitchInputCurrency,
-  money,
-}: ConvertedMoneySwitcherProps) => {
-  if (!money) {
-    return <Skeleton className="h-6 w-24" />;
-  }
-
-  return (
-    <button
-      type="button"
-      className="flex items-center gap-1"
-      onClick={onSwitchInputCurrency}
-    >
-      <MoneyDisplay
-        money={money}
-        unit={getDefaultUnit(money.currency)}
-        size="sm"
-        variant="muted"
-      />
-      <ArrowUpDown className="mb-1 text-muted-foreground" />
-    </button>
-  );
-};
-
 export default function ReceiveInput() {
   const navigate = useNavigateWithViewTransition();
   const { toast } = useToast();
   const { redirectTo } = useRedirectTo('/');
   const buildLinkWithSearchParams = useBuildLinkWithSearchParams();
-  const { animationClass: shakeAnimationClass, start: startShakeAnimation } =
-    useAnimation({ name: 'shake' });
-
   const receiveAccountId = useReceiveStore((s) => s.accountId);
   const receiveAccount = useAccount(receiveAccountId);
   const receiveAmount = useReceiveStore((s) => s.amount);
@@ -78,15 +40,7 @@ export default function ReceiveInput() {
   const setReceiveAmount = useReceiveStore((s) => s.setAmount);
   const { data: accounts } = useAccounts();
 
-  const {
-    rawInputValue,
-    maxInputDecimals,
-    inputValue,
-    convertedValue,
-    exchangeRateError,
-    handleNumberInput,
-    switchInputCurrency,
-  } = useMoneyInput({
+  const field = useMoneyInputField({
     initialRawInputValue: receiveAmount?.toString(receiveCurrencyUnit) || '0',
     initialInputCurrency: receiveAccount.currency,
     initialOtherCurrency: receiveAccount.currency === 'BTC' ? 'USD' : 'BTC',
@@ -98,14 +52,14 @@ export default function ReceiveInput() {
       return;
     }
 
-    if (inputValue.currency === receiveAccount.currency) {
-      setReceiveAmount(inputValue);
+    if (field.inputValue.currency === receiveAccount.currency) {
+      setReceiveAmount(field.inputValue);
     } else {
-      if (!convertedValue) {
+      if (!field.convertedValue) {
         // Can't happen because when there is no converted value, the toggle will not be shown so input currency and receive currency must be the same
         return;
       }
-      setReceiveAmount(convertedValue);
+      setReceiveAmount(field.convertedValue);
     }
 
     const nextPath =
@@ -160,24 +114,24 @@ export default function ReceiveInput() {
         <PageHeaderTitle>Receive</PageHeaderTitle>
       </PageHeader>
 
-      <PageContent className="mx-auto flex flex-col items-center justify-between">
-        <div className="flex h-[124px] flex-col items-center gap-2">
-          <div className={shakeAnimationClass}>
-            <MoneyInputDisplay
-              inputValue={rawInputValue}
-              currency={inputValue.currency}
-              unit={getDefaultUnit(inputValue.currency)}
-            />
-          </div>
-
-          {!exchangeRateError && (
-            <ConvertedMoneySwitcher
-              onSwitchInputCurrency={switchInputCurrency}
-              money={convertedValue}
-            />
-          )}
-        </div>
-
+      <MoneyInputLayout
+        field={field}
+        onContinue={handleContinue}
+        actions={
+          <>
+            <button type="button" onClick={handlePaste}>
+              <Clipboard />
+            </button>
+            <LinkWithViewTransition
+              to={buildLinkWithSearchParams('/receive/scan')}
+              transition="slideUp"
+              applyTo="newView"
+            >
+              <Scan />
+            </LinkWithViewTransition>
+          </>
+        }
+      >
         <div className="w-full max-w-sm sm:max-w-none">
           <AccountSelector
             accounts={accounts.map((account) =>
@@ -186,44 +140,14 @@ export default function ReceiveInput() {
             selectedAccount={toAccountSelectorOption(receiveAccount)}
             onSelect={(account) => {
               setReceiveAccount(account);
-              if (account.currency !== inputValue.currency) {
-                switchInputCurrency();
+              if (account.currency !== field.inputValue.currency) {
+                field.switchInputCurrency();
               }
             }}
             disabled={accounts.length === 1}
           />
         </div>
-
-        <div className="flex w-full flex-col items-center gap-4 sm:items-start sm:justify-between">
-          <div className="grid w-full max-w-sm grid-cols-3 gap-4 sm:max-w-none">
-            <div className="flex items-center justify-start gap-4">
-              <button type="button" onClick={handlePaste}>
-                <Clipboard />
-              </button>
-
-              <LinkWithViewTransition
-                to={buildLinkWithSearchParams('/receive/scan')}
-                transition="slideUp"
-                applyTo="newView"
-              >
-                <Scan />
-              </LinkWithViewTransition>
-            </div>
-            <div /> {/* spacer */}
-            <Button onClick={handleContinue} disabled={inputValue.isZero()}>
-              Continue
-            </Button>
-          </div>
-        </div>
-      </PageContent>
-      <PageFooter className="sm:pb-14">
-        <Numpad
-          showDecimal={maxInputDecimals > 0}
-          onButtonClick={(value) => {
-            handleNumberInput(value, startShakeAnimation);
-          }}
-        />
-      </PageFooter>
+      </MoneyInputLayout>
     </>
   );
 }
diff --git a/app/features/send/send-input.tsx b/app/features/send/send-input.tsx
index 3fdb2cac..0051981a 100644
--- a/app/features/send/send-input.tsx
+++ b/app/features/send/send-input.tsx
@@ -1,5 +1,4 @@
 import {
-  ArrowUpDown,
   AtSign,
   Clipboard,
   LoaderCircle,
@@ -8,33 +7,29 @@ import {
   ZapIcon,
 } from 'lucide-react';
 import { useState } from 'react';
-import { MoneyDisplay, MoneyInputDisplay } from '~/components/money-display';
-import { Numpad } from '~/components/numpad';
 import {
   ClosePageButton,
-  PageContent,
-  PageFooter,
   PageHeader,
   PageHeaderTitle,
 } from '~/components/page';
 import { SearchBar } from '~/components/search-bar';
-import { Button } from '~/components/ui/button';
 import {
+  Drawer,
   DrawerContent,
   DrawerHeader,
   DrawerTitle,
+  DrawerTrigger,
 } from '~/components/ui/drawer';
-import { DrawerTrigger } from '~/components/ui/drawer';
-import { Drawer } from '~/components/ui/drawer';
-import { Skeleton } from '~/components/ui/skeleton';
 import { useAccounts } from '~/features/accounts/account-hooks';
 import {
   AccountSelector,
   toAccountSelectorOption,
 } from '~/features/accounts/account-selector';
 import { accountOfflineToast } from '~/features/accounts/utils';
-import useAnimation from '~/hooks/use-animation';
-import { useMoneyInput } from '~/hooks/use-money-input';
+import {
+  MoneyInputLayout,
+  useMoneyInputField,
+} from '~/features/shared/money-input-layout';
 import { useRedirectTo } from '~/hooks/use-redirect-to';
 import { useBuildLinkWithSearchParams } from '~/hooks/use-search-params-link';
 import { useToast } from '~/hooks/use-toast';
@@ -51,45 +46,11 @@ import { getDefaultUnit } from '../shared/currencies';
 import { DomainError, getErrorMessage } from '../shared/error';
 import { useSendStore } from './send-provider';
 
-type ConvertedMoneySwitcherProps = {
-  onSwitchInputCurrency: () => void;
-  money?: Money;
-};
-
-const ConvertedMoneySwitcher = ({
-  onSwitchInputCurrency,
-  money,
-}: ConvertedMoneySwitcherProps) => {
-  if (!money) {
-    return <Skeleton className="h-6 w-24" />;
-  }
-
-  return (
-    <button
-      type="button"
-      className="flex items-center gap-1"
-      onClick={() => {
-        onSwitchInputCurrency();
-      }}
-    >
-      <MoneyDisplay
-        money={money}
-        unit={getDefaultUnit(money.currency)}
-        size="sm"
-        variant="muted"
-      />
-      <ArrowUpDown className="mb-1 text-muted-foreground" />
-    </button>
-  );
-};
-
 export function SendInput() {
   const { toast } = useToast();
   const navigate = useNavigateWithViewTransition();
   const { redirectTo } = useRedirectTo('/');
   const buildLinkWithSearchParams = useBuildLinkWithSearchParams();
-  const { animationClass: shakeAnimationClass, start: startShakeAnimation } =
-    useAnimation({ name: 'shake' });
   const { data: accounts } = useAccounts();
   const [selectDestinationDrawerOpen, setSelectDestinationDrawerOpen] =
     useState(false);
@@ -108,16 +69,7 @@ export function SendInput() {
     : undefined;
   const initialInputCurrency = sendAmount?.currency ?? sendAccount.currency;
 
-  const {
-    rawInputValue,
-    maxInputDecimals,
-    inputValue,
-    convertedValue,
-    exchangeRateError,
-    handleNumberInput,
-    switchInputCurrency,
-    setInputValue,
-  } = useMoneyInput({
+  const field = useMoneyInputField({
     initialRawInputValue: sendAmount?.toString(sendAmountCurrencyUnit) || '0',
     initialInputCurrency: initialInputCurrency,
     initialOtherCurrency: initialInputCurrency === 'BTC' ? 'USD' : 'BTC',
@@ -180,15 +132,15 @@ export function SendInput() {
       data: { amount },
     } = result;
 
-    let latestInputValue = inputValue;
-    let latestConvertedValue = convertedValue;
+    let latestInputValue = field.inputValue;
+    let latestConvertedValue = field.convertedValue;
 
     if (amount) {
       const defaultUnit = getDefaultUnit(amount.currency);
       ({
         newInputValue: latestInputValue,
         newConvertedValue: latestConvertedValue,
-      } = setInputValue(amount.toString(defaultUnit), amount.currency));
+      } = field.setInputValue(amount.toString(defaultUnit), amount.currency));
     }
 
     await handleContinue(latestInputValue, latestConvertedValue);
@@ -215,25 +167,13 @@ export function SendInput() {
         <PageHeaderTitle>Send</PageHeaderTitle>
       </PageHeader>
 
-      <PageContent className="mx-auto flex flex-col items-center justify-between">
-        <div className="flex flex-col items-center justify-between gap-4">
-          <div className="flex h-[124px] flex-col items-center gap-2">
-            <div className={shakeAnimationClass}>
-              <MoneyInputDisplay
-                inputValue={rawInputValue}
-                currency={inputValue.currency}
-                unit={getDefaultUnit(inputValue.currency)}
-              />
-            </div>
-
-            {!exchangeRateError && (
-              <ConvertedMoneySwitcher
-                onSwitchInputCurrency={switchInputCurrency}
-                money={convertedValue}
-              />
-            )}
-          </div>
-
+      <MoneyInputLayout
+        field={field}
+        onContinue={() =>
+          handleContinue(field.inputValue, field.convertedValue)
+        }
+        continueLoading={status === 'quoting'}
+        belowDisplay={
           <div className="flex h-[24px] items-center justify-center gap-4">
             {destinationDisplay && (
               <>
@@ -242,8 +182,27 @@ export function SendInput() {
               </>
             )}
           </div>
-        </div>
-
+        }
+        actions={
+          <>
+            <button type="button" onClick={handlePaste}>
+              <Clipboard />
+            </button>
+            <LinkWithViewTransition
+              to={buildLinkWithSearchParams('/send/scan')}
+              transition="slideUp"
+              applyTo="newView"
+            >
+              <Scan />
+            </LinkWithViewTransition>
+            <SelectDestinationDrawer
+              open={selectDestinationDrawerOpen}
+              onOpenChange={setSelectDestinationDrawerOpen}
+              onSelect={handleSelectDestination}
+            />
+          </>
+        }
+      >
         <div className="w-full max-w-sm sm:max-w-none">
           <AccountSelector
             accounts={accounts.map((account) =>
@@ -252,56 +211,14 @@ export function SendInput() {
             selectedAccount={toAccountSelectorOption(sendAccount)}
             onSelect={(account) => {
               selectSourceAccount(account);
-              if (account.currency !== inputValue.currency) {
-                switchInputCurrency();
+              if (account.currency !== field.inputValue.currency) {
+                field.switchInputCurrency();
               }
             }}
             disabled={accounts.length === 1}
           />
         </div>
-
-        <div className="flex w-full flex-col items-center gap-4 sm:items-start sm:justify-between">
-          <div className="grid w-full max-w-sm grid-cols-3 gap-4 sm:max-w-none">
-            <div className="flex items-center justify-start gap-4">
-              <button type="button" onClick={handlePaste}>
-                <Clipboard />
-              </button>
-
-              <LinkWithViewTransition
-                to={buildLinkWithSearchParams('/send/scan')}
-                transition="slideUp"
-                applyTo="newView"
-              >
-                <Scan />
-              </LinkWithViewTransition>
-
-              <SelectDestinationDrawer
-                open={selectDestinationDrawerOpen}
-                onOpenChange={setSelectDestinationDrawerOpen}
-                onSelect={handleSelectDestination}
-              />
-            </div>
-            <div /> {/* spacer */}
-            <div className="flex items-center justify-end">
-              <Button
-                onClick={() => handleContinue(inputValue, convertedValue)}
-                disabled={inputValue.isZero()}
-                loading={status === 'quoting'}
-              >
-                Continue
-              </Button>
-            </div>
-          </div>
-        </div>
-      </PageContent>
-      <PageFooter className="sm:pb-14">
-        <Numpad
-          showDecimal={maxInputDecimals > 0}
-          onButtonClick={(value) => {
-            handleNumberInput(value, startShakeAnimation);
-          }}
-        />
-      </PageFooter>
+      </MoneyInputLayout>
     </>
   );
 }
diff --git a/app/features/shared/money-input-layout.tsx b/app/features/shared/money-input-layout.tsx
new file mode 100644
index 00000000..84fe6874
--- /dev/null
+++ b/app/features/shared/money-input-layout.tsx
@@ -0,0 +1,299 @@
+import { ArrowUpDown } from 'lucide-react';
+import { MoneyDisplay } from '~/components/money-display';
+import type { NumpadButton } from '~/components/numpad';
+import { Numpad } from '~/components/numpad';
+import { PageContent, PageFooter } from '~/components/page';
+import { Button } from '~/components/ui/button';
+import { Skeleton } from '~/components/ui/skeleton';
+import useAnimation from '~/hooks/use-animation';
+import { useMoneyInput } from '~/hooks/use-money-input';
+import type { Currency, CurrencyUnit } from '~/lib/money';
+import { Money } from '~/lib/money';
+import { getDefaultUnit } from './currencies';
+
+// ---------------------------------------------------------------------------
+// useMoneyInputField
+// ---------------------------------------------------------------------------
+
+type UseMoneyInputFieldProps = {
+  initialRawInputValue: string;
+  initialInputCurrency: Currency;
+  initialOtherCurrency: Currency;
+};
+
+/**
+ * Composes useMoneyInput with a shake animation so consumers don't have
+ * to wire them together. Pass the returned `field` to `<MoneyInputLayout>`
+ * which handles the display, numpad, and continue button automatically.
+ *
+ * ```tsx
+ * const field = useMoneyInputField({ ... });
+ *
+ * <MoneyInputLayout field={field} onContinue={handleContinue} actions={...}>
+ *   <AccountSelector ... />
+ * </MoneyInputLayout>
+ * ```
+ */
+export function useMoneyInputField({
+  initialRawInputValue,
+  initialInputCurrency,
+  initialOtherCurrency,
+}: UseMoneyInputFieldProps) {
+  const { animationClass, start: shakeOnError } = useAnimation({
+    name: 'shake',
+  });
+
+  const moneyInput = useMoneyInput({
+    initialRawInputValue,
+    initialInputCurrency,
+    initialOtherCurrency,
+  });
+
+  const handleNumberInput = (input: NumpadButton) => {
+    moneyInput.handleNumberInput(input, shakeOnError);
+  };
+
+  return {
+    rawInputValue: moneyInput.rawInputValue,
+    inputValue: moneyInput.inputValue,
+    convertedValue: moneyInput.convertedValue,
+    exchangeRateError: moneyInput.exchangeRateError,
+    switchInputCurrency: moneyInput.switchInputCurrency,
+    setInputValue: moneyInput.setInputValue,
+    handleNumberInput,
+    showDecimal: moneyInput.maxInputDecimals > 0,
+    inputErrorClassName: animationClass,
+  };
+}
+
+// ---------------------------------------------------------------------------
+// MoneyInputLayout
+// ---------------------------------------------------------------------------
+
+type MoneyInputFieldReturn = ReturnType<typeof useMoneyInputField>;
+
+type MoneyInputLayoutProps = {
+  /** The money input field state (from useMoneyInputField) */
+  field: MoneyInputFieldReturn;
+  /** Content rendered between the display area and the action row (e.g. AccountSelector) */
+  children?: React.ReactNode;
+  /** Left side of the action row (e.g. paste/scan buttons) */
+  actions?: React.ReactNode;
+  /** Continue button handler */
+  onContinue: () => void;
+  /** Override the continue button label (defaults to "Continue") */
+  continueLabel?: string;
+  /** Additional disabled condition — isZero() is always checked */
+  continueDisabled?: boolean;
+  /** Show loading spinner on the continue button */
+  continueLoading?: boolean;
+  /** Content rendered alongside MoneyInputDisplay (e.g. destination display in send).
+   *  When provided, display and this content are wrapped in a flex column. */
+  belowDisplay?: React.ReactNode;
+};
+
+/**
+ * Shared layout for money input pages (send, receive, transfer, buy).
+ *
+ * Renders: MoneyInputDisplay → children slot → action row → Numpad.
+ * The parent provides the page header (title/close vary per page).
+ *
+ * ```tsx
+ * <PageHeader>...</PageHeader>
+ * <MoneyInputLayout field={field} onContinue={handleContinue} actions={...}>
+ *   <AccountSelector ... />
+ * </MoneyInputLayout>
+ * ```
+ */
+export function MoneyInputLayout({
+  field,
+  children,
+  actions,
+  onContinue,
+  continueLabel = 'Continue',
+  continueDisabled,
+  continueLoading,
+  belowDisplay,
+}: MoneyInputLayoutProps) {
+  const display = (
+    <MoneyInputDisplay
+      inputErrorClassName={field.inputErrorClassName}
+      rawInputValue={field.rawInputValue}
+      inputValue={field.inputValue}
+      convertedValue={field.convertedValue}
+      exchangeRateError={field.exchangeRateError}
+      onSwitchCurrency={field.switchInputCurrency}
+    />
+  );
+
+  return (
+    <>
+      <PageContent className="mx-auto flex flex-col items-center justify-between">
+        {belowDisplay ? (
+          <div className="flex flex-col items-center justify-between gap-4">
+            {display}
+            {belowDisplay}
+          </div>
+        ) : (
+          display
+        )}
+
+        {children}
+
+        <div className="flex w-full flex-col items-center gap-4 sm:items-start sm:justify-between">
+          <div className="grid w-full max-w-sm grid-cols-3 gap-4 sm:max-w-none">
+            <div className="flex items-center justify-start gap-4">
+              {actions}
+            </div>
+            <div />
+            <div className="flex items-center justify-end">
+              <Button
+                onClick={onContinue}
+                disabled={field.inputValue.isZero() || continueDisabled}
+                loading={continueLoading}
+              >
+                {continueLabel}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </PageContent>
+      <PageFooter className="sm:pb-14">
+        <Numpad
+          showDecimal={field.showDecimal}
+          onButtonClick={field.handleNumberInput}
+        />
+      </PageFooter>
+    </>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Internal display components
+// ---------------------------------------------------------------------------
+
+type ConvertedMoneySwitcherProps = {
+  onSwitch: () => void;
+  money?: Money;
+};
+
+const ConvertedMoneySwitcher = ({
+  onSwitch,
+  money,
+}: ConvertedMoneySwitcherProps) => {
+  if (!money) {
+    return <Skeleton className="h-6 w-24" />;
+  }
+
+  return (
+    <button
+      type="button"
+      className="flex items-center gap-1"
+      onClick={onSwitch}
+    >
+      <MoneyDisplay
+        money={money}
+        unit={getDefaultUnit(money.currency)}
+        size="sm"
+        variant="muted"
+      />
+      <ArrowUpDown className="mb-1 text-muted-foreground" />
+    </button>
+  );
+};
+
+function RawMoneyDisplay<C extends Currency>({
+  inputValue,
+  currency,
+  unit,
+  locale,
+}: {
+  inputValue: string;
+  currency: C;
+  unit: CurrencyUnit<C>;
+  locale?: string;
+}) {
+  const money = new Money({ amount: inputValue, currency, unit });
+  const {
+    currencySymbol,
+    currencySymbolPosition,
+    integer,
+    numberOfDecimals,
+    decimalSeparator,
+  } = money.toLocalizedStringParts({
+    locale,
+    unit,
+    minimumFractionDigits: 'max',
+  });
+
+  const inputHasDecimalPoint = decimalSeparator
+    ? inputValue.includes(decimalSeparator)
+    : false;
+  const inputDecimals = inputHasDecimalPoint
+    ? inputValue.split(decimalSeparator)[1]
+    : '';
+
+  const needsPaddedZeros =
+    inputHasDecimalPoint && inputDecimals.length < numberOfDecimals;
+  const paddedZeros = needsPaddedZeros
+    ? '0'.repeat(numberOfDecimals - inputDecimals.length)
+    : '';
+
+  const symbol = <span className="text-[3.45rem]">{currencySymbol}</span>;
+
+  return (
+    <span className="font-bold">
+      {currencySymbolPosition === 'prefix' && symbol}
+      <span className="pt-2 font-numeric text-6xl">
+        {integer}
+        {(inputDecimals || needsPaddedZeros) && (
+          <>
+            <span>{decimalSeparator}</span>
+            <span>{inputDecimals}</span>
+            {paddedZeros && (
+              <span className="text-gray-400">{paddedZeros}</span>
+            )}
+          </>
+        )}
+      </span>
+      {currencySymbolPosition === 'suffix' && symbol}
+    </span>
+  );
+}
+
+type MoneyInputDisplayProps = {
+  rawInputValue: string;
+  inputValue: Money;
+  convertedValue?: Money;
+  exchangeRateError?: Error | null;
+  onSwitchCurrency: () => void;
+  inputErrorClassName?: string;
+};
+
+function MoneyInputDisplay({
+  rawInputValue,
+  inputValue,
+  convertedValue,
+  exchangeRateError,
+  onSwitchCurrency,
+  inputErrorClassName,
+}: MoneyInputDisplayProps) {
+  return (
+    <div className="flex h-[124px] flex-col items-center gap-2">
+      <div className={inputErrorClassName}>
+        <RawMoneyDisplay
+          inputValue={rawInputValue}
+          currency={inputValue.currency}
+          unit={getDefaultUnit(inputValue.currency)}
+        />
+      </div>
+
+      {!exchangeRateError && (
+        <ConvertedMoneySwitcher
+          onSwitch={onSwitchCurrency}
+          money={convertedValue}
+        />
+      )}
+    </div>
+  );
+}