refactor: pass BigNumber to TotalAmountBox (#2607)

ArkEcosystem · Aug 5, 2020 · ba21cac · ba21cac
1 parent db47dee
commit ba21cac
Show file tree

Hide file tree

Showing 16 changed files with 69 additions and 70 deletions.
diff --git a/src/domains/transaction/components/TotalAmountBox/TotalAmountBox.stories.tsx b/src/domains/transaction/components/TotalAmountBox/TotalAmountBox.stories.tsx
@@ -1,3 +1,4 @@
+import { BigNumber } from "@arkecosystem/platform-sdk-support";
 import React from "react";
 
 import { TotalAmountBox } from "./TotalAmountBox";
@@ -6,6 +7,6 @@ export default { title: "Domains / Transaction / Components / TotalAmount" };
 
 export const Default = () => (
 	<div className="mt-15">
-		<TotalAmountBox transactionAmount="1.00" transactionFee="0.09660435" />
+		<TotalAmountBox amount={BigNumber.make(1e8)} fee={BigNumber.make(1e8)} />
 	</div>
 );
diff --git a/src/domains/transaction/components/TotalAmountBox/TotalAmountBox.test.tsx b/src/domains/transaction/components/TotalAmountBox/TotalAmountBox.test.tsx
@@ -1,3 +1,4 @@
+import { BigNumber } from "@arkecosystem/platform-sdk-support";
 import React from "react";
 import { render } from "testing-library";
 
@@ -6,12 +7,12 @@ import { TotalAmountBox } from "./TotalAmountBox";
 describe("IpfsDetailModal", () => {
 	it("should not render if not open", () => {
 		const { asFragment, getByTestId } = render(
-			<TotalAmountBox transactionAmount="1.00" transactionFee="0.09660435" />,
+			<TotalAmountBox amount={BigNumber.make(1e8)} fee={BigNumber.make(1e8)} />,
 		);
 
 		expect(asFragment()).toMatchSnapshot();
-		expect(getByTestId("total-amount-box__transaction-amount")).toHaveTextContent("1.00 ARK");
-		expect(getByTestId("total-amount-box__transaction-fee")).toHaveTextContent("0.09660435 ARK");
-		expect(getByTestId("total-amount-box__total")).toHaveTextContent("1.09660435 ARK");
+		expect(getByTestId("total-amount-box__transaction-amount")).toHaveTextContent("1.00000000 ARK");
+		expect(getByTestId("total-amount-box__transaction-fee")).toHaveTextContent("1.00000000 ARK");
+		expect(getByTestId("total-amount-box__total")).toHaveTextContent("2.00000000 ARK");
 	});
 });
diff --git a/src/domains/transaction/components/TotalAmountBox/TotalAmountBox.tsx b/src/domains/transaction/components/TotalAmountBox/TotalAmountBox.tsx
@@ -3,49 +3,40 @@ import { Icon } from "app/components/Icon";
 import React from "react";
 
 type Props = {
-	transactionAmount: string;
-	transactionFee: string;
-	magnitude?: number;
+	amount: BigNumber;
+	fee: BigNumber;
 };
 
-export const TotalAmountBox = ({ transactionAmount, transactionFee, magnitude }: Props) => {
-	const totalAmount = BigNumber.make(transactionAmount).plus(transactionFee).decimalPlaces(magnitude).toFixed();
-
-	return (
-		<div className="border rounded-lg border-theme-neutral-300">
-			<div className="relative p-3">
-				<div className="grid grid-cols-2 divide-x divide-gray-400">
-					<div className="flex flex-col justify-center px-6 py-5">
-						<span className="text-sm text-theme-neutral">Transaction(s) Amount</span>
-						<span className="mt-2 font-semibold" data-testid="total-amount-box__transaction-amount">
-							{transactionAmount} ARK
-						</span>
-					</div>
-
-					<div className="flex flex-col justify-center px-6 py-5 text-right">
-						<span className="text-sm text-theme-neutral">Transaction fee</span>
-						<span className="mt-2 text-lg font-semibold" data-testid="total-amount-box__transaction-fee">
-							{transactionFee} ARK
-						</span>
-					</div>
+export const TotalAmountBox = ({ amount, fee }: Props) => (
+	<div className="border rounded-lg border-theme-neutral-300">
+		<div className="relative p-3">
+			<div className="grid grid-cols-2 divide-x divide-gray-400">
+				<div className="flex flex-col justify-center px-6 py-5">
+					<span className="text-sm text-theme-neutral">Transaction(s) Amount</span>
+					<span className="mt-2 font-semibold" data-testid="total-amount-box__transaction-amount">
+						{amount.toHuman(8)} ARK
+					</span>
 				</div>
 
-				<div className="absolute top-0 bottom-0 left-0 right-0 flex items-center justify-center h-full text-center">
-					<div className="px-1 py-2 bg-white">
-						<Icon name="Plus" width={15} height={15} />
-					</div>
+				<div className="flex flex-col justify-center px-6 py-5 text-right">
+					<span className="text-sm text-theme-neutral">Transaction fee</span>
+					<span className="mt-2 text-lg font-semibold" data-testid="total-amount-box__transaction-fee">
+						{fee.toHuman(8)} ARK
+					</span>
 				</div>
 			</div>
-			<div className="flex flex-col items-center border-t rounded-b-lg border-theme-neutral-300 justfiy-center py-7 bg-theme-neutral-contrast">
-				<span className="text-sm text-theme-neutral">Total Amount</span>
-				<span className="text-2xl font-bold" data-testid="total-amount-box__total">
-					{totalAmount} ARK
-				</span>
+
+			<div className="absolute top-0 bottom-0 left-0 right-0 flex items-center justify-center h-full text-center">
+				<div className="px-1 py-2 bg-white">
+					<Icon name="Plus" width={15} height={15} />
+				</div>
 			</div>
 		</div>
-	);
-};
-
-TotalAmountBox.defaultProps = {
-	magnitude: 8,
-};
+		<div className="flex flex-col items-center border-t rounded-b-lg border-theme-neutral-300 justfiy-center py-7 bg-theme-neutral-contrast">
+			<span className="text-sm text-theme-neutral">Total Amount</span>
+			<span className="text-2xl font-bold" data-testid="total-amount-box__total">
+				{amount.plus(fee).toHuman(8)} ARK
+			</span>
+		</div>
+	</div>
+);
diff --git a/src/domains/transaction/components/TotalAmountBox/__snapshots__/TotalAmountBox.test.tsx.snap b/src/domains/transaction/components/TotalAmountBox/__snapshots__/TotalAmountBox.test.tsx.snap
@@ -23,7 +23,7 @@ exports[`IpfsDetailModal should not render if not open 1`] = `
             class="mt-2 font-semibold"
             data-testid="total-amount-box__transaction-amount"
           >
-            1.00 ARK
+            1.00000000 ARK
           </span>
         </div>
         <div
@@ -38,7 +38,7 @@ exports[`IpfsDetailModal should not render if not open 1`] = `
             class="mt-2 text-lg font-semibold"
             data-testid="total-amount-box__transaction-fee"
           >
-            0.09660435 ARK
+            1.00000000 ARK
           </span>
         </div>
       </div>
@@ -72,7 +72,7 @@ exports[`IpfsDetailModal should not render if not open 1`] = `
         class="text-2xl font-bold"
         data-testid="total-amount-box__total"
       >
-        1.09660435 ARK
+        2.00000000 ARK
       </span>
     </div>
   </div>

diff --git a/src/domains/transaction/pages/Registration/Registration.tsx b/src/domains/transaction/pages/Registration/Registration.tsx
@@ -1,4 +1,5 @@
 import { NetworkData } from "@arkecosystem/platform-sdk-profiles";
+import { BigNumber } from "@arkecosystem/platform-sdk-support";
 import { Address } from "app/components/Address";
 import { Avatar } from "app/components/Avatar";
 import { Button } from "app/components/Button";
@@ -298,7 +299,7 @@ const ThirdStep = () => {
 				</TransactionDetail>
 
 				<div>
-					<TotalAmountBox transactionAmount="0.00" transactionFee="0.09660435" />
+					<TotalAmountBox amount={BigNumber.ZERO} fee={BigNumber.ZERO} />
 				</div>
 			</div>
 		</div>

diff --git a/src/domains/transaction/pages/Registration/__snapshots__/Registration.test.tsx.snap b/src/domains/transaction/pages/Registration/__snapshots__/Registration.test.tsx.snap
@@ -1796,7 +1796,7 @@ exports[`Registration should render 3rd step 1`] = `
                                   class="mt-2 font-semibold"
                                   data-testid="total-amount-box__transaction-amount"
                                 >
-                                  0.00 ARK
+                                  0.00000000 ARK
                                 </span>
                               </div>
                               <div
@@ -1811,7 +1811,7 @@ exports[`Registration should render 3rd step 1`] = `
                                   class="mt-2 text-lg font-semibold"
                                   data-testid="total-amount-box__transaction-fee"
                                 >
-                                  0.09660435 ARK
+                                  0.00000000 ARK
                                 </span>
                               </div>
                             </div>
@@ -1845,7 +1845,7 @@ exports[`Registration should render 3rd step 1`] = `
                               class="text-2xl font-bold"
                               data-testid="total-amount-box__total"
                             >
-                              0.09660435 ARK
+                              0.00000000 ARK
                             </span>
                           </div>
                         </div>

diff --git a/src/domains/transaction/pages/ResignRegistration/ResignRegistration.tsx b/src/domains/transaction/pages/ResignRegistration/ResignRegistration.tsx
@@ -1,3 +1,4 @@
+import { BigNumber } from "@arkecosystem/platform-sdk-support";
 import { Address } from "app/components/Address";
 import { Alert } from "app/components/Alert";
 import { Avatar } from "app/components/Avatar";
@@ -110,7 +111,7 @@ const SecondStep = () => {
 				<TransactionDetail label={t("TRANSACTION.DELEGATE_NAME")}>Delegate 3</TransactionDetail>
 
 				<div className="my-4">
-					<TotalAmountBox transactionAmount="0.00" transactionFee="0.09660435" />
+					<TotalAmountBox amount={BigNumber.ZERO} fee={BigNumber.ZERO} />
 				</div>
 			</div>
 		</div>

diff --git a/...mains/transaction/pages/ResignRegistration/__snapshots__/ResignRegistration.test.tsx.snap b/...mains/transaction/pages/ResignRegistration/__snapshots__/ResignRegistration.test.tsx.snap
@@ -989,7 +989,7 @@ exports[`ResignRegistration should render 2nd step 1`] = `
                                   class="mt-2 font-semibold"
                                   data-testid="total-amount-box__transaction-amount"
                                 >
-                                  0.00 ARK
+                                  0.00000000 ARK
                                 </span>
                               </div>
                               <div
@@ -1004,7 +1004,7 @@ exports[`ResignRegistration should render 2nd step 1`] = `
                                   class="mt-2 text-lg font-semibold"
                                   data-testid="total-amount-box__transaction-fee"
                                 >
-                                  0.09660435 ARK
+                                  0.00000000 ARK
                                 </span>
                               </div>
                             </div>
@@ -1038,7 +1038,7 @@ exports[`ResignRegistration should render 2nd step 1`] = `
                               class="text-2xl font-bold"
                               data-testid="total-amount-box__total"
                             >
-                              0.09660435 ARK
+                              0.00000000 ARK
                             </span>
                           </div>
                         </div>

diff --git a/src/domains/transaction/pages/SendIPFSTransaction/SendIPFSTransaction.tsx b/src/domains/transaction/pages/SendIPFSTransaction/SendIPFSTransaction.tsx
@@ -1,4 +1,5 @@
 import { NetworkData } from "@arkecosystem/platform-sdk-profiles";
+import { BigNumber } from "@arkecosystem/platform-sdk-support";
 import { Address } from "app/components/Address";
 import { Avatar } from "app/components/Avatar";
 import { Button } from "app/components/Button";
@@ -107,7 +108,7 @@ export const SecondStep = () => {
 					<span className="font-semibold">QmceNpwJqQm7vXUivbQeeQYeGr1ivT1VDRPaWK9Pf</span>
 				</TransactionDetail>
 
-				<TotalAmountBox transactionAmount="1.00" transactionFee="0.09660435" />
+				<TotalAmountBox amount={BigNumber.ZERO} fee={BigNumber.ZERO} />
 			</div>
 		</section>
 	);

diff --git a/...ins/transaction/pages/SendIPFSTransaction/__snapshots__/SendIPFSTransaction.test.tsx.snap b/...ins/transaction/pages/SendIPFSTransaction/__snapshots__/SendIPFSTransaction.test.tsx.snap
@@ -1072,7 +1072,7 @@ exports[`SendIPFSTransaction should render 2nd step 1`] = `
                 class="mt-2 font-semibold"
                 data-testid="total-amount-box__transaction-amount"
               >
-                1.00 ARK
+                0.00000000 ARK
               </span>
             </div>
             <div
@@ -1087,7 +1087,7 @@ exports[`SendIPFSTransaction should render 2nd step 1`] = `
                 class="mt-2 text-lg font-semibold"
                 data-testid="total-amount-box__transaction-fee"
               >
-                0.09660435 ARK
+                0.00000000 ARK
               </span>
             </div>
           </div>
@@ -1121,7 +1121,7 @@ exports[`SendIPFSTransaction should render 2nd step 1`] = `
             class="text-2xl font-bold"
             data-testid="total-amount-box__total"
           >
-            1.09660435 ARK
+            0.00000000 ARK
           </span>
         </div>
       </div>

diff --git a/src/domains/transaction/pages/SendVoteTransaction/SendVoteTransaction.tsx b/src/domains/transaction/pages/SendVoteTransaction/SendVoteTransaction.tsx
@@ -1,3 +1,4 @@
+import { BigNumber } from "@arkecosystem/platform-sdk-support";
 import { Address } from "app/components/Address";
 import { Avatar } from "app/components/Avatar";
 import { Button } from "app/components/Button";
@@ -121,7 +122,7 @@ export const SecondStep = () => {
 				</TransactionDetail>
 
 				<div className="my-4">
-					<TotalAmountBox transactionAmount="0.00" transactionFee="0.09660435" />
+					<TotalAmountBox amount={BigNumber.ZERO} fee={BigNumber.ZERO} />
 				</div>
 			</div>
 		</section>

diff --git a/...ins/transaction/pages/SendVoteTransaction/__snapshots__/SendVoteTransaction.test.tsx.snap b/...ins/transaction/pages/SendVoteTransaction/__snapshots__/SendVoteTransaction.test.tsx.snap
@@ -1046,7 +1046,7 @@ exports[`Vote For Delegate should render 2nd step 1`] = `
                   class="mt-2 font-semibold"
                   data-testid="total-amount-box__transaction-amount"
                 >
-                  0.00 ARK
+                  0.00000000 ARK
                 </span>
               </div>
               <div
@@ -1061,7 +1061,7 @@ exports[`Vote For Delegate should render 2nd step 1`] = `
                   class="mt-2 text-lg font-semibold"
                   data-testid="total-amount-box__transaction-fee"
                 >
-                  0.09660435 ARK
+                  0.00000000 ARK
                 </span>
               </div>
             </div>
@@ -1095,7 +1095,7 @@ exports[`Vote For Delegate should render 2nd step 1`] = `
               class="text-2xl font-bold"
               data-testid="total-amount-box__total"
             >
-              0.09660435 ARK
+              0.00000000 ARK
             </span>
           </div>
         </div>

diff --git a/src/domains/transaction/pages/TransactionSend/TransactionSend.tsx b/src/domains/transaction/pages/TransactionSend/TransactionSend.tsx
@@ -1,3 +1,4 @@
+import { BigNumber } from "@arkecosystem/platform-sdk-support";
 import { Address } from "app/components/Address";
 import { Avatar } from "app/components/Avatar";
 import { Button } from "app/components/Button";
@@ -124,7 +125,7 @@ export const SecondStep = () => {
 				</TransactionDetail>
 
 				<div className="mt-2">
-					<TotalAmountBox transactionAmount="400" transactionFee="0.09660435" />
+					<TotalAmountBox amount={BigNumber.ZERO} fee={BigNumber.ZERO} />
 				</div>
 			</div>
 		</section>

diff --git a/src/domains/transaction/pages/TransactionSend/__snapshots__/TransactionSend.test.tsx.snap b/src/domains/transaction/pages/TransactionSend/__snapshots__/TransactionSend.test.tsx.snap
@@ -1698,7 +1698,7 @@ exports[`Transaction Send should render 2nd step 1`] = `
                   class="mt-2 font-semibold"
                   data-testid="total-amount-box__transaction-amount"
                 >
-                  400 ARK
+                  0.00000000 ARK
                 </span>
               </div>
               <div
@@ -1713,7 +1713,7 @@ exports[`Transaction Send should render 2nd step 1`] = `
                   class="mt-2 text-lg font-semibold"
                   data-testid="total-amount-box__transaction-fee"
                 >
-                  0.09660435 ARK
+                  0.00000000 ARK
                 </span>
               </div>
             </div>
@@ -1747,7 +1747,7 @@ exports[`Transaction Send should render 2nd step 1`] = `
               class="text-2xl font-bold"
               data-testid="total-amount-box__total"
             >
-              400.09660435 ARK
+              0.00000000 ARK
             </span>
           </div>
         </div>

diff --git a/src/domains/transaction/pages/UpdateRegistration/UpdateRegistration.tsx b/src/domains/transaction/pages/UpdateRegistration/UpdateRegistration.tsx
@@ -1,3 +1,4 @@
+import { BigNumber } from "@arkecosystem/platform-sdk-support";
 import { Address } from "app/components/Address";
 import { Avatar } from "app/components/Avatar";
 import { Button } from "app/components/Button";
@@ -203,7 +204,7 @@ const SecondStep = () => {
 				</TransactionDetail>
 
 				<div className="my-4">
-					<TotalAmountBox transactionAmount="0.00" transactionFee="0.09660435" />
+					<TotalAmountBox amount={BigNumber.ZERO} fee={BigNumber.ZERO} />
 				</div>
 			</div>
 		</div>

diff --git a/...mains/transaction/pages/UpdateRegistration/__snapshots__/UpdateRegistration.test.tsx.snap b/...mains/transaction/pages/UpdateRegistration/__snapshots__/UpdateRegistration.test.tsx.snap
@@ -1220,7 +1220,7 @@ exports[`UpdateRegistration should render 2nd step 1`] = `
                                   class="mt-2 font-semibold"
                                   data-testid="total-amount-box__transaction-amount"
                                 >
-                                  0.00 ARK
+                                  0.00000000 ARK
                                 </span>
                               </div>
                               <div
@@ -1235,7 +1235,7 @@ exports[`UpdateRegistration should render 2nd step 1`] = `
                                   class="mt-2 text-lg font-semibold"
                                   data-testid="total-amount-box__transaction-fee"
                                 >
-                                  0.09660435 ARK
+                                  0.00000000 ARK
                                 </span>
                               </div>
                             </div>
@@ -1269,7 +1269,7 @@ exports[`UpdateRegistration should render 2nd step 1`] = `
                               class="text-2xl font-bold"
                               data-testid="total-amount-box__total"
                             >
-                              0.09660435 ARK
+                              0.00000000 ARK
                             </span>
                           </div>
                         </div>