Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Shayan/feq 2183/implement account switcher #195

Merged
merged 17 commits into from
May 15, 2024
Merged

Shayan/feq 2183/implement account switcher #195

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
ec786ad
feat: implementing AccountSwitcher component [WIP]
shayan-deriv May 9, 2024
edad0cb
chore: updated with latest changes and applied the required changes a…
shayan-deriv May 9, 2024
16196d7
chore: implementing account switcher items [WIP]
shayan-deriv May 10, 2024
e85ec22
Merge branch 'main' of github.com:deriv-com/ui into shayan/feq-2183/i…
shayan-deriv May 10, 2024
03ad151
chore: account-switcher [wip]
shayan-deriv May 10, 2024
6c464fa
Merge branch 'main' of github.com:deriv-com/ui into shayan/feq-2183/i…
shayan-deriv May 10, 2024
5cb4c69
chore: account-switcher account panel is done
shayan-deriv May 13, 2024
94471e2
chore: account-switcher total asset component is added
shayan-deriv May 13, 2024
e21d724
chore: account switcher desktop implementation is finished
shayan-deriv May 13, 2024
2ce612f
chore: accountswitcher is done
shayan-deriv May 13, 2024
d83d8c1
Merge branch 'main' of github.com:deriv-com/ui into shayan/feq-2183/i…
shayan-deriv May 13, 2024
fc33ba7
chore: removed unnecssary styles
shayan-deriv May 13, 2024
0805357
fixed some minor issues for AccountSwitcher component
shayan-deriv May 14, 2024
464c395
chore: added test for account switcher
shayan-deriv May 15, 2024
74dece8
chore: fixed minor issues for AccountSwitcher
shayan-deriv May 15, 2024
8e79d2a
chore: added storybook for accountSwitcher
shayan-deriv May 15, 2024
bd8754e
Merge branch 'main' of github.com:deriv-com/ui into shayan/feq-2183/i…
shayan-deriv May 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
173 changes: 166 additions & 7 deletions playground/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,16 @@ import ReactDOM from "react-dom/client";
import {
LegacyReportsIcon,
LabelPairedHouseBlankMdRegularIcon,
LegacyChevronRight2pxIcon
LegacyChevronRight2pxIcon,
CurrencyUsdIcon,
CurrencyBtcIcon,
CurrencyDemoIcon,
CurrencyUsdtIcon,
CurrencyEthIcon,
} from "@deriv/quill-icons";

import { TAccount } from "../src/components/AppLayout/AccountSwitcher/types";

