Skip to content
This repository has been archived by the owner on Mar 23, 2023. It is now read-only.

refactor: add empty mode to WalletRegistrations #2285

Merged
merged 4 commits into from
Jun 29, 2020
Merged

refactor: add empty mode to WalletRegistrations #2285

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b90e80e
refactor: add empty mode to `WalletRegistrations`
luciorubeens Jun 29, 2020
cf218b1
fix: toggle button in bottom sheet menu
luciorubeens Jun 29, 2020
9253229
Merge branch '3.0-react' into refactor/wallet-no-registrations
luciorubeens Jun 29, 2020
8cd8df4
style: resolve style guide violations
luciorubeens Jun 29, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions src/domains/wallet/components/WalletBottomSheetMenu/WalletBottomSheetMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@ export const WalletBottomSheetMenu = ({ walletsData, defaultIsOpen }: Props) =>
)}
<CollapseToggleButton
data-testid="WalletBottomSheetMenu__toggle"
isOpen={isOpen}
onClick={() => setIsOpen(!isOpen)}
/>
</div>
Expand Down
2 changes: 2 additions & 0 deletions src/domains/wallet/components/WalletRegistrations/WalletRegistrations.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,3 +15,5 @@ export const Default = () => (
isMultisig
/>
);

export const Empty = () => <WalletRegistrations address="abc" />;
13 changes: 7 additions & 6 deletions src/domains/wallet/components/WalletRegistrations/WalletRegistrations.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,12 @@ import React from "react";
import { WalletRegistrations } from "./WalletRegistrations";

