refactor: reduce wallet card count on dashboard (#2958)

ArkEcosystem · Oct 9, 2020 · 4d197c5 · 4d197c5
1 parent 4f3f177
commit 4d197c5
Show file tree

Hide file tree

Showing 9 changed files with 38 additions and 668 deletions.
diff --git a/src/app/components/Slider/Slider.tsx b/src/app/components/Slider/Slider.tsx
@@ -15,7 +15,7 @@ type SliderProps = {
 
 const defaultOptions = {
 	// Custom component options
-	slideHeight: 184, // default slideheight (used for wallet cards),
+	slideHeight: 185, // default slideheight (used for wallet cards),
 	// Swiper options
 	slidesPerView: 1,
 	slidesPerColumn: 1,

diff --git a/src/app/components/Slider/__snapshots__/Slider.test.tsx.snap b/src/app/components/Slider/__snapshots__/Slider.test.tsx.snap
@@ -7,15 +7,15 @@ exports[`Slider should render 1`] = `
   >
     <div
       class="swiper-container swiper-container-initialized swiper-container-horizontal"
-      style="height: 184px;"
+      style="height: 185px;"
     >
       <div
         class="h-full swiper-wrapper "
         style="transition: 0ms; transform: translate3d(NaNpx, 0px, 0px);"
       >
         <div
           class="swiper-slide"
-          style="height: 184px;"
+          style="height: 185px;"
         >
           <div>
             Slider item
@@ -34,15 +34,15 @@ exports[`Slider should render empty rows if template not provided 1`] = `
   >
     <div
       class="swiper-container swiper-container-initialized swiper-container-horizontal"
-      style="height: 184px;"
+      style="height: 185px;"
     >
       <div
         class="h-full swiper-wrapper "
         style="transition: 0ms; transform: translate3d(NaNpx, 0px, 0px);"
       >
         <div
           class="swiper-slide"
-          style="height: 184px;"
+          style="height: 185px;"
         >
           <div />
         </div>
@@ -59,75 +59,75 @@ exports[`Slider should render pagination 1`] = `
   >
     <div
       class="swiper-container swiper-container-initialized swiper-container-horizontal"
-      style="height: 248px;"
+      style="height: 249px;"
     >
       <div
         class="h-full swiper-wrapper "
         style="transition: 0ms; transform: translate3d(NaNpx, 0px, 0px);"
       >
         <div
           class="swiper-slide"
-          style="height: 184px;"
+          style="height: 185px;"
         >
           <div />
         </div>
         <div
           class="swiper-slide"
-          style="height: 184px;"
+          style="height: 185px;"
         >
           <div />
         </div>
         <div
           class="swiper-slide"
-          style="height: 184px;"
+          style="height: 185px;"
         >
           <div />
         </div>
         <div
           class="swiper-slide"
-          style="height: 184px;"
+          style="height: 185px;"
         >
           <div />
         </div>
         <div
           class="swiper-slide"
-          style="height: 184px;"
+          style="height: 185px;"
         >
           <div />
         </div>
         <div
           class="swiper-slide"
-          style="height: 184px;"
+          style="height: 185px;"
         >
           <div />
         </div>
         <div
           class="swiper-slide"
-          style="height: 184px;"
+          style="height: 185px;"
         >
           <div />
         </div>
         <div
           class="swiper-slide"
-          style="height: 184px;"
+          style="height: 185px;"
         >
           <div />
         </div>
         <div
           class="swiper-slide"
-          style="height: 184px;"
+          style="height: 185px;"
         >
           <div />
         </div>
         <div
           class="swiper-slide"
-          style="height: 184px;"
+          style="height: 185px;"
         >
           <div />
         </div>
         <div
           class="swiper-slide"
-          style="height: 184px;"
+          style="height: 185px;"
         >
           <div />
         </div>

diff --git a/src/domains/dashboard/components/Wallets/Wallets.test.tsx b/src/domains/dashboard/components/Wallets/Wallets.test.tsx
@@ -59,7 +59,7 @@ describe("Wallets", () => {
 		expect(asFragment()).toMatchSnapshot();
 	});
 
-	it("should render one grid row when less than four wallets", () => {
+	it("should render one grid row when less than three wallets", () => {
 		const { asFragment, getAllByTestId } = renderWithRouter(
 			<Route path="/profiles/:profileId/dashboard">
 				<Wallets wallets={new Array(1).fill(wallets[0])} filterProperties={filterProperties} />
@@ -70,11 +70,11 @@ describe("Wallets", () => {
 			},
 		);
 
-		expect(getAllByTestId("WalletCard__blank")).toHaveLength(3);
+		expect(getAllByTestId("WalletCard__blank")).toHaveLength(2);
 		expect(asFragment()).toMatchSnapshot();
 	});
 
-	it("should render two grid rows when more than four wallets", () => {
+	it("should render two grid rows when more than three wallets", () => {
 		const { asFragment, getAllByTestId } = renderWithRouter(
 			<Route path="/profiles/:profileId/dashboard">
 				<Wallets wallets={new Array(5).fill(wallets[0])} filterProperties={filterProperties} />
@@ -85,7 +85,7 @@ describe("Wallets", () => {
 			},
 		);
 
-		expect(getAllByTestId("WalletCard__blank")).toHaveLength(3);
+		expect(getAllByTestId("WalletCard__blank")).toHaveLength(1);
 		expect(asFragment()).toMatchSnapshot();
 	});
 

diff --git a/src/domains/dashboard/components/Wallets/Wallets.tsx b/src/domains/dashboard/components/Wallets/Wallets.tsx
@@ -74,9 +74,9 @@ export const Wallets = ({
 
 	const walletSliderOptions = {
 		slideHeight: 185,
-		slidesPerView: 4,
+		slidesPerView: 3,
 		slidesPerColumn: 2,
-		slidesPerGroup: 4,
+		slidesPerGroup: 3,
 		spaceBetween: 20,
 	};