diff --git a/package.json b/package.json
index 7a6bf621..b61823cd 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "scripts": {
     "start": "vite --host",
     "dev": "vite --host",
-    "build": "tsc && NODE_OPTIONS='--max-old-space-size=8192' vite build",
+    "build": "tsc && vite build",
     "preview": "vite preview",
     "prepare": "husky install"
   },
diff --git a/src/components/BalanceUI.tsx b/src/components/BalanceUI.tsx
index 28bb0928..271f2f41 100644
--- a/src/components/BalanceUI.tsx
+++ b/src/components/BalanceUI.tsx
@@ -15,13 +15,17 @@ interface IProps {
   chain?: Chain
   isSecretToken?: boolean
   showBalanceLabel?: boolean
+  onBalanceClick?: any
+  showCurrencyEquiv?: boolean
 }
 
 export default function BalanceUI({
   token,
   chain = chains['Secret Network'],
   isSecretToken = false,
-  showBalanceLabel = true
+  showBalanceLabel = true,
+  onBalanceClick = false,
+  showCurrencyEquiv = true
 }: IProps) {
   const {
     isConnected,
@@ -88,7 +92,7 @@ export default function BalanceUI({
 
   return (
     <>
-      <div className="flex items-center gap-1.5">
+      <div className="flex items-center justify-center gap-1.5">
         {showBalanceLabel && <span className="font-bold">{`Balance: `}</span>}
 
         {/* Skeleton Loader */}
@@ -99,7 +103,22 @@ export default function BalanceUI({
         {balance !== null &&
           balance !== ('viewingKeyError' as GetBalanceError) &&
           balance !== ('GenericFetchError' as GetBalanceError) &&
-          token.name && (
+          token.name &&
+          (onBalanceClick ? (
+            <span
+              className="cursor-pointer hover:underline"
+              onClick={() => onBalanceClick(Number(BigNumber(balance).dividedBy(`1e${token.decimals}`)))} // ADD
+            >
+              <span className="font-medium font-mono">{` ${Number(
+                BigNumber(balance).dividedBy(`1e${token.decimals}`)
+              ).toLocaleString(undefined, {
+                maximumFractionDigits: token.decimals
+              })} 
+          ${token.name == 'SCRT' && isSecretToken ? 's' : ''}${token.name} ${
+            token.coingecko_id && currencyPriceString && showCurrencyEquiv ? ` (${currencyPriceString})` : ''
+          }`}</span>
+            </span>
+          ) : (
             <>
               <span className="font-medium font-mono">{` ${Number(
                 BigNumber(balance).dividedBy(`1e${token.decimals}`)
@@ -107,10 +126,10 @@ export default function BalanceUI({
                 maximumFractionDigits: token.decimals
               })} 
               ${token.name == 'SCRT' && isSecretToken ? 's' : ''}${token.name} ${
-                token.coingecko_id && currencyPriceString ? ` (${currencyPriceString})` : ''
+                token.coingecko_id && currencyPriceString && showCurrencyEquiv ? ` (${currencyPriceString})` : ''
               }`}</span>
             </>
-          )}
+          ))}
 
         {balance === ('viewingKeyError' as GetBalanceError) && (
           <button
diff --git a/src/components/FeeGrant/FeeGrant.tsx b/src/components/FeeGrant/FeeGrant.tsx
index 03d10ff6..99f2be0f 100644
--- a/src/components/FeeGrant/FeeGrant.tsx
+++ b/src/components/FeeGrant/FeeGrant.tsx
@@ -5,7 +5,7 @@ import ActionableStatus from './components/ActionableStatus'
 
 export default function FeeGrant() {
   return (
-    <div className="bg-gray-200 dark:bg-neutral-700 text-black dark:text-white p-4 rounded-xl select-none flex items-center">
+    <div className="bg-gray-200 dark:bg-neutral-700 text-black dark:text-white p-4 rounded-xl select-none flex items-center gap-4">
       <div className="flex-1">
         <Tooltip
           title={`Request Fee Grant so that you don't have to pay gas fees (up to 0.1 SCRT)`}
diff --git a/src/pages/wrap/Wrap.tsx b/src/pages/wrap/Wrap.tsx
index b94424dd..5431c0a7 100644
--- a/src/pages/wrap/Wrap.tsx
+++ b/src/pages/wrap/Wrap.tsx
@@ -4,7 +4,6 @@ import { wrapPageTitle, wrapPageDescription, wrapJsonLdSchema } from 'utils/comm
 import { Helmet } from 'react-helmet-async'
 import FeeGrantInfoModal from './components/FeeGrantInfoModal'
 import mixpanel from 'mixpanel-browser'
-import { useSearchParams } from 'react-router-dom'
 import { WrappingMode, isWrappingMode } from 'types/WrappingMode'
 import { useSecretNetworkClientStore } from 'store/secretNetworkClient'
 import Title from 'components/Title'
@@ -12,10 +11,6 @@ import WrapForm from './components/WrapForm'
 import SCRTUnwrapWarning from './components/SCRTUnwrapWarning'
 
 export function Wrap() {
-  const secretToken: Token = tokens.find((token) => token.name === 'SCRT')
-  const [selectedToken, setSelectedToken] = useState<Token>(secretToken)
-  const [wrappingMode, setWrappingMode] = useState<WrappingMode>('wrap')
-
   const { getBalance } = useSecretNetworkClientStore()
   const scrtBalance = getBalance(
     tokens.find((token) => token.name === 'SCRT'),
@@ -32,31 +27,7 @@ export function Wrap() {
     }
   }, [])
 
-  // URL params
-  const [searchParams, setSearchParams] = useSearchParams()
-  const modeUrlParam = searchParams.get('mode')
-  const tokenUrlParam = searchParams.get('token')
-
-  const isValidTokenParam = () => {
-    return tokens.find((token: Token) => token.name.toLowerCase() === tokenUrlParam.toLowerCase()) ? true : false
-  }
-
-  useEffect(() => {
-    if (isWrappingMode(modeUrlParam?.toLowerCase())) {
-      setWrappingMode(modeUrlParam.toLowerCase() as WrappingMode)
-    }
-  }, [modeUrlParam])
-
-  useEffect(() => {
-    if (tokenUrlParam && isValidTokenParam()) {
-      setSelectedToken(tokens.find((token: Token) => token.name.toLowerCase() === tokenUrlParam.toLowerCase()))
-    }
-  }, [tokenUrlParam])
-
-  const infoMsg =
-    wrappingMode === 'wrap'
-      ? `Converting publicly visible ${selectedToken.name} into its privacy-preserving equivalent Secret ${selectedToken.name}. These tokens are not publicly visible and require a viewing key`
-      : `Converting privacy-preserving Secret ${selectedToken.name} into its publicly visible equivalent ${selectedToken.name}`
+  const infoMsg = `Converting publicly visible tokens into its privacy-preserving equivalent Secret Token and vice versa. These tokens are not publicly visible and require a viewing key.`
 
   const [isFeeGrantInfoModalOpen, setIsFeeGrantInfoModalOpen] = useState(false)
 
@@ -93,9 +64,9 @@ export function Wrap() {
       />
 
       {/* Content */}
-      <div className="container w-full max-w-xl mx-auto px-4">
+      <div className="container w-full max-w-5xl mx-auto px-4">
         {/* Title: Secret Wrap / Secret Unwrap */}
-        <Title className="mb-6" title={`Secret ${wrappingMode === 'wrap' ? 'Wrap' : 'Unwrap'}`} tooltip={infoMsg} />
+        <Title className="mb-6" title={`Secret Wrap`} tooltip={infoMsg} />
         {Number(scrtBalance) === 0 && scrtBalance !== null ? <SCRTUnwrapWarning /> : null}
         {/* Content */}
         <div className="rounded-3xl px-6 py-6 bg-white border border-neutral-200 dark:border-neutral-700 dark:bg-neutral-800">
diff --git a/src/pages/wrap/components/WrapForm.tsx b/src/pages/wrap/components/WrapForm.tsx
index 9e5d5797..163c8400 100644
--- a/src/pages/wrap/components/WrapForm.tsx
+++ b/src/pages/wrap/components/WrapForm.tsx
@@ -1,391 +1,650 @@
-import { faRightLeft, faSearch } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import Select, { components } from 'react-select'
+import { useState, useMemo } from 'react'
 import BigNumber from 'bignumber.js'
-import { useFormik } from 'formik'
-import { useEffect } from 'react'
-import FeeGrant from 'components/FeeGrant/FeeGrant'
-import PercentagePicker from 'components/PercentagePicker'
-import { WrappingMode, isWrappingMode } from 'types/WrappingMode'
-import { Token, tokens } from 'utils/config'
-import { useSecretNetworkClientStore } from 'store/secretNetworkClient'
-import { wrapSchema } from 'pages/wrap/wrapSchema'
-import Tooltip from '@mui/material/Tooltip'
+import { tokens } from 'utils/config'
 import { WrapService } from 'services/wrap.service'
-import BalanceUI from 'components/BalanceUI'
-import toast from 'react-hot-toast'
-import { useSearchParams } from 'react-router-dom'
-import { Nullable } from 'types/Nullable'
+import { NotificationService } from 'services/notification.service'
+import { useSecretNetworkClientStore } from 'store/secretNetworkClient'
 import { useUserPreferencesStore } from 'store/UserPreferences'
-import { debugModeOverride } from 'utils/commons'
+import BalanceUI from 'components/BalanceUI'
+import FeeGrant from 'components/FeeGrant/FeeGrant'
 import { GetBalanceError } from 'types/GetBalanceError'
-import { NotificationService } from 'services/notification.service'
+import './wrap.scss'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faArrowLeft, faArrowRight, faQuestion } from '@fortawesome/free-solid-svg-icons'
+import { faCircle } from '@fortawesome/free-regular-svg-icons'
+import { Tooltip } from '@mui/material'
+
+export default function WrapAllTokens() {
+  const {
+    secretNetworkClient,
+    feeGrantStatus,
+    isConnected,
+    getBalance,
+    balanceMapping,
+    ibcBalanceMapping,
+    setBalanceMapping
+  } = useSecretNetworkClientStore()
 
-export default function WrapForm() {
   const { debugMode } = useUserPreferencesStore()
-  const { secretNetworkClient, feeGrantStatus, isConnected, getBalance } = useSecretNetworkClientStore()
-  const scrtBalance = getBalance(
-    tokens.find((token) => token.name === 'SCRT'),
-    false
-  )
 
-  const { theme } = useUserPreferencesStore()
-
-  const formik = useFormik<IFormValues>({
-    initialValues: {
-      amount: '',
-      token: tokens.find((token: Token) => token.name === 'SCRT'),
-      wrappingMode: 'wrap'
-    },
-    validationSchema: wrapSchema,
-    validateOnBlur: false,
-    validateOnChange: true,
-    onSubmit: async (values) => {
-      const toastId = NotificationService.notify(
-        `Waiting to ${formik.values.wrappingMode === 'wrap' ? 'wrap' : 'unwrap'} ${formik.values.amount} ${
-          formik.values.token.name
-        }...`,
-        'loading'
-      )
-
-      try {
-        const res = WrapService.performWrapping({
-          ...values,
-          secretNetworkClient,
-          feeGrantStatus
-        })
-        res
-          .then(() => {
-            NotificationService.notify(
-              `${formik.values.wrappingMode === 'wrap' ? 'Wrapping' : 'Unwrapping'} of ${formik.values.amount} ${
-                formik.values.token.name
-              } successful`,
-              'success',
-              toastId
-            )
-          })
-          .catch((error) => {
-            console.error(error)
-            NotificationService.notify(
-              `${formik.values.wrappingMode === 'wrap' ? 'Wrapping' : 'Unwrapping'} of ${formik.values.amount} ${
-                formik.values.token.name
-              } unsuccessful: ${error}`,
-              'error',
-              toastId
-            )
-          })
-      } catch (error: any) {
-        console.error(error)
-        NotificationService.notify(
-          `${formik.values.wrappingMode === 'wrap' ? 'Wrapping' : 'Unwrapping'} of ${formik.values.amount} ${
-            formik.values.token.name
-          } unsuccessful: ${error}`,
-          'error',
-          toastId
-        )
-      }
+  // Tracks user's choice (wrap/unwrap) and amount for each token.
+  const [batchOperations, setBatchOperations] = useState<{
+    [tokenName: string]: {
+      direction: 'wrap' | 'unwrap'
+      amount: string
     }
-  })
+  }>({})
+
+  // Toggles for filtering tokens.
+  const [hideZeroBalance, setHideZeroBalance] = useState(true)
+  const [hideNoViewingKey, setHideNoViewingKey] = useState(true)
+
+  // Toggle to show an amount input field (for "pro" users).
+  const [showAmountInput, setShowAmountInput] = useState(false)
 
-  function handleTokenSelect(token: Token) {
-    formik.setFieldValue('token', token)
-    formik.setFieldValue('amount', '')
-    formik.setFieldTouched('amount', false)
+  // New state to control whether the full list is shown or just the first 5 tokens.
+  const [expanded, setExpanded] = useState(false)
+
+  // Fetch a balance safely (returns a BigNumber, 'viewingKeyError', 'GenericFetchError', or null).
+  function getBalanceSpecial(token: (typeof tokens)[number], isSecretToken: boolean) {
+    const result = getBalance(token, isSecretToken)
+    if (result === 'viewingKeyError') return 'viewingKeyError' as GetBalanceError
+    if (result === 'GenericFetchError') return 'GenericFetchError' as GetBalanceError
+    if (result instanceof BigNumber) return result
+    return null
   }
 
-  // URL params
-  const [searchParams, setSearchParams] = useSearchParams()
-  const wrappingModeUrlParam = searchParams.get('mode')
-  const tokenUrlParam = searchParams.get('token')
+  // Check if a token has a valid viewing key.
+  function hasViewingKey(token: (typeof tokens)[number]): boolean {
+    const secretBalance = getBalanceSpecial(token, true)
+    if (secretBalance === 'viewingKeyError') return false
+    if (secretBalance === 'GenericFetchError') return false
+    if (secretBalance === null) return false
+    return true
+  }
 
-  useEffect(() => {
-    // sets token by searchParam
-    let foundToken: Nullable<Token> = null
-    if (tokenUrlParam) {
-      foundToken = tokens.find((token: Token) => token.name.toLowerCase() === tokenUrlParam)
-    }
-    if (foundToken) {
-      formik.setFieldValue('token', foundToken)
-    }
+  // Filter tokens based on toggles (hide zero balance, hide no viewing key).
+  const filteredTokens = useMemo(() => {
+    return tokens.filter((token) => {
+      if (hideNoViewingKey && !hasViewingKey(token)) {
+        return false
+      }
+      if (hideZeroBalance) {
+        const unwrapped = getBalanceSpecial(token, false)
+        const secret = getBalanceSpecial(token, true)
+
+        const unwrappedBN = unwrapped instanceof BigNumber ? unwrapped : new BigNumber(0)
+        const secretBN = secret instanceof BigNumber ? secret : new BigNumber(0)
+        const total = unwrappedBN.plus(secretBN)
+
+        if (total.isZero()) {
+          return false
+        }
+      }
+      return true
+    })
+  }, [hideZeroBalance, hideNoViewingKey, balanceMapping, ibcBalanceMapping])
+
+  const tokensToDisplay = useMemo(() => {
+    // Sort filtered tokens by unwrapped (public) balance descending.
+    const sortedTokens = [...filteredTokens].sort((a, b) => {
+      const balanceAResult = getBalanceSpecial(a, false)
+      const balanceBResult = getBalanceSpecial(b, false)
+      const balanceA = balanceAResult instanceof BigNumber ? balanceAResult : new BigNumber(0)
+      const balanceB = balanceBResult instanceof BigNumber ? balanceBResult : new BigNumber(0)
+      return balanceB.minus(balanceA).toNumber()
+    })
+
+    // If expanded, display all tokens.
+    if (expanded) return sortedTokens
+
+    // Otherwise, take the top 5 tokens.
+    const topTokens = sortedTokens.slice(0, 5)
+
+    // Also include any tokens that have been selected via batchOperations.
+    const selectedTokens = sortedTokens.filter((token) => batchOperations[token.name])
+    const unionTokens = [...topTokens]
+    selectedTokens.forEach((token) => {
+      if (!unionTokens.find((t) => t.name === token.name)) {
+        unionTokens.push(token)
+      }
+    })
+    return unionTokens
+  }, [expanded, filteredTokens, batchOperations])
+
+  // Update the amount value for a given token.
+  const updateAmount = (tokenName: string, amount: string) => {
+    setBatchOperations((prev) => ({
+      ...prev,
+      [tokenName]: {
+        ...prev[tokenName],
+        amount
+      }
+    }))
+  }
+
+  // When clicking a balance, set both the amount and the mode (wrap or unwrap).
+  const handleBalanceClick = (tokenName: string, balanceStr: string, mode: 'wrap' | 'unwrap') => {
+    setBatchOperations((prev) => ({
+      ...prev,
+      [tokenName]: {
+        amount: balanceStr,
+        direction: mode
+      }
+    }))
+  }
+
+  // Toggle the operation direction between 'wrap', 'unwrap', and 'nothing'.
+  const toggleDirection = (tokenName: string) => {
+    setBatchOperations((prev: any) => {
+      const token = tokens.find((t) => t.name === tokenName)
+      if (!token) return prev
+
+      const unwrappedBalance = getBalanceSpecial(token, false)
+      const wrappedBalance = getBalanceSpecial(token, true)
+
+      // If token is not in batchOperations yet, add it with default wrap direction
+      if (!prev[tokenName]) {
+        // Default to wrap if there's unwrapped balance, otherwise unwrap
+        const defaultDirection = unwrappedBalance instanceof BigNumber && !unwrappedBalance.isZero() ? 'wrap' : 'unwrap'
+
+        // Get the appropriate balance amount based on the chosen direction
+        const balanceToUse = defaultDirection === 'wrap' ? unwrappedBalance : wrappedBalance
+
+        // Calculate the human-readable amount if we have a valid balance
+        let amountToUse = ''
+        if (balanceToUse instanceof BigNumber && !balanceToUse.isZero()) {
+          const decimals = token.decimals || 6
+          amountToUse = balanceToUse.dividedBy(new BigNumber(10).pow(decimals)).toString()
+        }
+
+        return {
+          ...prev,
+          [tokenName]: {
+            direction: defaultDirection,
+            amount: amountToUse
+          }
+        }
+      }
+
+      // Define the next direction in the cycle: wrap -> unwrap -> nothing -> wrap
+      let newDirection
+      if (prev[tokenName].direction === 'wrap') {
+        newDirection = 'unwrap'
+      } else if (prev[tokenName].direction === 'unwrap') {
+        // When going to "nothing", remove the token from batch operations entirely
+        const newOps = { ...prev }
+        delete newOps[tokenName]
+        return newOps
+      } else {
+        newDirection = 'wrap'
+      }
+
+      // Get the appropriate balance amount based on the chosen direction
+      let newAmount = newDirection === 'wrap' ? unwrappedBalance : wrappedBalance
+
+      let amountToUse = ''
+      if (newAmount instanceof BigNumber) {
+        const decimals = token.decimals || 6
+        amountToUse = newAmount.dividedBy(new BigNumber(10).pow(decimals)).toString()
+      }
 
-    // sets wrappingMode by searchParam
-    if (wrappingModeUrlParam && isWrappingMode(wrappingModeUrlParam)) {
-      formik.setFieldValue('wrappingMode', wrappingModeUrlParam)
-      formik.setFieldTouched('wrappingMode')
+      return {
+        ...prev,
+        [tokenName]: {
+          ...prev[tokenName],
+          direction: newDirection,
+          amount: amountToUse
+        }
+      }
+    })
+  }
+
+  // Handle checkbox change for a token
+  const handleChange = (tokenName: string, checked: boolean) => {
+    if (checked) {
+      // When checking the box, add the token to batch operations with default direction
+      // and a meaningful amount based on available balance
+      const token = tokens.find((t) => t.name === tokenName)
+      if (!token) return
+      // Determine which balance to use based on the direction we'll choose
+      const unwrappedBalance = getBalanceSpecial(token, false)
+      const wrappedBalance = getBalanceSpecial(token, true)
+
+      // Default to wrap if there's unwrapped balance, otherwise unwrap
+      const defaultDirection = unwrappedBalance instanceof BigNumber && !unwrappedBalance.isZero() ? 'wrap' : 'unwrap'
+
+      // Get the appropriate balance amount based on the chosen direction
+      const balanceToUse = defaultDirection === 'wrap' ? unwrappedBalance : wrappedBalance
+
+      // Calculate the human-readable amount if we have a valid balance
+      let amountToUse = ''
+      if (balanceToUse instanceof BigNumber && !balanceToUse.isZero()) {
+        const decimals = token.decimals || 6
+        amountToUse = balanceToUse.dividedBy(new BigNumber(10).pow(decimals)).toString()
+      }
+
+      setBatchOperations((prev) => ({
+        ...prev,
+        [tokenName]: {
+          direction: defaultDirection,
+          amount: amountToUse
+        }
+      }))
+    } else {
+      // When unchecking, remove the token from batch operations
+      setBatchOperations((prev) => {
+        const newOps = { ...prev }
+        delete newOps[tokenName]
+        return newOps
+      })
     }
-  }, [])
+  }
+
+  // Perform the entire batch transaction.
+  const handlePerformBatch = async () => {
+    if (!isConnected) return
+
+    const items = []
+    for (const tokenName in batchOperations) {
+      const op = batchOperations[tokenName]
+      // Ensure a valid amount is specified.
+      if (op && op.amount && parseFloat(op.amount) > 0) {
+        // Find the corresponding token from the full tokens array.
+        const token = tokens.find((t) => t.name === tokenName)
+        if (token.name === 'SCRT' && op.direction === 'wrap') {
+          const rawBalance = getBalanceSpecial(token, false)
+          if (rawBalance instanceof BigNumber) {
+            const amount = parseFloat(rawBalance.dividedBy(`1e${token.decimals}`).toString())
+            const requestedAmount = parseFloat(op.amount)
+            const minReserve = 0.5
 
-  useEffect(() => {
-    var params = {}
-    if (formik.values.wrappingMode) {
-      params = { ...params, mode: formik.values.wrappingMode.toLowerCase() }
+            // Calculate available amount while maintaining minimum reserve
+            const safeAmount = Math.max(0, amount - minReserve)
+            const adjustedAmount = Math.min(requestedAmount, safeAmount)
+
+            if (adjustedAmount > 0) {
+              items.push({
+                token,
+                amount: adjustedAmount.toString(),
+                wrappingMode: op.direction
+              })
+            }
+          }
+        } else if (token) {
+          items.push({
+            token,
+            amount: op.amount,
+            wrappingMode: op.direction // 'wrap' or 'unwrap'
+          })
+        }
+      }
     }
-    if (formik.values.token) {
-      params = { ...params, token: formik.values.token.name.toLowerCase() }
+
+    if (!items.length) {
+      NotificationService.notify('No valid items selected for batch transaction', 'error')
+      return
     }
-    setSearchParams(params)
-  }, [formik.values.wrappingMode, formik.values.token])
 
-  function toggleWrappingMode() {
-    if (formik.values.wrappingMode === 'wrap') {
-      formik.setFieldValue('wrappingMode', 'unwrap')
-    } else {
-      formik.setFieldValue('wrappingMode', 'wrap')
+    const toastId = NotificationService.notify('Executing batch transaction...', 'loading')
+    try {
+      await WrapService.performBatchWrapping({
+        items,
+        secretNetworkClient,
+        feeGrantStatus
+      })
+      NotificationService.notify('Batch transaction successful!', 'success', toastId)
+      setBalanceMapping()
+      setBatchOperations({})
+    } catch (error) {
+      console.error(error)
+      NotificationService.notify(`Batch transaction failed: ${error}`, 'error', toastId)
     }
   }
 
-  const secretToken: Token = tokens.find((token) => token.name === 'SCRT')
+  // "Wrap All" button: fill all unwrapped balances into batch operations for wrapping.
+  const handleWrapAll = () => {
+    const newBatchOperations = { ...batchOperations }
 
-  useEffect(() => {
-    if (Number(scrtBalance) === 0 && scrtBalance !== null) {
-      formik.setFieldValue('wrappingMode', 'unwrap')
-      formik.setFieldValue('token', secretToken)
-    }
-  }, [scrtBalance])
-
-  function setAmountByPercentage(percentage: number) {
-    const balance = getBalance(formik.values.token, formik.values.wrappingMode === 'unwrap')
-
-    if (
-      (balance !== ('viewingKeyError' as GetBalanceError) || balance !== ('GenericFetchError' as GetBalanceError)) &&
-      balance !== null
-    ) {
-      const scaledAmount = (balance as BigNumber)
-        .times(percentage / 100)
-        .minus((balance as BigNumber).times(percentage / 100).gt(1) ? 1 : 0)
-        .dividedBy(`1e${formik.values.token.decimals}`)
-        .decimalPlaces(formik.values.token.decimals, BigNumber.ROUND_DOWN)
-
-      formik.setFieldValue('amount', scaledAmount.toFixed(formik.values.token.decimals))
+    for (const token of filteredTokens) {
+      if (token.name === 'SCRT') {
+        continue
+      }
+      const rawBalance = getBalanceSpecial(token, false)
+      if (rawBalance instanceof BigNumber) {
+        const amount = rawBalance.dividedBy(`1e${token.decimals}`).toString()
+        newBatchOperations[token.name] = {
+          direction: 'wrap',
+          amount
+        }
+      }
     }
 
-    formik.setFieldTouched('amount', true)
+    setBatchOperations(newBatchOperations)
   }
 
-  // auto focus on connect
-  useEffect(() => {
-    if (isConnected) {
-      document.getElementById('amount-top').focus()
+  // "Unwrap All" button: fill all wrapped balances into batch operations for unwrapping.
+  const handleUnwrapAll = () => {
+    const newBatchOperations = { ...batchOperations }
+
+    for (const token of filteredTokens) {
+      if (token.name === 'SCRT') {
+        continue
+      }
+      const wrappedBalance = getBalanceSpecial(token, true)
+      if (wrappedBalance instanceof BigNumber) {
+        const amount = wrappedBalance.dividedBy(`1e${token.decimals}`).toString()
+        newBatchOperations[token.name] = {
+          direction: 'unwrap',
+          amount
+        }
+      }
     }
-  }, [isConnected])
-
-  const customTokenFilterOption = (option: any, inputValue: string) => {
-    const tokenName = option.data.name.toLowerCase()
-    return (
-      tokenName?.toLowerCase().includes(inputValue?.toLowerCase()) ||
-      ('s' + tokenName)?.toLowerCase().includes(inputValue?.toLowerCase()) ||
-      ('secret' + tokenName)?.toLowerCase().includes(inputValue?.toLowerCase())
-    )
+
+    setBatchOperations(newBatchOperations)
   }
 
-  const customTokenSelectStyle = {
-    input: (styles: any) => ({
-      ...styles,
-      color: theme === 'light' ? 'black !important' : 'white !important',
-      fontFamily: 'RundDisplay, sans-serif',
-      fontWeight: 600,
-      fontSize: '14px'
-    }),
-    container: (container: any) => ({
-      ...container,
-      width: 'auto',
-      minWidth: '30%'
+  // A small summary to show how many tokens are set to wrap vs unwrap, and total amounts.
+  const summary = useMemo(() => {
+    let wrapCount = 0
+    let unwrapCount = 0
+
+    Object.values(batchOperations).forEach((op) => {
+      if (op && op.amount && parseFloat(op.amount) > 0) {
+        if (op.direction === 'wrap') {
+          wrapCount++
+        } else if (op.direction === 'unwrap') {
+          unwrapCount++
+        }
+      }
     })
-  }
 
-  const CustomControl = ({ children, ...props }: any) => {
-    const menuIsOpen = props.selectProps.menuIsOpen
-    return (
-      <components.Control {...props}>
-        <div className="flex items-center justify-end w-full">
-          {menuIsOpen && <FontAwesomeIcon icon={faSearch} className="w-5 h-5 ml-2" />}
-          {children}
-        </div>
-      </components.Control>
-    )
-  }
+    return {
+      wrapCount,
+      unwrapCount
+    }
+  }, [batchOperations])
 
-  interface IFormValues {
-    amount: string
-    token: Token
-    wrappingMode: WrappingMode
-  }
+  const isLoading = balanceMapping == null && ibcBalanceMapping == null
 
   return (
-    <div>
-      <form onSubmit={formik.handleSubmit} className="w-full flex flex-col gap-4">
-        {/* *** From *** */}
-        <div className="bg-gray-200 dark:bg-neutral-700 p-4 rounded-xl">
-          {/* Title Bar */}
-          <div className="flex flex-col sm:flex-row justify-between items-center mb-2 text-center sm:text-left">
-            <span className="font-extrabold">From</span>
-            {formik.touched.amount && formik.errors.amount && (
-              <span className="text-red-500 dark:text-red-500 text-xs font-normal">{formik.errors.amount}</span>
-            )}
+    <div className="max-w-5xl mx-auto px-4 py-4">
+      {/* Top Toggles & Global Actions */}
+      <div className="flex flex-wrap items-center justify-between gap-4 mb-4">
+        {/* Left: Toggles */}
+        <div className="flex flex-wrap items-center gap-4">
+          <div className="flex items-center gap-1">
+            <input type="checkbox" checked={hideZeroBalance} onChange={(e) => setHideZeroBalance(e.target.checked)} />
+            <span>Hide tokens with 0 balance</span>
           </div>
-
-          {/* Input Field */}
-          <div className="flex" id="fromInputWrapper">
-            <Select
-              isDisabled={!isConnected}
-              name="tokenName"
-              options={tokens.sort((a: Token, b: Token) => a.name.localeCompare(b.name))}
-              value={formik.values.token}
-              onChange={(token: Token) => handleTokenSelect(token)}
-              onBlur={formik.handleBlur}
-              isSearchable={true}
-              components={{ Control: CustomControl }}
-              filterOption={customTokenFilterOption}
-              styles={customTokenSelectStyle}
-              formatOptionLabel={(token: Token) => (
-                <div className="flex items-center">
-                  <img
-                    src={`/img/assets/${token.image}`}
-                    alt={`${token.name} logo`}
-                    className="w-6 h-6 mr-2 rounded-full"
-                  />
-                  <span className="font-semibold text-sm">
-                    {formik.values.wrappingMode === 'unwrap' && 'Secret '}
-                    {token.name}
-                  </span>
-                </div>
-              )}
-              className="react-select-wrap-container"
-              classNamePrefix="react-select-wrap"
-            />
-            <input
-              id="amount-top"
-              name="amount"
-              type="number"
-              value={formik.values.amount}
-              onChange={formik.handleChange}
-              onBlur={formik.handleBlur}
-              className={
-                '[-moz-appearance:_textfield] [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none dark:placeholder-neutral-600 text-right focus:z-10 block flex-1 min-w-0 w-full bg-white dark:bg-neutral-800 text-black dark:text-white px-4 rounded-r-lg disabled:placeholder-neutral-300 dark:disabled:placeholder-neutral-700 transition-colors font-medium focus:outline-0 focus-visible:ring-2 focus-visible:ring-sky-500/60' +
-                (formik.touched.amount && formik.errors.amount ? '  border border-red-500 dark:border-red-500' : '')
-              }
-              placeholder="0"
-              disabled={!isConnected}
-            />
+          <div className="flex items-center gap-1">
+            <input type="checkbox" checked={hideNoViewingKey} onChange={(e) => setHideNoViewingKey(e.target.checked)} />
+            <span>Hide tokens without viewing key</span>
+          </div>
+          <div className="flex items-center gap-1">
+            <input type="checkbox" checked={showAmountInput} onChange={(e) => setShowAmountInput(e.target.checked)} />
+            <span>Set custom amount</span>
           </div>
-
-          {/* Balance | [25%|50%|75%|Max] */}
-          {(Number(scrtBalance) !== 0 && scrtBalance !== null) || formik.values.wrappingMode !== 'unwrap' ? (
-            <div className="flex flex-col sm:flex-row items-center space-y-2 sm:space-y-0 mt-2">
-              <div className="flex-1 text-xs">
-                <BalanceUI token={formik.values.token} isSecretToken={formik.values.wrappingMode === 'unwrap'} />
-              </div>
-              <div className="sm:flex-initial text-xs">
-                <PercentagePicker setAmountByPercentage={setAmountByPercentage} disabled={!isConnected} />
-              </div>
-            </div>
-          ) : null}
         </div>
-        {/* Wrapping Mode Switch */}
-        <div className="text-center">
-          <Tooltip
-            disableHoverListener={!isConnected}
-            title={`Switch to ${formik.values.wrappingMode === 'wrap' ? 'Unwrapping' : 'Wrapping'}`}
-            placement="right"
-            arrow
+        {/* Right: Global Actions */}
+        <div className="flex items-center gap-4">
+          <button
+            onClick={handleWrapAll}
+            className="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-1 px-3 rounded"
+            disabled={!isConnected}
+            title="Auto-fill all unwrapped balances for wrapping"
+          >
+            Wrap All
+          </button>
+          <button
+            onClick={handleUnwrapAll}
+            className="bg-red-500 hover:bg-red-600 text-white font-semibold py-1 px-3 rounded"
+            disabled={!isConnected}
+            title="Auto-fill all wrapped balances for unwrapping"
           >
-            <>
-              <button
-                onClick={toggleWrappingMode}
-                type="button"
-                disabled={!isConnected}
-                className={
-                  'inline-block bg-gray-200 dark:bg-neutral-700 px-3 py-2 text-cyan-500 dark:text-cyan-500 transition-colors rounded-xl disabled:text-neutral-500 dark:disabled:text-neutral-500 focus:outline-0 focus:ring-2 ring-sky-500/40' +
-                  (isConnected ? ' hover:text-cyan-600 dark:hover:text-cyan-300' : '')
-                }
-              >
-                <FontAwesomeIcon icon={faRightLeft} className="fa-rotate-90" />
-              </button>
-            </>
-          </Tooltip>
+            Unwrap All
+          </button>
         </div>
+      </div>
 
-        <div className="bg-gray-200 dark:bg-neutral-700 p-4 rounded-xl">
-          <div className="mb-2 text-center sm:text-left">
-            <span className="font-extrabold">To</span>
-          </div>
-
-          <div className="flex">
-            <Select
-              isDisabled={!isConnected}
-              name="tokenName"
-              options={tokens.sort((a, b) => a.name.localeCompare(b.name))}
-              value={formik.values.token}
-              onChange={(token: Token) => handleTokenSelect(token)}
-              onBlur={formik.handleBlur}
-              isSearchable={true}
-              components={{ Control: CustomControl }}
-              filterOption={customTokenFilterOption}
-              styles={customTokenSelectStyle}
-              formatOptionLabel={(token: Token) => (
-                <div className="flex items-center">
-                  <img
-                    src={`/img/assets/${token.image}`}
-                    alt={`${token.name} logo`}
-                    className="w-6 h-6 mr-2 rounded-full"
-                  />
-                  <span className="font-semibold text-sm">
-                    {formik.values.wrappingMode === 'wrap' && 'Secret '}
-                    {token.name}
-                  </span>
-                </div>
+      {/* Main Table */}
+      <div className="overflow-x-auto bg-gray-200 dark:bg-neutral-700 p-4 rounded-xl">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="border-b border-gray-300 dark:border-neutral-600 text-base">
+              <th className="py-2 text-center">Token</th>
+              <th className="py-2 text-center">Unwrapped Balance</th>
+              <th className="py-2 text-center">
+                Direction
+                <Tooltip
+                  title={
+                    'Wrapping (->) means converting a publicly visible token into a Secret version with confidential features. Unwrapping (<-) converts it back to the public version.'
+                  }
+                  placement="bottom"
+                  arrow
+                >
+                  <FontAwesomeIcon icon={faQuestion} className="ml-1 text-gray-400 cursor-pointer" />
+                </Tooltip>
+              </th>
+              {showAmountInput && (
+                <>
+                  <th className="py-2 text-center">Amount</th>
+                  <th className="py-2 text-center">
+                    Direction
+                    <Tooltip
+                      title={
+                        'Wrapping (->) means converting a publicly visible token into a Secret version with confidential features. Unwrapping (<-) converts it back to the public version.'
+                      }
+                      placement="bottom"
+                      arrow
+                    >
+                      <FontAwesomeIcon icon={faQuestion} className="ml-1 text-gray-400 cursor-pointer" />
+                    </Tooltip>
+                  </th>
+                </>
               )}
-              className="react-select-wrap-container"
-              classNamePrefix="react-select-wrap"
-            />
-            <input
-              name="amount"
-              type="number"
-              value={formik.values.amount}
-              onChange={formik.handleChange}
-              onBlur={formik.handleBlur}
-              className={
-                '[-moz-appearance:_textfield] [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none dark:placeholder-neutral-600 text-right focus:z-10 block flex-1 min-w-0 w-full bg-white dark:bg-neutral-800 text-black dark:text-white px-4 rounded-r-lg disabled:placeholder-neutral-300 dark:disabled:placeholder-neutral-700 transition-colors font-medium focus:outline-0 focus-visible:ring-2 ring-sky-500/60'
-              }
-              placeholder="0"
-              disabled={!isConnected}
-            />
+              <th className="py-2 text-center">Wrapped Balance</th>
+            </tr>
+          </thead>
+          <tbody>
+            {isLoading
+              ? Array.from({ length: 5 }).map((_, idx) => (
+                  <tr key={idx} className="border-b border-gray-100 dark:border-neutral-600 last:border-0">
+                    <td className="py-3">
+                      <div className="flex items-center gap-2">
+                        <input type="checkbox" checked={false} />
+                        <div className="w-12 h-12 bg-gray-300 dark:bg-neutral-600 rounded-full animate-pulse" />
+                        <div className="font-semibold bg-gray-300 dark:bg-neutral-600 rounded animate-pulse w-14 h-6" />
+                      </div>
+                    </td>
+                    <td>
+                      <div className="bg-gray-300 dark:bg-neutral-600 animate-pulse rounded w-20 h-6 mx-auto" />
+                    </td>
+                    <td className="text-center">
+                      <button
+                        disabled
+                        className="p-2 rounded border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800"
+                      >
+                        <div className="flex items-center justify-center w-6 h-6">
+                          <FontAwesomeIcon icon={faCircle} size="xl" className="text-gray-600" />
+                        </div>
+                      </button>
+                    </td>
+                    {showAmountInput && (
+                      <td className="text-center">
+                        <div className="bg-gray-300 dark:bg-neutral-600 animate-pulse rounded w-20 h-6 mx-auto" />
+                      </td>
+                    )}
+                    <td>
+                      <div className="bg-gray-300 dark:bg-neutral-600 animate-pulse rounded w-20 h-6 mx-auto" />
+                    </td>
+                  </tr>
+                ))
+              : tokensToDisplay.map((token) => {
+                  return (
+                    <tr key={token.name} className="border-b border-gray-100 dark:border-neutral-600 last:border-0">
+                      {/* Token Info with Checkbox */}
+                      <td className="py-3">
+                        <div className="flex items-center gap-2">
+                          <input
+                            type="checkbox"
+                            className="form-checkbox"
+                            checked={!!batchOperations[token.name]}
+                            onChange={(e) => handleChange(token.name, e.target.checked)}
+                            disabled={!isConnected || !token.address}
+                          />
+                          <img
+                            src={`/img/assets/${token.image}`}
+                            alt={`${token.name} logo`}
+                            className="w-12 h-12 rounded-full"
+                          />
+                          <div className="font-semibold justify-center text-base">{token.name}</div>
+                        </div>
+                      </td>
+
+                      {/* Unwrapped Balance (clickable) */}
+                      <td>
+                        <BalanceUI
+                          token={token}
+                          isSecretToken={false}
+                          showBalanceLabel={false}
+                          onBalanceClick={(balanceStr: string) => handleBalanceClick(token.name, balanceStr, 'wrap')}
+                          showCurrencyEquiv={false}
+                        />
+                      </td>
+
+                      {/* Direction Toggle Button*/}
+                      <td className="text-center">
+                        <button
+                          onClick={() => toggleDirection(token.name)}
+                          disabled={!isConnected || !token.address}
+                          className="p-2 rounded border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 hover:bg-gray-100 dark:hover:bg-neutral-700"
+                          title={
+                            !batchOperations[token.name]
+                              ? 'No direction selected (click to set to Wrap)'
+                              : batchOperations[token.name]?.direction === 'wrap'
+                                ? 'Currently set to Wrap (click to switch to Unwrap)'
+                                : 'Currently set to Unwrap (click to remove from batch)'
+                          }
+                        >
+                          {!batchOperations[token.name] ? (
+                            <div className="flex items-center justify-center w-6 h-6">
+                              <FontAwesomeIcon icon={faCircle} size="xl" className="text-gray-600" />
+                            </div>
+                          ) : batchOperations[token.name]?.direction === 'wrap' ? (
+                            <div className="flex items-center justify-center w-6 h-6">
+                              <FontAwesomeIcon icon={faArrowRight} size="xl" />
+                            </div>
+                          ) : (
+                            <div className="flex items-center justify-center w-6 h-6">
+                              <FontAwesomeIcon icon={faArrowLeft} size="xl" />
+                            </div>
+                          )}
+                        </button>
+                      </td>
+
+                      {/* Amount Input (optional) */}
+                      {showAmountInput && (
+                        <>
+                          <td className="text-center">
+                            <input
+                              type="number"
+                              className="no-spinner text-center w-[90px] rounded px-2 py-1 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600"
+                              value={batchOperations[token.name]?.amount || ''}
+                              onChange={(e) => updateAmount(token.name, e.target.value)}
+                              placeholder=""
+                              disabled={!isConnected || !token.address}
+                            />
+                          </td>
+
+                          <td className="text-center">
+                            <button
+                              onClick={() => toggleDirection(token.name)}
+                              disabled={!isConnected || !token.address}
+                              className="p-2 rounded border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 hover:bg-gray-100 dark:hover:bg-neutral-700"
+                              title={
+                                !batchOperations[token.name]?.direction
+                                  ? 'Click to toggle to Wrap'
+                                  : batchOperations[token.name]?.direction === 'wrap'
+                                    ? 'Currently set to Wrap (click to switch to Unwrap)'
+                                    : 'Currently set to Unwrap (click to switch to Wrap)'
+                              }
+                            >
+                              {!batchOperations[token.name] ? (
+                                <div className="flex items-center justify-center w-6 h-6">
+                                  <FontAwesomeIcon icon={faCircle} size="xl" className="text-gray-600" />
+                                </div>
+                              ) : batchOperations[token.name]?.direction === 'wrap' ? (
+                                <div className="flex items-center justify-center w-6 h-6">
+                                  <FontAwesomeIcon icon={faArrowRight} size="xl" />
+                                </div>
+                              ) : (
+                                <div className="flex items-center justify-center w-6 h-6">
+                                  <FontAwesomeIcon icon={faArrowLeft} size="xl" />
+                                </div>
+                              )}
+                            </button>
+                          </td>
+                        </>
+                      )}
+
+                      {/* Wrapped Balance (clickable) */}
+                      <td>
+                        <BalanceUI
+                          token={token}
+                          isSecretToken={true}
+                          showBalanceLabel={false}
+                          onBalanceClick={(balanceStr: string) => handleBalanceClick(token.name, balanceStr, 'unwrap')}
+                          showCurrencyEquiv={false}
+                        />
+                      </td>
+                    </tr>
+                  )
+                })}
+          </tbody>
+        </table>
+
+        {/* Toggle button to expand/collapse the full token list */}
+        {!isLoading && filteredTokens.length > 5 && (
+          <div className="border-t border-gray-300 mt-2 pt-2 text-center">
+            <button onClick={() => setExpanded(!expanded)} className="text-blue-500 hover:underline">
+              {expanded ? 'Show less' : 'Show all tokens'}
+            </button>
           </div>
-          {(Number(scrtBalance) !== 0 && scrtBalance !== null) || formik.values.wrappingMode !== 'wrap' ? (
-            <div className="flex-1 text-xs mt-3 text-center sm:text-left h-[1rem]">
-              <BalanceUI
-                token={formik.values.token}
-                isSecretToken={
-                  Number(scrtBalance) !== 0 && scrtBalance !== null && formik.values.wrappingMode === 'wrap'
-                }
-              />
-            </div>
-          ) : null}
+        )}
+      </div>
+
+      {/* Summary Row (Optional) */}
+      {!isLoading && (
+        <div className="mt-4 p-3 bg-gray-100 dark:bg-neutral-800 rounded">
+          <p className="font-semibold mb-2">Transaction Summary</p>
+          <p>{`Selected ${summary.wrapCount} token(s) to wrap and ${summary.unwrapCount} token(s) to unwrap.`}</p>
         </div>
+      )}
 
-        {/* Fee Grant */}
-        <FeeGrant />
+      {/* Bottom Actions */}
+      <div className="flex flex-col sm:flex-row items-center justify-between mb-5 my-5">
+        <div className="flex flex-row items-center gap-4">
+          <button
+            onClick={handlePerformBatch}
+            disabled={!isConnected}
+            className="enabled:bg-gradient-to-r enabled:from-cyan-600 enabled:to-purple-600 enabled:hover:from-cyan-500 enabled:hover:to-purple-500 text-white font-extrabold py-4 px-9 rounded-lg disabled:bg-neutral-500"
+          >
+            Perform Batch Transaction
+          </button>
+        </div>
+        <div>
+          <FeeGrant />
+        </div>
+      </div>
 
-        {/* Submit Button */}
-        <button
-          className={
-            'enabled:bg-gradient-to-r enabled:from-cyan-600 enabled:to-purple-600 enabled:hover:from-cyan-500 enabled:hover:to-purple-500 transition-colors text-white font-extrabold py-3 w-full rounded-lg disabled:bg-neutral-500 focus:outline-none focus-visible:ring-4 ring-sky-500/40'
-          }
-          disabled={!isConnected}
-          type="submit"
-        >
-          {`Execute ${formik.values.wrappingMode === 'wrap' ? 'Wrap' : 'Unwrap'}`}
-        </button>
-
-        {/* Debug Info */}
-        {debugMode ||
-          (debugModeOverride && (
-            <div className="text-sky-500 text-xs p-2 bg-blue-500/20 rounded">
-              <div className="mb-4 font-semibold">Debug Info</div>
-              formik.errors: {JSON.stringify(formik.errors)}
-            </div>
-          ))}
-      </form>
+      {/* Debug Info (optional) */}
+      {debugMode && (
+        <div className="text-sky-500 text-xs p-2 bg-blue-500/20 rounded mt-4">
+          <div className="mb-2 font-semibold">Debug Info (batchOperations):</div>
+          <pre>{JSON.stringify(batchOperations, null, 2)}</pre>
+        </div>
+      )}
     </div>
   )
 }
diff --git a/src/pages/wrap/components/wrap.scss b/src/pages/wrap/components/wrap.scss
new file mode 100644
index 00000000..fe5db158
--- /dev/null
+++ b/src/pages/wrap/components/wrap.scss
@@ -0,0 +1,9 @@
+.no-spinner::-webkit-inner-spin-button,
+.no-spinner::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.no-spinner {
+  -moz-appearance: textfield;
+}
diff --git a/src/pages/wrap/wrapSchema.ts b/src/pages/wrap/wrapSchema.ts
deleted file mode 100644
index f71ebd97..00000000
--- a/src/pages/wrap/wrapSchema.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as yup from 'yup'
-import { isWrappingMode } from 'types/WrappingMode'
-import { tokens } from 'utils/config'
-
-export const wrapSchema = yup.object().shape({
-  amount: yup
-    .number()
-    .typeError('Please enter a valid amount')
-    .required('Please enter a valid amount')
-    .test('min-amount', 'Please enter a valid amount', function (value) {
-      const { token } = this.parent
-      if (token && typeof token.decimals === 'number') {
-        const minAmount = Math.pow(10, -token.decimals)
-        if (value < minAmount) {
-          return this.createError({
-            message: `Please enter an amount of at least ${minAmount}`
-          })
-        }
-      }
-      return true
-    }),
-  token: yup.mixed().required('Token is required'),
-  wrappingMode: yup
-    .string()
-    .test('isWrappingMode', 'Invalid Wrapping Mode', (value) => isWrappingMode(value))
-    .required('Please pick a Wrapping Mode')
-})
diff --git a/src/services/wrap.service.ts b/src/services/wrap.service.ts
index 76cb6a7f..673e0475 100644
--- a/src/services/wrap.service.ts
+++ b/src/services/wrap.service.ts
@@ -21,6 +21,21 @@ interface IPropsTokenName extends IBaseProps {
   tokenName: string
 }
 
+interface IBatchItem {
+  token: Token
+  amount: string
+  wrappingMode: WrappingMode
+}
+
+/**
+ * Batch props
+ */
+interface IBatchProps {
+  secretNetworkClient: SecretNetworkClient
+  feeGrantStatus: FeeGrantStatus
+  items: IBatchItem[]
+}
+
 type TProps = IPropsToken | IPropsTokenName
 
 async function performWrapping(props: TProps): Promise<string> {
@@ -105,7 +120,103 @@ async function performWrapping(props: TProps): Promise<string> {
     })
   return
 }
+/**
+ * Perform a single broadcast with multiple wrap/unwrap messages
+ */
+export async function performBatchWrapping(props: IBatchProps): Promise<void> {
+  if (!props.items?.length) {
+    throw new Error('No items to wrap or unwrap.')
+  }
+
+  // Build an array of messages
+  const messages: any[] = []
+
+  // Create each MsgExecuteContract
+  for (const batchItem of props.items) {
+    // Convert “display” amount to on-chain integer
+    const bigAmount = new BigNumber(batchItem.amount)
+    const baseAmount = bigAmount.multipliedBy(`1e${batchItem.token.decimals}`).toFixed(0, BigNumber.ROUND_DOWN)
+
+    if (baseAmount === 'NaN') {
+      throw new Error(`Invalid amount: ${batchItem.amount}`)
+    }
+
+    if (batchItem.wrappingMode === 'wrap') {
+      // Wrap
+      messages.push(
+        new MsgExecuteContract({
+          sender: props.secretNetworkClient.address,
+          contract_address: batchItem.token.address,
+          code_hash: batchItem.token.code_hash,
+          sent_funds: [
+            {
+              denom: batchItem.token.withdrawals[0].denom,
+              amount: baseAmount
+            }
+          ],
+          msg: {
+            deposit: {
+              padding: randomPadding()
+            }
+          }
+        })
+      )
+    } else {
+      // Unwrap
+      messages.push(
+        new MsgExecuteContract({
+          sender: props.secretNetworkClient.address,
+          contract_address: batchItem.token.address,
+          code_hash: batchItem.token.code_hash,
+          sent_funds: [],
+          msg: {
+            redeem: {
+              amount: baseAmount,
+              // For SCRT, denom is optional
+              denom: batchItem.token.name === 'SCRT' ? undefined : batchItem.token.withdrawals[0].denom,
+              padding: randomPadding()
+            }
+          }
+        })
+      )
+    }
+  }
+
+  // Broadcast all messages in a single transaction
+  const broadcastResult = await props.secretNetworkClient.tx.broadcast(messages, {
+    gasLimit: 50_000 + 40_000 * messages.length,
+    gasPriceInFeeDenom: 0.25,
+    feeDenom: 'uscrt',
+    feeGranter: props.feeGrantStatus === 'success' ? faucetAddress : '',
+    broadcastMode: BroadcastMode.Sync,
+    waitForCommit: false
+  })
+
+  // Poll for the transaction result
+  await queryTxResult(
+    props.secretNetworkClient,
+    broadcastResult.transactionHash,
+    6_000, // poll interval
+    10 // number of retries
+  )
+    .catch((error: any) => {
+      // If we fail to find or confirm the tx
+      if (error?.tx?.rawLog) {
+        throw new Error(`${error.tx.rawLog}`)
+      } else {
+        throw error
+      }
+    })
+    .then((tx: any) => {
+      if (tx) {
+        if (tx.code !== 0) {
+          throw new Error(tx.rawLog || 'Batch wrap error')
+        }
+      }
+    })
+}
 
 export const WrapService = {
-  performWrapping
+  performWrapping,
+  performBatchWrapping
 }
diff --git a/src/store/secretNetworkClient.ts b/src/store/secretNetworkClient.ts
index 3c47eddd..b74584d7 100644
--- a/src/store/secretNetworkClient.ts
+++ b/src/store/secretNetworkClient.ts
@@ -110,7 +110,9 @@ export const useSecretNetworkClientStore = create<SecretNetworkClientState>()((s
       walletAddress: walletAddress,
       tokens: allTokens
     })
-    set({ balanceMapping: balances })
+    if (balances != null) {
+      set({ balanceMapping: balances })
+    }
   },
   getBalance(token: Token, secretToken: boolean = false) {
     if (!get().isInitialized) {