Merge pull request #132 from IgboPharaoh/refactor/gateway-admin

Refactor/gateway admin
fedimint · Aug 1, 2023 · 406f394 · 406f394
2 parents 5af47e7 + ebcab98
commit 406f394
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 50 deletions.
diff --git a/.../gateway-ui/src/components/BalanceTab.tsx → ...gateway-ui/src/components/BalanceCard.tsx b/.../gateway-ui/src/components/BalanceTab.tsx → ...gateway-ui/src/components/BalanceCard.tsx
@@ -3,12 +3,12 @@ import { Box, Flex, Text, useTheme } from '@chakra-ui/react';
 import { useTranslation } from '@fedimint/utils';
 import { GatewayCard } from '.';
 
-interface BalanceTabProps {
+interface BalanceCardProps {
   balance_msat: number;
 }
 
-export const BalanceTab = React.memo(function BalanceTab(
-  props: BalanceTabProps
+export const BalanceCard = React.memo(function BalanceCard(
+  props: BalanceCardProps
 ): JSX.Element {
   const { t } = useTranslation();
   const { balance_msat } = props;
@@ -24,15 +24,15 @@ export const BalanceTab = React.memo(function BalanceTab(
             color={theme.colors.gray[900]}
             fontFamily={theme.fonts.body}
           >
-            {t('balance-tab.tab_header')}
+            {t('balance-card.card_header')}
           </Text>
           <Text
             fontSize='sm'
             color={theme.colors.gray[600]}
             fontFamily={theme.fonts.body}
             pt='4px'
           >
-            {t('balance-tab.sentence')}
+            {t('balance-card.sentence')}
           </Text>
         </Box>
         <Flex>

diff --git a/.../gateway-ui/src/components/DepositTab.tsx → ...gateway-ui/src/components/DepositCard.tsx b/.../gateway-ui/src/components/DepositTab.tsx → ...gateway-ui/src/components/DepositCard.tsx
@@ -15,13 +15,13 @@ import { GatewayCard } from './GatewayCard';
 import { ReactComponent as CopyIcon } from '../assets/svgs/copy.svg';
 import { ReactComponent as LinkIcon } from '../assets/svgs/linkIcon.svg';
 
-export interface DepositTabProps {
+export interface DepositCardProps {
   federationId: string;
 }
 
-export const DepositTab = React.memo(function DepositTab({
+export const DepositCard = React.memo(function DepositCard({
   federationId,
-}: DepositTabProps): JSX.Element {
+}: DepositCardProps): JSX.Element {
   const { t } = useTranslation();
   const { gateway } = React.useContext(ApiContext);
   const [address, setAddress] = useState<string>('');
@@ -52,14 +52,14 @@ export const DepositTab = React.memo(function DepositTab({
           color={theme.colors.gray[900]}
           fontFamily={theme.fonts.body}
         >
-          {t('deposit-tab.tab_header')}
+          {t('deposit-card.card_header')}
         </Text>
         <Text
           fontSize='md'
           color={theme.colors.gray[600]}
           fontFamily={theme.fonts.body}
         >
-          {t('deposit-tab.sentence-one')}
+          {t('deposit-card.sentence-one')}
         </Text>
         <Stack spacing='24px'>
           <Flex gap='4px' alignItems='flex-start'>
@@ -128,7 +128,7 @@ export const DepositTab = React.memo(function DepositTab({
             rel='noreferrer'
             w='fit-content'
           >
-            {t('deposit-tab.mempool_deposit_link_text')}
+            {t('deposit-card.mempool_deposit_link_text')}
           </Link>
           <LinkIcon color={theme.colors.blue[600]} />
         </Flex>

diff --git a/apps/gateway-ui/src/components/FederationCard.tsx b/apps/gateway-ui/src/components/FederationCard.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 import { Flex, Stack, useTheme, Heading } from '@chakra-ui/react';
 import { Federation } from '../types';
-import { InfoTab, DepositTab, BalanceTab } from '.';
-import { WithdrawTab } from './WithdrawTab';
+import { InfoCard, DepositCard, BalanceCard, WithdrawCard } from '.';
 
 interface FederationCardProps {
   federation: Federation;
@@ -25,12 +24,12 @@ export const FederationCard = (props: FederationCardProps): JSX.Element => {
           Human Action Coalition
         </Heading>
         <Flex gap='24px' flexDir={{ base: 'column', sm: 'column', md: 'row' }}>
-          <BalanceTab balance_msat={balance_msat} />
-          <InfoTab nodeId={federation_id} nodeLink={federation_id} />
+          <BalanceCard balance_msat={balance_msat} />
+          <InfoCard nodeId={federation_id} nodeLink={federation_id} />
         </Flex>
         <Flex gap='24px' flexDir={{ base: 'column', sm: 'column', md: 'row' }}>
-          <DepositTab federationId={federation_id} />
-          <WithdrawTab federationId={federation_id} />
+          <DepositCard federationId={federation_id} />
+          <WithdrawCard federationId={federation_id} />
         </Flex>
       </Stack>
     </>

diff --git a/apps/gateway-ui/src/components/InfoTab.tsx → apps/gateway-ui/src/components/InfoCard.tsx b/apps/gateway-ui/src/components/InfoTab.tsx → apps/gateway-ui/src/components/InfoCard.tsx
@@ -12,13 +12,13 @@ import { GatewayCard } from '.';
 import { ReactComponent as CopyIcon } from '../assets/svgs/copy.svg';
 import { ReactComponent as LinkIcon } from '../assets/svgs/linkIcon.svg';
 
-interface InfoTabProps {
+interface InfoCardProps {
   nodeId: string;
   nodeLink: string;
 }
 
-export const InfoTab = React.memo(function InfoTab(
-  props: InfoTabProps
+export const InfoCard = React.memo(function InfoCard(
+  props: InfoCardProps
 ): JSX.Element {
   const { t } = useTranslation();
   const { nodeId, nodeLink } = props;
@@ -33,7 +33,7 @@ export const InfoTab = React.memo(function InfoTab(
         color={theme.colors.gray[900]}
         fontFamily={theme.fonts.body}
       >
-        {t('info-tab.tab_header')}
+        {t('info-card.card_header')}
       </Text>
       <Flex gap='8px'>
         <Text
@@ -85,7 +85,7 @@ export const InfoTab = React.memo(function InfoTab(
           rel='noreferrer'
           w='fit-content'
         >
-          {t('info-tab.amboss_node_link_text')}
+          {t('info-card.amboss_node_link_text')}
         </Link>
         <LinkIcon color={theme.colors.blue[600]} />
       </Flex>

diff --git a/...gateway-ui/src/components/WithdrawTab.tsx → ...ateway-ui/src/components/WithdrawCard.tsx b/...gateway-ui/src/components/WithdrawTab.tsx → ...ateway-ui/src/components/WithdrawCard.tsx
@@ -25,7 +25,7 @@ interface WithdrawObject {
   address: string;
 }
 
-export interface WithdrawTabProps {
+export interface WithdrawCardProps {
   federationId: string;
 }
 
@@ -36,9 +36,9 @@ const truncateStringFormat = (arg: string): string => {
   )}`;
 };
 
-export const WithdrawTab = React.memo(function WithdrawTab({
+export const WithdrawCard = React.memo(function WithdrawCard({
   federationId,
-}: WithdrawTabProps): JSX.Element {
+}: WithdrawCardProps): JSX.Element {
   const { t } = useTranslation();
   const theme = useTheme();
   const { gateway } = React.useContext(ApiContext);
@@ -69,11 +69,11 @@ export const WithdrawTab = React.memo(function WithdrawTab({
 
   const createWithdrawal = () => {
     if (!amount && amount === 0 && typeof amount === 'number') {
-      setError(`${t('withdraw-tab.error-amount')}`);
+      setError(`${t('withdraw-card.error-amount')}`);
       return;
     }
     if (!address) {
-      setError(`${t('withdraw-tab.error-address')}`);
+      setError(`${t('withdraw-card.error-address')}`);
       return;
     }
     // TODO: address validation
@@ -86,13 +86,13 @@ export const WithdrawTab = React.memo(function WithdrawTab({
       .requestWithdrawal(federationId, amount, address)
       .then((txId) => {
         // FIXME: show this in a better way
-        alert(`${t('withdraw-tab.your-transaction')} ${txId}`);
+        alert(`${t('withdraw-card.your-transaction')} ${txId}`);
         setWithdrawObject({ ...withdrawObject, amount: 0, address: '' });
         setModalState(false);
       })
       .catch(({ error }) => {
         console.error(error);
-        setError(`${t('withdraw-tab.error-request')}`);
+        setError(`${t('withdraw-card.error-request')}`);
       });
   };
 
@@ -106,14 +106,14 @@ export const WithdrawTab = React.memo(function WithdrawTab({
             color={theme.colors.gray[900]}
             fontFamily={theme.fonts.body}
           >
-            {t('withdraw-tab.tab-header')}
+            {t('withdraw-card.card-header')}
           </Text>
           <Text
             fontSize='md'
             color={theme.colors.gray[600]}
             fontFamily={theme.fonts.body}
           >
-            {t('withdraw-tab.total_bitcoin')} {withdrawObject.amount / 100000}{' '}
+            {t('withdraw-card.total_bitcoin')} {withdrawObject.amount / 100000}{' '}
             {t('common.btc')}
           </Text>
           <Text
@@ -122,7 +122,7 @@ export const WithdrawTab = React.memo(function WithdrawTab({
             color={theme.colors.blue[600]}
             fontFamily={theme.fonts.body}
           >
-            {t('withdraw-tab.withdraw_all')}
+            {t('withdraw-card.withdraw_all')}
           </Text>
         </Stack>
         <Stack spacing='20px'>
@@ -144,7 +144,7 @@ export const WithdrawTab = React.memo(function WithdrawTab({
               boxShadow={theme.shadows.xs}
               borderRadius='8px'
               w='100%'
-              placeholder={t('withdraw-tab.amount-placeholder')}
+              placeholder={t('withdraw-card.amount-placeholder')}
               // FIXME: this is a hack
               value={withdrawObject.amount.toString()}
               onChange={(e) => handleInputChange(e)}
@@ -169,7 +169,7 @@ export const WithdrawTab = React.memo(function WithdrawTab({
               boxShadow={theme.shadows.xs}
               borderRadius='8px'
               w='100%'
-              placeholder={t('withdraw-tab.address-placeholder')}
+              placeholder={t('withdraw-card.address-placeholder')}
               value={withdrawObject.address}
               onChange={(e) => handleInputChange(e)}
               name='address'
@@ -179,7 +179,7 @@ export const WithdrawTab = React.memo(function WithdrawTab({
           {error && (
             <Box>
               <Text textAlign='center' color='red' fontSize='14'>
-                {t('withdraw-tab.error')}: {error}
+                {t('withdraw-card.error')}: {error}
               </Text>
             </Box>
           )}
@@ -191,7 +191,7 @@ export const WithdrawTab = React.memo(function WithdrawTab({
             fontSize='sm'
             onClick={createWithdrawal}
           >
-            {t('withdraw-tab.tab-header')}
+            {t('withdraw-card.card-header')}
           </Button>
         </Stack>
       </GatewayCard>
@@ -237,7 +237,7 @@ const ConfirmWithdrawModal = (
         <Modal onClose={onModalClickCallback} isOpen={open} isCentered>
           <ModalOverlay />
           <ModalContent>
-            <ModalHeader>{t('withdraw-tab.confirm-withdraw')}</ModalHeader>
+            <ModalHeader>{t('withdraw-card.confirm-withdraw')}</ModalHeader>
             <ModalCloseButton />
             <ModalBody>
               <VStack alignItems='flex-start' justifyContent='space-between'>
@@ -247,7 +247,7 @@ const ConfirmWithdrawModal = (
                     {txRequest.amount} {t('common.sats')}
                   </Text>
                 </Box>
-                <Text>{t('withdraw-tab.to')}</Text>
+                <Text>{t('withdraw-card.to')}</Text>
                 <Box>
                   <Text>{t('common.address')}:</Text>
                   <Text>{truncateStringFormat(txRequest.address)}</Text>

diff --git a/apps/gateway-ui/src/components/index.tsx b/apps/gateway-ui/src/components/index.tsx
@@ -1,10 +1,10 @@
 export { GatewayCard } from './GatewayCard';
-export { WithdrawTab } from './WithdrawTab';
+export { WithdrawCard } from './WithdrawCard';
 export { FederationCard } from './FederationCard';
 export { Header } from './Header';
 export { Input } from './Input';
 export { ConnectFederation } from './ConnectFederation';
 export { TabHeader } from './TabHeader';
-export { InfoTab } from './InfoTab';
-export { DepositTab } from './DepositTab';
-export { BalanceTab } from './BalanceTab';
+export { InfoCard } from './InfoCard';
+export { DepositCard } from './DepositCard';
+export { BalanceCard } from './BalanceCard';
diff --git a/apps/gateway-ui/src/languages/en.json b/apps/gateway-ui/src/languages/en.json
@@ -22,8 +22,8 @@
     "information-bar-text": "The number of federations you can connect to is limited to one. Connecting to multiple federations will be supported soon.",
     "connect-federation-button": "Connect Federation"
   },
-  "deposit-tab": {
-    "tab_header": "Deposit Bitcoin",
+  "deposit-card": {
+    "card_header": "Deposit Bitcoin",
     "header": "Bitcoin Deposit to Federation",
     "sentence-one": "Deposit to the address or scan the QR code",
     "bitcoin-deposit": "Bitcoin Deposit",
@@ -47,16 +47,16 @@
     "archived": "Archived",
     "all": "All"
   },
-  "info-tab": {
-    "tab_header": "Node ID",
+  "info-card": {
+    "card_header": "Node ID",
     "amboss_node_link_text": "View on amboss.space"
   },
-  "balance-tab": {
-    "tab_header": "eCash balance",
+  "balance-card": {
+    "card_header": "eCash balance",
     "sentence": "Denominated in Sats"
   },
-  "withdraw-tab": {
-    "tab-header": "Withdraw Bitcoin",
+  "withdraw-card": {
+    "card-header": "Withdraw Bitcoin",
     "total_bitcoin": "Total Bitcoin:",
     "withdraw_all": "Withdraw all",
     "error": "Error",