fix(tap): fix Open Channel capacity field formatting

src/components/designer/lightning/actions/CreateInvoiceModal.spec.tsx

@@ -182,14 +182,14 @@ describe('CreateInvoiceModal', () => {
     it('should update amount when an asset is selected', async () => {
       const { findByText, getByLabelText, changeSelect } = await renderComponent();
       expect(await findByText('Node')).toBeInTheDocument();
-      expect(getByLabelText('Amount')).toHaveValue('50,000');
+      expect(getByLabelText('Amount')).toHaveValue('1,000,000');
       expect(await findByText('Asset to Receive')).toBeInTheDocument();
       // select the asset
       changeSelect('Asset to Receive', 'test asset');
       expect(getByLabelText('Amount')).toHaveValue('200'); // half of the remote balance
       // select sats
       changeSelect('Asset to Receive', 'Bitcoin (sats)');
-      expect(getByLabelText('Amount')).toHaveValue('50,000');
+      expect(getByLabelText('Amount')).toHaveValue('1,000,000');
     });
 
     it('should create an asset invoice successfully', async () => {

src/components/designer/lightning/actions/CreateInvoiceModal.tsx

@@ -116,7 +116,7 @@ const CreateInvoiceModal: React.FC<Props> = ({ network }) => {
 
   const suggestAmt = useCallback(
     (assetId: string) => {
-      if (assetId === 'sats') return 50_000;
+      if (assetId === 'sats') return 1_000_000;
 
       const asset = assets.find(a => a.id === assetId) as LightningNodeChannelAsset;
       const amount = Math.floor(parseInt(asset.remoteBalance) / 2).toString();
@@ -141,7 +141,7 @@ const CreateInvoiceModal: React.FC<Props> = ({ network }) => {
         layout="vertical"
         requiredMark={false}
         colon={false}
-        initialValues={{ node: nodeName, amount: 50000, assetId: 'sats' }}
+        initialValues={{ node: nodeName, amount: 1_000_000, assetId: 'sats' }}
         onFinish={createAsync.execute}
       >
         <Row gutter={16}>

src/components/designer/lightning/actions/OpenChannelModal.spec.tsx

@@ -352,20 +352,28 @@ describe('OpenChannelModal', () => {
       expect(tapServiceMock.listBalances).toHaveBeenCalledTimes(3);
     });
 
+    it('should format the capacity with commas and decimals', async () => {
+      const { findByText, getByLabelText } = await renderComponent('bob', 'carol');
+      expect(await findByText('Source')).toBeInTheDocument();
+      expect(getByLabelText('Capacity')).toHaveValue('10,000,000');
+      fireEvent.change(getByLabelText('Capacity'), { target: { value: '1000.1234' } });
+      expect(getByLabelText('Capacity')).toHaveValue('1,000.1234');
+    });
+
     it('should update capacity when an asset is selected', async () => {
       const { findByText, getByLabelText, changeSelect } = await renderComponent(
         'bob',
         'carol',
       );
       expect(await findByText('Source')).toBeInTheDocument();
-      expect(getByLabelText('Capacity')).toHaveValue('10000000');
+      expect(getByLabelText('Capacity')).toHaveValue('10,000,000');
       expect(await findByText('Asset')).toBeInTheDocument();
       // select the asset
       changeSelect('Asset', 'test asset');
       expect(getByLabelText('Capacity')).toHaveValue('1,000'); // half of the remote balance
       // select sats
       changeSelect('Asset', 'Bitcoin (sats)');
-      expect(getByLabelText('Capacity')).toHaveValue('10000000');
+      expect(getByLabelText('Capacity')).toHaveValue('10,000,000');
     });
 
     it('should open an asset channel and deposit funds', async () => {
@@ -430,7 +438,7 @@ describe('OpenChannelModal', () => {
       fireEvent.click(getByText('Open Channel'));
 
       expect(
-        await findByText('Capacity cannot exceed the asset balance of 1000'),
+        await findByText('Capacity cannot exceed the asset balance of 1,000'),
       ).toBeInTheDocument();
       expect(tapServiceMock.fundChannel).not.toHaveBeenCalled();
     });

src/components/designer/lightning/actions/OpenChannelModal.tsx

@@ -88,7 +88,7 @@ const OpenChannelModal: React.FC<Props> = ({ network }) => {
         await fundChannel({
           from: mapToTapd(fromNode),
           to: toNode,
-          amount: Number(values.capacity) * 10 ** asset.decimals,
+          amount: Math.floor(Number(values.capacity) * 10 ** asset.decimals),
           assetId,
         });
       }
@@ -184,7 +184,17 @@ const OpenChannelModal: React.FC<Props> = ({ network }) => {
         label={l('capacityLabel')}
         rules={[{ required: true, message: l('cmps.forms.required') }]}
       >
-        <InputNumber<number> style={{ width: '100%' }} />
+        <InputNumber<number>
+          formatter={v =>
+            `${v}`
+              // add commas between every 3 digits
+              .replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+              // remove commas after the decimal point
+              .replace(/\..*/, match => match.replace(/,/g, ''))
+          }
+          parser={v => parseFloat(`${v}`.replace(/(undefined|,*)/g, ''))}
+          style={{ width: '100%' }}
+        />
       </Form.Item>
       {showDeposit && (
         <Form.Item name="autoFund" valuePropName="checked">

src/store/models/tap.ts

@@ -356,11 +356,12 @@ const tapModel: TapModel = {
       { from, to, assetId, amount },
       { injections, getStoreState, getStoreActions },
     ) => {
-      const assetBalance = getStoreState().tap.nodes[from.name]?.balances?.find(
-        b => b.id === assetId,
-      )?.balance;
+      const fromNode = getStoreState().tap.nodes[from.name];
+      const assetBalance = fromNode?.balances?.find(b => b.id === assetId)?.balance;
       if (assetBalance && parseInt(assetBalance) < amount) {
-        throw new Error(`Capacity cannot exceed the asset balance of ${assetBalance}`);
+        const decimals = fromNode?.assets?.find(a => a.id === assetId)?.decimals || 0;
+        const amtLabel = formatDecimals(parseInt(assetBalance), decimals);
+        throw new Error(`Capacity cannot exceed the asset balance of ${amtLabel}`);
       }
       // get the pubkey of the destination node
       const toNode = getStoreState().lightning.nodes[to.name];