-
-
-
-
+
);
};
diff --git a/packages/wallets/src/app-content.scss b/packages/wallets/src/app-content.scss
deleted file mode 100644
index 93bd8b22837e..000000000000
--- a/packages/wallets/src/app-content.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.wallets-app-content-icon {
- width: 100px;
- height: 100px;
- background-image: url('./public/ic-appstore-deriv-logo.svg');
- background-size: cover;
-}
diff --git a/packages/wallets/src/components/DesktopWalletsList/DesktopWalletsList.tsx b/packages/wallets/src/components/DesktopWalletsList/DesktopWalletsList.tsx
new file mode 100644
index 000000000000..9c17ce323ec2
--- /dev/null
+++ b/packages/wallets/src/components/DesktopWalletsList/DesktopWalletsList.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { useWalletAccountsList } from '@deriv/api';
+import WalletListCard from '../WalletListCard/WalletListCard';
+
+const DesktopWalletsList: React.FC = () => {
+ const { data } = useWalletAccountsList();
+
+ if (!data.length) return
No wallets found
;
+
+ return (
+
+ {data?.map(account => {
+ return ;
+ })}
+
+ );
+};
+
+export default DesktopWalletsList;
diff --git a/packages/wallets/src/components/DesktopWalletsList/index.ts b/packages/wallets/src/components/DesktopWalletsList/index.ts
new file mode 100644
index 000000000000..9cdccd013dba
--- /dev/null
+++ b/packages/wallets/src/components/DesktopWalletsList/index.ts
@@ -0,0 +1 @@
+export { default as DesktopWalletsList } from './DesktopWalletsList';
diff --git a/packages/wallets/src/components/WalletList/WalletList.scss b/packages/wallets/src/components/WalletList/WalletList.scss
deleted file mode 100644
index 6849375ff6f5..000000000000
--- a/packages/wallets/src/components/WalletList/WalletList.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-.wallets-list-account-list {
- display: flex;
- flex-direction: column;
- gap: 20px;
- justify-content: space-between;
- align-items: center;
- padding-top: 2rem;
-}
-
-.wallets-list-title,
-.wallets-list-currency,
-.wallets-list-balance,
-.wallets-list-account-category {
- font-size: 3rem;
-}
-
-.wallets-list-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%;
-}
-
-.wallets-list-currency {
- font-weight: bold;
-}
-
-.wallets-list-account-category {
- font-style: italic;
-}
diff --git a/packages/wallets/src/components/WalletList/WalletList.tsx b/packages/wallets/src/components/WalletList/WalletList.tsx
deleted file mode 100644
index 019c7b4fcc5d..000000000000
--- a/packages/wallets/src/components/WalletList/WalletList.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import { useWalletAccountsList } from '@deriv/api';
-import './WalletList.scss';
-
-const WalletList: React.FC = () => {
- const { data } = useWalletAccountsList();
-
- if (!data.length) return
No wallets found
;
-
- return (
-
- {data?.map(account => {
- return (
-
-
{account.currency}
-
-
{account.landing_company_name}
-
-
{account.balance}
-
- );
- })}
-
- );
-};
-
-export default WalletList;
diff --git a/packages/wallets/src/components/WalletList/index.ts b/packages/wallets/src/components/WalletList/index.ts
deleted file mode 100644
index 8c637c815aa3..000000000000
--- a/packages/wallets/src/components/WalletList/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import WalletList from './WalletList';
-import './WalletList.scss';
-
-export default WalletList;
diff --git a/packages/wallets/src/components/WalletListCard/WalletListCard.scss b/packages/wallets/src/components/WalletListCard/WalletListCard.scss
new file mode 100644
index 000000000000..58e49881da52
--- /dev/null
+++ b/packages/wallets/src/components/WalletListCard/WalletListCard.scss
@@ -0,0 +1,33 @@
+.wallets-list-header {
+ &__card_container {
+ flex: 1;
+ display: flex;
+ padding: 24px;
+ align-items: flex-start;
+ width: 100%;
+ border-radius: 16px;
+ background: var(--system-light-8-primary-background, #fff);
+ }
+
+ &__content {
+ flex: 1;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 24px;
+ align-self: stretch;
+ }
+
+ &__details-container {
+ display: flex;
+ flex: 1;
+ align-items: center;
+ gap: 24px;
+ align-self: stretch;
+ border-radius: 16px;
+ }
+
+ &__dropdown {
+ cursor: pointer;
+ }
+}
diff --git a/packages/wallets/src/components/WalletListCard/WalletListCard.tsx b/packages/wallets/src/components/WalletListCard/WalletListCard.tsx
new file mode 100644
index 000000000000..2c70de9d6fe9
--- /dev/null
+++ b/packages/wallets/src/components/WalletListCard/WalletListCard.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { useWalletAccountsList } from '@deriv/api';
+import IcDropdown from '../../public/images/ic-dropdown.svg';
+import WalletListCardIBalance from '../WalletListCardIBalance/WalletListCardIBalance';
+import WalletListCardIcon from '../WalletListCardIcon/WalletListCardIcon';
+import WalletListCardIDetails from '../WalletListCardIDetails/WalletListCardIDetails';
+import './WalletListCard.scss';
+
+type TProps = {
+ account: NonNullable
['data']>[number];
+};
+
+const WalletListCard: React.FC = ({ account }) => {
+ return (
+
+ );
+};
+
+export default WalletListCard;
diff --git a/packages/wallets/src/components/WalletListCard/index.ts b/packages/wallets/src/components/WalletListCard/index.ts
new file mode 100644
index 000000000000..d99155c38e78
--- /dev/null
+++ b/packages/wallets/src/components/WalletListCard/index.ts
@@ -0,0 +1 @@
+export { default as WalletListCard } from './WalletListCard';
diff --git a/packages/wallets/src/components/WalletListCardBadge/WalletListCardBadge.scss b/packages/wallets/src/components/WalletListCardBadge/WalletListCardBadge.scss
new file mode 100644
index 000000000000..9330413cf15a
--- /dev/null
+++ b/packages/wallets/src/components/WalletListCardBadge/WalletListCardBadge.scss
@@ -0,0 +1,21 @@
+.wallets-list-card {
+ &__badge {
+ display: flex;
+ padding: 0px 4px;
+ justify-content: center;
+ align-items: center;
+ gap: 4px;
+ border-radius: 2px;
+ border: 1px solid var(--system-light-1-prominent-text, #333);
+ }
+ &__name {
+ color: var(--system-light-1-prominent-text, #333);
+
+ /* desktop/extra small/XS - bold */
+ font-family: 'IBM Plex Sans';
+ font-size: 10px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 14px; /* 140% */
+ }
+}
diff --git a/packages/wallets/src/components/WalletListCardBadge/WalletListCardBadge.tsx b/packages/wallets/src/components/WalletListCardBadge/WalletListCardBadge.tsx
new file mode 100644
index 000000000000..5fbdd4acefc5
--- /dev/null
+++ b/packages/wallets/src/components/WalletListCardBadge/WalletListCardBadge.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import './WalletListCardBadge.scss';
+
+type TProps = {
+ label: string;
+};
+
+const WalletListCardBadge: React.FC = ({ label }) => {
+ return (
+
+
+
{label.toUpperCase()}
+
+
+ {getWalletHeaderButtons(is_demo).map(button => (
+
+ ))}
+
+ );
+};
+
+export default WalletListCardIActions;
diff --git a/packages/wallets/src/components/WalletListCardIActions/index.ts b/packages/wallets/src/components/WalletListCardIActions/index.ts
new file mode 100644
index 000000000000..70a8920d2462
--- /dev/null
+++ b/packages/wallets/src/components/WalletListCardIActions/index.ts
@@ -0,0 +1 @@
+export { default as WalletListCardIActions } from './WalletListCardIActions';
diff --git a/packages/wallets/src/components/WalletListCardIBalance/WalletListCardIBalance.scss b/packages/wallets/src/components/WalletListCardIBalance/WalletListCardIBalance.scss
new file mode 100644
index 000000000000..d217edc52849
--- /dev/null
+++ b/packages/wallets/src/components/WalletListCardIBalance/WalletListCardIBalance.scss
@@ -0,0 +1,31 @@
+.wallets-balance {
+ &__container {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ }
+
+ &__title {
+ color: var(--system-light-3-less-prominent-text, #999);
+ text-align: right;
+
+ /* desktop/small/S - regular */
+ font-family: 'IBM Plex Sans';
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 18px; /* 150% */
+ }
+
+ &__value {
+ color: var(--system-light-1-prominent-text, #333);
+ text-align: right;
+
+ /* desktop/subtitle/Sub 1 - bold */
+ font-family: 'IBM Plex Sans';
+ font-size: 24px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 36px; /* 150% */
+ }
+}
diff --git a/packages/wallets/src/components/WalletListCardIBalance/WalletListCardIBalance.tsx b/packages/wallets/src/components/WalletListCardIBalance/WalletListCardIBalance.tsx
new file mode 100644
index 000000000000..6c7406642a11
--- /dev/null
+++ b/packages/wallets/src/components/WalletListCardIBalance/WalletListCardIBalance.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { useWalletAccountsList } from '@deriv/api';
+import './WalletListCardIBalance.scss';
+
+type TProps = {
+ account: NonNullable['data']>[number];
+};
+
+const WalletListCardIBalance: React.FC = ({ account }) => {
+ return (
+
+
Wallet balance
+
+ {account.display_balance} {account?.currency}
+
+
+
+ {currency_config?.display_code && }
+ {landing_company_name && }
+
+
+
{currency} Wallet
;
+};
+
+export default WalletListCardTitle;
diff --git a/packages/wallets/src/components/WalletListCardTitle/index.ts b/packages/wallets/src/components/WalletListCardTitle/index.ts
new file mode 100644
index 000000000000..1e554588a337
--- /dev/null
+++ b/packages/wallets/src/components/WalletListCardTitle/index.ts
@@ -0,0 +1 @@
+export { default as WalletListCardTitle } from './WalletListCardTitle';
diff --git a/packages/wallets/src/components/index.ts b/packages/wallets/src/components/index.ts
index 4bd3f066e8c3..bd6784a158c3 100644
--- a/packages/wallets/src/components/index.ts
+++ b/packages/wallets/src/components/index.ts
@@ -1,3 +1,10 @@
+export * from './DesktopWalletsList';
+export * from './WalletListCardIBalance';
+export * from './WalletListCardIcon';
+export * from './WalletListCardTitle';
+export * from './WalletListCardBadge';
+export * from './WalletListCardIActions';
+export * from './WalletListCard';
+export * from './WalletListCardIDetails';
export * from './AccountsList';
export * from './WalletsCarousel';
-export * from './WalletList';
diff --git a/packages/wallets/src/public/images/ic-cashier-deposit.svg b/packages/wallets/src/public/images/ic-cashier-deposit.svg
new file mode 100644
index 000000000000..96e631d331cc
--- /dev/null
+++ b/packages/wallets/src/public/images/ic-cashier-deposit.svg
@@ -0,0 +1,10 @@
+
diff --git a/packages/wallets/src/public/images/ic-cashier-statement.svg b/packages/wallets/src/public/images/ic-cashier-statement.svg
new file mode 100644
index 000000000000..1ae020809cb9
--- /dev/null
+++ b/packages/wallets/src/public/images/ic-cashier-statement.svg
@@ -0,0 +1,10 @@
+
diff --git a/packages/wallets/src/public/images/ic-cashier-transfer.svg b/packages/wallets/src/public/images/ic-cashier-transfer.svg
new file mode 100644
index 000000000000..ab3cd5863cf2
--- /dev/null
+++ b/packages/wallets/src/public/images/ic-cashier-transfer.svg
@@ -0,0 +1,10 @@
+
diff --git a/packages/wallets/src/public/images/ic-cashier-withdrawal.svg b/packages/wallets/src/public/images/ic-cashier-withdrawal.svg
new file mode 100644
index 000000000000..e472b92440ea
--- /dev/null
+++ b/packages/wallets/src/public/images/ic-cashier-withdrawal.svg
@@ -0,0 +1,10 @@
+
diff --git a/packages/wallets/src/public/images/ic-dropdown.svg b/packages/wallets/src/public/images/ic-dropdown.svg
new file mode 100644
index 000000000000..7bb0e7fab909
--- /dev/null
+++ b/packages/wallets/src/public/images/ic-dropdown.svg
@@ -0,0 +1,3 @@
+
From 3316701b1b76ea1d9b94058a57b809416306a94a Mon Sep 17 00:00:00 2001
From: Muhammad Hamza <120543468+hamza-deriv@users.noreply.github.com>
Date: Tue, 5 Sep 2023 12:29:42 +0800
Subject: [PATCH 7/8] Hamza/ hotfix: compare account text size difference
(#9950)
* chore: compare account text size difference
* chore: compare account text size difference on mobile
---
.../src/components/compare-account/compare-account.tsx | 8 +++++++-
1 file changed, 7 insertions(+), 1 deletion(-)
diff --git a/packages/appstore/src/components/compare-account/compare-account.tsx b/packages/appstore/src/components/compare-account/compare-account.tsx
index 876e3207d31f..fecaa2e57df7 100644
--- a/packages/appstore/src/components/compare-account/compare-account.tsx
+++ b/packages/appstore/src/components/compare-account/compare-account.tsx
@@ -18,7 +18,13 @@ const CompareAccount = ({ accounts_sub_text, is_desktop }: TCompareAccount) => {
history.push(routes.compare_cfds);
}}
>
-
+