describe.only("WalletRegistrations", () => {
it("should render blank", () => {
const { asFragment } = render(<WalletRegistrations address="abc" />);
expect(asFragment()).toMatchSnapshot();
});

it("should emit actions", () => {
const onShowAll = jest.fn();
const onRegister = jest.fn();

const { getByTestId } = render(
<WalletRegistrations address="abc" onShowAll={onShowAll} onRegister={onRegister} />,
<WalletRegistrations address="abc" isMultisig onShowAll={onShowAll} onRegister={onRegister} />,
);
fireEvent.click(getByTestId("WalletRegistrations__show-all"));
fireEvent.click(getByTestId("WalletRegistrations__register"));
Expand Down Expand Up @@ -62,4 +57,10 @@ describe.only("WalletRegistrations", () => {
const { getByTestId } = render(<WalletRegistrations address="abc" business={{ name: "Test" }} />);
expect(getByTestId("WalletRegistrations__business")).toHaveTextContent("Test");
});

it("should render empty mode", () => {
const { getByTestId, asFragment } = render(<WalletRegistrations address="abc" />);
expect(getByTestId("WalletRegistrations__empty")).toBeTruthy();
expect(asFragment()).toMatchSnapshot();
});
});
115 changes: 73 additions & 42 deletions src/domains/wallet/components/WalletRegistrations/WalletRegistrations.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,8 @@ export const WalletRegistrations = ({
isMultisig && "Multisig",
].filter(Boolean);

const hasNoRegistrations = !delegate && !business && iconsList.length === 0;

return (
<section data-testid="WalletRegistrations" className="px-12 py-8">
<div className="flex items-center justify-between">
Expand All @@ -86,55 +88,84 @@ export const WalletRegistrations = ({

<Collapse isOpen={isOpen}>
<div className="flex items-center justify-between px-1 py-4">
<div className="flex items-center divide-x-1 divide-theme-neutral-light">
{delegate && (
<div className="flex items-center pr-8 space-x-4">
<div className="flex items-center -space-x-2">
<Circle size="large" className="border-theme-neutral-900 text-theme-neutral-900">
<Icon name="Delegate" className="text-xl" />
</Circle>
<Avatar size="large" address={address} />
</div>
<div>
<p className="text-sm font-semibold text-theme-neutral">Delegate</p>
<p data-testid="WalletRegistrations__delegate" className="font-semibold">
{delegate?.username}
</p>
</div>
{hasNoRegistrations ? (
<div data-testid="WalletRegistrations__empty" className="flex items-center pr-8 space-x-4">
<div className="flex items-center -space-x-2">
<Circle size="large" className="text-theme-neutral-light">
<Icon name="Delegate" className="text-xl" />
</Circle>
<Circle size="large" className="bg-theme-background" />
</div>
)}
<div className="space-y-1">
<p className="text-sm font-semibold text-theme-neutral">Type Registrations</p>
<p className="font-semibold text-theme-neutral-900">
You haven&apos;t registered more than one type of registration.
<a href="#" className="px-2 text-theme-primary">
Learn More
</a>
</p>
</div>
</div>
) : (
<div className="flex items-center divide-x-1 divide-theme-neutral-light">
{delegate && (
<div className="flex items-center pr-8 space-x-4">
<div className="flex items-center -space-x-2">
<Circle
size="large"
className="border-theme-neutral-900 text-theme-neutral-900"
>
<Icon name="Delegate" className="text-xl" />
</Circle>
<Avatar size="large" address={address} />
</div>
<div>
<p className="text-sm font-semibold text-theme-neutral">Delegate</p>
<p data-testid="WalletRegistrations__delegate" className="font-semibold">
{delegate?.username}
</p>
</div>
</div>
)}

{business && (
<div className="flex items-center px-8 space-x-4">
<div className="flex items-center">
<Circle size="large" className="border-theme-neutral-900 text-theme-neutral-900">
<Icon name="Business" className="text-xl" />
</Circle>
{business && (
<div className="flex items-center px-8 space-x-4">
<div className="flex items-center">
<Circle
size="large"
className="border-theme-neutral-900 text-theme-neutral-900"
>
<Icon name="Business" className="text-xl" />
</Circle>
</div>
<div>
<p className="text-sm font-semibold text-theme-neutral">Business</p>
<p data-testid="WalletRegistrations__business" className="font-semibold">
{business?.name}
</p>
</div>
</div>
<div>
<p className="text-sm font-semibold text-theme-neutral">Business</p>
<p data-testid="WalletRegistrations__business" className="font-semibold">
{business?.name}
</p>
)}

{iconsList.length && (
<div className="px-8">
<IconList icons={iconsList} limit={2} />
</div>
</div>
)}
)}
</div>
)}

{iconsList.length && (
<div className="px-8">
<IconList icons={iconsList} limit={2} />
</div>
<div className="space-x-2">
{!hasNoRegistrations && (
<button
data-testid="WalletRegistrations__show-all"
onClick={onShowAll}
className="px-5 py-3 font-semibold leading-tight rounded text-theme-primary focus:outline-none focus:shadow-outline"
>
Show all
</button>
)}
</div>

<div className="space-x-2">
<button
data-testid="WalletRegistrations__show-all"
onClick={onShowAll}
className="px-5 py-3 font-semibold leading-tight rounded text-theme-primary focus:outline-none focus:shadow-outline"
>
Show all
</button>
<Button data-testid="WalletRegistrations__register" onClick={onRegister} variant="plain">
Register
</Button>
Expand Down
52 changes: 43 additions & 9 deletions ...ins/wallet/components/WalletRegistrations/__snapshots__/WalletRegistrations.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`WalletRegistrations should render blank 1`] = `
exports[`WalletRegistrations should render empty mode 1`] = `
<DocumentFragment>
<section
class="px-12 py-8"
Expand Down Expand Up @@ -45,19 +45,53 @@ exports[`WalletRegistrations should render blank 1`] = `
class="flex items-center justify-between px-1 py-4"
>
<div
class="flex items-center divide-x-1 divide-theme-neutral-light"
class="flex items-center pr-8 space-x-4"
data-testid="WalletRegistrations__empty"
>
0
<div
class="flex items-center -space-x-2"
>
<div
class="sc-AxirZ cZokSJ text-theme-neutral-light"
>
<div
class="sc-AxiKw dzBdqj text-xl"
height="1em"
width="1em"
>
<svg>
delegate.svg
</svg>
</div>
</div>
<div
class="sc-AxirZ cZokSJ bg-theme-background"
/>
</div>
<div
class="space-y-1"
>
<p
class="text-sm font-semibold text-theme-neutral"
>
Type Registrations
</p>
<p
class="font-semibold text-theme-neutral-900"
>
You haven't registered more than one type of registration.
<a
class="px-2 text-theme-primary"
href="#"
>
Learn More
</a>
</p>
</div>
</div>
<div
class="space-x-2"
>
<button
class="px-5 py-3 font-semibold leading-tight rounded text-theme-primary focus:outline-none focus:shadow-outline"
data-testid="WalletRegistrations__show-all"
>
Show all
</button>
<button
class="sc-AxjAm ddJBbC"
color="primary"
Expand Down