forked from binary-com/deriv-app
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
thisyahlen/chore: update ui for wallet header (binary-com#9870)
* chore: update ui for wallet header * chore: add more styles * chore: add more styles v2 * fix: lint errors * chore: split components * chore: split v2 * chore: split v3 * chore: add svg for header button actions * fix: format balance and css styles * fix: landing company name uppercase * fix: comments * chore: split moreeeee * fix: rename css * fix: lint styles * fix: styles * fix: comments * fix: comments v3 * fix: comments v4 * fix: comments v5
- Loading branch information
1 parent
b4e89e1
commit c4c70de
Showing
36 changed files
with
447 additions
and
87 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
.wallets-app { | ||
display: flex; | ||
flex-direction: column; | ||
align-items: center; | ||
gap: 24px; | ||
padding: 40px; | ||
width: 100%; | ||
height: 100%; | ||
align-self: stretch; | ||
background: var(--system-light-7-secondary-background, #f2f3f4); | ||
|
||
&__content { | ||
width: 100%; | ||
display: flex; | ||
flex-direction: column; | ||
align-items: flex-start; | ||
gap: 24px; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
19 changes: 19 additions & 0 deletions
19
packages/wallets/src/components/DesktopWalletsList/DesktopWalletsList.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 <h1>No wallets found</h1>; | ||
|
||
return ( | ||
<React.Fragment> | ||
{data?.map(account => { | ||
return <WalletListCard account={account} key={account.loginid} />; | ||
})} | ||
</React.Fragment> | ||
); | ||
}; | ||
|
||
export default DesktopWalletsList; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { default as DesktopWalletsList } from './DesktopWalletsList'; |
34 changes: 0 additions & 34 deletions
34
packages/wallets/src/components/WalletList/WalletList.scss
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
33 changes: 33 additions & 0 deletions
33
packages/wallets/src/components/WalletListCard/WalletListCard.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} | ||
} |
30 changes: 30 additions & 0 deletions
30
packages/wallets/src/components/WalletListCard/WalletListCard.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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<ReturnType<typeof useWalletAccountsList>['data']>[number]; | ||
}; | ||
|
||
const WalletListCard: React.FC<TProps> = ({ account }) => { | ||
return ( | ||
<div className='wallets-list-header__card_container'> | ||
<div className='wallets-list-header__content'> | ||
<div className='wallets-list-header__details-container'> | ||
<WalletListCardIcon /> | ||
<WalletListCardIDetails account={account} /> | ||
</div> | ||
<WalletListCardIBalance account={account} /> | ||
<div className='wallets-list-header__dropdown'> | ||
<IcDropdown /> | ||
</div> | ||
</div> | ||
</div> | ||
); | ||
}; | ||
|
||
export default WalletListCard; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { default as WalletListCard } from './WalletListCard'; |
21 changes: 21 additions & 0 deletions
21
packages/wallets/src/components/WalletListCardBadge/WalletListCardBadge.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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% */ | ||
} | ||
} |
18 changes: 18 additions & 0 deletions
18
packages/wallets/src/components/WalletListCardBadge/WalletListCardBadge.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
import React from 'react'; | ||
import './WalletListCardBadge.scss'; | ||
|
||
type TProps = { | ||
label: string; | ||
}; | ||
|
||
const WalletListCardBadge: React.FC<TProps> = ({ label }) => { | ||
return ( | ||
<div className='wallets-list-card__badge'> | ||
<div className='wallets-list-card__name'> | ||
<p>{label.toUpperCase()}</p> | ||
</div> | ||
</div> | ||
); | ||
}; | ||
|
||
export default WalletListCardBadge; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { default as WalletListCardBadge } from './WalletListCardBadge'; |
18 changes: 18 additions & 0 deletions
18
packages/wallets/src/components/WalletListCardIActions/WalletListCardIActions.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
.wallets-header { | ||
&__actions { | ||
display: flex; | ||
align-items: center; | ||
gap: 8px; | ||
} | ||
|
||
&__button { | ||
display: flex; | ||
height: 32px; | ||
padding: 6px 16px; | ||
justify-content: center; | ||
align-items: center; | ||
gap: 8px; | ||
border-radius: 64px; | ||
border: 1px solid var(--system-light-3-less-prominent-text, #999); | ||
} | ||
} |
59 changes: 59 additions & 0 deletions
59
packages/wallets/src/components/WalletListCardIActions/WalletListCardIActions.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,59 @@ | ||
import React from 'react'; | ||
import { useWalletAccountsList } from '@deriv/api'; | ||
import IcCashierAdd from '../../public/images/ic-cashier-deposit.svg'; | ||
import IcCashierStatement from '../../public/images/ic-cashier-statement.svg'; | ||
import IcCashierTransfer from '../../public/images/ic-cashier-transfer.svg'; | ||
import IcCashierWithdrawal from '../../public/images/ic-cashier-withdrawal.svg'; | ||
import './WalletListCardIActions.scss'; | ||
|
||
const getWalletHeaderButtons = (is_demo: boolean, handleAction?: () => void) => { | ||
const buttons = [ | ||
{ | ||
name: 'Deposit', | ||
text: is_demo ? 'Reset balance' : 'Deposit', | ||
icon: <IcCashierAdd />, | ||
}, | ||
{ | ||
name: 'Withdraw', | ||
text: 'Withdraw', | ||
icon: <IcCashierWithdrawal />, | ||
}, | ||
{ | ||
name: 'Transfer', | ||
text: 'Transfer', | ||
icon: <IcCashierTransfer />, | ||
}, | ||
{ | ||
name: 'Transactions', | ||
text: 'Transactions', | ||
icon: <IcCashierStatement />, | ||
}, | ||
]; | ||
|
||
// Filter out the "Withdraw" button when is_demo is true | ||
const filteredButtons = is_demo ? buttons.filter(button => button.name !== 'Withdraw') : buttons; | ||
|
||
return filteredButtons.map(button => ({ | ||
...button, | ||
action: () => handleAction?.(), | ||
})); | ||
}; | ||
|
||
type TProps = { | ||
account: NonNullable<ReturnType<typeof useWalletAccountsList>['data']>[number]; | ||
}; | ||
|
||
const WalletListCardIActions: React.FC<TProps> = ({ account }) => { | ||
const is_demo = account.is_virtual; | ||
return ( | ||
<div className='wallets-header__actions'> | ||
{getWalletHeaderButtons(is_demo).map(button => ( | ||
<button key={button.name} className='wallets-header__button' onClick={button.action}> | ||
{button.icon} | ||
</button> | ||
))} | ||
</div> | ||
); | ||
}; | ||
|
||
export default WalletListCardIActions; |
1 change: 1 addition & 0 deletions
1
packages/wallets/src/components/WalletListCardIActions/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { default as WalletListCardIActions } from './WalletListCardIActions'; |
31 changes: 31 additions & 0 deletions
31
packages/wallets/src/components/WalletListCardIBalance/WalletListCardIBalance.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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% */ | ||
} | ||
} |
Oops, something went wrong.