fix(ui-toolkit): test toast configuration

Co-authored-by: maciek <maciek@vegaprotocol.io>

.github/workflows/ci-cd-trigger.yml

@@ -98,36 +98,37 @@ jobs:
       # See affected apps
       - name: See affected apps
         run: |
+          affected="$(yarn nx print-affected --base=${{ env.NX_BASE }} --head=${{ env.NX_HEAD }} --select=projects)"
+          branch_slug="$(echo '${{ github.head_ref || github.ref_name }}' | sed -r s/[^a-zA-Z0-9]+/-/g | sed -r s/^-+\|-+$//g | cut -c 1-50 )"
+
           echo ">>>> debug"
           echo "NX_BASE: ${{ env.NX_BASE }}"
           echo "NX_HEAD: ${{ env.NX_HEAD }}"
+          echo "Affected: ${affected}"
+          echo "Branch slug: ${branch_slug}"
           echo ">>>> eof debug"
 
-          affected="$(yarn nx print-affected --base=${{ env.NX_BASE }} --head=${{ env.NX_HEAD }} --select=projects)"
-
-          branch_slug="$(echo '${{ github.head_ref || github.ref_name }}' | sed -r s/[^a-zA-Z0-9]+/-/g | sed -r s/^-+\|-+$//g | cut -c 1-50 )"
           projects_e2e=""
           preview_governance="not deployed"
           preview_trading="not deployed"
           preview_explorer="not deployed"
+          if [[ $affected == *"governance"* ]]; then
+            projects_e2e+='"governance-e2e" '
+            preview_governance=$(printf "https://%s.%s.vega.rocks" "governance" "$branch_slug")
+          fi
+          if [[ $affected == *"trading"* ]]; then
+            projects_e2e+='"trading-e2e" '
+            preview_trading=$(printf "https://%s.%s.vega.rocks" "trading" "$branch_slug")
+          fi
+          if [[ $affected == *"explorer"* ]]; then
+            projects_e2e+='"explorer-e2e" '
+            preview_explorer=$(printf "https://%s.%s.vega.rocks" "explorer" "$branch_slug")
+          fi
           if [[ -z "$projects_e2e" ]]; then
             projects_e2e+='"governance-e2e" "trading-e2e" "explorer-e2e" '
             preview_governance=$(printf "https://%s.%s.vega.rocks" "governance" "$branch_slug")
             preview_trading=$(printf "https://%s.%s.vega.rocks" "trading" "$branch_slug")
             preview_explorer=$(printf "https://%s.%s.vega.rocks" "explorer" "$branch_slug")
