feat: send form amount field

src/app/pages/send-crypto-asset/send-crypto-asset-form/bitcoin/bitcoin-crypto-currency-send-form.tsx

@@ -1,23 +1,48 @@
 import { useNavigate } from 'react-router-dom';
 
-import type { AllTransferableCryptoAssetBalances } from '@shared/models/crypto-asset-balance.model';
+import { Flex } from '@stacks/ui';
+import { Formik } from 'formik';
+
 import { RouteUrls } from '@shared/route-urls';
 
 import { useRouteHeader } from '@app/common/hooks/use-route-header';
+import { CENTERED_FULL_PAGE_MAX_WIDTH } from '@app/components/global-styles/full-page-styles';
 import { Header } from '@app/components/header';
 
-interface BitcoinCryptoCurrencySendFormProps {
-  assetBalance: AllTransferableCryptoAssetBalances;
-}
+import { AmountField } from '../components/amount-field';
+import { SendAllButton } from '../components/send-all-button';
+
+interface BitcoinCryptoCurrencySendFormProps {}
 // TODO: Placeholder form
-export function BitcoinCryptoCurrencySendForm({
-  assetBalance,
-}: BitcoinCryptoCurrencySendFormProps) {
+export function BitcoinCryptoCurrencySendForm({}: BitcoinCryptoCurrencySendFormProps) {
   const navigate = useNavigate();
+
   useRouteHeader(
-    <Header hideActions onClose={() => navigate(RouteUrls.SendCryptoAsset)} title={' '} />
+    <Header hideActions onClose={() => navigate(RouteUrls.SendCryptoAsset)} title={'Send'} />
+  );
+
+  return (
+    <Formik
+      initialValues={{ amount: '' }}
+      validateOnChange={false}
+      validateOnBlur={false}
+      validateOnMount={false}
+      // validationSchema={}
+      onSubmit={() => {}}
+    >
+      {() => (
+        <Flex
+          alignItems="center"
+          flexGrow={1}
+          flexDirection="column"
+          maxWidth={['unset', 'unset', CENTERED_FULL_PAGE_MAX_WIDTH]}
+          minHeight={['70vh', '90vh']}
+          justifyContent="center"
+          mb="loose"
+        >
+          <AmountField sendAllButton={<SendAllButton />} />
+        </Flex>
+      )}
+    </Formik>
   );
-  // eslint-disable-next-line no-console
-  console.log(assetBalance);
-  return <>{assetBalance.asset.symbol} Send Form</>;
 }

src/app/pages/send-crypto-asset/send-crypto-asset-form/components/amount-field.tsx

@@ -0,0 +1,46 @@
+import { Box, Flex, Stack, Text, color } from '@stacks/ui';
+import { useField } from 'formik';
+
+import { amountInputId, maxInputContainerWidth, useFontResizer } from './use-font-resizer';
+
+interface AmountFieldProps {
+  sendAllButton: JSX.Element;
+}
+export function AmountField({ sendAllButton }: AmountFieldProps) {
+  const [field] = useField('amount');
+  const { inputFontSize } = useFontResizer();
+
+  return (
+    <Stack alignItems="center" spacing="48px">
+      <Flex
+        alignItems="center"
+        height="55px"
+        justifyContent="center"
+        width={`${maxInputContainerWidth}px`}
+      >
+        <Flex flexBasis="50%">
+          <Box
+            as="input"
+            id={amountInputId}
+            caretColor={color('accent')}
+            flexGrow={1}
+            maxLength={10} // TODO: Replace with asset decimals + 3?
+            outline="0px solid transparent"
+            placeholder="0"
+            pr="base-tight"
+            textAlign="right"
+            width="100%"
+            wordWrap="normal"
+            {...field}
+          />
+          {/* TODO: Replace with asset symbol */}
+          <Text flexShrink={2} fontSize={inputFontSize} width="100%">
+            BTC
+          </Text>
+        </Flex>
+        {/* TODO: Add errors with validations */}
+      </Flex>
+      {sendAllButton}
+    </Stack>
+  );
+}

src/app/pages/send-crypto-asset/send-crypto-asset-form/components/send-all-button.tsx

@@ -0,0 +1,18 @@
+import { Button } from '@stacks/ui';
+
+export function SendAllButton() {
+  return (
+    <Button
+      borderRadius="12px"
+      fontSize={0}
+      height="32px"
+      onClick={() => {}}
+      mode="tertiary"
+      px="tight"
+      type="button"
+      width="70px"
+    >
+      Send all
+    </Button>
+  );
+}

src/app/pages/send-crypto-asset/send-crypto-asset-form/components/use-font-resizer.ts

@@ -0,0 +1,42 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { useOnMount } from '@app/common/hooks/use-on-mount';
+
+const maxFontSize = 48;
+const minFontSize = 14;
+
+export const amountInputId = 'crypto-send-form-amount';
+export const maxInputContainerWidth = 344;
+
+export function useFontResizer() {
+  const [inputFontSize, setInputFontSize] = useState(maxFontSize + 'px');
+
+  useOnMount(() => {
+    const input = document.getElementById(amountInputId);
+    if (!input) return;
+
+    input.style.fontSize = maxFontSize + 'px';
+  });
+
+  const onChange = useCallback(event => {
+    const el = event.target;
+
+    let fontSize = maxFontSize;
+    el.style.fontSize = fontSize + 'px';
+    setInputFontSize(fontSize + 'px');
+    while (fontSize > minFontSize && el.scrollWidth > el.clientWidth) {
+      fontSize--;
+      el.style.fontSize = fontSize + 'px';
+      setInputFontSize(fontSize + 'px');
+    }
+  }, []);
+
+  useEffect(() => {
+    document.addEventListener('input', onChange);
+    return () => {
+      document.removeEventListener('input', onChange);
+    };
+  }, [onChange]);
+
+  return { inputFontSize };
+}

src/app/pages/send-crypto-asset/send-crypto-asset-form/send-crypto-asset-form.tsx

@@ -18,7 +18,7 @@ export function SendCryptoAssetForm() {
 
   switch (assetBalance.blockchain) {
     case 'bitcoin':
-      return <BitcoinCryptoCurrencySendForm assetBalance={assetBalance} />;
+      return <BitcoinCryptoCurrencySendForm />;
     case 'stacks':
       switch (assetBalance.type) {
         case 'crypto-currency':

src/app/pages/send-crypto-asset/send-crypto-asset.tsx

@@ -4,7 +4,7 @@ import { RouteUrls } from '@shared/route-urls';
 
 import { useRouteHeader } from '@app/common/hooks/use-route-header';
 import { Header } from '@app/components/header';
-import { useAllTransferableCryptoAssetBalances } from '@app/pages/send-crypto-asset/crypto-assets.hooks';
+import { useAllTransferableCryptoAssetBalances } from '@app/pages/send-crypto-asset/send-crypto-assets.hooks';
 
 import { CryptoAssetList } from './components/crypto-asset-list/crypto-asset-list';
 import { SendCryptoAssetLayout } from './send-crypto-asset.layout';

src/app/pages/send-tokens/hooks/use-selected-asset-balance.ts

@@ -23,7 +23,7 @@ export function useSelectedAssetBalance(assetId: string) {
 
     const ticker = selectedAssetBalance
       ? selectedAssetBalance.asset.symbol || getTicker(selectedAssetBalance.asset.name)
-      : null;
+      : '';
 
     const hasDecimals =
       selectedAssetBalance?.asset.decimals && selectedAssetBalance.asset.decimals > 0;