fix negative deposit cap, make trade pair selected button (#695)

src/components/DepositCapMessage.tsx

@@ -33,7 +33,7 @@ export default function DepositCapMessage(props: Props) {
             <div key={coin.denom} className='flex gap-1'>
               <Text size='xs'>Cap Left:</Text>
               <FormattedNumber
-                amount={coin.amount.toNumber()}
+                amount={Math.max(coin.amount.toNumber(), 0)}
                 options={{
                   decimals: asset.decimals,
                   maxDecimals: asset.decimals,

src/components/Trade/TradeModule/AssetSelector/AssetSelectorPair.tsx

@@ -35,18 +35,21 @@ export default function AssetSelectorPair(props: Props) {
   }, [])
 
   return (
-    <div className='flex items-center justify-between w-full p-3 bg-white/5'>
-      <Text size='sm' className='text-white/60'>
-        <span className='text-white'>{buyAsset.symbol}</span>/{sellAsset.symbol}
-      </Text>
+    <>
       <Button
-        onClick={() => useStore.setState({ assetOverlayState: 'pair' })}
-        text='all markets'
         color='quaternary'
         variant='transparent'
-        className='pr-0'
-        rightIcon={<ChevronDown className='w-3 h-3' />}
-      />
+        onClick={() => useStore.setState({ assetOverlayState: 'pair' })}
+        className='flex items-center justify-between w-full py-5 bg-white/5'
+      >
+        <Text size='sm' className='text-white/60'>
+          <span className='text-white'>{buyAsset.symbol}</span>/{sellAsset.symbol}
+        </Text>
+        <div className='flex items-center gap-2'>
+          <Text>All markets</Text>
+          <ChevronDown className='w-3 h-3' />
+        </div>
+      </Button>
       <AssetOverlay
         state={assetOverlayState}
         onChangeState={handleChangeState}
@@ -54,6 +57,6 @@ export default function AssetSelectorPair(props: Props) {
         sellAsset={sellAsset}
         onChangeTradingPair={onChangeTradingPair}
       />
-    </div>
+    </>
   )
 }