APP-2549: Field validation for WC QR code input (#1086)

* wc uri validation wip

* wc uri validation done

* lint fic

* review changes

* crowdin key

src/containers/walletConnect/dAppValidationModal/index.tsx

@@ -60,7 +60,7 @@ const WCdAppValidation: React.FC<Props> = props => {
     ConnectionState.WAITING
   );
 
-  const {wcConnect, sessions} = useWalletConnectContext();
+  const {wcConnect, validateURI, sessions} = useWalletConnectContext();
 
   const {control} = useFormContext();
   const {errors} = useFormState({control});
@@ -209,27 +209,37 @@ const WCdAppValidation: React.FC<Props> = props => {
           <Controller
             name={WC_URI_INPUT_NAME}
             control={control}
+            rules={{
+              validate: validateURI,
+            }}
             defaultValue=""
             render={({
               field: {name, onBlur, onChange, value},
               fieldState: {error},
             }) => (
-              <WalletInputLegacy
-                mode={error ? 'critical' : 'default'}
-                name={name}
-                disabled={
-                  connectionStatus === ConnectionState.LOADING ||
-                  connectionStatus === ConnectionState.SUCCESS
-                }
-                onBlur={onBlur}
-                onChange={onChange}
-                value={value ?? ''}
-                placeholder={t(
-                  'modal.dappConnect.validation.codeInputPlaceholder'
-                )}
-                adornmentText={adornmentText}
-                onAdornmentClick={() => handleAdornmentClick(value, onChange)}
-              />
+              <>
+                <WalletInputLegacy
+                  mode={error ? 'critical' : 'default'}
+                  name={name}
+                  disabled={
+                    connectionStatus === ConnectionState.LOADING ||
+                    connectionStatus === ConnectionState.SUCCESS
+                  }
+                  onBlur={onBlur}
+                  onChange={onChange}
+                  value={value ?? ''}
+                  placeholder={t(
+                    'modal.dappConnect.validation.codeInputPlaceholder'
+                  )}
+                  adornmentText={adornmentText}
+                  onAdornmentClick={() => handleAdornmentClick(value, onChange)}
+                />
+                <div className="mt-2">
+                  {error?.message && (
+                    <AlertInline label={error.message} mode="critical" />
+                  )}
+                </div>
+              </>
             )}
           />
         </FormGroup>

src/containers/walletConnect/walletConnectProvider/useWalletConnectInterceptor.ts

@@ -26,6 +26,7 @@ export type VerifyConnectionOptions = {
 export type WcInterceptorValues = {
   wcConnect: (options: WcConnectOptions) => Promise<WcSession>;
   wcDisconnect: (topic: string) => Promise<void>;
+  validateURI: (uri: string) => string | undefined;
   sessions: WcSession[];
   actions: WcActionRequest[];
 };
@@ -45,6 +46,8 @@ export function useWalletConnectInterceptor(): WcInterceptorValues {
 
   const [actions, setActions] = useState<WcActionRequest[]>([]);
 
+  const validateURI = walletConnectInterceptor.validateURI;
+
   const updateActiveSessions = useCallback(() => {
     const newSessions = walletConnectInterceptor.getActiveSessions(
       daoDetails?.address
@@ -181,5 +184,5 @@ export function useWalletConnectInterceptor(): WcInterceptorValues {
     };
   }, [handleRequest]);
 
-  return {wcConnect, wcDisconnect, sessions, actions};
+  return {wcConnect, wcDisconnect, sessions, actions, validateURI};
 }

src/locales/en/common.json

@@ -1320,7 +1320,8 @@
         "alertCriticalDapp": "The QR code provided is not from {{dappName}}.",
         "alertSuccess": "{{dappName}} connected",
         "codeInputPlaceholder": "wc: …",
-        "alertCriticalQRcode": "The QR code provided is not from {{dappName}}."
+        "alertCriticalQRcode": "The QR code provided is not from {{dappName}}.",
+        "alertInvalid": "Invalid code"
       },
       "detaildApp": {
         "spinnerLabel": "Listening for actions…",

src/services/walletConnectInterceptor.ts

@@ -4,7 +4,10 @@ import Web3WalletClient, {Web3Wallet} from '@walletconnect/web3wallet';
 import {AuthClientTypes} from '@walletconnect/auth-client';
 import {Web3WalletTypes} from '@walletconnect/web3wallet';
 import {PairingTypes, SessionTypes} from '@walletconnect/types';
+import {WC_URI_PATTERN} from 'utils/constants';
+import {i18n} from '../../i18n.config';
 
+const URI_REGEX = new RegExp(WC_URI_PATTERN);
 class WalletConnectInterceptor {
   clientMetadata: AuthClientTypes.Metadata = {
     name: 'Aragon DAO',
@@ -21,6 +24,13 @@ class WalletConnectInterceptor {
     this.initClient();
   }
 
+  validateURI(uri: string) {
+    // TODO: Get crowdin key for this
+    return URI_REGEX.test(uri)
+      ? undefined
+      : i18n.t('modal.dappConnect.validation.alertInvalid');
+  }
+
   subscribeConnectProposal(
     cb: (event: Web3WalletTypes.SessionProposal) => void
   ) {

src/utils/constants/regex.ts

@@ -16,3 +16,5 @@ export const ISO_DATE_PATTERN =
   /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*))(?:Z|(\+|-)([\d|:]*))?$/;
 
 export const BIGINT_PATTERN = /^\d+n$/;
+
+export const WC_URI_PATTERN = /^wc:[\w\d-]+@[12]\?([^=&\s]+=[^=&\s]+&?)+$/;