refactor: registration select address (#2476)

ArkEcosystem · Jul 15, 2020 · f527f9f · f527f9f
1 parent f619bf4
commit f527f9f
Show file tree

Hide file tree

Showing 8 changed files with 139 additions and 153 deletions.
diff --git a/src/domains/profile/components/SelectAddress/SelectAddress.tsx b/src/domains/profile/components/SelectAddress/SelectAddress.tsx
@@ -64,6 +64,7 @@ export const SelectAddress = React.forwardRef<HTMLInputElement, SelectAddressPro
 				<SelectAddressWrapper
 					data-testid="SelectAddress__wrapper"
 					className={`SelectAddress ${disabled ? "is-disabled" : ""} ${isInvalidField ? "is-invalid" : ""}`}
+					type="button"
 					onClick={openContacts}
 				>
 					<ProfileAvatar address={selectedAddress} />

diff --git a/src/domains/profile/components/SelectAddress/__snapshots__/SelectAddress.test.tsx.snap b/src/domains/profile/components/SelectAddress/__snapshots__/SelectAddress.test.tsx.snap
@@ -6,6 +6,7 @@ exports[`SelectAddress should render disabled 1`] = `
     <button
       class="sc-fznZeY jUYMgc SelectAddress is-disabled "
       data-testid="SelectAddress__wrapper"
+      type="button"
     >
       <div
         class="sc-AxirZ HSPq mx-3 bg-theme-neutral-200 border-theme-neutral-200"
@@ -41,6 +42,7 @@ exports[`SelectAddress should render empty 1`] = `
     <button
       class="sc-fznZeY jUYMgc SelectAddress  "
       data-testid="SelectAddress__wrapper"
+      type="button"
     >
       <div
         class="sc-AxirZ HSPq mx-3 bg-theme-neutral-200 border-theme-neutral-200"
@@ -76,6 +78,7 @@ exports[`SelectAddress should render invalid 1`] = `
     <button
       class="sc-fznZeY jUYMgc SelectAddress  is-invalid"
       data-testid="SelectAddress__wrapper"
+      type="button"
     >
       <div
         class="sc-AxirZ HSPq mx-3 bg-theme-neutral-200 border-theme-neutral-200"
@@ -112,6 +115,7 @@ exports[`SelectAddress should render with preselected address 1`] = `
     <button
       class="sc-fznZeY jUYMgc SelectAddress  "
       data-testid="SelectAddress__wrapper"
+      type="button"
     >
       <div
         class="Avatar__AvatarWrapper-sc-1vsy2s2-0 laNXvc mx-3"
@@ -168,6 +172,7 @@ exports[`SelectAddress should render with preselected verified address 1`] = `
     <button
       class="sc-fznZeY jUYMgc SelectAddress  "
       data-testid="SelectAddress__wrapper"
+      type="button"
     >
       <div
         class="sc-AxirZ HSPq mx-3 bg-theme-neutral-200 border-theme-neutral-200"

diff --git a/src/domains/transaction/components/AddRecipient/__snapshots__/AddRecipient.test.tsx.snap b/src/domains/transaction/components/AddRecipient/__snapshots__/AddRecipient.test.tsx.snap
@@ -76,6 +76,7 @@ exports[`AddRecipient should render 1`] = `
           <button
             class="sc-fzokOt dprUuD SelectAddress  "
             data-testid="SelectAddress__wrapper"
+            type="button"
           >
             <div
               class="sc-fzplWN exzsOf mx-3 bg-theme-neutral-200 border-theme-neutral-200"
@@ -222,6 +223,7 @@ exports[`AddRecipient should render with multiple recipients tab 1`] = `
           <button
             class="sc-fzokOt dprUuD SelectAddress  "
             data-testid="SelectAddress__wrapper"
+            type="button"
           >
             <div
               class="sc-fzplWN exzsOf mx-3 bg-theme-neutral-200 border-theme-neutral-200"
@@ -368,6 +370,7 @@ exports[`AddRecipient should render without recipients 1`] = `
           <button
             class="sc-fzokOt dprUuD SelectAddress  "
             data-testid="SelectAddress__wrapper"
+            type="button"
           >
             <div
               class="sc-fzplWN exzsOf mx-3 bg-theme-neutral-200 border-theme-neutral-200"
@@ -514,6 +517,7 @@ exports[`AddRecipient should set available amount 1`] = `
           <button
             class="sc-fzokOt dprUuD SelectAddress  "
             data-testid="SelectAddress__wrapper"
+            type="button"
           >
             <div
               class="sc-fzplWN exzsOf mx-3 bg-theme-neutral-200 border-theme-neutral-200"

diff --git a/...ransaction/components/SendTransactionForm/__snapshots__/SendTransactionForm.test.tsx.snap b/...ransaction/components/SendTransactionForm/__snapshots__/SendTransactionForm.test.tsx.snap
@@ -206,6 +206,7 @@ exports[`SendTransactionForm should not call onBack callback if not provided 1`]
             <button
               class="sc-fzqBZW iKvOTi SelectAddress  "
               data-testid="SelectAddress__wrapper"
+              type="button"
             >
               <div
                 class="sc-fzplWN exzsOf mx-3 bg-theme-neutral-200 border-theme-neutral-200"
@@ -312,6 +313,7 @@ exports[`SendTransactionForm should not call onBack callback if not provided 1`]
                 <button
                   class="sc-fzqBZW iKvOTi SelectAddress  "
                   data-testid="SelectAddress__wrapper"
+                  type="button"
                 >
                   <div
                     class="sc-fzplWN exzsOf mx-3 bg-theme-neutral-200 border-theme-neutral-200"
@@ -748,6 +750,7 @@ exports[`SendTransactionForm should not call onSubmit callback if not provided 1
             <button
               class="sc-fzqBZW iKvOTi SelectAddress  "
               data-testid="SelectAddress__wrapper"
+              type="button"
             >
               <div
                 class="sc-fzplWN exzsOf mx-3 bg-theme-neutral-200 border-theme-neutral-200"
@@ -854,6 +857,7 @@ exports[`SendTransactionForm should not call onSubmit callback if not provided 1
                 <button
                   class="sc-fzqBZW iKvOTi SelectAddress  "
                   data-testid="SelectAddress__wrapper"
+                  type="button"
                 >
                   <div
                     class="sc-fzplWN exzsOf mx-3 bg-theme-neutral-200 border-theme-neutral-200"
@@ -1290,6 +1294,7 @@ exports[`SendTransactionForm should render 1`] = `
             <button
               class="sc-fzqBZW iKvOTi SelectAddress  "
               data-testid="SelectAddress__wrapper"
+              type="button"
             >
               <div
                 class="sc-fzplWN exzsOf mx-3 bg-theme-neutral-200 border-theme-neutral-200"
@@ -1396,6 +1401,7 @@ exports[`SendTransactionForm should render 1`] = `
                 <button
                   class="sc-fzqBZW iKvOTi SelectAddress  "
                   data-testid="SelectAddress__wrapper"
+                  type="button"
                 >
                   <div
                     class="sc-fzplWN exzsOf mx-3 bg-theme-neutral-200 border-theme-neutral-200"
@@ -1724,6 +1730,7 @@ exports[`SendTransactionForm should set available amount 1`] = `
             <button
               class="sc-fzqBZW iKvOTi SelectAddress  "
               data-testid="SelectAddress__wrapper"
+              type="button"
             >
               <div
                 class="sc-fzplWN exzsOf mx-3 bg-theme-neutral-200 border-theme-neutral-200"
@@ -1830,6 +1837,7 @@ exports[`SendTransactionForm should set available amount 1`] = `
                 <button
                   class="sc-fzqBZW iKvOTi SelectAddress  "
                   data-testid="SelectAddress__wrapper"
+                  type="button"
                 >
                   <div
                     class="sc-fzplWN exzsOf mx-3 bg-theme-neutral-200 border-theme-neutral-200"

diff --git a/src/domains/transaction/pages/Registration/Registration.stories.tsx b/src/domains/transaction/pages/Registration/Registration.stories.tsx
@@ -1,3 +1,4 @@
+import { contacts } from "domains/contact/data";
 import React from "react";
 
 import { networks } from "../../data";
@@ -25,6 +26,7 @@ const defaultFormValues = {
 			formatted: "My Wallet FJKDSALJFKASL...SAJFKLASJKDFJ",
 		},
 	],
+	profiles: contacts,
 };
 
 export const Default = () => <Registration {...defaultFormValues} onDownload={() => alert("download")} />;
diff --git a/src/domains/transaction/pages/Registration/Registration.tsx b/src/domains/transaction/pages/Registration/Registration.tsx
@@ -15,7 +15,7 @@ import { TabPanel, Tabs } from "app/components/Tabs";
 import { TextArea } from "app/components/TextArea";
 import { TransactionDetail } from "app/components/TransactionDetail";
 import { useActiveProfile } from "app/hooks/env";
-import { ProfileFormField } from "domains/profile/components/ProfileFormField";
+import { SelectAddress } from "domains/profile/components/SelectAddress";
 import { InputFee } from "domains/transaction/components/InputFee";
 import { LedgerConfirmation } from "domains/transaction/components/LedgerConfirmation";
 import { LinkCollection } from "domains/transaction/components/LinkCollection";
@@ -30,11 +30,11 @@ import { styled } from "twin.macro";
 import { networks } from "../../data";
 
 type RegistrationProps = {
-	addresses?: any;
 	formDefaultData?: any;
 	onDownload?: any;
 	networks?: any;
 	registrationTypes?: any;
+	profiles: any[];
 };
 
 type Network = { name: string; label: string; value: string; icon: string; iconClass: string };
@@ -71,24 +71,20 @@ const RegistrationTypeDropdown = ({ className, register, registrationTypes }: an
 	);
 };
 
-const getAddressInfo = (addresses: any[], address: string) => {
-	return addresses.find((profile: any) => profile.address === address);
-};
-
 const getRegistrationByName = (registrationTypes: any[], registrationType: string) => {
 	return registrationTypes.find((type: any) => type.value === registrationType);
 };
 
 const FirstStep = ({
-	addresses,
 	form,
 	networks,
 	registrationTypes,
+	profiles,
 }: {
-	addresses: any;
 	form: any;
 	networks: Network[];
 	registrationTypes: RegistrationType[];
+	profiles: any[];
 }) => {
 	const { register } = form;
 	const { address, registrationType } = form.watch();
@@ -106,15 +102,21 @@ const FirstStep = ({
 					<SelectNetwork networks={networks} />
 				</FormField>
 
-				<ProfileFormField
-					formName="address"
-					formLabel="Address"
-					profiles={addresses}
-					selectedProfile={getAddressInfo(addresses, address)}
-					register={register}
-					withoutAdditional={true}
-					className="mt-8"
-				/>
+				<FormField name="address" className="relative mt-8">
+					<div className="mb-2">
+						<FormLabel label="Address" />
+					</div>
+
+					<div data-testid="Registration__address-field">
+						<SelectAddress
+							contactSearchTitle="My addresses"
+							contactSearchDescription="Find and select preferred address from you saved profiles"
+							address={address}
+							ref={register}
+							contacts={profiles}
+						/>
+					</div>
+				</FormField>
 
 				<RegistrationTypeDropdown
 					selectedType={getRegistrationByName(registrationTypes, registrationType)}
@@ -376,10 +378,10 @@ export const FifthStep = () => (
 );
 
 export const Registration = ({
-	addresses,
 	formDefaultData,
 	onDownload,
 	networks,
+	profiles,
 	registrationTypes,
 }: RegistrationProps) => {
 	const form = useForm({ mode: "onChange", defaultValues: formDefaultData });
@@ -413,7 +415,7 @@ export const Registration = ({
 						<div className="mt-8">
 							<TabPanel tabId={1}>
 								<FirstStep
-									addresses={addresses}
+									profiles={profiles}
 									form={form}
 									networks={networks}
 									registrationTypes={registrationTypes}
@@ -508,12 +510,5 @@ Registration.defaultProps = {
 		network: null,
 		address: null,
 	},
-	addresses: [
-		{
-			address: "FJKDSALJFKASLJFKSDAJFKFKDSAJFKSAJFKLASJKDFJ",
-			walletName: "My Wallet",
-			avatarId: "FJKDSALJFKASLJFKSDAJFKFKDSAJFKSAJFKLASJKDFJ",
-			formatted: "My Wallet FJKDSALJFKASL...SAJFKLASJKDFJ",
-		},
-	],
+	profiles: [],
 };