Improve performance and bundle size

components/Layout/AppLayout.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactNode, useMemo } from 'react'
+import { type PropsWithChildren, useMemo } from 'react'
 import { isMobile } from 'react-device-detect'
 
 import { useMediaQuery, Flex } from '@chakra-ui/react'
@@ -10,12 +10,13 @@ import Status from '../Status'
 import MobileNotSupportedModal from '../Wallet/Modal/MobileNotSupportedModal'
 import RadialGradient, { backgrounds } from './RadialGradient'
 
-const AppLayout: FC<ReactNode> = ({ children }) => {
+const AppLayout = ({ children }: PropsWithChildren) => {
   const { chainId } = useRecoilValue(chainState)
   const [isMobileView] = useMediaQuery('(max-width: 480px)')
   const mobileBrowserLeap = window.leap && window.leap.mode === 'mobile-web'
   const mobileBrowserKeplr = window.keplr && window.keplr.mode === 'mobile-web'
   const background = useMemo(() => backgrounds[chainId], [chainId])
+
   return (
     <>
       {isMobile && <div

components/Pages/Bonding/Bonding.tsx

@@ -11,7 +11,7 @@ import {
   ModalCloseButton,
   Stack,
 } from '@chakra-ui/react'
-import { useChain } from '@cosmos-kit/react-lite'
+import { useChain, useConnect } from '@quirks/react'
 import Loader from 'components/Loader'
 import { TokenBalance } from 'components/Pages/Bonding/BondingActions/Bond'
 import { BondedData } from 'components/Pages/Bonding/hooks/getBonded'
@@ -30,7 +30,8 @@ import { BondingData } from './types/BondingData'
 
 const Bonding: FC = () => {
   const { chainId, chainName, network, walletChainName } = useRecoilValue(chainState)
-  const { isWalletConnected, address } = useChain(walletChainName)
+  const { address } = useChain(walletChainName)
+  const { connected } = useConnect()
 
   const data: BondingData[] = [
     {
@@ -162,7 +163,7 @@ const Bonding: FC = () => {
     setWithdrawableTokens(withdrawableInfos)
     setData(data)
   }, [
-    isWalletConnected,
+    connected,
     isLoading,
     unbondingRequests,
     myBondedAssets,
@@ -171,7 +172,7 @@ const Bonding: FC = () => {
     symbols,
   ])
   const { isOpen, onOpen, onClose } = useDisclosure()
-  return <>{isLoading && isWalletConnected ?
+  return <>{isLoading && connected ?
     <HStack
       width="full"
       alignContent="center"
@@ -236,7 +237,7 @@ const Bonding: FC = () => {
               </ModalContent>
             </Modal>
             <BondingOverview
-              isWalletConnected={isWalletConnected}
+              isWalletConnected={connected}
               data={updatedData}
               whalePrice={whalePrice}
               currentChainName={chainName}
@@ -248,7 +249,7 @@ const Bonding: FC = () => {
             xl: 'end',
           }}>
             <RewardsComponent
-              isWalletConnected={isWalletConnected}
+              isWalletConnected={connected}
               whalePrice={whalePrice}
               currentEpoch={currentEpoch}
               myTotalBonding={myTotalBonding}

components/Pages/Bonding/BondingActions/Bond.tsx

@@ -2,7 +2,7 @@ import { useEffect, useMemo, useState } from 'react'
 import { Controller, useForm } from 'react-hook-form'
 
 import { useMediaQuery, VStack } from '@chakra-ui/react'
-import { useChain } from '@cosmos-kit/react-lite'
+import { useConnect } from '@quirks/react'
 import AssetInput from 'components/AssetInput/index'
 import { useConfig } from 'components/Pages/Bonding/hooks/useDashboardData';
 import { useRecoilState, useRecoilValue } from 'recoil'
@@ -24,8 +24,8 @@ export const Bond = ({ balances, tokenSymbols }) => {
   const [isMobile] = useMediaQuery('(max-width: 720px)')
   const [currentBondState, setCurrentBondState] =
     useRecoilState<BondingTokenState>(bondingState)
-  const { network, chainId, walletChainName } = useRecoilValue(chainState)
-  const { isWalletConnected } = useChain(walletChainName)
+  const { network, chainId } = useRecoilValue(chainState)
+  const { connected } = useConnect()
 
   const [tokenBalances, setTokenBalances] = useState<TokenBalance[]>(null)
 
@@ -60,7 +60,7 @@ export const Bond = ({ balances, tokenSymbols }) => {
         denom: config.bonding_tokens[0].denom,
       })
     }
-  }, [isWalletConnected, config])
+  }, [connected, config])
 
   const { control } = useForm({
     mode: 'onChange',