Check if valid ethereum address

package.json

@@ -54,7 +54,8 @@
     "react-syntax-highlighter": "^15.5.0",
     "recharts": "^2.8.0",
     "tamagui": "1.36.4",
-    "web-bip39": "^0.0.3"
+    "web-bip39": "^0.0.3",
+    "web3-validator": "^2.0.2"
   },
   "devDependencies": {
     "@fsouza/prettierd": "^0.24.2",

src/pages/ValidatorOnboarding/ClientSetup/WithdrawalAddress.tsx

@@ -1,7 +1,8 @@
-import { Stack, YStack } from 'tamagui'
+import { Stack, YStack, validPseudoKeys } from 'tamagui'
 import { InformationBox, Input as StatusInput, Text } from '@status-im/components'
 import { ClearIcon, CloseCircleIcon } from '@status-im/icons'
 import { useState } from 'react'
+import { isAddress } from 'web3-validator';
 
 type WithdrawalAddressProps = {
   title: string
@@ -9,7 +10,7 @@ type WithdrawalAddressProps = {
 
 const WithdrawalAddress = ({ title }: WithdrawalAddressProps) => {
   const [withdrawalAddress, setWithdrawalAddress] = useState('')
-
+  const [isValidAddress, setIsValidAddress] = useState(true);
   const changeWithdrawalAddressHandler = (value: string) => {
     setWithdrawalAddress(value)
   }
@@ -17,7 +18,12 @@ const WithdrawalAddress = ({ title }: WithdrawalAddressProps) => {
   const removeWithdrawalAddressHandler = () => {
     setWithdrawalAddress('')
   }
+  const checkAddress = (e: any) => {
 
+    if (e.nativeEvent.text.length !== 0) {
+      setIsValidAddress(isAddress(e.nativeEvent.text));
+    }
+  }
   return (
     <YStack space={'$4'}>
       <Text size={19} weight={'semibold'}>
@@ -40,6 +46,7 @@ const WithdrawalAddress = ({ title }: WithdrawalAddressProps) => {
             }
             value={withdrawalAddress}
             onChangeText={changeWithdrawalAddressHandler}
+            onBlur={(e) => checkAddress(e)}
           />
         </Stack>
         <InformationBox
@@ -47,6 +54,13 @@ const WithdrawalAddress = ({ title }: WithdrawalAddressProps) => {
           variant="error"
           icon={<CloseCircleIcon size={20} color="$red" />}
         />
+        {!isValidAddress && (
+          <InformationBox
+            message="Not valid ethereum address"
+            variant="error"
+            icon={<CloseCircleIcon size={20} color="$red" />}
+          />
+        )}
       </YStack>
     </YStack>
   )

yarn.lock

@@ -4058,6 +4058,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@noble/curves@npm:1.1.0, @noble/curves@npm:~1.1.0":
+  version: 1.1.0
+  resolution: "@noble/curves@npm:1.1.0"
+  dependencies:
+    "@noble/hashes": 1.3.1
+  checksum: 2658cdd3f84f71079b4e3516c47559d22cf4b55c23ac8ee9d2b1f8e5b72916d9689e59820e0f9d9cb4a46a8423af5b56dc6bb7782405c88be06a015180508db5
+  languageName: node
+  linkType: hard
+
 "@noble/hashes@npm:1.1.2":
   version: 1.1.2
   resolution: "@noble/hashes@npm:1.1.2"
@@ -4065,6 +4074,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@noble/hashes@npm:1.3.1":
+  version: 1.3.1
+  resolution: "@noble/hashes@npm:1.3.1"
+  checksum: 7fdefc0f7a0c1ec27acc6ff88841793e3f93ec4ce6b8a6a12bfc0dd70ae6b7c4c82fe305fdfeda1735d5ad4a9eebe761e6693b3d355689c559e91242f4bc95b1
+  languageName: node
+  linkType: hard
+
+"@noble/hashes@npm:~1.3.0, @noble/hashes@npm:~1.3.1":
+  version: 1.3.2
+  resolution: "@noble/hashes@npm:1.3.2"
+  checksum: fe23536b436539d13f90e4b9be843cc63b1b17666a07634a2b1259dded6f490be3d050249e6af98076ea8f2ea0d56f578773c2197f2aa0eeaa5fba5bc18ba474
+  languageName: node
+  linkType: hard
+
 "@noble/secp256k1@npm:1.7.1":
   version: 1.7.1
   resolution: "@noble/secp256k1@npm:1.7.1"
@@ -5453,6 +5476,34 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@scure/base@npm:~1.1.0":
+  version: 1.1.3
+  resolution: "@scure/base@npm:1.1.3"
+  checksum: 1606ab8a4db898cb3a1ada16c15437c3bce4e25854fadc8eb03ae93cbbbac1ed90655af4b0be3da37e12056fef11c0374499f69b9e658c9e5b7b3e06353c630c
+  languageName: node
+  linkType: hard
+
+"@scure/bip32@npm:1.3.1":
+  version: 1.3.1
+  resolution: "@scure/bip32@npm:1.3.1"
+  dependencies:
+    "@noble/curves": ~1.1.0
+    "@noble/hashes": ~1.3.1
+    "@scure/base": ~1.1.0
+  checksum: 394d65f77a40651eba21a5096da0f4233c3b50d422864751d373fcf142eeedb94a1149f9ab1dbb078086dab2d0bc27e2b1afec8321bf22d4403c7df2fea5bfe2
+  languageName: node
+  linkType: hard
+
+"@scure/bip39@npm:1.2.1":
+  version: 1.2.1
+  resolution: "@scure/bip39@npm:1.2.1"
+  dependencies:
+    "@noble/hashes": ~1.3.0
+    "@scure/base": ~1.1.0
+  checksum: c5bd6f1328fdbeae2dcdd891825b1610225310e5e62a4942714db51066866e4f7bef242c7b06a1b9dcc8043a4a13412cf5c5df76d3b10aa9e36b82e9b6e3eeaa
+  languageName: node
+  linkType: hard
+
 "@sideway/address@npm:^4.1.3":
   version: 4.1.4
   resolution: "@sideway/address@npm:4.1.4"
@@ -13510,6 +13561,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ethereum-cryptography@npm:^2.0.0":
+  version: 2.1.2
+  resolution: "ethereum-cryptography@npm:2.1.2"
+  dependencies:
+    "@noble/curves": 1.1.0
+    "@noble/hashes": 1.3.1
+    "@scure/bip32": 1.3.1
+    "@scure/bip39": 1.2.1
+  checksum: 2e8f7b8cc90232ae838ab6a8167708e8362621404d26e79b5d9e762c7b53d699f7520aff358d9254de658fcd54d2d0af168ff909943259ed27dc4cef2736410c
+  languageName: node
+  linkType: hard
+
 "ethers@npm:5.5.3":
   version: 5.5.3
   resolution: "ethers@npm:5.5.3"
@@ -18032,6 +18095,7 @@ __metadata:
     vercel: ^32.0.1
     vite: ^4.4.9
     web-bip39: ^0.0.3
+    web3-validator: ^2.0.2
   languageName: unknown
   linkType: soft
 
@@ -22091,7 +22155,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"util@npm:^0.12.0, util@npm:^0.12.4":
+"util@npm:^0.12.0, util@npm:^0.12.4, util@npm:^0.12.5":
   version: 0.12.5
   resolution: "util@npm:0.12.5"
   dependencies:
@@ -22346,6 +22410,35 @@ __metadata:
   languageName: node
   linkType: hard
 
+"web3-errors@npm:^1.1.2":
+  version: 1.1.2
+  resolution: "web3-errors@npm:1.1.2"
+  dependencies:
+    web3-types: ^1.2.0
+  checksum: 7f9e8a476aa8514a2926743680e5561950f684be0cd6ff87e6fb12a7978fa568492aee0f502ee68e88686c5a904348d32935dbcb852ba00b7612efb8baf14d34
+  languageName: node
+  linkType: hard
+
+"web3-types@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "web3-types@npm:1.2.0"
+  checksum: ed8c42df578fc51cb4a56d60d9dd018f0fbbf7cf4992ac4150361e2985e8a6fc91fde9589f74201495d7795ac563eecf62ec2e7496858433f3ba0350e1808bbc
+  languageName: node
+  linkType: hard
+
+"web3-validator@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "web3-validator@npm:2.0.2"
+  dependencies:
+    ethereum-cryptography: ^2.0.0
+    util: ^0.12.5
+    web3-errors: ^1.1.2
+    web3-types: ^1.2.0
+    zod: ^3.21.4
+  checksum: 690eb297c517dd4016c9a9e6929236d394367793903242e788bd43a323c7934cf4a47e68b7f6526f9f0d1c8cf4d9bee0693331e4edff489e17b749e9d2538542
+  languageName: node
+  linkType: hard
+
 "webidl-conversions@npm:^3.0.0":
   version: 3.0.1
   resolution: "webidl-conversions@npm:3.0.1"
@@ -22809,6 +22902,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"zod@npm:^3.21.4":
+  version: 3.22.4
+  resolution: "zod@npm:3.22.4"
+  checksum: 80bfd7f8039b24fddeb0718a2ec7c02aa9856e4838d6aa4864335a047b6b37a3273b191ef335bf0b2002e5c514ef261ffcda5a589fb084a48c336ffc4cdbab7f
+  languageName: node
+  linkType: hard
+
 "zustand@npm:^4.3.3, zustand@npm:^4.3.7":
   version: 4.4.1
   resolution: "zustand@npm:4.4.1"