thisyahlen/feat: wallet-list-desktop (binary-com#9829)

* fix(cashier): 🐛 fix unable to access CFD-DerivX transfer

* feat(wallets): 📦 add `@deriv/wallets` workspace

* fix(wallets): 💚 fix CI build

* feat(api): ✨ share a single instance of `QueryClient` in `APIProvider`

* Merge branch 'master' into farzin/next

* chore: add wallet header list data for desktop

---------

Co-authored-by: Farzin Mirzaie <farzin@deriv.com>

packages/wallets/src/AppContent.tsx

@@ -1,25 +1,10 @@
 import React from 'react';
-import { useFetch } from '@deriv/api';
+import WalletList from './components/WalletList';
 
 const AppContent: React.FC = () => {
-    const { data } = useFetch('time', { options: { refetchInterval: 1000 } });
-
     return (
-        <div
-            style={{
-                display: 'flex',
-                flex: 1,
-                justifyContent: 'center',
-                alignItems: 'center',
-                flexDirection: 'column',
-                height: '100%',
-                fontSize: 30,
-            }}
-        >
-            <h1>Server Time</h1>
-            <br />
-            <br />
-            {data?.time && <h1>{new Date(data?.time * 1000).toLocaleString()}</h1>}
+        <div>
+            <WalletList />
         </div>
     );
 };

packages/wallets/src/components/WalletList/WalletList.scss

@@ -0,0 +1,34 @@
+.account-list {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: 2rem;
+}
+
+h1,
+.currency,
+.balance,
+.account-category {
+    font-size: 3rem;
+}
+
+.account-item {
+    border: 1px solid #ccc;
+    padding: 10px;
+    border-radius: 5px;
+    background-color: #f5f5f5;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    display: flex;
+    justify-content: space-between;
+    width: 90%;
+}
+
+.currency {
+    font-weight: bold;
+}
+
+.account-category {
+    font-style: italic;
+}

packages/wallets/src/components/WalletList/WalletList.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { useWalletAccountsList } from '@deriv/api';
+import './WalletList.scss';
+
+const WalletList: React.FC = () => {
+    const { data } = useWalletAccountsList();
+
+    if (!data.length) return <h1>No wallets found</h1>;
+
+    return (
+        <div className='account-list'>
+            {data?.map(account => {
+                return (
+                    <div className='account-item' key={account.loginid}>
+                        <div className='currency'>{account.currency}</div>
+                        <br />
+                        <div className='account-category'>{account.landing_company_name}</div>
+                        <br />
+                        <div className='balance'>{account.balance}</div>
+                    </div>
+                );
+            })}
+        </div>
+    );
+};
+
+export default WalletList;

packages/wallets/src/components/WalletList/index.ts

@@ -0,0 +1,4 @@
+import WalletList from './WalletList';
+import './WalletList.scss';
+
+export default WalletList;