diff --git a/src/app/bridge/Send/SendTransaction/DepositSelector/index.tsx b/src/app/bridge/Send/SendTransaction/DepositSelector/index.tsx
index 38f1f4c8c..0f39d749a 100644
--- a/src/app/bridge/Send/SendTransaction/DepositSelector/index.tsx
+++ b/src/app/bridge/Send/SendTransaction/DepositSelector/index.tsx
@@ -51,7 +51,7 @@ const useStyles = makeStyles()(theme => ({
       justifyContent: "center",
     },
   },
-  invaildCard: {
+  invalidCard: {
     opacity: 0.6,
     pointerEvents: "none",
   },
@@ -205,7 +205,7 @@ const DepositSelector = props => {
             role="button"
             tabIndex={0}
             variant="outlined"
-            classes={{ root: cx(classes.cardRoot, !idx && !isVaild && classes.invaildCard, selectedType === item.type && classes.selectedCard) }}
+            classes={{ root: cx(classes.cardRoot, !idx && !isVaild && classes.invalidCard, selectedType === item.type && classes.selectedCard) }}
             onClick={() => handleSelect(item.type)}
           >
             {item.type === selectedType && <SvgIcon classes={{ root: classes.selectedIcon }} component={SelectedSvg} inheritViewBox></SvgIcon>}
diff --git a/src/app/bridge/Send/SendTransaction/hooks/useBatchDeposit.ts b/src/app/bridge/Send/SendTransaction/hooks/useBatchDeposit.ts
index a286fa5d5..b7e1b71ee 100644
--- a/src/app/bridge/Send/SendTransaction/hooks/useBatchDeposit.ts
+++ b/src/app/bridge/Send/SendTransaction/hooks/useBatchDeposit.ts
@@ -22,7 +22,7 @@ export default function useBatchDeposit(props) {
   }, [selectedToken])
 
   // < 0.001 need special check for economy mode
-  const depositAmountIsVaild = useMemo(() => {
+  const depositAmountIsValid = useMemo(() => {
     const minAmount = BNToAmount(batchDepositConfig.minAmountPerTx, selectedToken.decimals)
     if (amount && txType === "Deposit" && enableBatchDeposit) {
       return Number(amount) >= Number(minAmount)
@@ -49,6 +49,6 @@ export default function useBatchDeposit(props) {
 
   return {
     getBatchDepositConfigsByToken,
-    depositAmountIsVaild,
+    depositAmountIsValid,
   }
 }
diff --git a/src/app/bridge/Send/SendTransaction/index.tsx b/src/app/bridge/Send/SendTransaction/index.tsx
index e03717045..5e371147e 100644
--- a/src/app/bridge/Send/SendTransaction/index.tsx
+++ b/src/app/bridge/Send/SendTransaction/index.tsx
@@ -87,7 +87,7 @@ const SendTransaction = () => {
     needApproval,
   })
 
-  const { depositAmountIsVaild } = useBatchDeposit({ selectedToken, amount: validAmount })
+  const { depositAmountIsValid } = useBatchDeposit({ selectedToken, amount: validAmount })
 
   // fee start
   const {
@@ -183,8 +183,8 @@ const SendTransaction = () => {
   // fee end
 
   const necessaryCondition = useMemo(() => {
-    return validAmount && !bridgeWarning && (depositAmountIsVaild || (!depositAmountIsVaild && depositBatchMode === DepositBatchMode.Fast))
-  }, [validAmount, bridgeWarning, depositAmountIsVaild, depositBatchMode])
+    return validAmount && !bridgeWarning && (depositAmountIsValid || (!depositAmountIsValid && depositBatchMode === DepositBatchMode.Fast))
+  }, [validAmount, bridgeWarning, depositAmountIsValid, depositBatchMode])
 
   const sendText = useMemo(() => {
     if (txType === "Deposit" && sendLoading) {
@@ -354,7 +354,7 @@ const SendTransaction = () => {
           l2EconomyGasFee={batchDepositConfig.feeAmountPerTx}
           l1DataFee={l1DataFee}
           needApproval={needApproval}
-          isVaild={depositAmountIsVaild}
+          isVaild={depositAmountIsValid}
         />
       )}
       {!(bridgeSummaryType === BridgeSummaryType.Selector && depositBatchMode === DepositBatchMode.Economy) && (
diff --git a/src/app/bridge/Send/Withdraw.tsx b/src/app/bridge/Send/Withdraw.tsx
index 956865040..f283fbf5f 100644
--- a/src/app/bridge/Send/Withdraw.tsx
+++ b/src/app/bridge/Send/Withdraw.tsx
@@ -49,7 +49,7 @@ const useStyles = makeStyles()(theme => ({
 
 const Withdraw = () => {
   const { classes } = useStyles()
-  const { withDrawStep, changeWithdrawStep } = useBridgeStore()
+  const { withdrawStep, changeWithdrawStep } = useBridgeStore()
 
   const handleChange = (e, newValue) => {
     changeWithdrawStep(newValue)
@@ -57,7 +57,7 @@ const Withdraw = () => {
 
   return (
     <Stack direction="column" sx={{ height: "100%" }}>
-      <TabContext value={withDrawStep}>
+      <TabContext value={withdrawStep}>
         <TabList
           onChange={handleChange}
           textColor="primary"
diff --git a/src/app/bridge/Send/index.tsx b/src/app/bridge/Send/index.tsx
index c16d6a170..053771b2b 100644
--- a/src/app/bridge/Send/index.tsx
+++ b/src/app/bridge/Send/index.tsx
@@ -87,7 +87,7 @@ const useStyles = makeStyles()(theme => ({
 const Send = () => {
   const { classes, cx } = useStyles()
   const { chainId } = useRainbowContext()
-  const { txType, txResult, fromNetwork, withDrawStep, changeTxType, changeTxResult, changeHistoryVisible, changeIsNetworkCorrect } = useBridgeStore()
+  const { txType, txResult, fromNetwork, withdrawStep, changeTxType, changeTxResult, changeHistoryVisible, changeIsNetworkCorrect } = useBridgeStore()
 
   const { depositBatchMode } = useBatchBridgeStore()
 
@@ -101,13 +101,13 @@ const Send = () => {
     let networkCorrect
     if (txType === "Deposit") {
       networkCorrect = fromNetwork.isL1 && chainId === CHAIN_ID.L1
-    } else if (withDrawStep === "1") {
+    } else if (withdrawStep === "1") {
       networkCorrect = !fromNetwork.isL1 && chainId === CHAIN_ID.L2
     } else {
       networkCorrect = chainId === CHAIN_ID.L1
     }
     changeIsNetworkCorrect(networkCorrect)
-  }, [fromNetwork, txType, withDrawStep, chainId])
+  }, [fromNetwork, txType, withdrawStep, chainId])
 
   const handleChange = (e, newValue) => {
     changeTxType(newValue)
@@ -137,7 +137,7 @@ const Send = () => {
         <TabPanel value="Deposit" classes={{ root: classes.tabPanel }}>
           <Deposit></Deposit>
         </TabPanel>
-        <TabPanel value="Withdraw" className={withDrawStep === "2" ? "tx" : ""} classes={{ root: cx(classes.tabPanel, "withdraw") }}>
+        <TabPanel value="Withdraw" className={withdrawStep === "2" ? "tx" : ""} classes={{ root: cx(classes.tabPanel, "withdraw") }}>
           <Withdraw></Withdraw>
         </TabPanel>
       </TabContext>
diff --git a/src/hooks/useClaimHistory.ts b/src/hooks/useClaimHistory.ts
index 361dc8827..1bba5b6c3 100644
--- a/src/hooks/useClaimHistory.ts
+++ b/src/hooks/useClaimHistory.ts
@@ -15,13 +15,13 @@ export interface TxHistory {
 
 const useClaimHistory = () => {
   const { walletCurrentAddress } = useRainbowContext()
-  const { txType, withDrawStep, historyVisible } = useBridgeStore()
+  const { txType, withdrawStep, historyVisible } = useBridgeStore()
 
   const { comboPageTransactions, pageTransactions, generateTransactions } = useClaimHistoryStore()
 
   const isOnClaimPage = useMemo(() => {
-    return !historyVisible && txType === "Withdraw" && withDrawStep === "2"
-  }, [historyVisible, txType, withDrawStep])
+    return !historyVisible && txType === "Withdraw" && withdrawStep === "2"
+  }, [historyVisible, txType, withdrawStep])
 
   const [errorMessage, setErrorMessage] = useState("")
 
diff --git a/src/services/canvasService.ts b/src/services/canvasService.ts
index 0d5935cd2..df5ac70e3 100644
--- a/src/services/canvasService.ts
+++ b/src/services/canvasService.ts
@@ -216,9 +216,9 @@ const getBadgeOrder = async profileContract => {
   }
 }
 
-const fetchCanvasDetail = async (privider, othersAddress, profileAddress) => {
-  const { profileContract, name } = await queryCanvasUsername(privider, profileAddress)
-  const userBadges = await queryUserBadgesWrapped(privider, othersAddress)
+const fetchCanvasDetail = async (provider, othersAddress, profileAddress) => {
+  const { profileContract, name } = await queryCanvasUsername(provider, profileAddress)
+  const userBadges = await queryUserBadgesWrapped(provider, othersAddress)
   const { orderedAttachedBadges, attachedBadges, badgeOrder } = await getOrderedAttachedBadges(profileContract)
   return { name, profileContract, userBadges, attachedBadges, orderedAttachedBadges, badgeOrder }
 }
diff --git a/src/stores/batchBridgeStore.ts b/src/stores/batchBridgeStore.ts
index 2f228351e..01ee92670 100644
--- a/src/stores/batchBridgeStore.ts
+++ b/src/stores/batchBridgeStore.ts
@@ -22,12 +22,12 @@ interface BatchBridgeStore {
   bridgeSummaryType: BridgeSummaryType
   depositBatchMode: DepositBatchMode
   batchDepositConfig: BatchDepositConfig
-  depositAmountIsVaild: boolean
+  depositAmountIsValid: boolean
 
-  changeBridgeSummaryType: (depositTpye: BridgeSummaryType) => void
+  changeBridgeSummaryType: (depositType: BridgeSummaryType) => void
   changeDepositBatchMode: (depositBatchMode: DepositBatchMode) => void
   changeBatchDepositConfig: (batchDepositConfig: BatchDepositConfig) => void
-  changeDepositAmountIsVaild: (depositAmountIsVaild: boolean) => void
+  changeDepositAmountIsValid: (depositAmountIsValid: boolean) => void
 }
 
 const useBatchBridgeStore = create<BatchBridgeStore>()(set => ({
@@ -40,7 +40,7 @@ const useBatchBridgeStore = create<BatchBridgeStore>()(set => ({
     maxDelayPerBatch: 0n,
     safeBridgeGasLimit: 0n,
   },
-  depositAmountIsVaild: true,
+  depositAmountIsValid: true,
 
   changeBridgeSummaryType: bridgeSummaryType => {
     set({
@@ -58,9 +58,9 @@ const useBatchBridgeStore = create<BatchBridgeStore>()(set => ({
       batchDepositConfig,
     })
   },
-  changeDepositAmountIsVaild: depositAmountIsVaild => {
+  changeDepositAmountIsValid: depositAmountIsValid => {
     set({
-      depositAmountIsVaild,
+      depositAmountIsValid,
     })
   },
 }))
diff --git a/src/stores/bridgeStore.ts b/src/stores/bridgeStore.ts
index 7dc5c25a3..508ecc70b 100644
--- a/src/stores/bridgeStore.ts
+++ b/src/stores/bridgeStore.ts
@@ -7,7 +7,7 @@ import { loadState } from "@/utils/localStorage"
 
 type TransactionType = "Deposit" | "Withdraw"
 
-type WithDrawStep = "1" | "2"
+type WithdrawStep = "1" | "2"
 
 interface TxSuccess {
   code: 1
@@ -26,7 +26,7 @@ interface BridgeStore {
   fromNetwork: Network
   toNetwork: Network
   txType: TransactionType
-  withDrawStep: WithDrawStep
+  withdrawStep: WithdrawStep
   txResult: TxResult
   isNetworkCorrect: boolean
   tokenList: Array<Token>
@@ -35,7 +35,7 @@ interface BridgeStore {
   changeToNetwork: (network: Network) => void
   changeTxType: (txType: TransactionType) => void
   changeTxResult: (txResult: TxResult | null) => void
-  changeWithdrawStep: (withDrawStep: WithDrawStep) => void
+  changeWithdrawStep: (withdrawStep: WithdrawStep) => void
   changeIsNetworkCorrect: (isNetworkCorrect: boolean) => void
   fetchTokenList: () => Promise<void>
 }
@@ -45,7 +45,7 @@ const useBridgeStore = create<BridgeStore>()((set, get) => ({
   fromNetwork: NETWORKS[0],
   toNetwork: NETWORKS[1],
   txType: "Deposit",
-  withDrawStep: "1",
+  withdrawStep: "1",
   txResult: null,
   isNetworkCorrect: true,
   tokenList: NATIVE_TOKEN_LIST,
@@ -114,9 +114,9 @@ const useBridgeStore = create<BridgeStore>()((set, get) => ({
     })
   },
 
-  changeWithdrawStep: withDrawStep => {
+  changeWithdrawStep: withdrawStep => {
     set({
-      withDrawStep,
+      withdrawStep,
     })
   },
 
diff --git a/src/stores/canvasStore.ts b/src/stores/canvasStore.ts
index c57cd3621..f17825499 100644
--- a/src/stores/canvasStore.ts
+++ b/src/stores/canvasStore.ts
@@ -93,8 +93,8 @@ interface CanvasStore {
   changeIsBadgeUpgrading: (id, loading) => void
   checkIfProfileMinted: (instance: Contract, address: string, test?: boolean) => Promise<any>
   fetchCurrentCanvasDetail: (signer, walletAddress, profileAddress) => void
-  checkAndFetchCurrentWalletCanvas: (prividerOrSigner, unsignedProfileRegistryContract, walletAddress) => Promise<any>
-  fetchOthersCanvasDetail: (prividerOrSigner, othersAddress, profileAddress) => void
+  checkAndFetchCurrentWalletCanvas: (providerOrSigner, unsignedProfileRegistryContract, walletAddress) => Promise<any>
+  fetchOthersCanvasDetail: (providerOrSigner, othersAddress, profileAddress) => void
   changeProfileMintedLoading: (loading: boolean) => void
   changeProfileDetailLoading: (loading: boolean) => void
   queryUsername: () => void
@@ -187,8 +187,8 @@ const useCanvasStore = create<CanvasStore>()((set, get) => ({
       // return { profileAddress: null, minted: null }
     }
   },
-  fetchOthersCanvasDetail: async (privider, othersAddress, profileAddress) => {
-    const { name, userBadges, attachedBadges, orderedAttachedBadges, badgeOrder } = await fetchCanvasDetail(privider, othersAddress, profileAddress)
+  fetchOthersCanvasDetail: async (provider, othersAddress, profileAddress) => {
+    const { name, userBadges, attachedBadges, orderedAttachedBadges, badgeOrder } = await fetchCanvasDetail(provider, othersAddress, profileAddress)
     set({
       canvasUsername: name,
       userBadges,
@@ -199,7 +199,7 @@ const useCanvasStore = create<CanvasStore>()((set, get) => ({
   },
 
   // fetch wallet profile when viewing others canvas
-  checkAndFetchCurrentWalletCanvas: async (prividerOrSigner, unsignedProfileRegistryContract, walletAddress) => {
+  checkAndFetchCurrentWalletCanvas: async (providerOrSigner, unsignedProfileRegistryContract, walletAddress) => {
     set({
       walletDetailLoading: true,
     })
@@ -207,7 +207,7 @@ const useCanvasStore = create<CanvasStore>()((set, get) => ({
       const { minted, profileAddress } = await get().checkIfProfileMinted(unsignedProfileRegistryContract, walletAddress)
 
       if (minted) {
-        const { profileContract, name } = await queryCanvasUsername(prividerOrSigner, profileAddress)
+        const { profileContract, name } = await queryCanvasUsername(providerOrSigner, profileAddress)
         set({
           username: name,
           profileContract,