fix: website validation

src/components/Crowdfund/Create.tsx

@@ -27,6 +27,7 @@ import { NextPage } from 'next'
 import React, { ChangeEvent, useState } from 'react'
 import toast from 'react-hot-toast'
 import {
+  ADDRESS_REGEX,
   APP_NAME,
   DEFAULT_COLLECT_TOKEN,
   ERROR_MESSAGE,
@@ -60,7 +61,7 @@ const newCrowdfundSchema = object({
   goal: string(),
   recipient: string()
     .max(42, { message: 'Ethereum address should be within 42 characters' })
-    .regex(/^0x[a-fA-F0-9]{40}$/, { message: 'Invalid Ethereum address' }),
+    .regex(ADDRESS_REGEX, { message: 'Invalid Ethereum address' }),
   referralFee: string()
     .min(1, { message: 'Invalid Referral fee' })
     .max(20, { message: 'Invalid Referral fee' }),

src/components/Settings/Account/SuperFollow.tsx

@@ -19,6 +19,7 @@ import splitSignature from '@lib/splitSignature'
 import React, { FC, useState } from 'react'
 import toast from 'react-hot-toast'
 import {
+  ADDRESS_REGEX,
   DEFAULT_COLLECT_TOKEN,
   ERROR_MESSAGE,
   ERRORS,
@@ -34,7 +35,7 @@ const newCrowdfundSchema = object({
   amount: string().min(1, { message: 'Invalid amount' }),
   recipient: string()
     .max(42, { message: 'Ethereum address should be within 42 characters' })
-    .regex(/^0x[a-fA-F0-9]{40}$/, { message: 'Invalid Ethereum address' })
+    .regex(ADDRESS_REGEX, { message: 'Invalid Ethereum address' })
 })
 
 const MODULES_CURRENCY_QUERY = gql`

src/components/Settings/Profile/NFTPicture.tsx

@@ -20,6 +20,7 @@ import gql from 'graphql-tag'
 import React, { FC, useState } from 'react'
 import toast from 'react-hot-toast'
 import {
+  ADDRESS_REGEX,
   ERROR_MESSAGE,
   ERRORS,
   IS_MAINNET,
@@ -39,7 +40,7 @@ import { object, string } from 'zod'
 const editNftPictureSchema = object({
   contractAddress: string()
     .max(42, { message: 'Contract address should be within 42 characters' })
-    .regex(/^0x[a-fA-F0-9]{40}$/, { message: 'Invalid Contract address' }),
+    .regex(ADDRESS_REGEX, { message: 'Invalid Contract address' }),
   tokenId: string()
 })
 

src/components/Settings/Profile/Profile.tsx

@@ -34,7 +34,8 @@ import {
   ERRORS,
   LENS_PERIPHERY,
   RELAY_ON,
-  SIGN_WALLET
+  SIGN_WALLET,
+  URL_REGEX
 } from 'src/constants'
 import { useAppPersistStore, useAppStore } from 'src/store/app'
 import { v4 as uuid } from 'uuid'
@@ -80,7 +81,9 @@ const editProfileSchema = object({
     .max(100, { message: 'Location should not exceed 100 characters' })
     .nullable(),
   website: optional(
-    string().max(100, { message: 'Website should not exceed 100 characters' })
+    string()
+      .regex(URL_REGEX, { message: 'Invalid website' })
+      .max(100, { message: 'Website should not exceed 100 characters' })
   ),
   twitter: string()
     .max(100, { message: 'Twitter should not exceed 100 characters' })

src/components/Shared/Navbar/Login/Create/index.tsx

@@ -8,7 +8,7 @@ import { Spinner } from '@components/UI/Spinner'
 import { PlusIcon } from '@heroicons/react/outline'
 import uploadAssetsToIPFS from '@lib/uploadAssetsToIPFS'
 import React, { ChangeEvent, FC, useState } from 'react'
-import { APP_NAME } from 'src/constants'
+import { APP_NAME, HANDLE_REGEX } from 'src/constants'
 import { useAccount } from 'wagmi'
 import { object, string } from 'zod'
 
@@ -31,7 +31,7 @@ const newUserSchema = object({
   handle: string()
     .min(2, { message: 'Handle should be atleast 2 characters' })
     .max(31, { message: 'Handle should be less than 32 characters' })
-    .regex(/^[a-z0-9]+$/, {
+    .regex(HANDLE_REGEX, {
       message: 'Handle should only contain alphanumeric characters'
     })
 })

src/constants.ts

@@ -84,3 +84,9 @@ export const FREE_COLLECT_MODULE = IS_MAINNET
 export const DEFAULT_COLLECT_TOKEN = IS_MAINNET
   ? '0x0d500b1d8e8ef31e21c99d1db9a6444d3adf1270'
   : '0x9c3C9283D3e44854697Cd22D3Faa240Cfb032889'
+
+// Regex
+export const URL_REGEX =
+  /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/
+export const ADDRESS_REGEX = /^(0x)?[0-9a-f]{40}$/i
+export const HANDLE_REGEX = /^[a-z0-9]+$/

src/lib/formatAddress.ts

@@ -1,7 +1,9 @@
+import { ADDRESS_REGEX } from 'src/constants'
+
 const formatAddress = (address: string | null | undefined): string => {
   if (!address) return ''
 
-  const regex = /^0x[a-fA-F0-9]{40}$/g
+  const regex = ADDRESS_REGEX
   if (address.match(regex)) {
     return `${address.slice(0, 4)}…${address.slice(
       address.length - 4,