feat: add disabled state for preview button

Author: nikkaroraa

packages/frontend/pages/new-lp.tsx

@@ -8,6 +8,7 @@ import { AltPrimaryButton } from '@components/Button'
 import { DepositPreviewModal, TokenInput, PageHeader } from '@components/Lp/MintAndLp'
 import { useGetWSqueethPositionValue } from '@state/squeethPool/hooks'
 import { addressesAtom } from '@state/positions/atoms'
+import { connectedWalletAtom } from '@state/wallet/atoms'
 import { useTokenBalance } from '@hooks/contracts/useTokenBalance'
 import { OSQUEETH_DECIMALS } from '@constants/index'
 import squeethLogo from 'public/images/squeeth-logo.svg'
@@ -47,7 +48,10 @@ const LPPage: React.FC = () => {
   const [isPreviewModalOpen, setPreviewModalOpen] = useState(false)
 
   const classes = useStyles()
+
   const squeethPrice = getWSqueethPositionValue(1)
+  const connectedWallet = useAtomValue(connectedWalletAtom)
+  const isDepositButtonDisabled = !connectedWallet || Number(squeethAmount) === 0
 
   return (
     <>
@@ -83,9 +87,10 @@ const LPPage: React.FC = () => {
             className={classes.margin}
             id="preview-deposit-btn"
             onClick={() => setPreviewModalOpen(true)}
+            disabled={isDepositButtonDisabled}
             fullWidth
           >
-            Preview transaction
+            {connectedWallet ? 'Preview transaction' : 'Connect wallet to deposit'}
           </AltPrimaryButton>
         </Grid>
       </Grid>

packages/frontend/src/components/Button/index.tsx

@@ -79,6 +79,10 @@ export const AltPrimaryButton = withStyles((theme) => ({
     '&:hover': {
       backgroundColor: theme.palette.primary.dark,
     },
+    '&:disabled': {
+      color: 'rgba(255, 255, 255, 0.4)',
+      backgroundColor: theme.palette.background.lightStone,
+    },
     minHeight: '2rem',
     minWidth: '300px',
     fontSize: '16px',