From c3f101dacf9aa8f9b86e8340940f4fc8ac6f64a5 Mon Sep 17 00:00:00 2001
From: thisyahlen <104053934+thisyahlen-deriv@users.noreply.github.com>
Date: Tue, 29 Aug 2023 14:45:03 +0800
Subject: [PATCH] thisyahlen/feat: wallet-list-desktop (#9829)

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

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

* fix(wallets): :green_heart: fix CI build

* feat(api): :sparkles: 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           | 21 ++----------
 .../src/components/WalletList/WalletList.scss | 34 +++++++++++++++++++
 .../src/components/WalletList/WalletList.tsx  | 27 +++++++++++++++
 .../src/components/WalletList/index.ts        |  4 +++
 4 files changed, 68 insertions(+), 18 deletions(-)
 create mode 100644 packages/wallets/src/components/WalletList/WalletList.scss
 create mode 100644 packages/wallets/src/components/WalletList/WalletList.tsx
 create mode 100644 packages/wallets/src/components/WalletList/index.ts

diff --git a/packages/wallets/src/AppContent.tsx b/packages/wallets/src/AppContent.tsx
index b2bb816dd5b9..8e113263805f 100644
--- a/packages/wallets/src/AppContent.tsx
+++ b/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>
     );
 };
diff --git a/packages/wallets/src/components/WalletList/WalletList.scss b/packages/wallets/src/components/WalletList/WalletList.scss
new file mode 100644
index 000000000000..dabf4a3bce39
--- /dev/null
+++ b/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;
+}
diff --git a/packages/wallets/src/components/WalletList/WalletList.tsx b/packages/wallets/src/components/WalletList/WalletList.tsx
new file mode 100644
index 000000000000..233602a37be3
--- /dev/null
+++ b/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;
diff --git a/packages/wallets/src/components/WalletList/index.ts b/packages/wallets/src/components/WalletList/index.ts
new file mode 100644
index 000000000000..8c637c815aa3
--- /dev/null
+++ b/packages/wallets/src/components/WalletList/index.ts
@@ -0,0 +1,4 @@
+import WalletList from './WalletList';
+import './WalletList.scss';
+
+export default WalletList;