feat: split out gateway payments modal

.gitignore

@@ -59,3 +59,5 @@ yarn-error.log*
 fm_*
 misc/test/data
 misc/test/tls.key
+
+todo.md

apps/router/src/gateway-ui/components/walletCard/BalancesSummary.tsx

@@ -0,0 +1,89 @@
+import React, { useMemo } from 'react';
+import { Box, Flex, Text, Square } from '@chakra-ui/react';
+import { formatValue, useTranslation } from '@fedimint/utils';
+import { MSats } from '@fedimint/types';
+import { PieChart } from 'react-minimal-pie-chart';
+import { useGatewayContext } from '../../../hooks';
+import { useBalanceCalculations } from '../../hooks/useBalanceCalculations';
+
+export const BalancesSummary = React.memo(
+  function BalancesSummary(): JSX.Element {
+    const { t } = useTranslation();
+    const { state } = useGatewayContext();
+    const balanceAmounts = useBalanceCalculations(state.balances ?? undefined);
+
+    const balanceData = useMemo(
+      () => [
+        {
+          title: 'Ecash',
+          value: balanceAmounts.ecash,
+          formattedValue: formatValue(
+            balanceAmounts.ecash as MSats,
+            state.unit,
+            true
+          ),
+          color: '#FF6384',
+        },
+        {
+          title: 'Lightning',
+          value: balanceAmounts.lightning,
+          formattedValue: formatValue(
+            balanceAmounts.lightning as MSats,
+            state.unit,
+            true
+          ),
+          color: '#36A2EB',
+        },
+        {
+          title: 'Onchain',
+          value: balanceAmounts.onchain,
+          formattedValue: formatValue(
+            balanceAmounts.onchain as MSats,
+            state.unit,
+            true
+          ),
+          color: '#FFCE56',
+        },
+      ],
+      [balanceAmounts, state.unit]
+    );
+
+    return (
+      <Box p={6} bg='white' borderRadius='lg' borderWidth='1px' mb={4}>
+        <Text fontSize='xl' mb={4}>
+          {t('wallet.balances-summary')}
+        </Text>
+        <Flex justify='space-between' align='center'>
+          <Flex direction='column' flex={1}>
+            {balanceData.map((item) => (
+              <Flex key={item.title} mb={2} align='center'>
+                <Square size='3' bg={item.color} mr={2} />
+                <Text color='gray.600' flex='1'>
+                  {item.title}:
+                </Text>
+                <Text fontWeight='medium'>{item.formattedValue}</Text>
+              </Flex>
+            ))}
+            <Flex borderTopWidth={1} mt={3} pt={2}>
+              <Text fontWeight='semibold' flex='1'>
+                Total:
+              </Text>
+              <Text fontWeight='semibold'>
+                {formatValue(balanceAmounts.total as MSats, state.unit, true)}
+              </Text>
+            </Flex>
+          </Flex>
+          <Box w='150px' h='150px' ml={8}>
+            <PieChart
+              data={balanceData}
+              lineWidth={40}
+              paddingAngle={2}
+              startAngle={-90}
+              animate
+            />
+          </Box>
+        </Flex>
+      </Box>
+    );
+  }
+);

apps/router/src/gateway-ui/components/walletCard/EcashCard.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { Box, Button, Flex, Text } from '@chakra-ui/react';
+import { useTranslation } from '@fedimint/utils';
+import { FaArrowDown, FaArrowUp } from 'react-icons/fa';
+import { useGatewayContext } from '../../../hooks';
+import {
+  GATEWAY_APP_ACTION_TYPE,
+  WalletModalAction,
+  WalletModalType,
+} from '../../../types/gateway';
+
+export const EcashCard = React.memo(function EcashCard(): JSX.Element {
+  const { t } = useTranslation();
+  const { state, dispatch } = useGatewayContext();
+
+  const handleModalOpen = (action: WalletModalAction) => {
+    const federations = state.gatewayInfo?.federations;
+    if (!federations?.length) return;
+
+    dispatch({
+      type: GATEWAY_APP_ACTION_TYPE.SET_WALLET_MODAL_STATE,
+      payload: {
+        action,
+        type: WalletModalType.Ecash,
+        selectedFederation: federations[0],
+        showSelector: true,
+        isOpen: true,
+      },
+    });
+  };
+
+  return (
+    <Box p={6} bg='white' borderRadius='lg' borderWidth='1px' mb={4}>
+      <Flex justify='space-between' align='center' mb={4}>
+        <Text fontSize='xl'>{t('wallet.ecash')}</Text>
+        <Flex gap={2}>
+          <Button
+            leftIcon={<FaArrowDown />}
+            colorScheme='blue'
+            variant='solid'
+            onClick={() => handleModalOpen(WalletModalAction.Receive)}
+          >
+            {t('wallet.receive')}
+          </Button>
+          <Button
+            leftIcon={<FaArrowUp />}
+            variant='outline'
+            onClick={() => handleModalOpen(WalletModalAction.Send)}
+          >
+            {t('wallet.send')}
+          </Button>
+        </Flex>
+      </Flex>
+      <Text color='gray.600'>
+        Send and receive federated ecash between federation members
+      </Text>
+    </Box>
+  );
+});

