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) => )} setIsOpen(!isOpen)} /> 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 = () => ; 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(); - expect(asFragment()).toMatchSnapshot(); - }); - it("should emit actions", () => { const onShowAll = jest.fn(); const onRegister = jest.fn(); const { getByTestId } = render( - , + , ); fireEvent.click(getByTestId("WalletRegistrations__show-all")); fireEvent.click(getByTestId("WalletRegistrations__register")); @@ -62,4 +57,10 @@ describe.only("WalletRegistrations", () => { const { getByTestId } = render(); expect(getByTestId("WalletRegistrations__business")).toHaveTextContent("Test"); }); + + it("should render empty mode", () => { + const { getByTestId, asFragment } = render(); + 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..613796376d 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 (
@@ -86,55 +88,84 @@ export const WalletRegistrations = ({
-
- {delegate && ( -
-
- - - - -
-
-

Delegate

-

- {delegate?.username} -

-
+ {hasNoRegistrations ? ( +
+
+ + + +
- )} +
+

Type Registrations

+

+ You haven't registered more than one type of registration. + + Learn More + +

+
+
+ ) : ( +
+ {delegate && ( +
+
+ + + + +
+
+

Delegate

+

+ {delegate?.username} +

+
+
+ )} - {business && ( -
-
- - - + {business && ( +
+
+ + + +
+
+

Business

+

+ {business?.name} +

+
-
-

Business

-

- {business?.name} -

+ )} + + {iconsList.length && ( +
+
-
- )} + )} +
+ )} - {iconsList.length && ( -
- -
+
+ {!hasNoRegistrations && ( + )} -
-
- 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..4113bf0883 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`] = `
- 0 +
+
+
+ + delegate.svg + +
+
+
+
+
+

+ Type Registrations +

+

+ You haven't registered more than one type of registration. + + Learn More + +

+
-