replace connect modal for connect button on new position page

src/components/Inputs/DepositAmountInput/DepositAmountInput.stories.tsx

@@ -28,7 +28,8 @@ export const Null: Story = {
     onBlur: fn(),
     style: {},
     disabled: false,
-    isBalanceLoading: false
+    isBalanceLoading: false,
+    walletUninitialized: true
   }
 }
 
@@ -49,6 +50,7 @@ export const BTC: Story = {
     onBlur: fn(),
     style: {},
     disabled: false,
-    isBalanceLoading: false
+    isBalanceLoading: false,
+    walletUninitialized: false
   }
 }

src/components/Inputs/DepositAmountInput/DepositAmountInput.tsx

@@ -22,6 +22,7 @@ interface IProps {
   disabled?: boolean
   priceLoading?: boolean
   isBalanceLoading: boolean
+  walletUninitialized: boolean
 }
 
 export const DepositAmountInput: React.FC<IProps> = ({
@@ -40,9 +41,10 @@ export const DepositAmountInput: React.FC<IProps> = ({
   balanceValue,
   disabled = false,
   priceLoading = false,
-  isBalanceLoading
+  isBalanceLoading,
+  walletUninitialized
 }) => {
-  const { classes } = useStyles({ isSelected: !!currency })
+  const { classes } = useStyles({ isSelected: !!currency && !walletUninitialized })
 
   const inputRef = useRef<HTMLInputElement>(null)
 
@@ -139,28 +141,29 @@ export const DepositAmountInput: React.FC<IProps> = ({
             container
             alignItems='center'
             wrap='nowrap'
-            onClick={onMaxClick}>
+            onClick={walletUninitialized ? () => {} : onMaxClick}>
             <Typography className={classes.caption2}>
               Balance:{' '}
-              {isBalanceLoading ? (
+              {walletUninitialized ? (
+                <>-</>
+              ) : isBalanceLoading ? (
                 <img src={loadingAnimation} className={classes.loadingBalance} alt='loading' />
-              ) : balanceValue ? (
-                formatNumber(balanceValue || 0)
               ) : (
-                <span style={{ marginLeft: '8px' }}>-</span>
+                <>{formatNumber(balanceValue || 0)}</>
               )}{' '}
               {currency}
             </Typography>
             <Button
               className={
-                currency ? classes.maxButton : `${classes.maxButton} ${classes.maxButtonNotActive}`
-              }
-              onClick={onMaxClick}>
+                currency && !walletUninitialized
+                  ? classes.maxButton
+                  : `${classes.maxButton} ${classes.maxButtonNotActive}`
+              }>
               Max
             </Button>
           </Grid>
           <Grid className={classes.percentages} container alignItems='center' wrap='nowrap'>
-            {currency ? (
+            {currency && !walletUninitialized ? (
               priceLoading ? (
                 <img src={loadingAnimation} className={classes.loading} alt='loading' />
               ) : tokenPrice ? (

src/components/Inputs/ExchangeAmountInput/ExchangeAmountInput.tsx

@@ -1,6 +1,6 @@
 import Select from '@components/Inputs/Select/Select'
 import { OutlinedButton } from '@components/OutlinedButton/OutlinedButton'
-import { Box, Grid, Input, Tooltip, Typography } from '@mui/material'
+import { Grid, Input, Tooltip, Typography } from '@mui/material'
 import loadingAnimation from '@static/gif/loading.gif'
 import { formatNumber } from '@utils/utils'
 import { SwapToken } from '@store/selectors/wallet'
@@ -162,9 +162,7 @@ export const AmountInput: React.FC<IProps> = ({
             {isBalanceLoading ? (
               <img src={loadingAnimation} className={classes.loadingBalance} alt='loading' />
             ) : hideBalance ? (
-              <Box ml={1} mr={1}>
-                -
-              </Box>
+              <>-</>
             ) : (
               formatNumber(balance || 0)
             )}{' '}

src/components/Inputs/ExchangeAmountInput/style.ts

@@ -78,7 +78,7 @@ export const useStyles = makeStyles()((theme: Theme) => ({
   BalanceTypography: {
     color: colors.invariant.lightGrey,
     ...typography.caption2,
-    marginRight: 3,
+    marginRight: 6,
     overflow: 'hidden',
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',

src/components/NewPosition/DepositSelector/DepositSelector.stories.tsx

@@ -7,6 +7,7 @@ import { Provider } from 'react-redux'
 import { store } from '@store/index'
 import { MemoryRouter } from 'react-router-dom'
 import { Network } from '@invariant-labs/a0-sdk'
+import { Status } from '@store/reducers/wallet'
 
 const tokens: Record<string, SwapToken> = {
   So11111111111111111111111111111111111111112: {
@@ -116,7 +117,10 @@ export const Primary: Story = {
     isGetLiquidityError: false,
     ticksLoading: false,
     network: Network.Testnet,
-    azeroBalance: 20000000000000 as any
+    azeroBalance: 20000000000000 as any,
+    walletStatus: Status.Initialized,
+    onConnectWallet: () => {},
+    onDisconnectWallet: () => {}
   },
   render: args => <PrimaryComponent {...args} />
 }

src/components/NewPosition/DepositSelector/DepositSelector.tsx

@@ -19,6 +19,8 @@ import { PositionOpeningMethod } from '@store/consts/types'
 import { SwapToken } from '@store/selectors/wallet'
 import { TooltipHover } from '@components/TooltipHover/TooltipHover'
 import { Network } from '@invariant-labs/a0-sdk'
+import { Status } from '@store/reducers/wallet'
+import ChangeWalletButton from '@components/Header/HeaderButton/ChangeWalletButton'
 export interface InputState {
   value: string
   setValue: (value: string) => void
@@ -64,6 +66,9 @@ export interface IDepositSelector {
   ticksLoading: boolean
   network: Network
   azeroBalance: bigint
+  walletStatus: Status
+  onConnectWallet: () => void
+  onDisconnectWallet: () => void
 }
 
 export const DepositSelector: React.FC<IDepositSelector> = ({
@@ -98,7 +103,10 @@ export const DepositSelector: React.FC<IDepositSelector> = ({
   isGetLiquidityError,
   ticksLoading,
   network,
-  azeroBalance
+  azeroBalance,
+  walletStatus,
+  onConnectWallet,
+  onDisconnectWallet
 }) => {
   const { classes } = useStyles()
 
@@ -360,6 +368,7 @@ export const DepositSelector: React.FC<IDepositSelector> = ({
           {...tokenAInputState}
           priceLoading={priceALoading}
           isBalanceLoading={isBalanceLoading}
+          walletUninitialized={walletStatus !== Status.Initialized}
         />
 
         <DepositAmountInput
@@ -385,9 +394,18 @@ export const DepositSelector: React.FC<IDepositSelector> = ({
           {...tokenBInputState}
           priceLoading={priceBLoading}
           isBalanceLoading={isBalanceLoading}
+          walletUninitialized={walletStatus !== Status.Initialized}
         />
       </Grid>
-      {getButtonMessage() === 'Insufficient AZERO' ? (
+      {walletStatus !== Status.Initialized ? (
+        <ChangeWalletButton
+          name='Connect wallet'
+          onConnect={onConnectWallet}
+          connected={false}
+          onDisconnect={onDisconnectWallet}
+          className={classes.connectWalletButton}
+        />
+      ) : getButtonMessage() === 'Insufficient AZERO' ? (
         <TooltipHover
           text='More AZERO is required to cover the transaction fee. Obtain more AZERO to complete this transaction.'
           top={-10}>

src/components/NewPosition/DepositSelector/style.ts

@@ -58,6 +58,7 @@ export const useStyles = makeStyles()(theme => {
       }
     },
     addButton: {
+      height: '48px',
       width: '100%',
       margin: '30px 0',
       cursor: 'default'
@@ -80,6 +81,16 @@ export const useStyles = makeStyles()(theme => {
           filter: 'none'
         }
       }
+    },
+    connectWalletButton: {
+      height: '48px !important',
+      borderRadius: '16px',
+      width: '100%',
+      margin: '30px 0',
+
+      [theme.breakpoints.down('sm')]: {
+        width: '100%'
+      }
     }
   }
 })

src/components/NewPosition/NewPosition.stories.tsx

@@ -3,6 +3,7 @@ import { fn } from '@storybook/test'
 import { MemoryRouter } from 'react-router-dom'
 import NewPosition from './NewPosition'
 import { Network } from '@invariant-labs/a0-sdk'
+import { Status } from '@store/reducers/wallet'
 
 const meta = {
   title: 'PageComponent/NewPosition',
@@ -64,10 +65,6 @@ export const Primary: Story = {
     calcAmount: fn(),
     loadingTicksAndTickMaps: false,
     poolKey: '',
-    noConnectedBlockerProps: {
-      onConnect: fn(),
-      descCustomText: 'Cannot add any liquidity.'
-    },
     onRefresh: fn(),
     isBalanceLoading: false,
     shouldNotUpdatePriceRange: false,
@@ -77,7 +74,10 @@ export const Primary: Story = {
     setOnlyUserPositions: fn(),
     network: Network.Testnet,
     isLoadingTokens: false,
-    azeroBalance: 20000000000000 as any
+    azeroBalance: 20000000000000 as any,
+    walletStatus: Status.Initialized,
+    onConnectWallet: () => {},
+    onDisconnectWallet: () => {}
   },
   render: () => {
     return (
@@ -125,10 +125,6 @@ export const Primary: Story = {
         calcAmount={() => 1n}
         loadingTicksAndTickMaps={false}
         poolKey=''
-        noConnectedBlockerProps={{
-          onConnect: fn(),
-          descCustomText: 'Cannot add any liquidity.'
-        }}
         onRefresh={fn()}
         isBalanceLoading={false}
         shouldNotUpdatePriceRange={false}
@@ -139,6 +135,9 @@ export const Primary: Story = {
         network={Network.Testnet}
         isLoadingTokens={false}
         azeroBalance={20000000000000n}
+        walletStatus={Status.Initialized}
+        onConnectWallet={() => {}}
+        onDisconnectWallet={() => {}}
       />
     )
   }

src/components/NewPosition/NewPosition.tsx

@@ -1,6 +1,5 @@
 import { ProgressState } from '@components/AnimatedButton/AnimatedButton'
 import Slippage from '@components/Modals/Slippage/Slippage'
-import { INoConnected, NoConnected } from '@components/NoConnected/NoConnected'
 import Refresher from '@components/Refresher/Refresher'
 import { getMaxTick, getMinTick, Network } from '@invariant-labs/a0-sdk'
 import { PERCENTAGE_DENOMINATOR } from '@invariant-labs/a0-sdk/target/consts'
@@ -34,6 +33,7 @@ import useStyles from './style'
 import { BestTier, PositionOpeningMethod, TokenPriceData } from '@store/consts/types'
 import { getConcentrationArray } from '@invariant-labs/a0-sdk/target/utils'
 import { TooltipHover } from '@components/TooltipHover/TooltipHover'
+import { Status } from '@store/reducers/wallet'
 
 export interface INewPosition {
   initialTokenFrom: string
@@ -68,8 +68,6 @@ export interface INewPosition {
   }>
   ticksLoading: boolean
   loadingTicksAndTickMaps: boolean
-  showNoConnected?: boolean
-  noConnectedBlockerProps: INoConnected
   progress: ProgressState
   isXtoY: boolean
   xDecimal: bigint
@@ -106,6 +104,9 @@ export interface INewPosition {
   network: Network
   isLoadingTokens: boolean
   azeroBalance: bigint
+  walletStatus: Status
+  onConnectWallet: () => void
+  onDisconnectWallet: () => void
 }
 
 export const NewPosition: React.FC<INewPosition> = ({
@@ -124,8 +125,6 @@ export const NewPosition: React.FC<INewPosition> = ({
   calcAmount,
   feeTiers,
   ticksLoading,
-  showNoConnected,
-  noConnectedBlockerProps,
   isXtoY,
   xDecimal,
   yDecimal,
@@ -160,7 +159,10 @@ export const NewPosition: React.FC<INewPosition> = ({
   setOnlyUserPositions,
   network,
   isLoadingTokens,
-  azeroBalance
+  azeroBalance,
+  walletStatus,
+  onConnectWallet,
+  onDisconnectWallet
 }) => {
   const { classes } = useStyles()
   const navigate = useNavigate()
@@ -553,7 +555,6 @@ export const NewPosition: React.FC<INewPosition> = ({
       />
 
       <Grid container className={classes.row} alignItems='stretch'>
-        {showNoConnected && <NoConnected {...noConnectedBlockerProps} />}
         <DepositSelector
           initialTokenFrom={initialTokenFrom}
           initialTokenTo={initialTokenTo}
@@ -685,6 +686,9 @@ export const NewPosition: React.FC<INewPosition> = ({
           ticksLoading={ticksLoading}
           network={network}
           azeroBalance={azeroBalance}
+          walletStatus={walletStatus}
+          onConnectWallet={onConnectWallet}
+          onDisconnectWallet={onDisconnectWallet}
         />
         <Hidden mdUp>
           <Grid container justifyContent='end' mb={2}>

src/components/PositionsList/PositionsList.tsx

@@ -141,10 +141,7 @@ export const PositionsList: React.FC<IProps> = ({
                   </Button>
                 </Grid>
               </TooltipHover>
-              <Button
-                className={showNoConnected ? classes.buttonSelectDisabled : classes.button}
-                variant='contained'
-                onClick={showNoConnected ? () => {} : onAddPositionClick}>
+              <Button className={classes.button} variant='contained' onClick={onAddPositionClick}>
                 <span className={classes.buttonText}>+ Add Position</span>
               </Button>
             </Grid>

src/containers/NewPositionWrapper/NewPositionWrapper.tsx

@@ -30,7 +30,7 @@ import {
 import { actions as poolsActions } from '@store/reducers/pools'
 import { actions, InitMidPrice, actions as positionsActions } from '@store/reducers/positions'
 import { actions as snackbarsActions } from '@store/reducers/snackbars'
-import { Status, actions as walletActions } from '@store/reducers/wallet'
+import { actions as walletActions } from '@store/reducers/wallet'
 import { networkType } from '@store/selectors/connection'
 import {
   isLoadingLatestPoolsForTransaction,
@@ -656,14 +656,6 @@ export const NewPositionWrapper: React.FC<IProps> = ({
           })
         )
       }}
-      showNoConnected={walletStatus !== Status.Initialized}
-      noConnectedBlockerProps={{
-        onConnect: async () => {
-          await openWalletSelectorModal()
-          dispatch(walletActions.connect(false))
-        },
-        descCustomText: 'Cannot add any liquidity.'
-      }}
       poolKey={poolKey}
       onRefresh={onRefresh}
       isBalanceLoading={isBalanceLoading}
@@ -675,6 +667,14 @@ export const NewPositionWrapper: React.FC<IProps> = ({
       network={network}
       isLoadingTokens={isCurrentlyLoadingTokens}
       azeroBalance={azeroBalance}
+      walletStatus={walletStatus}
+      onConnectWallet={async () => {
+        await openWalletSelectorModal()
+        dispatch(walletActions.connect(false))
+      }}
+      onDisconnectWallet={() => {
+        dispatch(walletActions.disconnect())
+      }}
     />
   )
 }

src/store/sagas/wallet.ts

@@ -262,6 +262,10 @@ export function* fetchBalances(tokens: string[]): Generator {
   const walletAddress = yield* select(address)
   const psp22 = yield* getPSP22()
 
+  if (!walletAddress) {
+    return
+  }
+
   yield* put(walletActions.setIsBalanceLoading(true))
 
   const { balance, tokenBalances } = yield* all({