🏗️ Add a command to ignore the forms validation

packages/ui/src/app/index.ts

@@ -1,2 +1,13 @@
 export * from './App'
 export { WaitForAPI } from '@/app/components/WaitForAPI'
+
+// Define commands
+Object.defineProperty(global, 'PIONEER', {
+  value: {
+    get IgnoreValidation() {
+      const enabled = !JSON.parse(sessionStorage.getItem('IgnoreValidation') ?? 'false')
+      sessionStorage.setItem('IgnoreValidation', String(enabled))
+      return enabled ? 'Form validation is now ignored' : 'Form validation is no longer ignored'
+    },
+  },
+})

packages/ui/src/common/components/Modal/ModalTransactionFooter.tsx

@@ -5,6 +5,7 @@ import { useTransactionFee } from '@/accounts/hooks/useTransactionFee'
 import { ButtonGhost, ButtonPrimary, ButtonsGroup } from '@/common/components/buttons'
 import { Arrow } from '@/common/components/icons'
 import { ModalFooter, TransactionInfoContainer } from '@/common/components/Modal'
+import { useLocalStorage } from '@/common/hooks/useLocalStorage'
 
 import { TransactionFee } from '../TransactionFee'
 
@@ -33,6 +34,8 @@ export const ModalTransactionFooter: FC<Props> = ({
   children,
 }) => {
   const { feeInfo } = useTransactionFee()
+  const [ignoreValidation] = useLocalStorage('IgnoreValidation', sessionStorage)
+
   return (
     <ModalFooter className={className} twoColumns>
       <ButtonsGroup align="left">
@@ -50,7 +53,7 @@ export const ModalTransactionFooter: FC<Props> = ({
       </TransactionInfoContainer>
       <ButtonsGroup align="right">
         {extraButtons}
-        <ButtonPrimary disabled={next.disabled} onClick={next.onClick} size="medium">
+        <ButtonPrimary disabled={!ignoreValidation && next.disabled} onClick={next.onClick} size="medium">
           {next.label ?? 'Next step'} <Arrow direction="right" />
         </ButtonPrimary>
       </ButtonsGroup>

packages/ui/src/common/hooks/useLocalStorage.ts

@@ -1,12 +1,12 @@
 import { isFunction } from 'lodash'
 import { useCallback, useEffect, useState } from 'react'
 
-const getItem = (key?: string) => {
+const getItem = (key?: string, storage = localStorage) => {
   if (key === undefined) {
     return
   }
 
-  const item = window.localStorage.getItem(key)
+  const item = storage.getItem(key)
   let result
   if (item !== null) {
     try {
@@ -18,34 +18,34 @@ const getItem = (key?: string) => {
   return result
 }
 
-const setItem = (key?: string, value?: any) => {
+const setItem = (key?: string, value?: any, storage = localStorage) => {
   if (key === undefined) {
     return
   }
 
   if (value === undefined) {
-    window.localStorage.removeItem(key)
+    storage.removeItem(key)
   } else {
     const toStore = JSON.stringify(value)
-    window.localStorage.setItem(key, toStore)
+    storage.setItem(key, toStore)
     return JSON.parse(toStore)
   }
 }
 
-export const useLocalStorage = <T>(key?: string) => {
+export const useLocalStorage = <T>(key?: string, storage = localStorage) => {
   const [state, setState] = useState<T | undefined>(() => {
     return getItem(key)
   })
 
   useEffect(() => {
-    setState(getItem(key))
+    setState(getItem(key, storage))
   }, [key])
 
   const dispatch = useCallback(
     (setStateAction: T | ((prevState?: T) => T)) => {
       const value = isFunction(setStateAction) ? setStateAction(getItem(key)) : setStateAction
       setState(value)
-      setItem(key, value)
+      setItem(key, value, storage)
     },
     [key]
   )