-          else
-            if [[ $affected == *"governance"* ]]; then
-              projects_e2e+='"governance-e2e" '
-              preview_governance=$(printf "https://%s.%s.vega.rocks" "governance" "$branch_slug")
-            fi
-            if [[ $affected == *"trading"* ]]; then
-              projects_e2e+='"trading-e2e" '
-              preview_trading=$(printf "https://%s.%s.vega.rocks" "trading" "$branch_slug")
-            fi
-            if [[ $affected == *"explorer"* ]]; then
-              projects_e2e+='"explorer-e2e" '
-              preview_explorer=$(printf "https://%s.%s.vega.rocks" "explorer" "$branch_slug")
-            fi
           fi
           projects_e2e=${projects_e2e%?}
           projects_e2e=[${projects_e2e// /,}]

apps/explorer/.env.mainnet

@@ -1,6 +1,7 @@
 # App configuration variables
 NX_TENDERMINT_URL=https://be.vega.community
 NX_TENDERMINT_WEBSOCKET_URL=wss://be.vega.community/websocket
+NX_SENTRY_DSN=https://b3a56b03eda842faad731f3ea9dfd1bc@o286262.ingest.sentry.io/6242427
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks/master/mainnet1/mainnet1.toml
 NX_VEGA_URL=https://api.vega.community/graphql
 NX_VEGA_ENV=MAINNET

apps/explorer/.env.validators-testnet

@@ -8,7 +8,7 @@ NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
 
 NX_VEGA_GOVERNANCE_URL=https://validator-testnet.governance.vega.xyz
-NX_TENDERMINT_URL=https://tm-be.validators-testnet.vega.rocks
+NX_TENDERMINT_URL=https://tm.be.validators-testnet.vega.rocks
 NX_BLOCK_EXPLORER=https://be.validators-testnet.vega.rocks/rest
 NX_TENDERMINT_WEBSOCKET_URL=wss://be.validators-testnet.vega.xyz/websocket
-NX_VEGA_EXPLORER_URL=https://validator-testnet.explorer.vega.xyz/
+NX_VEGA_EXPLORER_URL=https://explorer.validators-testnet.vega.rocks/

apps/governance/.env.devnet

@@ -12,3 +12,4 @@ NX_DELEGATIONS_PAGINATION=50
 NX_TRANCHES_SERVICE_URL=https://tranches-devnet1-k8s.ops.vega.xyz
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
 NX_VEGA_REST_URL=https://api.n00.devnet1.vega.xyz/api/v2/
+NX_SENTRY_DSN=https://4b8c8a8ba07742648aa4dfe1b8d17e40@o286262.ingest.sentry.io/5882996

apps/governance/.env.mainnet

@@ -6,6 +6,7 @@ NX_VEGA_NETWORKS='{"DEVNET":"https://dev.governance.vega.xyz","TESTNET":"https:/
 NX_ETHEREUM_PROVIDER_URL=https://eth-mainnet.gateway.pokt.network/v1/lb/6684b914570bbfa533ba9324
 NX_ETHERSCAN_URL=https://etherscan.io
 NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
+NX_SENTRY_DSN=https://4b8c8a8ba07742648aa4dfe1b8d17e40@o286262.ingest.sentry.io/5882996
 NX_VEGA_EXPLORER_URL=https://explorer.vega.xyz
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/mainnet
 NX_SENTRY_DSN=https://4b8c8a8ba07742648aa4dfe1b8d17e40:87edc2605e544f888305d7fc4a9141bd@o286262.ingest.sentry.io/5882996

apps/governance/.env.testnet

@@ -12,4 +12,5 @@ NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
 NX_DELEGATIONS_PAGINATION=50
 NX_TRANCHES_SERVICE_URL=https://tranches-testnet-k8s.ops.vega.xyz
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
-NX_VEGA_REST_URL=https://api.n07.testnet.vega.xyz/api/v2/
+NX_VEGA_REST_URL=https://api.n07.testnet.vega.xyz/api/v2/
+NX_SENTRY_DSN=https://4b8c8a8ba07742648aa4dfe1b8d17e40@o286262.ingest.sentry.io/5882996

apps/governance/.env.validators-testnet

@@ -9,4 +9,5 @@ NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_VEGA_EXPLORER_URL=https://dev.explorer.vega.xyz
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
-NX_VEGA_REST_URL=https://api-validators-testnet.vega.rocks/api/v2/
+NX_VEGA_REST_URL=https://api-validators-testnet.vega.rocks/api/v2/
+NX_SENTRY_DSN=https://4b8c8a8ba07742648aa4dfe1b8d17e40@o286262.ingest.sentry.io/5882996

apps/trading/.env.devnet

@@ -2,6 +2,7 @@ NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
+NX_TRADING_SENTRY_DSN=https://2ffce43721964aafa78277c50654ece4@o286262.ingest.sentry.io/6300613
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/devnet1/vegawallet-devnet1.toml
 NX_VEGA_ENV=DEVNET
 NX_VEGA_EXPLORER_URL=https://dev.explorer.vega.xyz

apps/trading/.env.mainnet

@@ -1,6 +1,7 @@
 NX_ETHEREUM_PROVIDER_URL=https://eth-mainnet.gateway.pokt.network/v1/lb/af6a2d529a11f8158bc8ca2a
 NX_ETHERSCAN_URL=https://etherscan.io
 NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
+NX_TRADING_SENTRY_DSN=https://2ffce43721964aafa78277c50654ece4@o286262.ingest.sentry.io/6300613
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks/master/mainnet1/mainnet1.toml
 NX_VEGA_ENV=MAINNET
 NX_VEGA_EXPLORER_URL=https://explorer.vega.xyz

apps/trading/.env.stagnet1

@@ -2,6 +2,7 @@ NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
+NX_TRADING_SENTRY_DSN=https://2ffce43721964aafa78277c50654ece4@o286262.ingest.sentry.io/6300613
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/stagnet1/vegawallet-stagnet1.toml
 NX_VEGA_ENV=STAGNET1
 NX_VEGA_EXPLORER_URL=https://stagnet1.explorer.vega.xyz

apps/trading/.env.testnet

@@ -2,6 +2,7 @@ NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
+NX_TRADING_SENTRY_DSN=https://2ffce43721964aafa78277c50654ece4@o286262.ingest.sentry.io/6300613
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/fairground/vegawallet-fairground.toml
 NX_VEGA_ENV=TESTNET
 NX_VEGA_EXPLORER_URL=https://explorer.fairground.wtf

apps/trading/.env.validators-testnet

@@ -2,6 +2,7 @@ NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
+NX_TRADING_SENTRY_DSN=https://2ffce43721964aafa78277c50654ece4@o286262.ingest.sentry.io/6300613
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks/master/testnet2/testnet2.toml
 NX_VEGA_ENV=VALIDATOR_TESTNET
 NX_VEGA_EXPLORER_URL=https://validator-testnet.explorer.vega.xyz

apps/trading/client-pages/market/trade-grid.tsx

@@ -247,7 +247,7 @@ const MainGrid = memo(
     const navigate = useNavigate();
     const [sizes, handleOnLayoutChange] = usePaneLayout({ id: 'top' });
     const [sizesMiddle, handleOnMiddleLayoutChange] = usePaneLayout({
-      id: 'middle',
+      id: 'middle-1',
     });
 
     return (
@@ -259,27 +259,7 @@ const MainGrid = memo(
             onChange={handleOnMiddleLayoutChange}
           >
             <ResizableGridPanel
-              priority={LayoutPriority.High}
-              minSize={200}
-              preferredSize={sizesMiddle[0] || '50%'}
-            >
-              <TradeGridChild>
-                <Tabs storageKey="console-trade-grid-main-left">
-                  <Tab id="chart" name={t('Chart')}>
-                    <TradingViews.candles.component marketId={marketId} />
-                  </Tab>
-                  <Tab id="depth" name={t('Depth')}>
-                    <TradingViews.depth.component marketId={marketId} />
-                  </Tab>
-                  <Tab id="liquidity" name={t('Liquidity')}>
-                    <TradingViews.liquidity.component marketId={marketId} />
-                  </Tab>
-                </Tabs>
-              </TradeGridChild>
-            </ResizableGridPanel>
-            <ResizableGridPanel
-              priority={LayoutPriority.Low}
-              preferredSize={sizesMiddle[1] || 330}
+              preferredSize={sizesMiddle[0] || 330}
               minSize={300}
             >
               <TradeGridChild>
@@ -297,7 +277,24 @@ const MainGrid = memo(
               </TradeGridChild>
             </ResizableGridPanel>
             <ResizableGridPanel
-              priority={LayoutPriority.Low}
+              minSize={200}
+              preferredSize={sizesMiddle[1] || '50%'}
+            >
+              <TradeGridChild>
+                <Tabs storageKey="console-trade-grid-main-left">
+                  <Tab id="chart" name={t('Chart')}>
+                    <TradingViews.candles.component marketId={marketId} />
+                  </Tab>
+                  <Tab id="depth" name={t('Depth')}>
+                    <TradingViews.depth.component marketId={marketId} />
+                  </Tab>
+                  <Tab id="liquidity" name={t('Liquidity')}>
+                    <TradingViews.liquidity.component marketId={marketId} />
+                  </Tab>
+                </Tabs>
+              </TradeGridChild>
+            </ResizableGridPanel>
+            <ResizableGridPanel
               preferredSize={sizesMiddle[2] || 430}
               minSize={200}
             >

libs/ui-toolkit/src/components/toast/toast-position-setter.tsx

@@ -7,10 +7,11 @@ import { ToastPosition, useToastsConfiguration, useToasts } from './use-toasts';
 import { useCallback } from 'react';
 import { Intent } from '../../utils/intent';
 
-const testToast = {
+const TEST_TOAST = {
   id: 'test-toast',
   intent: Intent.Primary,
   content: <>{t('This is an example of a toast notification')}</>,
+  onClose: () => useToasts.getState().remove('test-toast'),
 };
 
 export const ToastPositionSetter = () => {
@@ -20,7 +21,7 @@ export const ToastPositionSetter = () => {
   const handleChange = useCallback(
     (position: ToastPosition) => {
       setPostion(position);
-      setToast(testToast);
+      setToast(TEST_TOAST);
     },
     [setToast, setPostion]
   );

libs/ui-toolkit/src/components/toast/use-toasts.ts

@@ -109,12 +109,12 @@ export enum ToastPosition {
   BottomCenter,
 }
 
-type ToastConfiguration = {
+type ToastsConfiguration = {
   position: ToastPosition;
   setPosition: (position: ToastPosition) => void;
 };
 
-export const useToastsConfiguration = create<ToastConfiguration>()(
+export const useToastsConfiguration = create<ToastsConfiguration>()(
   persist(
     immer((set) => ({
       position: ToastPosition.BottomRight,