apps/router/src/gateway-ui/components/walletCard/LightningCard.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { Box, Button, Flex, Text } from '@chakra-ui/react';
+import { useTranslation } from '@fedimint/utils';
+import { FaArrowDown, FaArrowUp } from 'react-icons/fa';
+import { useGatewayContext } from '../../../hooks';
+import {
+  GATEWAY_APP_ACTION_TYPE,
+  WalletModalAction,
+  WalletModalType,
+} from '../../../types/gateway';
+
+export const LightningCard = React.memo(function LightningCard(): JSX.Element {
+  const { t } = useTranslation();
+  const { state, dispatch } = useGatewayContext();
+
+  const handleModalOpen = (action: WalletModalAction) => {
+    const federations = state.gatewayInfo?.federations;
+    if (!federations?.length) return;
+
+    dispatch({
+      type: GATEWAY_APP_ACTION_TYPE.SET_WALLET_MODAL_STATE,
+      payload: {
+        action,
+        type: WalletModalType.Lightning,
+        selectedFederation: federations[0],
+        showSelector: true,
+        isOpen: true,
+      },
+    });
+  };
+
+  return (
+    <Box p={6} bg='white' borderRadius='lg' borderWidth='1px' mb={4}>
+      <Flex justify='space-between' align='center' mb={4}>
+        <Text fontSize='xl'>{t('wallet.lightning-payments')}</Text>
+        <Flex gap={2}>
+          <Button
+            leftIcon={<FaArrowDown />}
+            colorScheme='blue'
+            variant='solid'
+            onClick={() => handleModalOpen(WalletModalAction.Receive)}
+          >
+            {t('wallet.receive')}
+          </Button>
+          <Button
+            leftIcon={<FaArrowUp />}
+            variant='outline'
+            onClick={() => handleModalOpen(WalletModalAction.Send)}
+          >
+            {t('wallet.send')}
+          </Button>
+        </Flex>
+      </Flex>
+      <Text color='gray.600'>
+        Send and receive Lightning Network payments through the federation
+      </Text>
+    </Box>
+  );
+});

apps/router/src/gateway-ui/components/walletCard/OnchainCard.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { Box, Button, Flex, Text } from '@chakra-ui/react';
+import { useTranslation } from '@fedimint/utils';
+import { FaArrowDown, FaArrowUp } from 'react-icons/fa';
+import { useGatewayContext } from '../../../hooks';
+import {
+  GATEWAY_APP_ACTION_TYPE,
+  WalletModalAction,
+  WalletModalType,
+} from '../../../types/gateway';
+
+export const OnchainCard = React.memo(function OnchainCard(): JSX.Element {
+  const { t } = useTranslation();
+  const { state, dispatch } = useGatewayContext();
+
+  const handleModalOpen = (action: WalletModalAction) => {
+    const federations = state.gatewayInfo?.federations;
+    if (!federations?.length) return;
+
+    dispatch({
+      type: GATEWAY_APP_ACTION_TYPE.SET_WALLET_MODAL_STATE,
+      payload: {
+        action,
+        type: WalletModalType.Onchain,
+        selectedFederation: federations[0],
+        showSelector: true,
+        isOpen: true,
+      },
+    });
+  };
+
+  return (
+    <Box p={6} bg='white' borderRadius='lg' borderWidth='1px'>
+      <Text fontSize='xl' mb={6}>
+        Onchain
+      </Text>
+
+      {/* Federation Balances Section */}
+      <Box mb={6}>
+        <Flex justify='space-between' align='center' mb={4}>
+          <Text fontSize='md' fontWeight='medium'>
+            {t('wallet.federation-balances')}
+          </Text>
+          <Flex gap={2}>
+            <Button
+              leftIcon={<FaArrowDown />}
+              colorScheme='blue'
+              variant='solid'
+              onClick={() => handleModalOpen(WalletModalAction.Receive)}
+            >
+              {t('wallet.peg-in')}
+            </Button>
+            <Button
+              leftIcon={<FaArrowUp />}
+              variant='outline'
+              onClick={() => handleModalOpen(WalletModalAction.Send)}
+            >
+              {t('wallet.peg-out')}
+            </Button>
+          </Flex>
+        </Flex>
+        <Text color='gray.600'>
+          Deposit and withdraw bitcoin to/from the federation
+        </Text>
+      </Box>
+
+      {/* Node's Onchain Wallet Section */}
+      <Box>
+        <Flex justify='space-between' align='center' mb={4}>
+          <Text fontSize='md' fontWeight='medium'>
+            {t('wallet.node-onchain-wallet')}
+          </Text>
+          <Flex gap={2}>
+            <Button
+              leftIcon={<FaArrowDown />}
+              colorScheme='blue'
+              variant='solid'
+            >
+              {t('wallet.receive')}
+            </Button>
+            <Button leftIcon={<FaArrowUp />} variant='outline'>
+              {t('wallet.send')}
+            </Button>
+          </Flex>
+        </Flex>
+        <Text color='gray.600'>
+          Manage bitcoin in the gateway&apos;s onchain wallet
+        </Text>
+      </Box>
+    </Box>
+  );
+});