New wrap

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"
   },

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,18 +103,33 @@ 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}`)
               ).toLocaleString(undefined, {
                 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

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)`}

src/pages/wrap/Wrap.tsx

@@ -4,18 +4,13 @@ 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'
 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">