From b90e80eb48d777237918e5e8413bbf7db4ac7618 Mon Sep 17 00:00:00 2001
From: Lucio Rubens <4539235+luciorubeens@users.noreply.github.com>
Date: Mon, 29 Jun 2020 08:19:58 -0300
Subject: [PATCH 1/3] refactor: add empty mode to `WalletRegistrations`

---
 .../WalletRegistrations.stories.tsx           |   2 +
 .../WalletRegistrations.test.tsx              |  13 +-
 .../WalletRegistrations.tsx                   | 115 +++++++++++-------
 .../WalletRegistrations.test.tsx.snap         |  52 ++++++--
 4 files changed, 125 insertions(+), 57 deletions(-)

diff --git a/src/domains/wallet/components/WalletRegistrations/WalletRegistrations.stories.tsx b/src/domains/wallet/components/WalletRegistrations/WalletRegistrations.stories.tsx
index 9f4674c83f..d2108fcbbb 100644
--- a/src/domains/wallet/components/WalletRegistrations/WalletRegistrations.stories.tsx
+++ b/src/domains/wallet/components/WalletRegistrations/WalletRegistrations.stories.tsx
@@ -15,3 +15,5 @@ export const Default = () => (
 		isMultisig
 	/>
 );
+
+export const Empty = () => <WalletRegistrations address="abc" />;
diff --git a/src/domains/wallet/components/WalletRegistrations/WalletRegistrations.test.tsx b/src/domains/wallet/components/WalletRegistrations/WalletRegistrations.test.tsx
index 308c79b9e1..8e04f8e9f2 100644
--- a/src/domains/wallet/components/WalletRegistrations/WalletRegistrations.test.tsx
+++ b/src/domains/wallet/components/WalletRegistrations/WalletRegistrations.test.tsx
@@ -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"));
@@ -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();
+	});
 });
diff --git a/src/domains/wallet/components/WalletRegistrations/WalletRegistrations.tsx b/src/domains/wallet/components/WalletRegistrations/WalletRegistrations.tsx
index 65d93b21d4..a9d9a83a39 100644
--- a/src/domains/wallet/components/WalletRegistrations/WalletRegistrations.tsx
+++ b/src/domains/wallet/components/WalletRegistrations/WalletRegistrations.tsx
@@ -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">
@@ -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="text-theme-primary px-2">
+										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>
diff --git a/src/domains/wallet/components/WalletRegistrations/__snapshots__/WalletRegistrations.test.tsx.snap b/src/domains/wallet/components/WalletRegistrations/__snapshots__/WalletRegistrations.test.tsx.snap
index 711d342274..f1e701b362 100644
--- a/src/domains/wallet/components/WalletRegistrations/__snapshots__/WalletRegistrations.test.tsx.snap
+++ b/src/domains/wallet/components/WalletRegistrations/__snapshots__/WalletRegistrations.test.tsx.snap
@@ -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"
@@ -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="text-theme-primary px-2"
+                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"

From cf218b1279e464175e86d798354922bf09ed38dc Mon Sep 17 00:00:00 2001
From: Lucio Rubens <4539235+luciorubeens@users.noreply.github.com>
Date: Mon, 29 Jun 2020 08:21:15 -0300
Subject: [PATCH 2/3] fix: toggle button in bottom sheet menu

---
 .../components/WalletBottomSheetMenu/WalletBottomSheetMenu.tsx   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/domains/wallet/components/WalletBottomSheetMenu/WalletBottomSheetMenu.tsx b/src/domains/wallet/components/WalletBottomSheetMenu/WalletBottomSheetMenu.tsx
index a32744664c..2db208b5f5 100644
--- a/src/domains/wallet/components/WalletBottomSheetMenu/WalletBottomSheetMenu.tsx
+++ b/src/domains/wallet/components/WalletBottomSheetMenu/WalletBottomSheetMenu.tsx
@@ -88,6 +88,7 @@ export const WalletBottomSheetMenu = ({ walletsData, defaultIsOpen }: Props) =>
 							)}
 							<CollapseToggleButton
 								data-testid="WalletBottomSheetMenu__toggle"
+								isOpen={isOpen}
 								onClick={() => setIsOpen(!isOpen)}
 							/>
 						</div>

From 8cd8df4f52d36f8d6cd5ff7f70bb63f28e6fd59b Mon Sep 17 00:00:00 2001
From: luciorubeens <luciorubeens@users.noreply.github.com>
Date: Mon, 29 Jun 2020 11:30:46 +0000
Subject: [PATCH 3/3] style: resolve style guide violations

---
 .../components/WalletRegistrations/WalletRegistrations.tsx      | 2 +-
 .../__snapshots__/WalletRegistrations.test.tsx.snap             | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/domains/wallet/components/WalletRegistrations/WalletRegistrations.tsx b/src/domains/wallet/components/WalletRegistrations/WalletRegistrations.tsx
index a9d9a83a39..613796376d 100644
--- a/src/domains/wallet/components/WalletRegistrations/WalletRegistrations.tsx
+++ b/src/domains/wallet/components/WalletRegistrations/WalletRegistrations.tsx
@@ -100,7 +100,7 @@ export const WalletRegistrations = ({
 								<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="text-theme-primary px-2">
+									<a href="#" className="px-2 text-theme-primary">
 										Learn More
 									</a>
 								</p>
diff --git a/src/domains/wallet/components/WalletRegistrations/__snapshots__/WalletRegistrations.test.tsx.snap b/src/domains/wallet/components/WalletRegistrations/__snapshots__/WalletRegistrations.test.tsx.snap
index f1e701b362..4113bf0883 100644
--- a/src/domains/wallet/components/WalletRegistrations/__snapshots__/WalletRegistrations.test.tsx.snap
+++ b/src/domains/wallet/components/WalletRegistrations/__snapshots__/WalletRegistrations.test.tsx.snap
@@ -81,7 +81,7 @@ exports[`WalletRegistrations should render empty mode 1`] = `
             >
               You haven't registered more than one type of registration.
               <a
-                class="text-theme-primary px-2"
+                class="px-2 text-theme-primary"
                 href="#"
               >
                 Learn More