Add relays and mints pages

src/features/my-wallet/components/create-wallet.tsx

@@ -10,7 +10,7 @@ import HStack from 'soapbox/components/ui/hstack.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { MintEditor } from 'soapbox/features/my-wallet/components/relay-field/editable-lists.tsx';
+import { MintEditor } from 'soapbox/features/my-wallet/components/editable-lists.tsx';
 import { useApi } from 'soapbox/hooks/useApi.ts';
 import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 import { WalletData, baseWalletSchema } from 'soapbox/schemas/wallet.ts';

src/features/my-wallet/components/editable-lists.tsx

@@ -55,4 +55,5 @@ const RelayEditor: React.FC<IEditableList<string>> = ({ items, setItems }) => {
   return <Streamfield values={items} onChange={setItems} component={RelayField} onAddItem={handleAdd} onRemoveItem={handleRemove} />;
 };
 
-export { RelayEditor, MintEditor };
+export { RelayEditor, MintEditor };
+export type { IEditableList };

src/features/my-wallet/components/wallet-mints.tsx

@@ -0,0 +1,69 @@
+import { useEffect, useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import Button from 'soapbox/components/ui/button.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import { RelayEditor } from 'soapbox/features/my-wallet/components/editable-lists.tsx';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { WalletData, baseWalletSchema } from 'soapbox/schemas/wallet.ts';
+import toast from 'soapbox/toast.tsx';
+
+const messages = defineMessages({
+  title: { id: 'my_wallet.mints', defaultMessage: 'Mints' },
+  error: { id: 'my_wallet.loading_error', defaultMessage: 'An unexpected error occurred while loading your wallet data.' },
+  send: { id: 'common.send', defaultMessage: 'Send' },
+});
+
+const MyWalletMints = () => {
+  const intl = useIntl();
+  const api = useApi();
+
+  const [mints, setMints] = useState<string[]>([]);
+
+  const fetchWallet = async () => {
+    try {
+      const response = await api.get('/api/v1/ditto/cashu/wallet');
+      const data: WalletData = await response.json();
+      if (data) {
+        const normalizedData = baseWalletSchema.parse(data);
+        setMints(normalizedData.mints);
+      }
+
+    } catch (error) {
+      toast.error(intl.formatMessage(messages.error));
+    }
+  };
+
+  const handleClick = async () =>{
+    try {
+      const response = await api.post('/api/v1/ditto/cashu/wallet');
+      const data: WalletData = await response.json();
+      if (data) {
+        const normalizedData = baseWalletSchema.parse(data);
+        setMints(normalizedData.mints);
+      }
+
+    } catch (error) {
+      toast.error('Wallet not found');
+    }
+  };
+
+  useEffect(() => {
+    fetchWallet();
+  }, []);
+
+  return (
+    <Column label={intl.formatMessage(messages.title)} >
+      <Stack space={2}>
+        <RelayEditor items={mints} setItems={setMints} />
+        <Button className='w-full' theme='primary' onClick={handleClick}>
+          {intl.formatMessage(messages.send)}
+        </Button>
+      </Stack>
+
+    </Column>
+  );
+};
+
+export default MyWalletMints;

src/features/my-wallet/components/wallet-relays.tsx

@@ -0,0 +1,69 @@
+import { useEffect, useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import Button from 'soapbox/components/ui/button.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import { RelayEditor } from 'soapbox/features/my-wallet/components/editable-lists.tsx';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { WalletData, baseWalletSchema } from 'soapbox/schemas/wallet.ts';
+import toast from 'soapbox/toast.tsx';
+
+const messages = defineMessages({
+  title: { id: 'my_wallet.relays', defaultMessage: 'Wallet Relays' },
+  error: { id: 'my_wallet.loading_error', defaultMessage: 'An unexpected error occurred while loading your wallet data.' },
+  send: { id: 'common.send', defaultMessage: 'Send' },
+});
+
+const MyWalletRelays = () => {
+  const intl = useIntl();
+  const api = useApi();
+
+  const [relays, setRelays] = useState<string[]>(['teste.com']);
+
+  const fetchWallet = async () => {
+    try {
+      const response = await api.get('/api/v1/ditto/cashu/wallet');
+      const data: WalletData = await response.json();
+      if (data) {
+        const normalizedData = baseWalletSchema.parse(data);
+        setRelays(normalizedData.relays);
+      }
+
+    } catch (error) {
+      toast.error(intl.formatMessage(messages.error));
+    }
+  };
+
+  const handleClick = async () =>{
+    try {
+      const response = await api.post('/api/v1/ditto/cashu/wallet');
+      const data: WalletData = await response.json();
+      if (data) {
+        const normalizedData = baseWalletSchema.parse(data);
+        setRelays(normalizedData.relays);
+      }
+
+    } catch (error) {
+      toast.error('Wallet not found');
+    }
+  };
+
+  useEffect(() => {
+    fetchWallet();
+  }, []);
+
+  return (
+    <Column label={intl.formatMessage(messages.title)} >
+      <Stack space={2}>
+        <RelayEditor items={relays} setItems={setRelays} />
+        <Button className='w-full' theme='primary' onClick={handleClick}>
+          {intl.formatMessage(messages.send)}
+        </Button>
+      </Stack>
+
+    </Column>
+  );
+};
+
+export default MyWalletRelays;

src/features/ui/index.tsx

@@ -74,6 +74,8 @@ import {
   Bookmarks,
   Settings,
   MyWallet,
+  MyWalletRelays,
+  MyWalletMints,
   EditProfile,
   EditEmail,
   EditPassword,
@@ -333,6 +335,8 @@ const SwitchingColumnsArea: React.FC<ISwitchingColumnsArea> = ({ children }) =>
       <WrappedRoute path='/settings/tokens' page={DefaultPage} component={AuthTokenList} content={children} />
       <WrappedRoute path='/settings' page={DefaultPage} component={Settings} content={children} />
       <WrappedRoute path='/my-wallet' page={DefaultPage} component={MyWallet} content={children} />
+      <WrappedRoute path='/my-wallet-relays' page={DefaultPage} component={MyWalletRelays} content={children} />
+      <WrappedRoute path='/my-wallet-mints' page={DefaultPage} component={MyWalletMints} content={children} />
       <WrappedRoute path='/soapbox/config' adminOnly page={DefaultPage} component={SoapboxConfig} content={children} />
 
       <WrappedRoute path='/soapbox/admin' staffOnly page={AdminPage} component={Dashboard} content={children} exact />

src/features/ui/util/async-components.ts

@@ -182,4 +182,6 @@ export const ZapSplitModal = lazy(() => import('soapbox/features/ui/components/m
 export const CaptchaModal = lazy(() => import('soapbox/features/ui/components/modals/captcha-modal/captcha-modal.tsx'));
 export const NostrBunkerLogin = lazy(() => import('soapbox/features/nostr/nostr-bunker-login.tsx'));
 export const MyWallet = lazy(() => import('soapbox/features/my-wallet/index.tsx'));
+export const MyWalletRelays = lazy(() => import('soapbox/features/my-wallet/components/wallet-relays.tsx'));
+export const MyWalletMints = lazy(() => import('soapbox/features/my-wallet/components/wallet-mints.tsx'));
 export const StreakModal = lazy(() => import('soapbox/features/ui/components/modals/streak-modal.tsx'));

src/locales/en.json

@@ -439,6 +439,7 @@
   "column_forbidden.title": "Forbidden",
   "common.cancel": "Cancel",
   "common.save": "Save",
+  "common.send": "Send",
   "compare_history_modal.header": "Edit history",
   "compose.character_counter.title": "Used {chars} out of {maxChars} {maxChars, plural, one {character} other {characters}}",
   "compose.edit_success": "Your post was edited",
@@ -1117,9 +1118,10 @@
   "my_wallet.create_wallet.button": "Create wallet",
   "my_wallet.create_wallet.question": "Do you want create one?",
   "my_wallet.create_wallet.title": "You don't have a wallet",
+  "my_wallet.loading_error": "An unexpected error occurred while loading your wallet data.",
   "my_wallet.management": "Wallet Management",
   "my_wallet.mints": "Mints",
-  "my_wallet.relays": "Relays",
+  "my_wallet.relays": "Wallet Relays",
   "my_wallet.transactions": "Transactions",
   "navbar.login.action": "Log in",
   "navbar.login.email.placeholder": "E-mail address",