Tooling improvements and minor refactor (#19)

* refactor: store selector callbacks less verbose

* chore: prettier tailwind plugin added and respective formatting

* disable metamask connection button

components/Button.tsx

@@ -12,7 +12,7 @@ const Button = React.forwardRef<any, Props>(
     <button
       ref={ref}
       onClick={onClick}
-      className={`rounded-3xl bg-green-500 py-2 px-5 text-white text-sm font-semibold overflow-hidden text-ellipsis ${className} ${
+      className={`overflow-hidden text-ellipsis rounded-3xl bg-green-500 py-2 px-5 text-sm font-semibold text-white ${className} ${
         disabled ? 'opacity-40' : ''
       }`}
       disabled={disabled}

components/ConnectModal.tsx

@@ -19,8 +19,8 @@ type Props = {
 const ConnectModal = ({ isOpen, onClose }: Props) => {
   const [isLoading, setIsLoading] = useState(false)
 
-  const actions = useWalletStore((state) => state.actions)
-  const metamaskInstalled = useWalletStore((state) => state.metamaskInstalled)
+  const actions = useWalletStore((s) => s.actions)
+  const metamaskInstalled = useWalletStore((s) => s.metamaskInstalled)
   const isKeplrInstalled = typeof window !== 'undefined' && window.keplr
 
   const handleConnectSuccess = () => {
@@ -108,13 +108,13 @@ const ConnectModal = ({ isOpen, onClose }: Props) => {
               leaveTo="opacity-0 scale-95"
             >
               <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
-                <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900 mb-6">
+                <Dialog.Title as="h3" className="mb-6 text-lg font-medium leading-6 text-gray-900">
                   Connect your wallet
                 </Dialog.Title>
                 {isLoading ? (
                   <div role="status" className="text-center">
                     <svg
-                      className="inline w-10 h-10 text-gray-200 animate-spin fill-orange-500"
+                      className="inline h-10 w-10 animate-spin fill-orange-500 text-gray-200"
                       viewBox="0 0 100 101"
                       fill="none"
                       xmlns="http://www.w3.org/2000/svg"
@@ -131,10 +131,12 @@ const ConnectModal = ({ isOpen, onClose }: Props) => {
                     <span className="sr-only">Loading...</span>
                   </div>
                 ) : (
-                  <div className="flex flex-col gap-3 mt-2">
+                  <div className="mt-2 flex flex-col gap-3">
                     <button
-                      className="flex items-center p-4 bg-black/90 rounded-xl hover:bg-black"
+                      className="flex items-center rounded-xl bg-black/90 p-4 hover:bg-black"
                       onClick={handleConnectMetamask}
+                      // temporarily disable metamask connection as its not supported on osmosis
+                      disabled
                     >
                       <Image src="/wallets/metamask.webp" height={30} width={30} alt="metamask" />
                       <div className="ml-4 text-left">
@@ -156,7 +158,7 @@ const ConnectModal = ({ isOpen, onClose }: Props) => {
                       </div>
                     </button>
                     <button
-                      className="flex items-center p-4 bg-black/90 rounded-xl hover:bg-black"
+                      className="flex items-center rounded-xl bg-black/90 p-4 hover:bg-black"
                       onClick={handleConnectKeplr}
                     >
                       <Image src="/wallets/keplr.png" height={30} width={30} alt="keplr" />

components/CreditManager/CreditManagerContainer.tsx

@@ -8,7 +8,7 @@ export const CreditManagerContainer = ({
   children: React.ReactNode
   className?: string
 }) => {
-  return <div className={`p-2 bg-[#D8DAEA] rounded-lg text-[#585A74] ${className}`}>{children}</div>
+  return <div className={`rounded-lg bg-[#D8DAEA] p-2 text-[#585A74] ${className}`}>{children}</div>
 }
 
 export default CreditManagerContainer

components/CreditManager/FundAccount.tsx

@@ -16,7 +16,7 @@ const FundAccount = () => {
   const [selectedToken, setSelectedToken] = useState('')
   const [enabled, setEnabled] = useState(false)
 
-  const selectedAccount = useCreditManagerStore((state) => state.selectedAccount)
+  const selectedAccount = useCreditManagerStore((s) => s.selectedAccount)
 
   const { data: balancesData } = useAllBalances()
   const { data: allowedCoinsData, isLoading: isLoadingAllowedCoins } = useAllowedCoins()
@@ -57,7 +57,7 @@ const FundAccount = () => {
 
   return (
     <>
-      <CreditManagerContainer className="p-3 mb-2">
+      <CreditManagerContainer className="mb-2 p-3">
         <p className="mb-6">
           Transfer assets from your injective wallet to your Mars credit account. If you don’t have
           any assets in your injective wallet use the injective bridge to transfer funds to your
@@ -68,7 +68,7 @@ const FundAccount = () => {
         ) : (
           <>
             <div className="mb-4">
-              <div className="flex justify-between mb-1">
+              <div className="mb-1 flex justify-between">
                 <div>Asset:</div>
                 <select
                   className="bg-transparent"
@@ -89,7 +89,7 @@ const FundAccount = () => {
                 <div>Amount:</div>
                 <input
                   type="number"
-                  className="bg-transparent border border-black/50 px-2"
+                  className="border border-black/50 bg-transparent px-2"
                   value={amount}
                   onChange={(e) => handleValueChange(e.target.valueAsNumber)}
                 />
@@ -98,7 +98,7 @@ const FundAccount = () => {
             <p>In wallet: {walletAmount.toLocaleString()}</p>
             {/* SLIDER - initial implementation to test functionality */}
             {/* TODO: will need to be revamped later on */}
-            <div className="relative flex flex-1 mb-6 items-center">
+            <div className="relative mb-6 flex flex-1 items-center">
               <Slider.Root
                 className="relative flex h-[20px] w-full cursor-pointer touch-none select-none items-center"
                 value={[percentageValue]}
@@ -122,7 +122,7 @@ const FundAccount = () => {
                 </Slider.Thumb>
               </Slider.Root>
               <button
-                className="ml-4 py-1 px-2 text-sm bg-blue-600 text-white rounded-md"
+                className="ml-4 rounded-md bg-blue-600 py-1 px-2 text-sm text-white"
                 onClick={() => setAmount(maxValue)}
               >
                 MAX
@@ -131,7 +131,7 @@ const FundAccount = () => {
           </>
         )}
       </CreditManagerContainer>
-      <CreditManagerContainer className="flex justify-between items-center mb-2">
+      <CreditManagerContainer className="mb-2 flex items-center justify-between">
         <div>
           <h3 className="font-bold">Lending Assets</h3>
           <div className="opacity-50">Lend assets from account to earn yield.</div>

components/CreditManager/index.tsx

@@ -13,8 +13,8 @@ import CreditManagerContainer from './CreditManagerContainer'
 const CreditManager = () => {
   const [isFund, setIsFund] = useState(false)
 
-  const address = useWalletStore((state) => state.address)
-  const selectedAccount = useCreditManagerStore((state) => state.selectedAccount)
+  const address = useWalletStore((s) => s.address)
+  const selectedAccount = useCreditManagerStore((s) => s.selectedAccount)
 
   const { data: positionsData, isLoading: isLoadingPositions } = useCreditAccountBalances(
     selectedAccount ?? ''
@@ -32,17 +32,17 @@ const CreditManager = () => {
 
   if (!address) {
     return (
-      <div className="absolute inset-0 left-auto p-2 w-[400px] bg-background-2 border-l border-white/20">
+      <div className="absolute inset-0 left-auto w-[400px] border-l border-white/20 bg-background-2 p-2">
         <CreditManagerContainer>You must have a connected wallet</CreditManagerContainer>
       </div>
     )
   }
 
   return (
-    <div className="absolute inset-0 left-auto p-2 w-[400px] bg-background-2 border-l border-white/20">
+    <div className="absolute inset-0 left-auto w-[400px] border-l border-white/20 bg-background-2 p-2">
       <CreditManagerContainer className="mb-2">
         {isFund ? (
-          <div className="flex justify-between items-center">
+          <div className="flex items-center justify-between">
             <h3 className="font-bold">Fund Account</h3>
             <Button className="rounded-md" onClick={() => setIsFund(false)}>
               Cancel
@@ -50,10 +50,10 @@ const CreditManager = () => {
           </div>
         ) : (
           <div className="flex gap-3">
-            <Button className="rounded-md flex-1" onClick={() => setIsFund(true)}>
+            <Button className="flex-1 rounded-md" onClick={() => setIsFund(true)}>
               Fund
             </Button>
-            <Button className="rounded-md flex-1" onClick={() => alert('TODO')}>
+            <Button className="flex-1 rounded-md" onClick={() => alert('TODO')}>
               Withdraw
             </Button>
           </div>
@@ -64,7 +64,7 @@ const CreditManager = () => {
       ) : (
         <>
           <CreditManagerContainer className="mb-2 text-sm">
-            <div className="flex justify-between mb-1">
+            <div className="mb-1 flex justify-between">
               <div>Total Position:</div>
               <div className="font-semibold">{formatCurrency(totalPosition)}</div>
             </div>
@@ -79,7 +79,7 @@ const CreditManager = () => {
               <div>Loading...</div>
             ) : (
               <>
-                <div className="flex font-semibold text-xs">
+                <div className="flex text-xs font-semibold">
                   <div className="flex-1">Asset</div>
                   <div className="flex-1">Value</div>
                   <div className="flex-1">Size</div>

components/Navigation.tsx

@@ -58,13 +58,13 @@ const Navigation = () => {
   return (
     <div>
       {/* Main navigation bar */}
-      <div className="flex justify-between items-center px-6 py-3 border-b border-white/20">
+      <div className="flex items-center justify-between border-b border-white/20 px-6 py-3">
         <Link href="/" passHref>
           <a>
             <img src="/logo.svg" alt="mars" />
           </a>
         </Link>
-        <div className="flex px-12 gap-5 text-white/40">
+        <div className="flex gap-5 px-12 text-white/40">
           {navItems.map((item, index) => (
             <NavLink key={index} href={item.href}>
               {item.label}
@@ -74,13 +74,13 @@ const Navigation = () => {
         <Wallet />
       </div>
       {/* Sub navigation bar */}
-      <div className="flex justify-between px-6 py-3 text-sm text-white/40 border-b border-white/20">
+      <div className="flex justify-between border-b border-white/20 px-6 py-3 text-sm text-white/40">
         <div className="flex items-center">
           <SearchInput />
           {firstCreditAccounts.map((account) => (
             <div
               key={account}
-              className={`px-4 hover:text-white cursor-pointer ${
+              className={`cursor-pointer px-4 hover:text-white ${
                 selectedAccount === account ? 'text-white' : ''
               }`}
               onClick={() => setSelectedAccount(account)}
@@ -91,13 +91,13 @@ const Navigation = () => {
           {restCreditAccounts.length > 0 && (
             <Popover className="relative">
               <Popover.Button>
-                <div className="px-3 flex items-center hover:text-white cursor-pointer">
+                <div className="flex cursor-pointer items-center px-3 hover:text-white">
                   More
                   <ChevronDownIcon className="ml-1 h-4 w-4" />
                 </div>
               </Popover.Button>
-              <Popover.Panel className="absolute z-10 pt-2 w-[200px]">
-                <div className="bg-white rounded-2xl p-4 text-gray-900">
+              <Popover.Panel className="absolute z-10 w-[200px] pt-2">
+                <div className="rounded-2xl bg-white p-4 text-gray-900">
                   {restCreditAccounts.map((account) => (
                     <div
                       key={account}
@@ -115,14 +115,14 @@ const Navigation = () => {
           )}
           <Popover className="relative">
             <Popover.Button>
-              <div className="px-3 flex items-center hover:text-white cursor-pointer">
+              <div className="flex cursor-pointer items-center px-3 hover:text-white">
                 Manage
                 <ChevronDownIcon className="ml-1 h-4 w-4" />
               </div>
             </Popover.Button>
-            <Popover.Panel className="absolute z-10 pt-2 w-[200px]">
+            <Popover.Panel className="absolute z-10 w-[200px] pt-2">
               {({ close }) => (
-                <div className="bg-white rounded-2xl p-4 text-gray-900">
+                <div className="rounded-2xl bg-white p-4 text-gray-900">
                   <div
                     className="mb-2 cursor-pointer hover:text-orange-500"
                     onClick={() => {
@@ -158,13 +158,13 @@ const Navigation = () => {
             </Popover.Panel>
           </Popover>
         </div>
-        <div className="flex gap-4 items-center">
+        <div className="flex items-center gap-4">
           <p>{formatCurrency(2500)}</p>
           <div>Lvg</div>
           <div>Risk</div>
           <ProgressBar value={0.43} />
           <div
-            className="flex justify-center w-16 cursor-pointer hover:text-white"
+            className="flex w-16 cursor-pointer justify-center hover:text-white"
             onClick={toggleCreditManager}
           >
             <svg width="14" height="13" viewBox="0 0 14 13" fill="currentColor">

components/ProgressBar.tsx

@@ -19,16 +19,16 @@ const ProgressBar = ({ value }: Props) => {
   const percentageNewValue = `${(newValue * 100).toFixed(0)}%`
 
   return (
-    <div className="relative w-[130px] h-4 bg-black rounded-full z-0">
+    <div className="relative z-0 h-4 w-[130px] rounded-full bg-black">
       <div
-        className="absolute bg-green-500 h-4 rounded-full z-10"
+        className="absolute z-10 h-4 rounded-full bg-green-500"
         style={{ width: percentageValue }}
       />
       <div
-        className="absolute bg-red-500 h-4 rounded-full transition-[width] duration-500"
+        className="absolute h-4 rounded-full bg-red-500 transition-[width] duration-500"
         style={{ width: percentageNewValue }}
       />
-      <div className="absolute w-full text-xs font-medium text-white flex justify-center items-center gap-x-2 z-20">
+      <div className="absolute z-20 flex w-full items-center justify-center gap-x-2 text-xs font-medium text-white">
         {percentageValue}
         <ArrowRightIcon className="h-3 w-3" />
         {percentageNewValue}

components/SearchInput.tsx

@@ -10,13 +10,13 @@ const SearchInput = () => (
         strokeLinejoin="round"
         strokeWidth="2"
         viewBox="0 0 24 24"
-        className="w-6 h-6"
+        className="h-6 w-6"
       >
         <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
       </svg>
     </span>
     <input
-      className="py-2 text-sm text-white bg-black/70 rounded-md pl-10 focus:outline-none"
+      className="rounded-md bg-black/70 py-2 pl-10 text-sm text-white focus:outline-none"
       placeholder="Search"
     />
   </div>

components/Spinner.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 const Spinner = () => {
   return (
     <svg
-      className="animate-spin h-8 w-8"
+      className="h-8 w-8 animate-spin"
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24"

components/Wallet.tsx

@@ -11,8 +11,8 @@ import { formatWalletAddress } from 'utils/formatters'
 import { chain } from 'utils/chains'
 
 const WalletPopover = ({ children }: { children: React.ReactNode }) => {
-  const address = useWalletStore((state) => state.address)
-  const actions = useWalletStore((state) => state.actions)
+  const address = useWalletStore((s) => s.address)
+  const actions = useWalletStore((s) => s.actions)
 
   const { data } = useTokenBalance()
 
@@ -22,14 +22,14 @@ const WalletPopover = ({ children }: { children: React.ReactNode }) => {
         {children}
       </Popover.Button>
 
-      <Popover.Panel className="absolute z-10 right-0 pt-2">
-        <div className="bg-white rounded-2xl p-6 text-gray-900">
-          <div className="flex justify-between items-center mb-4">
+      <Popover.Panel className="absolute right-0 z-10 pt-2">
+        <div className="rounded-2xl bg-white p-6 text-gray-900">
+          <div className="mb-4 flex items-center justify-between">
             <div className="flex items-center">
               <Image src={chain.stakeCurrency.coinImageUrl} alt="token" width={24} height={24} />
               <p className="ml-2">
                 {chain.stakeCurrency.coinDenom}{' '}
-                <span className="text-lg font-semibold ml-1">{data?.toFixed(2)}</span>
+                <span className="ml-1 text-lg font-semibold">{data?.toFixed(2)}</span>
               </p>
             </div>
             <Button
@@ -41,7 +41,7 @@ const WalletPopover = ({ children }: { children: React.ReactNode }) => {
           </div>
           <p className="mb-6 text-sm">{address}</p>
           <button
-            className="flex items-center text-slate-500 hover:text-slate-700 text-sm"
+            className="flex items-center text-sm text-slate-500 hover:text-slate-700"
             onClick={() => {
               navigator.clipboard.writeText(address).then(() => {
                 toast.success('Address copied to your clipboard')
@@ -53,7 +53,7 @@ const WalletPopover = ({ children }: { children: React.ReactNode }) => {
               viewBox="0 0 24 24"
               strokeWidth={1.5}
               stroke="currentColor"
-              className="w-5 h-5 mr-1"
+              className="mr-1 h-5 w-5"
             >
               <path
                 strokeLinecap="round"
@@ -73,7 +73,7 @@ const Wallet = () => {
   const [showConnectModal, setShowConnectModal] = useState(false)
   const [hasHydrated, setHasHydrated] = useState<boolean>(false)
 
-  const address = useWalletStore((state) => state.address)
+  const address = useWalletStore((s) => s.address)
 
   // avoid server-client hydration mismatch
   useEffect(() => {