feat: show chainId in review card

FuelLabs · Oct 28, 2024 · 8abd90b · 8abd90b
1 parent 917d762
commit 8abd90b
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 14 deletions.
diff --git a/packages/app/src/systems/Network/components/NetworkForm/NetworkForm.tsx b/packages/app/src/systems/Network/components/NetworkForm/NetworkForm.tsx
@@ -25,6 +25,7 @@ export type NetworkFormProps = {
   isLoading?: boolean;
   onClickReview?: () => void;
   isValidUrl?: boolean;
+  providerChainId?: number;
 };
 
 export function NetworkForm({
@@ -33,6 +34,7 @@ export function NetworkForm({
   isLoading,
   onClickReview,
   isValidUrl,
+  providerChainId,
 }: NetworkFormProps) {
   const [isFirstClickedReview, setIsFirstClickedReview] = useState(false);
   const [isFirstShownTestConnectionBtn, setIsFirstShownTestConnectionBtn] =
@@ -43,6 +45,7 @@ export function NetworkForm({
   const name = getValues('name');
   const url = getValues('url');
   const acceptRisk = watch('acceptRisk');
+  const chainId = getValues('chainId');
   const showReview = !isEditing && name;
 
   function onChangeUrl() {
@@ -66,6 +69,7 @@ export function NetworkForm({
         <NetworkReviewCard
           headerText="You're adding this network"
           name={name}
+          chainId={chainId || providerChainId}
           onChangeUrl={onChangeUrl}
           url={url}
         />
@@ -116,7 +120,7 @@ export function NetworkForm({
               </MotionInput>
             )}
           />
-          {!!formState.errors?.chainId && (
+          {!acceptRisk && !!formState.errors?.chainId && (
             <Form.ErrorMessage aria-label="Error message">
               {formState.errors?.chainId?.message}
             </Form.ErrorMessage>

diff --git a/packages/app/src/systems/Network/components/NetworkReviewCard/NetworkReviewCard.tsx b/packages/app/src/systems/Network/components/NetworkReviewCard/NetworkReviewCard.tsx
@@ -9,13 +9,15 @@ export type NetworkReviewCardProps = {
   headerText: string;
   name: string;
   onChangeUrl?: () => void;
+  chainId?: number | string;
   url: string;
 };
 
 export function NetworkReviewCard({
   headerText,
   name,
   onChangeUrl,
+  chainId,
   url,
 }: NetworkReviewCardProps) {
   return (
@@ -33,6 +35,11 @@ export function NetworkReviewCard({
         <Text fontSize="sm" css={styles.url}>
           {url}
         </Text>
+        {chainId && (
+          <Text fontSize="sm" css={styles.url}>
+            Chain ID: {chainId}
+          </Text>
+        )}
       </Card.Body>
     </MotionCard>
   );

diff --git a/packages/app/src/systems/Network/hooks/useNetworkForm.ts b/packages/app/src/systems/Network/hooks/useNetworkForm.ts
@@ -13,18 +13,19 @@ const schema = yup
     name: yup
       .string()
       .test('is-required', 'Name is required', function (value) {
-        return this.options?.context?.step === 1 || !!value;
+        return !this.options?.context?.isEditing || !!value;
       }),
     url: yup
       .string()
       .test('is-url-valid', 'URL is not valid', isValidNetworkUrl)
       .required('URL is required'),
     explorerUrl: yup
       .string()
-      .test('is-url-valid', 'Explorer URL is not valid', function (url) {
-        if (!url || this.options.context?.step === 1) return true;
-        return isValidNetworkUrl(url);
-      })
+      .test(
+        'is-url-valid',
+        'Explorer URL is not valid',
+        (url) => !url || isValidNetworkUrl(url)
+      )
       .optional(),
     chainId: yup
       .string()
@@ -68,7 +69,7 @@ export type UseAddNetworkOpts = {
   defaultValues?: Maybe<NetworkFormValues>;
   context?: {
     providerChainId?: string;
-    step?: number;
+    isEditing?: boolean;
   };
 };
 

diff --git a/packages/app/src/systems/Network/pages/AddNetwork/AddNetwork.tsx b/packages/app/src/systems/Network/pages/AddNetwork/AddNetwork.tsx
@@ -14,6 +14,7 @@ import { OverlayDialogTopbar } from '~/systems/Overlay';
 const MotionStack = motion(Box.Stack);
 
 export function AddNetwork() {
+  const isEditing = false;
   const { handlers, isLoading } = useNetworks();
   const {
     chainInfo,
@@ -22,14 +23,11 @@ export function AddNetwork() {
     handlers: chainInfoHandlers,
   } = useChainInfo();
 
-  const step = chainInfo ? 2 : 1;
-
   const context = useMemo(
     () => ({
       providerChainId: chainInfo?.consensusParameters?.chainId?.toString(),
-      step,
     }),
-    [chainInfo, step]
+    [chainInfo?.consensusParameters?.chainId]
   );
 
   const form = useNetworkForm({ context });
@@ -78,7 +76,6 @@ export function AddNetwork() {
       as="form"
       gap="$4"
       onSubmit={form.handleSubmit(onSubmit)}
-      autoComplete="off"
     >
       <OverlayDialogTopbar onClose={handlers.closeDialog}>
         Add Network
@@ -87,10 +84,11 @@ export function AddNetwork() {
         <Focus.Scope autoFocus>
           <NetworkForm
             form={form}
-            isEditing={false}
+            isEditing={isEditing}
             isLoading={isLoadingChainInfo}
             onClickReview={onClickReview}
             isValidUrl={isValidUrl}
+            providerChainId={chainInfo?.consensusParameters?.chainId?.toNumber()}
           />
         </Focus.Scope>
       </Dialog.Description>
@@ -101,7 +99,7 @@ export function AddNetwork() {
         <Button
           type="submit"
           intent="primary"
-          isDisabled={!form.formState.isValid || step === 1}
+          isDisabled={!form.formState.isValid || !chainInfo}
           isLoading={isLoading}
           leftIcon={<Icon icon="Plus" />}
           aria-label="Add new network"