import {
MenuItem,
useDevice,
Expand All @@ -13,13 +21,73 @@ import {
DerivLogo,
Button,
Wrapper,
AccountSwitcher,
Divider,
} from "../src/main";

const accountsList: TAccount[] = [
{
icon: <CurrencyUsdIcon />,
type: "US Dollar",
loginid: "id1",
balance: "1000",
currency: "USD",
token: "token1",
isVirtual: true,
isEu: true,
isActive: false,
},
{
icon: <CurrencyBtcIcon />,
type: "Bitcoin",
loginid: "id2",
balance: "0.00054",
currency: "BTC",
token: "token2",
isVirtual: false,
isEu: false,
isActive: true,
},
{
icon: <CurrencyDemoIcon />,
type: "US Dollar",
loginid: "id3",
balance: "10000",
currency: "USD",
token: "token3",
isVirtual: false,
isEu: false,
isActive: false,
},
{
icon: <CurrencyUsdtIcon />,
type: "Tether TRC20",
loginid: "id4",
balance: "500",
currency: "USD",
token: "token4",
isVirtual: false,
isEu: true,
isActive: false,
},
{
icon: <CurrencyEthIcon />,
type: "Etherium",
loginid: "id5",
balance: "1000",
currency: "ETH",
token: "token5",
isVirtual: false,
isEu: true,
isActive: false,
},
];
AccountSwitcher.setAppElement(document.getElementById("root") as HTMLElement);
const App = () => {
const { isMobile } = useDevice();
const [is_drawer_open, setDrawerOpen] = React.useState(false);
return (
<div>
<>
{!isMobile ? (
<Header>
<Wrapper
Expand All @@ -45,6 +113,87 @@ const App = () => {
Reports
</MenuItem>
</Wrapper>
<Wrapper variant="right">
<AccountSwitcher
activeAccount={
accountsList.find(
(account) => account.isActive,
) || {
icon: <CurrencyBtcIcon />,
type: "Bitcoin",
loginid: "id2",
balance: "0",
currency: "BTC",
token: "token2",
isVirtual: false,
isEu: false,
isActive: true,
}
}
>
<AccountSwitcher.Tab title="Real">
<AccountSwitcher.AccountsPanel
isOpen
title="EU Accounts"
>
{accountsList
.filter(
(account) =>
!account.isVirtual &&
account.isEu,
)
.map((account) => (
<AccountSwitcher.AccountsItem
key={account.loginid}
account={account}
onSelectAccount={() => {
console.log(
`account with loginid ${account.loginid} clicked`,
);
}}
/>
))}
</AccountSwitcher.AccountsPanel>
<Divider color="#f2f3f4" height="4px" />
<AccountSwitcher.AccountsPanel title="Non-EU">
{accountsList
.filter(
(account) =>
!account.isVirtual &&
!account.isEu,
)
.map((account) => (
<AccountSwitcher.AccountsItem
key={account.loginid}
account={account}
onSelectAccount={() => {}}
/>
))}
</AccountSwitcher.AccountsPanel>
<Divider color="#f2f3f4" height="4px" />
<AccountSwitcher.TotalAsset
title="Total assets"
description="test description text comes here"
value="10,021 USD"
/>
<Divider color="#f2f3f4" height="4px" />
<AccountSwitcher.TradersHubLink>
Looking for CFD?{" "}
</AccountSwitcher.TradersHubLink>
<Divider color="#f2f3f4" height="4px" />

<AccountSwitcher.Footer>
this is a footer
</AccountSwitcher.Footer>
</AccountSwitcher.Tab>
<AccountSwitcher.Tab title="Demo">
test 2
</AccountSwitcher.Tab>
</AccountSwitcher>
<Button size="sm" style={{ margin: "0 10px" }}>
Deposit
</Button>
</Wrapper>
</Header>
) : (
<>
Expand All @@ -62,26 +211,36 @@ const App = () => {
<DerivLogo variant="default" />
</Drawer.Header>
<Drawer.Content>
<div style={{display: "flex", flexDirection: "column"}}>
<div
style={{
display: "flex",
flexDirection: "column",
}}
>
<MenuItem
style={{ gap: "5px", display: "flex", padding: "10px" }}
style={{
gap: "5px",
display: "flex",
padding: "10px",
}}
active
as="button"
leftComponent={
<LabelPairedHouseBlankMdRegularIcon />
}
rightComponent={<LegacyChevronRight2pxIcon iconSize="xs" />}
rightComponent={
<LegacyChevronRight2pxIcon iconSize="xs" />
}
>
Trader's Hub
</MenuItem>

</div>
</Drawer.Content>
<Drawer.Footer>This is a footer</Drawer.Footer>
</Drawer>
</>
)}
</div>
</>
);
};

Expand Down
14 changes: 10 additions & 4 deletions src/components/Accordion/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,13 @@ import "./Accordion.scss";

type AccordionVariants = "underline" | "bordered" | "shadow";

type AccordionProps = ComponentProps<"div"> & {
type AccordionProps = Omit<ComponentProps<"div">, "title"> & {
children: ReactNode;
defaultOpen?: boolean;
isCompact?: boolean;
title: string | JSX.Element;
variant?: AccordionVariants;
headerClassName?: string;
};

const AccordionVariant = {
Expand All @@ -32,6 +33,7 @@ export const Accordion = ({
title,
variant = "underline",
className,
headerClassName,
...props
}: AccordionProps) => {
const [active, setActive] = useState(defaultOpen);
Expand Down Expand Up @@ -59,9 +61,13 @@ export const Accordion = ({
{...props}
>
<button
className={clsx("deriv-accordion__header", {
"deriv-accordion__header--active": active,
})}
className={clsx(
"deriv-accordion__header",
{
"deriv-accordion__header--active": active,
},
headerClassName,
)}
onClick={toggleAccordion}
aria-expanded={active}
type="button"
Expand Down
54 changes: 54 additions & 0 deletions src/components/AppLayout/AccountSwitcher/AccountSwitcher.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
.deriv-account-switcher {

&__button {
position: relative;
display: flex;
align-items: center;
gap: 8px;
padding: 16px 12px;
position: relative;
height: 100%;
&:hover {
background-color: var(--color-grey-1, #f4f4f4);
}
}

&__balance {
font-size: 16px;
display: flex;
font-weight: 700;
gap: 8px;
color: var(--du-text-profit-success, #4bb4b3);
}

&__container {
position: absolute;
top: 55px;
right: 0;
border-radius: 4px;
width: 336px;

&--mobile{
width: 90vw;
position: unset;
min-height: 400px;
height: auto;
border-radius: 4px;
}
}

}

.ReactModal__Overlay {
opacity: 0;
}

.ReactModal__Overlay--after-open{
opacity: 1;
transition: opacity 200ms ease-in-out;
}

.ReactModal__Overlay--before-close{
opacity: 0;
transition: opacity 400ms ease-in-out;
}
Comment on lines +42 to +54
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

these are for modal animation in mobile

51 changes: 51 additions & 0 deletions src/components/AppLayout/AccountSwitcher/AccountsItem/AccountsItem.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
.deriv-account-switcher-item {
display: flex;
align-items: center;
margin-bottom: 5px;
padding: 10px 16px;
border-radius: 4px;
cursor: pointer;
&:hover {
background-color: var(--du-general-active, #d6dadb);
}

&--active {
background-color: var(--du-general-active, #d6dadb);
}

&__icon {
margin-right: 10px;
display: flex;
align-items: center;
}

&__detail {
gap: 10px;
flex:1;
}
&__balance {
font-size: 14px;
&--active {
font-weight: 700;
}
}

&__loginid {
font-size: 10px;
font-weight: 400;
color: var(--du-text-less-prominent, #999999);

&--active {
color : var(--du-text-general, #333333);
}
}

&__currency {
font-size: 14px;
color: var(--du-text-general, #333333);
font-weight: 400;
&--active {
font-weight: 700;
}
}
}
Empty file added src/components/AppLayout/AccountSwitcher/AccountsItem/__test__/AccountsItem.spec.tsx
View file
Open in desktop
Empty file.
Loading
Loading