chore: update symbol and remove underline

Co-authored-by: Joe <joe@vega.xyz>

CODEOWNERS

@@ -1,2 +1,3 @@
 * @vegaprotocol/frontend
+* @vegaprotocol/frontend-qa
 *.graphql @vegaprotocol/core

Makefile

@@ -11,7 +11,7 @@ recalculate-ipfs:
 	echo "ipfs hash inside the image"
 	docker run --rm ${TAG} cat /ipfs-hash
 	echo "recalculating ipfs hash"
-	docker run --rm ${TAG} ipfs add -r /usr/share/nginx/html
+	docker run --rm ${TAG} ipfs add -rQ /usr/share/nginx/html
 
 .PHONY: eject-ipfs-hash
 unpack:

README.md

@@ -115,11 +115,31 @@ docker run -p 3000:80 [TAG]
 
 ## Build instructions
 
-The [`docker`](./docker) subfolder has some docker configurations for easily setting up your own hosted version of console either for the web, or ready for pinning on IPFS
+The [`docker`](./docker) subfolder has some docker configurations for easily setting up your own hosted version of Console either for the web, or ready for pinning on IPFS.
+
+### nx build inside the docker
+
+Using multistage dockerfile dist is compiled using [node](https://hub.docker.com/_/node) image and later packed to nginx as in [dist build](#dist-build). The multistage builds ensures consistent CPU architecture and build toolchains are used so that the result will be identical.
+
+```bash
+docker build --build-arg APP=[YOUR APP] --build-arg NODE_VERSION=16.5.1 --build-arg ENV_NAME=mainnet -t [TAG] -f docker/node-inside-docker.Dockerfile .
+```
+
+### Computing ipfs-hash of the build
+
+At the moment this feature is important only for Console releases.
+
+Each docker build finishes with hash calculation for ` dist`` directory. Resulting hash is added to file named as  `/ipfs-hash`. Once docker image is produced you can run following commad to display ipfs-hash:
+
+```bash
+make recalculate-ipfs TAG=vegaprotocol/trading:{YOUR_VERSION}
+```
+
+**updating hash:** recompiling dist directory (even if there are no changed to source code) results in different hash computed by ipfs command.
 
 ### nx build outside the docker
 
-Packaging prepared dist into [`nginx`](https://hub.docker.com/_/nginx)([server configuration](./nginx/nginx.conf)) docker image involves building the application on docker host machine from source.
+This Docker image packages a pre-built `dist` folder into an [`nginx`](https://hub.docker.com/_/nginx)([server configuration](./nginx/nginx.conf)) docker image. In this case, the application on docker host machine from source.
 
 As a prerequisite you need to perform build of `dist` directory and move its content for specific application to `dist-result` directory. Use following script to do it with a single command:
 
@@ -133,38 +153,18 @@ You can build any of the containers locally with the following command:
 docker build --dockerfile docker/node-outside-docker.Dockerfile . --tag=[TAG]
 ```
 
-### nx build inside the docker
-
-Using multistage dockerfile dist is compiled using [node](https://hub.docker.com/_/node) image and later packed to nginx as in [dist build](#dist-build) example.
-
-```bash
-docker build --build-arg APP=[YOUR APP] --build-arg NODE_VERSION=$(cat .nvmrc) --build-arg ENV_NAME=mainnet -t [TAG] -f docker/node-inside-docker.Dockerfile .
-```
-
-### Computing ipfs-hash of the build
-
-At the moment this feature is important only for `trading` (console) releases.
-
-Each docker build finishes with hash calculation for dist directory. Resulting hash is added to file named as `/ipfs-hash`. Once docker image is produced you can run following commad to display ipfs-hash:
-
-```bash
-make recalculate-ipfs TAG=vegaprotocol/trading:{YOUR_VERSION}
-```
-
-**updating hash:** recompiling dist directory (even if there are no changed to source code) results in different hash computed by ipfs command.
-
 ### Verifying ipfs-hash of existing current application version
 
 An IPFS CID will be attached to every [release](https://github.com/vegaprotocol/frontend-monorepo/releases). If you are intending to pin an application on IPFS, you can check that your build matches by running the following steps:
 
-1. Show latest release by runnning: `make latest-release`. You need to configure [`gh`](https://cli.github.com/) for this step to work, otherwise please provide release manually from [github](https://github.com/vegaprotocol/frontend-monorepo/releases) or [dockerhub](https://hub.docker.com/r/vegaprotocol/trading)
+1. Show latest release by running: `make latest-release`. You need to configure [`gh`](https://cli.github.com/) for this step to work, otherwise please provide release manually from [github](https://github.com/vegaprotocol/frontend-monorepo/releases) or [dockerhub](https://hub.docker.com/r/vegaprotocol/trading)
 2. Set RELEASE environment variable to value that you want to validate: `export RELEASE=$(make latest-release)` or `export RELEASE=vXX.XX.XX`
 3. Set TAG environment variable to image that you want to validate: `export TAG=vegaprotocol/trading:$RELEASE`
 4. Download docker image with the desired release `docker pull $TAG`.
 5. Recalculate hash: `make recalculate-ipfs`
 6. You should see exactly same hash produced by ipfs command as one placed with the release notes: `make show-latest-release`
 7. If you want to extract dist from docker image to your local filesystem you can run following command: `make unpack`
-8. Now `dist` directory contains valid application build. **it is not possible to calculate same ipfs hash on files that are result of copy operation**
+8. Now `dist` directory contains valid application build
 
 ## Config
 

apps/governance-e2e/src/integration/view/proposal.cy.ts

@@ -37,11 +37,39 @@ context(
     });
 
     // 3002-PROP-023 3004-PMAC-002 3005-PASN-002 3006-PASC-002 3007-PNEC-002 3008-PFRO-003
-    it('should have button for link to more information on proposals', function () {
-      const proposalsUrl = 'https://docs.vega.xyz/mainnet/tutorials/proposals';
-      cy.getByTestId('new-proposal-link')
-        .find('a')
-        .should('have.attr', 'href', proposalsUrl);
+    it('new proposal page should have button for link to more information on proposals', function () {
+      cy.getByTestId('new-proposal-link').click();
+      cy.url().should('include', '/proposals/propose/raw');
+      cy.contains('To see Explorer data on proposals visit').within(() => {
+        cy.getByTestId('external-link').should(
+          'have.attr',
+          'href',
+          'https://explorer.fairground.wtf/governance'
+        );
+      });
+      cy.contains(
+        '1. Sense check your proposal with the community on the forum:'
+      ).within(() => {
+        cy.getByTestId('external-link').should(
+          'have.attr',
+          'href',
+          'https://community.vega.xyz/c/governance/25'
+        );
+      });
+      cy.contains(
+        '2. Use the appropriate proposal template in the docs:'
+      ).within(() => {
+        cy.getByTestId('external-link').should(
+          'have.attr',
+          'href',
+          'https://docs.vega.xyz/mainnet/tutorials/proposals'
+        );
+      });
+      cy.contains('Connect your wallet to submit a proposal').should(
+        'be.visible'
+      );
+      cy.getByTestId('connect-to-vega-wallet-btn').should('exist');
+      navigateTo(navigation.proposals);
     });
 
     it('should be able to see a working link for - find out more about Vega governance', function () {

apps/governance/src/app.tsx

@@ -184,7 +184,7 @@ const Web3Container = ({
                     <TemplateSidebar sidebar={sideBar}>
                       <AppRouter />
                     </TemplateSidebar>
-                    <footer className="p-4 border-t border-neutral-700">
+                    <footer className="p-4 border-t border-neutral-700 break-all">
                       <NetworkInfo />
                     </footer>
                   </AppLayout>
@@ -308,7 +308,7 @@ const AppContainer = () => {
     <Router>
       <ScrollToTop />
       <AppStateProvider>
-        <div className="min-h-full text-white grid">
+        <div className="min-h-full text-white">
           <NodeGuard
             skeleton={<div>{t('Loading')}</div>}
             failure={

apps/governance/src/i18n/translations/dev.json

@@ -708,7 +708,7 @@
   "NewAssetProposal": "New asset proposal",
   "UpdateAssetProposal": "Update asset proposal",
   "NewFreeformProposal": "New freeform proposal",
-  "NewRawProposal": "New raw proposal",
+  "NewRawProposal": "New proposal",
   "MinProposalRequirements": "You must have at least {{value}} VEGA associated to make a proposal",
   "MinProposalVoteRequirements": "You must have at least {{value}} VEGA associated to vote on this proposal",
   "totalSupply": "Total Supply",
@@ -870,5 +870,9 @@
   "Upgraded at": "Upgraded at",
   "dataIsIdentical": "Data is identical",
   "updatesToMarket": "Updates to market",
-  "viewAsParty": "View as party"
+  "viewAsParty": "View as party",
+  "HowToPropose": "How to make a proposal",
+  "HowToProposeRawStep1": "1. Sense check your proposal with the community on the forum:",
+  "HowToProposeRawStep2": "2. Use the appropriate proposal template in the docs:",
+  "HowToProposeRawStep3": "3. Submit on-chain below"
 }

apps/governance/src/routes/home/index.tsx

@@ -279,8 +279,8 @@ const GovernanceHome = ({ name }: RouteChildProps) => {
         trimmedActiveNodes={trimmedActiveNodes}
       />
 
-      <section className="grid grid-cols-2 gap-12 mb-16">
-        <div data-testid="home-rewards">
+      <section className="flex justify-between flex-wrap gap-12 mb-16">
+        <div className="min-w-[360px] flex-1" data-testid="home-rewards">
           <Heading title={t('Rewards')} marginTop={false} />
           <h3 className="mb-6">{t('homeRewardsIntro')}</h3>
           <div className="flex items-center mb-8 gap-4">
@@ -290,7 +290,7 @@ const GovernanceHome = ({ name }: RouteChildProps) => {
           </div>
         </div>
 
-        <div data-testid="home-vega-token">
+        <div className="min-w-[360px] flex-1" data-testid="home-vega-token">
           <Heading title={t('vegaToken')} marginTop={false} />
           <h3 className="mb-6">{t('homeVegaTokenIntro')}</h3>
           <div className="flex items-center mb-8 gap-4">

apps/governance/src/routes/proposals/components/proposal-detail-header/proposal-header.tsx

@@ -159,7 +159,7 @@ export const ProposalHeader = ({
         </div>
       </div>
 
-      <div data-testid="proposal-title">
+      <div data-testid="proposal-title" className="break-all">
         {isListItem ? (
           <header>
             <SubHeading

apps/governance/src/routes/proposals/components/proposals-list/proposals-list.tsx

@@ -7,18 +7,13 @@ import { ProposalsListItem } from '../proposals-list-item';
 import { ProtocolUpgradeProposalsListItem } from '../protocol-upgrade-proposals-list-item/protocol-upgrade-proposals-list-item';
 import { ProposalsListFilter } from '../proposals-list-filter';
 import Routes from '../../../routes';
-import {
-  Button,
-  Toggle,
-  VegaIcon,
-  VegaIconNames,
-} from '@vegaprotocol/ui-toolkit';
+import { Button, Toggle } from '@vegaprotocol/ui-toolkit';
 import { Link } from 'react-router-dom';
 import { ExternalLink } from '@vegaprotocol/ui-toolkit';
 import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
 import type { ProposalFieldsFragment } from '../../proposals/__generated__/Proposals';
 import type { ProtocolUpgradeProposalFieldsFragment } from '@vegaprotocol/proposals';
-import { DocsLinks, ExternalLinks } from '@vegaprotocol/environment';
+import { ExternalLinks } from '@vegaprotocol/environment';
 
 interface ProposalsListProps {
   proposals: Array<ProposalFieldsFragment | ProposalQuery['proposal']>;
@@ -55,7 +50,10 @@ export const orderByUpgradeBlockHeight = (
 ) =>
   orderBy(
     arr,
-    [(p) => p?.upgradeBlockHeight, (p) => p.vegaReleaseTag],
+    [
+      (p) => (p?.upgradeBlockHeight ? parseInt(p.upgradeBlockHeight, 10) : 0),
+      (p) => p.vegaReleaseTag,
+    ],
     ['desc', 'desc']
   );
 
@@ -142,18 +140,13 @@ export const ProposalsList = ({
           title={t('pageTitleProposals')}
         />
 
-        {DocsLinks && (
-          <div className="xs:justify-self-end" data-testid="new-proposal-link">
-            <ExternalLink href={DocsLinks.PROPOSALS_GUIDE}>
-              <Button variant="primary" size="sm">
-                <div className="flex items-center gap-1">
-                  {t('NewProposal')}
-                  <VegaIcon name={VegaIconNames.OPEN_EXTERNAL} size={13} />
-                </div>
-              </Button>
-            </ExternalLink>
-          </div>
-        )}
+        <div className="xs:justify-self-end" data-testid="new-proposal-link">
+          <Link to={`${Routes.PROPOSALS}/propose/raw`}>
+            <Button variant="primary" size="sm">
+              <div className="flex items-center gap-1">{t('NewProposal')}</div>
+            </Button>
+          </Link>
+        </div>
       </div>
 
       <p className="mb-8">
@@ -224,10 +217,10 @@ export const ProposalsList = ({
                 sortedProtocolUpgradeProposals.closed.length > 0 &&
                 filterString.length < 1 && (
                   <div
-                    className="grid w-full justify-end xl:-mt-12 pb-6"
+                    className="flex justify-end xl:-mt-12 pb-6"
                     data-testid="toggle-closed-proposals"
                   >
-                    <div className="w-[440px]">
+                    <div className="w-full max-w-[420px]">
                       <Toggle
                         name="closed-proposals-toggle"
                         toggles={[

apps/governance/src/routes/proposals/components/vote-breakdown/vote-breakdown.tsx

@@ -130,7 +130,10 @@ export const VoteBreakdown = ({ proposal }: VoteBreakdownProps) => {
     ? t('byTokenVote')
     : t('byLiquidityVote');
 
-  const sectionWrapperClasses = classNames('grid sm:grid-cols-2 gap-6');
+  const sectionWrapperClasses = classNames(
+    'flex justify-between flex-wrap gap-6'
+  );
+  const sectionClasses = classNames('min-w-[300px] flex-1 flex-grow');
   const headingClasses = classNames('mb-2 text-vega-dark-400');
   const progressDetailsClasses = classNames(
     'flex justify-between flex-wrap mt-2 text-sm'
@@ -166,7 +169,10 @@ export const VoteBreakdown = ({ proposal }: VoteBreakdownProps) => {
         <div className="mb-4">
           <h3 className={headingClasses}>{t('liquidityProviderVote')}</h3>
           <div className={sectionWrapperClasses}>
-            <section data-testid="lp-majority-breakdown">
+            <section
+              className={sectionClasses}
+              data-testid="lp-majority-breakdown"
+            >
               <VoteProgress
                 percentageFor={yesLPPercentage}
                 colourfulBg={true}
@@ -241,7 +247,10 @@ export const VoteBreakdown = ({ proposal }: VoteBreakdownProps) => {
               </div>
             </section>
 
-            <section data-testid="lp-participation-breakdown">
+            <section
+              className={sectionClasses}
+              data-testid="lp-participation-breakdown"
+            >
               <VoteProgress
                 percentageFor={
                   lpParticipationThresholdProgress || new BigNumber(0)
@@ -288,7 +297,10 @@ export const VoteBreakdown = ({ proposal }: VoteBreakdownProps) => {
 
       {isUpdateMarket && <h3 className={headingClasses}>{t('tokenVote')}</h3>}
       <div className={sectionWrapperClasses}>
-        <section data-testid="token-majority-breakdown">
+        <section
+          className={sectionClasses}
+          data-testid="token-majority-breakdown"
+        >
           <VoteProgress
             percentageFor={yesPercentage}
             colourfulBg={true}
@@ -347,7 +359,10 @@ export const VoteBreakdown = ({ proposal }: VoteBreakdownProps) => {
           </div>
         </section>
 
-        <section data-testid="token-participation-breakdown">
+        <section
+          className={sectionClasses}
+          data-testid="token-participation-breakdown"
+        >
           <VoteProgress
             percentageFor={participationThresholdProgress}
             testId="token-participation-progress"

apps/governance/src/routes/proposals/propose/raw/propose-raw.tsx

@@ -1,12 +1,17 @@
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { useEnvironment, DocsLinks } from '@vegaprotocol/environment';
-import { Heading } from '../../../../components/heading';
+import {
+  useEnvironment,
+  DocsLinks,
+  ExternalLinks,
+} from '@vegaprotocol/environment';
+import { Heading, SubHeading } from '../../../../components/heading';
 import {
   AsyncRenderer,
   ExternalLink,
   FormGroup,
   InputError,
+  RoundedWrapper,
   TextArea,
 } from '@vegaprotocol/ui-toolkit';
 import { validateJson } from '@vegaprotocol/utils';
@@ -79,15 +84,6 @@ export const ProposeRaw = () => {
             spamProtectionMin={params.spam_protection_proposal_min_tokens}
           />
 
-          {DocsLinks && (
-            <p className="text-sm" data-testid="proposal-docs-link">
-              <span className="mr-1">{t('ProposalTermsText')}</span>
-              <ExternalLink href={DocsLinks.PROPOSALS_GUIDE} target="_blank">
-                {DocsLinks.PROPOSALS_GUIDE}
-              </ExternalLink>
-            </p>
-          )}
-
           {VEGA_EXPLORER_URL && (
             <p className="text-sm">
               {t('MoreProposalsInfo')}{' '}
@@ -98,12 +94,44 @@ export const ProposeRaw = () => {
             </p>
           )}
 
+          <section data-testid="how-to" className="my-10">
+            <RoundedWrapper paddingBottom={true}>
+              <SubHeading title={t('HowToPropose')} />
+              <ul>
+                <li className="p-1">
+                  {t('HowToProposeRawStep1')}{' '}
+                  {ExternalLinks && (
+                    <span data-testid="proposal-docs-link">
+                      <ExternalLink
+                        href={ExternalLinks.PROPOSALS_FORUM}
+                        target="_blank"
+                      >
+                        {ExternalLinks.PROPOSALS_FORUM}
+                      </ExternalLink>
+                    </span>
+                  )}
+                </li>
+                <li className="p-1">
+                  {t('HowToProposeRawStep2')}{' '}
+                  {DocsLinks && (
+                    <span data-testid="proposal-docs-link">
+                      <ExternalLink
+                        href={DocsLinks.PROPOSALS_GUIDE}
+                        target="_blank"
+                      >
+                        {DocsLinks.PROPOSALS_GUIDE}
+                      </ExternalLink>
+                    </span>
+                  )}
+                </li>
+                <li className="p-1">{t('HowToProposeRawStep3')}</li>
+              </ul>
+            </RoundedWrapper>
+          </section>
+
           <div data-testid="raw-proposal-form">
             <form onSubmit={handleSubmit(onSubmit)}>
-              <FormGroup
-                label="Make a proposal by submitting JSON"
-                labelFor="proposal-data"
-              >
+              <FormGroup label="Valid JSON required" labelFor="proposal-data">
                 <TextArea
                   id="proposal-data"
                   className="min-h-[200px]"

apps/governance/src/routes/rewards/home/rewards-page.tsx

@@ -133,24 +133,26 @@ export const RewardsPage = () => {
               </p>
             </div>
 
-            <div className="w-[360px]">
-              <Toggle
-                name="epoch-reward-view-toggle"
-                toggles={[
-                  {
-                    label: t('totalDistributed'),
-                    value: 'total',
-                  },
-                  {
-                    label: t('earnedByMe'),
-                    value: 'individual',
-                  },
-                ]}
-                checkedValue={toggleRewardsView}
-                onChange={(e) =>
-                  setToggleRewardsView(e.target.value as RewardsView)
-                }
-              />
+            <div className="flex justify-end">
+              <div className="w-full max-w-[360px]">
+                <Toggle
+                  name="epoch-reward-view-toggle"
+                  toggles={[
+                    {
+                      label: t('totalDistributed'),
+                      value: 'total',
+                    },
+                    {
+                      label: t('earnedByMe'),
+                      value: 'individual',
+                    },
+                  ]}
+                  checkedValue={toggleRewardsView}
+                  onChange={(e) =>
+                    setToggleRewardsView(e.target.value as RewardsView)
+                  }
+                />
+              </div>
             </div>
           </section>
 

apps/governance/src/routes/token/index.tsx

@@ -100,8 +100,8 @@ const Home = ({ name }: RouteChildProps) => {
           </Link>
         </p>
       </HomeSection>
-      <div className="flex gap-12">
-        <div className="flex-1">
+      <div className="flex justify-between flex-wrap gap-x-12 gap-y-4">
+        <div className="flex-1 min-w-[360px]">
           <HomeSection>
             <SubHeading title={t('Staking')} />
             <p>
@@ -118,7 +118,7 @@ const Home = ({ name }: RouteChildProps) => {
             </p>
           </HomeSection>
         </div>
-        <div className="flex-1">
+        <div className="flex-1 min-w-[360px]">
           <HomeSection>
             <SubHeading title={t('Governance')} />
             <p>

apps/governance/src/styles.css

@@ -6,6 +6,12 @@
 @tailwind utilities;
 
 @layer base {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
   h1 {
     @apply text-2xl text-white uppercase mb-4;
   }

apps/trading/.env

@@ -1,27 +1,28 @@
+NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
 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_ORACLE_PROOFS_URL=https://raw.githubusercontent.com/vegaprotocol/well-known/main/__generated__/oracle-proofs.json
-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://explorer.stagnet1.vega.rocks
+NX_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
 NX_VEGA_NETWORKS={\"MAINNET\":\"https://console.vega.xyz\",\"TESTNET\":\"https://console.fairground.wtf\",\"STAGNET1\":\"https://trading.stagnet1.vega.rocks\"}
 NX_VEGA_TOKEN_URL=https://governance.fairground.wtf
 NX_VEGA_WALLET_URL=http://localhost:1789
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega/releases
-NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/main/announcements.json
-NX_WALLETCONNECT_PROJECT_ID=fe8091dc35738863e509fc4947525c72
+NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
+NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports
+NX_VEGA_CONSOLE_URL=https://console.fairground.wtf
 NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn
 NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/firefox/addon/vega-wallet-fairground
 
-
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=true
 NX_STOP_ORDERS=true
-# NX_ICEBERG_ORDERS
+NX_ICEBERG_ORDERS=true
 # NX_PRODUCT_PERPETUALS
-NX_METAMASK_SNAPS=true
+NX_METAMASK_SNAPS=false
 
-NX_TENDERMINT_URL=https://tm.n01.stagnet1.vega.rocks
-NX_TENDERMINT_WEBSOCKET_URL=wss://tm.n01.stagnet1.vega.xyz/websocket
+NX_TENDERMINT_URL=https://tm.be.testnet.vega.xyz
+NX_TENDERMINT_WEBSOCKET_URL=wss://be.testnet.vega.xyz/websocket

apps/trading/pages/styles.css

@@ -36,7 +36,7 @@ body,
 }
 
 /**
- * ALLOTMENT 
+ * ALLOTMENT
  */
 
 html {
@@ -81,6 +81,8 @@ html [data-theme='light'] {
   --pennant-color-macd-macd: theme(colors.vega.yellow.500);
 
   --pennant-color-volume-sell: theme(colors.market.red.DEFAULT);
+
+  --pennant-candlestick-inner-padding: 0.1;
 }
 
 html [data-theme='light'] {

docker/docker-build.sh

@@ -7,7 +7,7 @@ envCmd=""
 
 if [[ ! -z "${ENV_NAME}" ]]; then
   if [[ "${ENV_NAME}" != "ops-vega" ]]; then
-    envCmd="envCmd="yarn env-cmd -f ./apps/${APP}/.env.${ENV_NAME}"
+    envCmd="yarn env-cmd -f ./apps/${APP}/.env.${ENV_NAME}"
   fi
 fi
 

docker/node-inside-docker.Dockerfile

@@ -6,12 +6,11 @@ WORKDIR /app
 ARG APP
 ARG ENV_NAME=""
 RUN apk add --update --no-cache \
-  python3==3.10.11-r0 \
   make==4.3-r0 \
   gcc==11.2.1_git20220219-r2 \
   g++==11.2.1_git20220219-r2
 COPY . ./
-RUN yarn --network-timeout 100000 --pure-lockfile
+RUN yarn --pure-lockfile
 # work around for different build process in trading
 RUN sh docker/docker-build.sh
 

libs/accounts/package.json

@@ -1,4 +0,0 @@
-{
-  "name": "@vegaprotocol/accounts",
-  "version": "0.0.1"
-}

libs/accounts/project.json

@@ -5,26 +5,6 @@
   "projectType": "library",
   "tags": [],
   "targets": {
-    "build": {
-      "executor": "@nx/rollup:rollup",
-      "outputs": ["{options.outputPath}"],
-      "options": {
-        "outputPath": "dist/libs/accounts",
-        "tsConfig": "libs/accounts/tsconfig.lib.json",
-        "project": "libs/accounts/package.json",
-        "entryFile": "libs/accounts/src/index.ts",
-        "external": ["react", "react-dom", "react/jsx-runtime"],
-        "rollupConfig": "@nx/react/plugins/bundle-rollup",
-        "compiler": "babel",
-        "assets": [
-          {
-            "glob": "libs/accounts/README.md",
-            "input": ".",
-            "output": "."
-          }
-        ]
-      }
-    },
     "lint": {
       "executor": "@nx/linter:eslint",
       "outputs": ["{options.outputFile}"],

libs/announcements/project.json

@@ -21,7 +21,7 @@
           "@vegaprotocol/ui-toolkit"
         ],
         "rollupConfig": "@nx/react/plugins/bundle-rollup",
-        "compiler": "babel",
+        "compiler": "swc",
         "assets": [
           {
             "glob": "libs/announcements/README.md",

libs/apollo-client/package.json

@@ -1,4 +0,0 @@
-{
-  "name": "@vegaprotocol/apollo-client",
-  "version": "0.0.1"
-}

libs/apollo-client/project.json

@@ -4,16 +4,6 @@
   "sourceRoot": "libs/apollo-client/src",
   "projectType": "library",
   "targets": {
-    "build": {
-      "executor": "@nx/js:tsc",
-      "outputs": ["{options.outputPath}"],
-      "options": {
-        "outputPath": "dist/libs/apollo-client",
-        "main": "libs/apollo-client/src/index.ts",
-        "tsConfig": "libs/apollo-client/tsconfig.lib.json",
-        "assets": ["libs/apollo-client/*.md"]
-      }
-    },
     "lint": {
       "executor": "@nx/linter:eslint",
       "outputs": ["{options.outputFile}"],

libs/assets/package.json

@@ -1,4 +0,0 @@
-{
-  "name": "@vegaprotocol/assets",
-  "version": "0.0.1"
-}

libs/assets/project.json

@@ -5,26 +5,6 @@
   "projectType": "library",
   "tags": [],
   "targets": {
-    "build": {
-      "executor": "@nx/rollup:rollup",
-      "outputs": ["{options.outputPath}"],
-      "options": {
-        "outputPath": "dist/libs/assets",
-        "tsConfig": "libs/assets/tsconfig.lib.json",
-        "project": "libs/assets/package.json",
-        "entryFile": "libs/assets/src/index.ts",
-        "external": ["react/jsx-runtime"],
-        "rollupConfig": "@nx/react/plugins/bundle-rollup",
-        "compiler": "babel",
-        "assets": [
-          {
-            "glob": "libs/assets/README.md",
-            "input": ".",
-            "output": "."
-          }
-        ]
-      }
-    },
     "lint": {
       "executor": "@nx/linter:eslint",
       "outputs": ["{options.outputFile}"],

libs/candles-chart/package.json

@@ -1,4 +0,0 @@
-{
-  "name": "@vegaprotocol/candles-chart",
-  "version": "0.0.1"
-}

libs/candles-chart/project.json

@@ -5,26 +5,6 @@
   "projectType": "library",
   "tags": [],
   "targets": {
-    "build": {
-      "executor": "@nx/rollup:rollup",
-      "outputs": ["{options.outputPath}"],
-      "options": {
-        "outputPath": "dist/libs/candles-chart",
-        "tsConfig": "libs/candles-chart/tsconfig.lib.json",
-        "project": "libs/candles-chart/package.json",
-        "entryFile": "libs/candles-chart/src/index.ts",
-        "external": ["react/jsx-runtime"],
-        "rollupConfig": "@nx/react/plugins/bundle-rollup",
-        "compiler": "babel",
-        "assets": [
-          {
-            "glob": "libs/candles-chart/README.md",
-            "input": ".",
-            "output": "."
-          }
-        ]
-      }
-    },
     "lint": {
       "executor": "@nx/linter:eslint",
       "outputs": ["{options.outputFile}"],

libs/candles-chart/src/lib/candles-chart.tsx

@@ -3,6 +3,7 @@ import { CandlestickChart } from 'pennant';
 import { VegaDataSource } from './data-source';
 import { useApolloClient } from '@apollo/client';
 import { useMemo } from 'react';
+import AutoSizer from 'react-virtualized-auto-sizer';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { useThemeSwitcher } from '@vegaprotocol/react-helpers';
 import { t } from '@vegaprotocol/i18n';
@@ -12,6 +13,8 @@ export type CandlesChartContainerProps = {
   marketId: string;
 };
 
+const CANDLES_TO_WIDTH_FACTOR = 0.15;
+
 export const CandlesChartContainer = ({
   marketId,
 }: CandlesChartContainerProps) => {
@@ -27,24 +30,33 @@ export const CandlesChartContainer = ({
   }, [client, marketId, pubKey]);
 
   return (
-    <CandlestickChart
-      dataSource={dataSource}
-      options={{
-        chartType,
-        overlays,
-        studies,
-        notEnoughDataText: (
-          <span className="text-xs text-center">{t('No data')}</span>
-        ),
-      }}
-      interval={interval}
-      theme={theme}
-      onOptionsChanged={(options) => {
-        merge({
-          overlays: options.overlays,
-          studies: options.studies,
-        });
-      }}
-    />
+    <AutoSizer>
+      {({ width, height }) => (
+        <div style={{ width, height }}>
+          <CandlestickChart
+            dataSource={dataSource}
+            options={{
+              chartType,
+              overlays,
+              studies,
+              notEnoughDataText: (
+                <span className="text-xs text-center">{t('No data')}</span>
+              ),
+              initialNumCandlesToDisplay: Math.floor(
+                width * CANDLES_TO_WIDTH_FACTOR
+              ),
+            }}
+            interval={interval}
+            theme={theme}
+            onOptionsChanged={(options) => {
+              merge({
+                overlays: options.overlays,
+                studies: options.studies,
+              });
+            }}
+          />
+        </div>
+      )}
+    </AutoSizer>
   );
 };

libs/data-provider/package.json

@@ -1,4 +0,0 @@
-{
-  "name": "@vegaprotocol/data-provider",
-  "version": "0.0.1"
-}

libs/data-provider/project.json

@@ -5,26 +5,6 @@
   "projectType": "library",
   "tags": [],
   "targets": {
-    "build": {
-      "executor": "@nx/rollup:rollup",
-      "outputs": ["{options.outputPath}"],
-      "options": {
-        "outputPath": "dist/libs/data-provider",
-        "tsConfig": "libs/data-provider/tsconfig.lib.json",
-        "project": "libs/data-provider/package.json",
-        "entryFile": "libs/data-provider/src/index.ts",
-        "external": ["react/jsx-runtime"],
-        "rollupConfig": "@nx/react/plugins/bundle-rollup",
-        "compiler": "babel",
-        "assets": [
-          {
-            "glob": "libs/data-provider/README.md",
-            "input": ".",
-            "output": "."
-          }
-        ]
-      }
-    },
     "lint": {
       "executor": "@nx/linter:eslint",
       "outputs": ["{options.outputFile}"],

libs/datagrid/package.json

@@ -1,4 +0,0 @@
-{
-  "name": "@vegaprotocol/datagrid",
-  "version": "0.0.1"
-}

libs/datagrid/project.json

@@ -5,26 +5,6 @@
   "projectType": "library",
   "tags": [],
   "targets": {
-    "build": {
-      "executor": "@nx/rollup:rollup",
-      "outputs": ["{options.outputPath}"],
-      "options": {
-        "outputPath": "dist/libs/datagrid",
-        "tsConfig": "libs/datagrid/tsconfig.lib.json",
-        "project": "libs/datagrid/package.json",
-        "entryFile": "libs/datagrid/src/index.ts",
-        "external": ["react/jsx-runtime"],
-        "rollupConfig": "@nx/react/plugins/bundle-rollup",
-        "compiler": "babel",
-        "assets": [
-          {
-            "glob": "libs/datagrid/README.md",
-            "input": ".",
-            "output": "."
-          }
-        ]
-      }
-    },
     "lint": {
       "executor": "@nx/linter:eslint",
       "outputs": ["{options.outputFile}"],

libs/deal-ticket/package.json

@@ -1,4 +0,0 @@
-{
-  "name": "@vegaprotocol/deal-ticket",
-  "version": "0.0.1"
-}

libs/deal-ticket/project.json

@@ -5,26 +5,6 @@
   "projectType": "library",
   "tags": [],
   "targets": {
-    "build": {
-      "executor": "@nx/rollup:rollup",
-      "outputs": ["{options.outputPath}"],
-      "options": {
-        "outputPath": "dist/libs/deal-ticket",
-        "tsConfig": "libs/deal-ticket/tsconfig.lib.json",
-        "project": "libs/deal-ticket/package.json",
-        "entryFile": "libs/deal-ticket/src/index.ts",
-        "external": ["react/jsx-runtime"],
-        "rollupConfig": "@nx/react/plugins/bundle-rollup",
-        "compiler": "babel",
-        "assets": [
-          {
-            "glob": "libs/deal-ticket/README.md",
-            "input": ".",
-            "output": "."
-          }
-        ]
-      }
-    },
     "lint": {
       "executor": "@nx/linter:eslint",
       "outputs": ["{options.outputFile}"],

libs/deal-ticket/src/components/deal-ticket-validation/margin-warning.tsx

@@ -1,6 +1,12 @@
 import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
-import { Notification, Intent } from '@vegaprotocol/ui-toolkit';
+import {
+  Intent,
+  VegaIcon,
+  VegaIconNames,
+  Tooltip,
+  TradingButton,
+} from '@vegaprotocol/ui-toolkit';
 
 interface Props {
   margin: string;
@@ -14,24 +20,43 @@ interface Props {
 }
 
 export const MarginWarning = ({ margin, balance, asset, onDeposit }: Props) => {
+  const description = (
+    <div className="flex flex-col items-start gap-2 p-2">
+      <p className="text-sm">
+        {t('%s %s is currently required.', [
+          addDecimalsFormatNumber(margin, asset.decimals),
+          asset.symbol,
+        ])}
+      </p>
+      <p className="text-sm">
+        {t('You have only %s.', [
+          addDecimalsFormatNumber(balance, asset.decimals),
+        ])}
+      </p>
+
+      <TradingButton
+        intent={Intent.Warning}
+        size="small"
+        onClick={() => onDeposit(asset.id)}
+        data-testid="deal-ticket-deposit-dialog-button"
+        type="button"
+      >
+        {t('Deposit %s', [asset.symbol])}
+      </TradingButton>
+    </div>
+  );
+
   return (
-    <Notification
-      intent={Intent.Warning}
-      testId="deal-ticket-warning-margin"
-      message={`You may not have enough margin available to open this position. ${addDecimalsFormatNumber(
-        margin,
-        asset.decimals
-      )} ${asset.symbol} ${t(
-        'is currently required. You have only'
-      )} ${addDecimalsFormatNumber(balance, asset.decimals)} ${
-        asset.symbol
-      } ${t('available.')}`}
-      buttonProps={{
-        text: t(`Deposit ${asset.symbol}`),
-        action: () => onDeposit(asset.id),
-        dataTestId: 'deal-ticket-deposit-dialog-button',
-        size: 'small',
-      }}
-    />
+    <Tooltip description={description}>
+      <div
+        className="flex text-xs items-center"
+        data-testid="deal-ticket-warning-margin"
+      >
+        <span className="text-yellow-500 mr-2">
+          <VegaIcon name={VegaIconNames.WARNING} />
+        </span>
+        {t('You may not have enough margin available to open this position.')}
+      </div>
+    </Tooltip>
   );
 };

libs/deal-ticket/src/components/deal-ticket/deal-ticket-fee-details.tsx

@@ -11,8 +11,7 @@ import { AccountBreakdownDialog } from '@vegaprotocol/accounts';
 import { formatRange, formatValue } from '@vegaprotocol/utils';
 import { marketMarginDataProvider } from '@vegaprotocol/accounts';
 import { useDataProvider } from '@vegaprotocol/data-provider';
-
-import * as Accordion from '@radix-ui/react-accordion';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
 
 import {
   MARGIN_DIFF_TOOLTIP_TEXT,
@@ -24,7 +23,13 @@ import {
 } from '../../constants';
 import { useEstimateFees } from '../../hooks';
 import { KeyValue } from './key-value';
-import { TOOLTIP_TRIGGER_CLASS_NAME } from '@vegaprotocol/ui-toolkit';
+import {
+  Accordion,
+  AccordionChevron,
+  AccordionPanel,
+  Tooltip,
+} from '@vegaprotocol/ui-toolkit';
+import classNames from 'classnames';
 
 const emptyValue = '-';
 
@@ -246,31 +251,56 @@ export const DealTicketMarginDetails = ({
   const quoteName = market.tradableInstrument.instrument.product.quoteName;
 
   return (
-    <>
-      <Accordion.Root type="single" collapsible>
-        <Accordion.Item value="margin">
-          <KeyValue
-            id="margin-required"
-            label={
-              <Accordion.Trigger className={TOOLTIP_TRIGGER_CLASS_NAME}>
-                {t('Margin required')}
-              </Accordion.Trigger>
-            }
-            value={formatRange(
-              marginRequiredBestCase,
-              marginRequiredWorstCase,
-              assetDecimals
-            )}
-            formattedValue={formatRange(
-              marginRequiredBestCase,
-              marginRequiredWorstCase,
-              assetDecimals,
-              quantum
-            )}
-            labelDescription={MARGIN_DIFF_TOOLTIP_TEXT(assetSymbol)}
-            symbol={assetSymbol}
-          />
-          <Accordion.Content>
+    <div className="flex flex-col gap-2 w-full">
+      <Accordion>
+        <AccordionPanel
+          itemId="margin"
+          trigger={
+            <AccordionPrimitive.Trigger
+              data-testid="accordion-toggle"
+              className={classNames(
+                'w-full pt-2',
+                'flex items-center gap-2 text-xs',
+                'group'
+              )}
+            >
+              <div
+                data-testid={`deal-ticket-fee-margin-required`}
+                key={'value-dropdown'}
+                className="flex items-center gap-2 justify-between w-full"
+              >
+                <div className="flex items-center gap-1">
+                  <Tooltip description={MARGIN_DIFF_TOOLTIP_TEXT(assetSymbol)}>
+                    <span className="text-muted">{t('Margin required')}</span>
+                  </Tooltip>
+
+                  <AccordionChevron size={10} />
+                </div>
+                <Tooltip
+                  description={
+                    formatRange(
+                      marginRequiredBestCase,
+                      marginRequiredWorstCase,
+                      assetDecimals
+                    ) ?? '-'
+                  }
+                  noUnderline
+                >
+                  <div className="font-mono text-right">
+                    {formatRange(
+                      marginRequiredBestCase,
+                      marginRequiredWorstCase,
+                      assetDecimals,
+                      quantum
+                    )}{' '}
+                    {assetSymbol || ''}
+                  </div>
+                </Tooltip>
+              </div>
+            </AccordionPrimitive.Trigger>
+          }
+        >
+          <div className="flex flex-col gap-2 w-full">
             <KeyValue
               label={t('Total margin available')}
               indent
@@ -310,12 +340,12 @@ export const DealTicketMarginDetails = ({
                 quantum
               )}
             />
-          </Accordion.Content>
-        </Accordion.Item>
-      </Accordion.Root>
+          </div>
+        </AccordionPanel>
+      </Accordion>
       {projectedMargin}
       <KeyValue
-        label={t('Liquidation price estimate')}
+        label={t('Liquidation')}
         value={liquidationPriceEstimate}
         formattedValue={liquidationPriceEstimate}
         symbol={quoteName}
@@ -329,6 +359,6 @@ export const DealTicketMarginDetails = ({
           onClose={onAccountBreakdownDialogClose}
         />
       )}
-    </>
+    </div>
   );
 };

libs/deal-ticket/src/components/deal-ticket/deal-ticket-stop-order.tsx

@@ -538,7 +538,7 @@ const NotionalAndFees = ({
     market.positionDecimalPlaces
   );
   return (
-    <div className="mb-4">
+    <div className="mb-4 flex flex-col gap-2 w-full">
       <KeyValue
         label={t('Notional')}
         value={formatValue(notionalSize, market.decimalPlaces)}

libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx

@@ -464,7 +464,7 @@ export const DealTicket = ({
           )}
         />
       )}
-      <div className="mb-4">
+      <div className="mb-4 flex flex-col gap-2 w-full">
         <KeyValue
           label={t('Notional')}
           value={formatValue(notionalSize, market.decimalPlaces)}

libs/deal-ticket/src/components/deal-ticket/key-value.tsx

@@ -25,11 +25,11 @@ export const KeyValue = ({
 }: KeyValuePros) => {
   const displayValue = `${formattedValue ?? '-'} ${symbol || ''}`;
   const valueElement = onClick ? (
-    <button onClick={onClick} className="text-muted">
+    <button onClick={onClick} className="font-mono">
       {displayValue}
     </button>
   ) : (
-    <div className="text-muted">{displayValue}</div>
+    <div className="font-mono">{displayValue}</div>
   );
   return (
     <div
@@ -40,14 +40,14 @@ export const KeyValue = ({
       }`}
       key={typeof label === 'string' ? label : 'value-dropdown'}
       className={classnames(
-        'text-xs mt-2 flex justify-between items-center gap-4 flex-wrap',
+        'text-xs flex justify-between items-center gap-4 flex-wrap',
         { 'ml-2': indent }
       )}
     >
       <Tooltip description={labelDescription}>
-        <div>{label}</div>
+        <div className="text-muted">{label}</div>
       </Tooltip>
-      <Tooltip description={`${value ?? '-'} ${symbol || ''}`}>
+      <Tooltip description={`${value ?? '-'} ${symbol || ''}`} noUnderline>
         {valueElement}
       </Tooltip>
     </div>

libs/deal-ticket/src/constants.ts

@@ -8,7 +8,7 @@ export const EST_MARGIN_TOOLTIP_TEXT = (settlementAsset: string) =>
     [settlementAsset]
   );
 export const EST_TOTAL_MARGIN_TOOLTIP_TEXT = t(
-  'Estimated total margin that will cover open position, active orders and this order.'
+  'Estimated total margin that will cover open positions, active orders and this order.'
 );
 export const MARGIN_ACCOUNT_TOOLTIP_TEXT = t('Margin account balance.');
 export const MARGIN_DIFF_TOOLTIP_TEXT = (settlementAsset: string) =>
@@ -60,7 +60,7 @@ export const EST_FEES_TOOLTIP_TEXT = t(
 );
 
 export const LIQUIDATION_PRICE_ESTIMATE_TOOLTIP_TEXT = t(
-  'This is a approximation to the liquidation price for that particular contract position, assuming nothing else changes, which may affect your margin and collateral balances.'
+  'This is an approximation (or a range) for the liquidation price for that particular contract position, assuming nothing else changes, which may affect your margin and collateral balances.'
 );
 
 export const EST_SLIPPAGE = t(

libs/deposits/package.json

@@ -1,4 +0,0 @@
-{
-  "name": "@vegaprotocol/deposits",
-  "version": "0.0.1"
-}

libs/deposits/project.json

@@ -5,26 +5,6 @@
   "projectType": "library",
   "tags": [],
   "targets": {
-    "build": {
-      "executor": "@nx/rollup:rollup",
-      "outputs": ["{options.outputPath}"],
-      "options": {
-        "outputPath": "dist/libs/deposits",
-        "tsConfig": "libs/deposits/tsconfig.lib.json",
-        "project": "libs/deposits/package.json",
-        "entryFile": "libs/deposits/src/index.ts",
-        "external": ["react/jsx-runtime"],
-        "rollupConfig": "@nx/react/plugins/bundle-rollup",
-        "compiler": "babel",
-        "assets": [
-          {
-            "glob": "libs/deposits/README.md",
-            "input": ".",
-            "output": "."
-          }
-        ]
-      }
-    },
     "lint": {
       "executor": "@nx/linter:eslint",
       "outputs": ["{options.outputFile}"],

libs/environment/package.json

@@ -1,4 +0,0 @@
-{
-  "name": "@vegaprotocol/environment",
-  "version": "0.0.1"
-}

libs/environment/project.json

@@ -5,26 +5,6 @@
   "projectType": "library",
   "tags": [],
   "targets": {
-    "build": {
-      "executor": "@nx/rollup:rollup",
-      "outputs": ["{options.outputPath}"],
-      "options": {
-        "outputPath": "dist/libs/environment",
-        "tsConfig": "libs/environment/tsconfig.lib.json",
-        "project": "libs/environment/package.json",
-        "entryFile": "libs/environment/src/index.ts",
-        "external": ["react/jsx-runtime"],
-        "rollupConfig": "@nx/react/plugins/bundle-rollup",
-        "compiler": "babel",
-        "assets": [
-          {
-            "glob": "libs/environment/README.md",
-            "input": ".",
-            "output": "."
-          }
-        ]
-      }
-    },
     "lint": {
       "executor": "@nx/linter:eslint",
       "outputs": ["{options.outputFile}"],

libs/environment/src/hooks/use-links.ts

@@ -159,6 +159,7 @@ export const ExternalLinks = {
   DISCORD: 'https://vega.xyz/discord',
   GOVERNANCE_PAGE: 'https://vega.xyz/governance',
   VALIDATOR_FORUM: 'https://community.vega.xyz/c/mainnet-validator-candidates',
+  PROPOSALS_FORUM: 'https://community.vega.xyz/c/governance/25',
   MARGIN_CREDIT_RISK:
     'https://vega.xyz/papers/margins-and-credit-risk.pdf#page=7',
   VEGA_WALLET_URL: 'https://vega.xyz/wallet',

libs/fills/package.json

@@ -1,4 +0,0 @@
-{
-  "name": "@vegaprotocol/fills",
-  "version": "0.0.1"
-}

libs/fills/project.json

@@ -5,26 +5,6 @@
   "projectType": "library",
   "tags": [],
   "targets": {
-    "build": {
-      "executor": "@nx/rollup:rollup",
-      "outputs": ["{options.outputPath}"],
-      "options": {
-        "outputPath": "dist/libs/fills",
-        "tsConfig": "libs/fills/tsconfig.lib.json",
-        "project": "libs/fills/package.json",
-        "entryFile": "libs/fills/src/index.ts",
-        "external": ["react/jsx-runtime"],
-        "rollupConfig": "@nx/react/plugins/bundle-rollup",
-        "compiler": "babel",
-        "assets": [
-          {
-            "glob": "libs/fills/README.md",
-            "input": ".",
-            "output": "."
-          }
-        ]
-      }
-    },
     "lint": {
       "executor": "@nx/linter:eslint",
       "outputs": ["{options.outputFile}"],

libs/i18n/project.json

@@ -15,17 +15,6 @@
         "assets": ["libs/i18n/*.md"]
       }
     },
-    "publish": {
-      "executor": "nx:run-commands",
-      "options": {
-        "command": "node tools/scripts/publish.mjs i18n {args.ver} {args.tag}"
-      },
-      "dependsOn": [
-        {
-          "target": "build"
-        }
-      ]
-    },
     "lint": {
       "executor": "@nx/linter:eslint",
       "outputs": ["{options.outputFile}"],

libs/ledger/package.json

@@ -1,4 +0,0 @@
-{
-  "name": "@vegaprotocol/ledger",
-  "version": "0.0.1"
-}

libs/ledger/project.json

@@ -4,26 +4,6 @@
   "sourceRoot": "libs/ledger/src",
   "projectType": "library",
   "targets": {
-    "build": {
-      "executor": "@nx/rollup:rollup",
-      "outputs": ["{options.outputPath}"],
-      "options": {
-        "outputPath": "dist/libs/ledger",
-        "tsConfig": "libs/ledger/tsconfig.lib.json",
-        "project": "libs/ledger/package.json",
-        "entryFile": "libs/ledger/src/index.ts",
-        "external": ["react/jsx-runtime"],
-        "rollupConfig": "@nx/react/plugins/bundle-rollup",
-        "compiler": "babel",
-        "assets": [
-          {
-            "glob": "libs/ledger/README.md",
-            "input": ".",
-            "output": "."
-          }
-        ]
-      }
-    },
     "lint": {
       "executor": "@nx/linter:eslint",
       "outputs": ["{options.outputFile}"],

libs/liquidity/package.json

@@ -1,4 +0,0 @@
-{
-  "name": "@vegaprotocol/liquidity",
-  "version": "0.0.1"
-}

libs/liquidity/project.json

@@ -5,26 +5,6 @@
   "projectType": "library",
   "tags": [],
   "targets": {
-    "build": {
-      "executor": "@nx/rollup:rollup",
-      "outputs": ["{options.outputPath}"],
-      "options": {
-        "outputPath": "dist/libs/liquidity",
-        "tsConfig": "libs/liquidity/tsconfig.lib.json",
-        "project": "libs/liquidity/package.json",
-        "entryFile": "libs/liquidity/src/index.ts",
-        "external": ["react/jsx-runtime"],
-        "rollupConfig": "@nx/react/plugins/bundle-rollup",
-        "compiler": "babel",
-        "assets": [
-          {
-            "glob": "libs/liquidity/README.md",
-            "input": ".",
-            "output": "."
-          }
-        ]
-      }
-    },
     "lint": {
       "executor": "@nx/linter:eslint",
       "outputs": ["{options.outputFile}"],

libs/logger/package.json

@@ -1,5 +0,0 @@
-{
-  "name": "@vegaprotocol/logger",
-  "version": "0.0.1",
-  "type": "commonjs"
-}

libs/logger/project.json

@@ -5,17 +5,6 @@
   "projectType": "library",
   "tags": [],
   "targets": {
-    "build": {
-      "executor": "@nx/js:tsc",
-      "outputs": ["{options.outputPath}"],
-      "format": ["esm", "cjs"],
-      "options": {
-        "outputPath": "dist/libs/logger",
-        "main": "libs/logger/src/index.ts",
-        "tsConfig": "libs/logger/tsconfig.lib.json",
-        "assets": ["libs/logger/*.md"]
-      }
-    },
     "lint": {
       "executor": "@nx/linter:eslint",
       "outputs": ["{options.outputFile}"],

libs/market-depth/package.json

@@ -1,4 +0,0 @@
-{
-  "name": "@vegaprotocol/market-depth",
-  "version": "0.0.1"
-}

libs/market-depth/project.json

@@ -5,26 +5,6 @@
   "projectType": "library",
   "tags": [],
   "targets": {
-    "build": {
-      "executor": "@nx/rollup:rollup",
-      "outputs": ["{options.outputPath}"],
-      "options": {
-        "outputPath": "dist/libs/market-depth",
-        "tsConfig": "libs/market-depth/tsconfig.lib.json",
-        "project": "libs/market-depth/package.json",
-        "entryFile": "libs/market-depth/src/index.ts",
-        "external": ["react/jsx-runtime"],
-        "rollupConfig": "@nx/react/plugins/bundle-rollup",
-        "compiler": "babel",
-        "assets": [
-          {
-            "glob": "libs/market-depth/README.md",
-            "input": ".",
-            "output": "."
-          }
-        ]
-      }
-    },
     "lint": {
       "executor": "@nx/linter:eslint",
       "outputs": ["{options.outputFile}"],

libs/markets/package.json

@@ -1,4 +0,0 @@
-{
-  "name": "@vegaprotocol/markets",
-  "version": "0.0.1"
-}

libs/markets/project.json

@@ -5,26 +5,6 @@
   "projectType": "library",
   "tags": [],
   "targets": {
-    "build": {
-      "executor": "@nx/rollup:rollup",
-      "outputs": ["{options.outputPath}"],
-      "options": {
-        "outputPath": "dist/libs/markets",
-        "tsConfig": "libs/markets/tsconfig.lib.json",
-        "project": "libs/markets/package.json",
-        "entryFile": "libs/markets/src/index.ts",
-        "external": ["react/jsx-runtime"],
-        "rollupConfig": "@nx/react/plugins/bundle-rollup",
-        "compiler": "babel",
-        "assets": [
-          {
-            "glob": "libs/markets/README.md",
-            "input": ".",
-            "output": "."
-          }
-        ]
-      }
-    },
     "lint": {
       "executor": "@nx/linter:eslint",
       "outputs": ["{options.outputFile}"],

libs/network-info/package.json

@@ -1,4 +0,0 @@
-{
-  "name": "@vegaprotocol/network-info",
-  "version": "0.0.1"
-}

libs/network-info/project.json

@@ -5,26 +5,6 @@
   "projectType": "library",
   "tags": [],
   "targets": {
-    "build": {
-      "executor": "@nx/rollup:rollup",
-      "outputs": ["{options.outputPath}"],
-      "options": {
-        "outputPath": "dist/libs/network-info",
-        "tsConfig": "libs/network-info/tsconfig.lib.json",
-        "project": "libs/network-info/package.json",
-        "entryFile": "libs/network-info/src/index.ts",
-        "external": ["react/jsx-runtime"],
-        "rollupConfig": "@nx/react/plugins/bundle-rollup",
-        "compiler": "babel",
-        "assets": [
-          {
-            "glob": "libs/network-info/README.md",
-            "input": ".",
-            "output": "."
-          }
-        ]
-      }
-    },
     "lint": {
       "executor": "@nx/linter:eslint",
       "outputs": ["{options.outputFile}"],

libs/network-parameters/package.json

@@ -1,4 +0,0 @@
-{
-  "name": "@vegaprotocol/network-parameters",
-  "version": "0.0.1"
-}

libs/network-parameters/project.json

@@ -5,26 +5,6 @@
   "projectType": "library",
   "tags": [],
   "targets": {
-    "build": {
-      "executor": "@nx/rollup:rollup",
-      "outputs": ["{options.outputPath}"],
-      "options": {
-        "outputPath": "dist/libs/network-parameters",
-        "tsConfig": "libs/network-parameters/tsconfig.lib.json",
-        "project": "libs/network-parameters/package.json",
-        "entryFile": "libs/network-parameters/src/index.ts",
-        "external": ["react/jsx-runtime"],
-        "rollupConfig": "@nx/react/plugins/bundle-rollup",
-        "compiler": "babel",
-        "assets": [
-          {
-            "glob": "libs/network-parameters/README.md",
-            "input": ".",
-            "output": "."
-          }
-        ]
-      }
-    },
     "lint": {
       "executor": "@nx/linter:eslint",
       "outputs": ["{options.outputFile}"],

libs/network-stats/package.json

@@ -1,4 +0,0 @@
-{
-  "name": "@vegaprotocol/network-stats",
-  "version": "0.0.1"
-}

libs/network-stats/project.json

@@ -5,26 +5,6 @@
   "projectType": "library",
   "tags": [],
   "targets": {
-    "build": {
-      "executor": "@nx/rollup:rollup",
-      "outputs": ["{options.outputPath}"],
-      "options": {
-        "outputPath": "dist/libs/network-stats",
-        "tsConfig": "libs/network-stats/tsconfig.lib.json",
-        "project": "libs/network-stats/package.json",
-        "entryFile": "libs/network-stats/src/index.ts",
-        "external": ["react/jsx-runtime"],
-        "rollupConfig": "@nx/react/plugins/bundle-rollup",
-        "compiler": "babel",
-        "assets": [
-          {
-            "glob": "libs/network-stats/README.md",
-            "input": ".",
-            "output": "."
-          }
-        ]
-      }
-    },
     "lint": {
       "executor": "@nx/linter:eslint",
       "outputs": ["{options.outputFile}"],

libs/orders/package.json

@@ -1,4 +0,0 @@
-{
-  "name": "@vegaprotocol/orders",
-  "version": "0.0.1"
-}

libs/orders/project.json

@@ -5,26 +5,6 @@
   "projectType": "library",
   "tags": [],
   "targets": {
-    "build": {
-      "executor": "@nx/rollup:rollup",
-      "outputs": ["{options.outputPath}"],
-      "options": {
-        "outputPath": "dist/libs/orders",
-        "tsConfig": "libs/orders/tsconfig.lib.json",
-        "project": "libs/orders/package.json",
-        "entryFile": "libs/orders/src/index.ts",
-        "external": ["react/jsx-runtime"],
-        "rollupConfig": "@nx/react/plugins/bundle-rollup",
-        "compiler": "babel",
-        "assets": [
-          {
-            "glob": "libs/orders/README.md",
-            "input": ".",
-            "output": "."
-          }
-        ]
-      }
-    },
     "lint": {
       "executor": "@nx/linter:eslint",
       "outputs": ["{options.outputFile}"],

libs/positions/package.json

@@ -1,4 +0,0 @@
-{
-  "name": "@vegaprotocol/positions",
-  "version": "0.0.1"
-}

libs/positions/project.json

@@ -5,26 +5,6 @@
   "projectType": "library",
   "tags": [],
   "targets": {
-    "build": {
-      "executor": "@nx/rollup:rollup",
-      "outputs": ["{options.outputPath}"],
-      "options": {
-        "outputPath": "dist/libs/positions",
-        "tsConfig": "libs/positions/tsconfig.lib.json",
-        "project": "libs/positions/package.json",
-        "entryFile": "libs/positions/src/index.ts",
-        "external": ["react/jsx-runtime"],
-        "rollupConfig": "@nx/react/plugins/bundle-rollup",
-        "compiler": "babel",
-        "assets": [
-          {
-            "glob": "libs/positions/README.md",
-            "input": ".",
-            "output": "."
-          }
-        ]
-      }
-    },
     "lint": {
       "executor": "@nx/linter:eslint",
       "outputs": ["{options.outputFile}"],

libs/proposals/package.json

@@ -1,4 +0,0 @@
-{
-  "name": "@vegaprotocol/proposals",
-  "version": "0.0.1"
-}

libs/proposals/project.json

@@ -5,26 +5,6 @@
   "projectType": "library",
   "tags": [],
   "targets": {
-    "build": {
-      "executor": "@nx/rollup:rollup",
-      "outputs": ["{options.outputPath}"],
-      "options": {
-        "outputPath": "dist/libs/proposals",
-        "tsConfig": "libs/proposals/tsconfig.lib.json",
-        "project": "libs/proposals/package.json",
-        "entryFile": "libs/proposals/src/index.ts",
-        "external": ["react/jsx-runtime"],
-        "rollupConfig": "@nx/react/plugins/bundle-rollup",
-        "compiler": "babel",
-        "assets": [
-          {
-            "glob": "libs/proposals/README.md",
-            "input": ".",
-            "output": "."
-          }
-        ]
-      }
-    },
     "lint": {
       "executor": "@nx/linter:eslint",
       "outputs": ["{options.outputFile}"],

libs/react-helpers/project.json

@@ -21,7 +21,7 @@
           "@vegaprotocol/utils"
         ],
         "rollupConfig": "@nx/react/plugins/bundle-rollup",
-        "compiler": "babel",
+        "compiler": "swc",
         "format": ["esm", "cjs"],
         "assets": [
           {

libs/smart-contracts/package.json

@@ -1,4 +0,0 @@
-{
-  "name": "@vegaprotocol/smart-contracts",
-  "version": "0.0.1"
-}

libs/smart-contracts/project.json

@@ -3,16 +3,6 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "libs/smart-contracts/src",
   "targets": {
-    "build": {
-      "executor": "@nx/js:tsc",
-      "outputs": ["{options.outputPath}"],
-      "options": {
-        "outputPath": "dist/libs/smart-contracts",
-        "main": "libs/smart-contracts/src/index.ts",
-        "tsConfig": "libs/smart-contracts/tsconfig.lib.json",
-        "assets": ["libs/smart-contracts/*.md"]
-      }
-    },
     "lint": {
       "executor": "@nx/linter:eslint",
       "outputs": ["{options.outputFile}"],

libs/tendermint/package.json

@@ -1,4 +0,0 @@
-{
-  "name": "@vegaprotocol/tendermint",
-  "version": "0.0.1"
-}

libs/tendermint/project.json

@@ -12,26 +12,6 @@
         "lintFilePatterns": ["libs/tendermint/**/*.{ts,tsx,js,jsx}"]
       }
     },
-    "build": {
-      "executor": "@nx/rollup:rollup",
-      "outputs": ["{options.outputPath}"],
-      "options": {
-        "outputPath": "dist/libs/tendermint",
-        "tsConfig": "libs/tendermint/tsconfig.lib.json",
-        "project": "libs/tendermint/package.json",
-        "entryFile": "libs/tendermint/src/index.ts",
-        "external": ["react", "react-dom", "react/jsx-runtime"],
-        "rollupConfig": "@nx/react/plugins/bundle-rollup",
-        "compiler": "babel",
-        "assets": [
-          {
-            "glob": "libs/tendermint/README.md",
-            "input": ".",
-            "output": "."
-          }
-        ]
-      }
-    },
     "test": {
       "executor": "@nx/jest:jest",
       "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],

libs/trades/package.json

@@ -1,4 +0,0 @@
-{
-  "name": "@vegaprotocol/trades",
-  "version": "0.0.1"
-}

libs/trades/project.json

@@ -5,26 +5,6 @@
   "projectType": "library",
   "tags": [],
   "targets": {
-    "build": {
-      "executor": "@nx/rollup:rollup",
-      "outputs": ["{options.outputPath}"],
-      "options": {
-        "outputPath": "dist/libs/trades",
-        "tsConfig": "libs/trades/tsconfig.lib.json",
-        "project": "libs/trades/package.json",
-        "entryFile": "libs/trades/src/index.ts",
-        "external": ["react/jsx-runtime"],
-        "rollupConfig": "@nx/react/plugins/bundle-rollup",
-        "compiler": "babel",
-        "assets": [
-          {
-            "glob": "libs/trades/README.md",
-            "input": ".",
-            "output": "."
-          }
-        ]
-      }
-    },
     "lint": {
       "executor": "@nx/linter:eslint",
       "outputs": ["{options.outputFile}"],

libs/ui-toolkit/project.json

@@ -23,7 +23,7 @@
           "@vegaprotocol/utils"
         ],
         "rollupConfig": "@nx/react/plugins/bundle-rollup",
-        "compiler": "babel",
+        "compiler": "swc",
         "format": ["esm", "cjs"],
         "assets": [
           {

libs/ui-toolkit/src/components/accordion/accordion.tsx

@@ -1,5 +1,6 @@
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import classNames from 'classnames';
+import type { VegaIconProps } from '../icon';
 import { VegaIcon, VegaIconNames } from '../icon';
 
 export interface AccordionItemProps {
@@ -24,6 +25,28 @@ export const Accordion = ({ panels, children }: AccordionProps) => {
   );
 };
 
+export const AccordionPanel = ({
+  trigger,
+  children,
+  itemId,
+}: {
+  trigger: React.ReactNode;
+  children: React.ReactNode;
+  itemId: string;
+}) => {
+  return (
+    <AccordionPrimitive.Item value={itemId}>
+      <AccordionPrimitive.Header>{trigger}</AccordionPrimitive.Header>
+      <AccordionPrimitive.Content
+        className="py-3 text-sm"
+        data-testid="accordion-content"
+      >
+        {children}
+      </AccordionPrimitive.Content>
+    </AccordionPrimitive.Item>
+  );
+};
+
 export const AccordionItem = ({
   title,
   content,
@@ -31,7 +54,7 @@ export const AccordionItem = ({
 }: AccordionPanelProps) => {
   const triggerClassNames = classNames(
     'w-full py-2',
-    'flex items-center justify-between border-b border-vega-light-200 dark:border-vega-dark-200 text-sm',
+    'flex items-center justify-between gap-2 border-b border-vega-light-200 dark:border-vega-dark-200 text-sm',
     'group'
   );
   return (
@@ -41,7 +64,9 @@ export const AccordionItem = ({
           data-testid="accordion-toggle"
           className={triggerClassNames}
         >
-          <span data-testid="accordion-title">{title}</span>
+          <span data-testid="accordion-title" className="flex-1 text-left">
+            {title}
+          </span>
           <AccordionChevron aria-hidden />
         </AccordionPrimitive.Trigger>
       </AccordionPrimitive.Header>
@@ -55,15 +80,17 @@ export const AccordionItem = ({
   );
 };
 
-export const AccordionChevron = () => {
+export const AccordionChevron = ({
+  size = 16,
+}: Pick<VegaIconProps, 'size'>) => {
   return (
     <span
       className={classNames(
-        'transform transition ease-in-out duration-300',
+        'flex transform transition ease-in-out duration-300',
         'group-data-[state=open]:rotate-180'
       )}
     >
-      <VegaIcon name={VegaIconNames.CHEVRON_DOWN} aria-hidden />
+      <VegaIcon name={VegaIconNames.CHEVRON_DOWN} aria-hidden size={size} />
     </span>
   );
 };

libs/ui-toolkit/src/components/icon/vega-icons/svg-icons/icon-warning.tsx

@@ -0,0 +1,7 @@
+export const IconWarning = ({ size = 16 }: { size: number }) => {
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 16">
+      <path d="M15.84 13.5l.01-.01-7-12-.01.01c-.17-.3-.48-.5-.85-.5s-.67.2-.85.5l-.01-.01-7 12 .01.01c-.09.15-.15.31-.15.5 0 .55.45 1 1 1h14c.55 0 1-.45 1-1 0-.19-.06-.35-.15-.5zm-6.85-.51h-2v-2h2v2zm0-3h-2v-5h2v5z" />
+    </svg>
+  );
+};

libs/ui-toolkit/src/components/icon/vega-icons/vega-icon-record.ts

@@ -36,6 +36,7 @@ import { IconTrendDown } from './svg-icons/icon-trend-down';
 import { IconTrendUp } from './svg-icons/icon-trend-up';
 import { IconTwitter } from './svg-icons/icon-twitter';
 import { IconVote } from './svg-icons/icon-vote';
+import { IconWarning } from './svg-icons/icon-warning';
 import { IconWithdraw } from './svg-icons/icon-withdraw';
 
 export enum VegaIconNames {
@@ -78,6 +79,7 @@ export enum VegaIconNames {
   TWITTER = 'twitter',
   VOTE = 'vote',
   WITHDRAW = 'withdraw',
+  WARNING = 'warning',
 }
 
 export const VegaIconNameMap: Record<
@@ -123,4 +125,5 @@ export const VegaIconNameMap: Record<
   twitter: IconTwitter,
   vote: IconVote,
   withdraw: IconWithdraw,
+  warning: IconWarning,
 };

libs/ui-toolkit/src/components/select/select.tsx

@@ -2,7 +2,7 @@ import type { Ref, SelectHTMLAttributes } from 'react';
 import { useRef } from 'react';
 import { forwardRef } from 'react';
 import classNames from 'classnames';
-import { Icon } from '..';
+import { Icon } from '../icon';
 import { defaultSelectElement } from '../../utils/shared';
 import * as SelectPrimitive from '@radix-ui/react-select';
 

libs/ui-toolkit/src/components/tooltip/tooltip.tsx

@@ -8,6 +8,7 @@ import {
   Portal,
 } from '@radix-ui/react-tooltip';
 import type { ITooltipParams } from 'ag-grid-community';
+import classNames from 'classnames';
 
 const tooltipContentClasses =
   'max-w-sm bg-vega-light-100 dark:bg-vega-dark-100 border border-vega-light-200 dark:border-vega-dark-200 px-2 py-1 z-20 rounded text-xs text-black dark:text-white break-word';
@@ -18,10 +19,14 @@ export interface TooltipProps {
   align?: 'start' | 'center' | 'end';
   side?: 'top' | 'right' | 'bottom' | 'left';
   sideOffset?: number;
+  noUnderline?: boolean;
 }
 
-export const TOOLTIP_TRIGGER_CLASS_NAME =
-  'underline underline-offset-2 decoration-neutral-400 dark:decoration-neutral-400 decoration-dashed';
+export const TOOLTIP_TRIGGER_CLASS_NAME = (noUnderline?: boolean) =>
+  classNames(
+    { 'underline underline-offset-2': !noUnderline },
+    'decoration-neutral-400 dark:decoration-neutral-400 decoration-dashed'
+  );
 
 // Conditionally rendered tooltip if description content is provided.
 export const Tooltip = ({
@@ -31,11 +36,12 @@ export const Tooltip = ({
   sideOffset,
   align = 'start',
   side = 'bottom',
+  noUnderline,
 }: TooltipProps) =>
   description ? (
     <Provider delayDuration={200} skipDelayDuration={100}>
       <Root open={open}>
-        <Trigger asChild className={TOOLTIP_TRIGGER_CLASS_NAME}>
+        <Trigger asChild className={TOOLTIP_TRIGGER_CLASS_NAME(noUnderline)}>
           {children}
         </Trigger>
         {description && (

libs/ui-toolkit/src/components/trading-checkbox/checkbox.stories.tsx

@@ -4,7 +4,7 @@ import { TradingCheckbox } from './checkbox';
 
 export default {
   component: TradingCheckbox,
-  title: 'Checkbox',
+  title: 'Checkbox - trading',
 } as Meta<typeof TradingCheckbox>;
 
 const Template: StoryFn<TradingCheckboxProps> = (args) => (

libs/ui-toolkit/src/components/trading-form-group/from-group.stories.tsx

@@ -4,7 +4,7 @@ import type { TradingFormGroupProps } from './form-group';
 import { TradingFormGroup } from './form-group';
 export default {
   component: TradingFormGroup,
-  title: 'FormGroup',
+  title: 'FormGroup trading',
   argTypes: {
     label: {
       type: 'string',

libs/ui-toolkit/src/components/trading-input-error/input-error.stories.tsx

@@ -3,7 +3,7 @@ import { TradingInputError } from './input-error';
 
 export default {
   component: TradingInputError,
-  title: 'InputError',
+  title: 'InputError trading',
 } as Meta;
 
 const Template: StoryFn = (args) => <TradingInputError {...args} />;

libs/ui-toolkit/src/components/trading-input/input.stories.tsx

@@ -3,7 +3,7 @@ import { TradingInput } from './input';
 import { FormGroup } from '../form-group';
 export default {
   component: TradingInput,
-  title: 'Input',
+  title: 'Input trading',
 } as Meta;
 
 const Template: StoryFn = (args) => (

libs/ui-toolkit/src/components/trading-radio-group/radio-group.stories.tsx

@@ -4,7 +4,7 @@ import { TradingRadioGroup, TradingRadio } from './radio-group';
 
 export default {
   component: TradingRadioGroup,
-  title: 'RadioGroup',
+  title: 'RadioGroup trading',
 } as Meta;
 
 const Template: StoryFn<TradingRadioGroupProps> = (args) => (

libs/ui-toolkit/src/components/trading-select/select.stories.tsx

@@ -4,7 +4,7 @@ import { FormGroup } from '../form-group';
 
 export default {
   component: TradingSelect,
-  title: 'Select',
+  title: 'Select trading',
 } as Meta;
 
 const Template: StoryFn = (args) => (

libs/ui-toolkit/src/components/trading-select/select.tsx

@@ -2,7 +2,7 @@ import type { Ref, SelectHTMLAttributes } from 'react';
 import { useRef } from 'react';
 import { forwardRef } from 'react';
 import classNames from 'classnames';
-import { VegaIcon, VegaIconNames } from '..';
+import { VegaIcon, VegaIconNames } from '../icon';
 import { defaultSelectElement } from '../../utils/shared';
 import * as SelectPrimitive from '@radix-ui/react-select';
 
@@ -107,7 +107,7 @@ export const TradingOption = forwardRef<
     className={classNames(
       'relative',
       'text-black dark:text-white',
-      'cursor-pointer outline-none',
+      'cursor-pointer outline-none ',
       'hover:bg-neutral-100 dark:hover:bg-neutral-800',
       'focus:bg-neutral-100 dark:focus:bg-neutral-800',
       'pl-2 py-2',

libs/utils/.swcrc

@@ -0,0 +1,31 @@
+{
+  "jsc": {
+    "target": "es2017",
+    "parser": {
+      "syntax": "typescript",
+      "decorators": true,
+      "dynamicImport": true
+    },
+    "transform": {
+      "decoratorMetadata": true,
+      "legacyDecorator": true
+    },
+    "keepClassNames": true,
+    "externalHelpers": true,
+    "loose": true
+  },
+  "module": {
+    "type": "commonjs",
+    "strict": true,
+    "noInterop": true
+  },
+  "sourceMaps": true,
+  "exclude": [
+    "jest.config.ts",
+    ".*\\.spec.tsx?$",
+    ".*\\.test.tsx?$",
+    "./src/jest-setup.ts$",
+    "./**/jest-setup.ts$",
+    ".*.js$"
+  ]
+}

libs/utils/project.json

@@ -5,7 +5,7 @@
   "projectType": "library",
   "targets": {
     "build": {
-      "executor": "@nx/js:tsc",
+      "executor": "@nx/js:swc",
       "outputs": ["{options.outputPath}"],
       "format": ["esm", "cjs"],
       "options": {

libs/wallet/project.json

@@ -25,7 +25,7 @@
           "@vegaprotocol/wallet-client"
         ],
         "rollupConfig": "@nx/react/plugins/bundle-rollup",
-        "compiler": "babel",
+        "compiler": "swc",
         "format": ["esm", "cjs"],
         "assets": [
           {

libs/wallet/src/connect-dialog/connect-dialog-elements.tsx

@@ -12,10 +12,7 @@ import { useVegaWallet } from '../use-vega-wallet';
 
 export const ConnectDialogTitle = ({ children }: { children: ReactNode }) => {
   return (
-    <h1
-      data-testid="wallet-dialog-title"
-      className="mb-6 text-2xl uppercase font-alpha calt"
-    >
+    <h1 data-testid="wallet-dialog-title" className="mb-6 text-2xl font-alpha">
       {children}
     </h1>
   );

libs/wallet/src/connect-dialog/connect-dialog.spec.tsx

@@ -111,7 +111,7 @@ describe('VegaConnectDialog', () => {
     rerender(generateJSX());
     const list = await screen.findByTestId('connectors-list');
     expect(list).toBeInTheDocument();
-    expect(list.children).toHaveLength(3);
+    expect(list.children).toHaveLength(2);
     expect(screen.getByTestId('connector-jsonRpc')).toHaveTextContent(
       'Use the Desktop App/CLI'
     );
@@ -122,7 +122,7 @@ describe('VegaConnectDialog', () => {
     mockBrowserWallet();
     render(generateJSX());
     const list = await screen.findByTestId('connectors-list');
-    expect(list.children).toHaveLength(3);
+    expect(list.children).toHaveLength(2);
     expect(screen.getByTestId('connector-injected')).toHaveTextContent(
       'Connect'
     );

libs/wallet/src/connect-dialog/connect-dialog.tsx

@@ -224,28 +224,66 @@ const ConnectorList = ({
       />
     </>
   );
+  const isItChrome = window.navigator.userAgent.includes('Chrome');
+  const isItMozilla =
+    window.navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+  const browserName = isItChrome
+    ? 'Chrome'
+    : isItMozilla
+    ? 'Firefox'
+    : 'your browser';
 
   return (
     <>
       <ConnectDialogTitle>{title}</ConnectDialogTitle>
-      <p>
+      <p className="text-md">
         {t(
           'Connect securely, deposit funds and approve or reject transactions with the Vega wallet'
         )}
       </p>
-      <div data-testid="connectors-list" className="flex flex-col mt-6 gap-2">
-        <div className="last:mb-0">
+      <div data-testid="connectors-list" className="flex flex-col mt-4 gap-4">
+        <div>
           {isBrowserWalletInstalled() ? (
-            <ConnectionOption
+            <ConnectionOptionWithDescription
               type="injected"
               text={extendedText}
               onClick={() => onSelect('injected')}
+              title={
+                <>
+                  <span>{t('Vega Wallet')}</span>
+                  {'  '}
+                  <span className="text-xs">{t('full featured')}</span>
+                </>
+              }
+              description={t(
+                `Connect Vega Wallet extension
+              for %s to access all features including key
+              management and detailed transaction views from your
+              browser.`,
+                [browserName]
+              )}
             />
           ) : (
-            <GetWalletButton
-              chromeExtensionUrl={links.chromeExtensionUrl}
-              mozillaExtensionUrl={links.mozillaExtensionUrl}
-            />
+            <div className="py-2">
+              <h1 className="px-2 text-lg">
+                <span>{t('Vega Wallet')}</span>
+                {'  '}
+                <span className="text-xs"> {t('full featured')}</span>
+              </h1>
+              <p className="p-2 text-sm">
+                {t(
+                  `Install Vega Wallet extension
+              for %s to access all features including key
+              management and detailed transaction views from your
+              browser.`,
+                  [browserName]
+                )}
+              </p>
+              <GetWalletButton
+                chromeExtensionUrl={links.chromeExtensionUrl}
+                mozillaExtensionUrl={links.mozillaExtensionUrl}
+              />
+            </div>
           )}
         </div>
         {connectors['snap'] !== undefined ? (
@@ -269,9 +307,19 @@ const ConnectorList = ({
               />
             ) : (
               <>
-                <ConnectionOption
+                <ConnectionOptionWithDescription
                   type="snap"
                   disabled={snapStatus === SnapStatus.NOT_SUPPORTED}
+                  title={
+                    <>
+                      <span>{t('Metamask Snap')}</span>
+                      {'  '}
+                      <span className="text-xs"> {t('quick start')}</span>
+                    </>
+                  }
+                  description={t(
+                    `Connect directly via Metamask with the Vega Snap for single key support without advanced features.`
+                  )}
                   text={
                     <>
                       <div className="flex items-center justify-center w-full h-full text-base gap-1">
@@ -287,7 +335,7 @@ const ConnectorList = ({
                   }}
                 />
                 {snapStatus === SnapStatus.NOT_SUPPORTED ? (
-                  <p className="pt-2 text-sm text-default">
+                  <p className="pt-1 text-xs leading-tight text-default">
                     {t('No MetaMask version that supports snaps detected.')}{' '}
                     {t('Learn more about')}{' '}
                     <ExternalLink href="https://metamask.io/snaps/">
@@ -300,20 +348,21 @@ const ConnectorList = ({
           </div>
         ) : null}
         <div>
+          <h1 className="my-1 text-md">{t('Advanced / Other options...')}</h1>
           <ConnectionOption
             type="view"
             text={t('View as party')}
             onClick={() => onSelect('view')}
             disabled={Boolean(pubKey)}
           />
-        </div>
-        <div className="last:mb-0">
-          <CustomUrlInput
-            walletUrl={walletUrl}
-            setWalletUrl={setWalletUrl}
-            isDesktopWalletRunning={isDesktopWalletRunning}
-            onSelect={() => onSelect('jsonRpc')}
-          />
+          <div className="mt-2">
+            <CustomUrlInput
+              walletUrl={walletUrl}
+              setWalletUrl={setWalletUrl}
+              isDesktopWalletRunning={isDesktopWalletRunning}
+              onSelect={() => onSelect('jsonRpc')}
+            />
+          </div>
         </div>
       </div>
     </>
@@ -451,6 +500,38 @@ export const GetWalletButton = ({
   );
 };
 
+const ConnectionOptionWithDescription = ({
+  disabled,
+  type,
+  text,
+  onClick,
+  icon,
+  description,
+  title,
+}: {
+  type: WalletType;
+  text: string | ReactNode;
+  onClick: () => void;
+  disabled?: boolean;
+  icon?: ReactNode;
+  description?: string | ReactNode;
+  title?: string | ReactNode;
+}) => {
+  return (
+    <div>
+      <h1 className="text-md">{title}</h1>
+      <p className="pb-2 text-sm text-gray-60 text-muted">{description}</p>
+      <ConnectionOption
+        disabled={disabled}
+        type={type}
+        text={text}
+        onClick={onClick}
+        icon={icon}
+      />
+    </div>
+  );
+};
+
 const ConnectionOption = ({
   disabled,
   type,
@@ -531,7 +612,7 @@ const CustomUrlInput = ({
         onClick={() => onSelect('jsonRpc')}
       />
       {isDesktopWalletRunning !== null && (
-        <p className="pt-2 mb-6 text-sm">
+        <p className="pt-1 mb-2 text-sm leading-tight">
           {isDesktopWalletRunning ? (
             <button
               className="underline text-default"
@@ -543,13 +624,13 @@ const CustomUrlInput = ({
             </button>
           ) : (
             <>
-              <span className="text-default">
+              <span className="text-xs">
                 {t(
                   'No running Desktop App/CLI detected. Open your app now to connect or enter a'
                 )}
               </span>{' '}
               <button
-                className="underline"
+                className="text-xs underline"
                 onClick={() => setUrlInputExpanded(true)}
                 disabled={Boolean(pubKey)}
               >

libs/web3/package.json

@@ -1,4 +0,0 @@
-{
-  "name": "@vegaprotocol/web3",
-  "version": "0.0.1"
-}

libs/web3/project.json

@@ -5,26 +5,6 @@
   "projectType": "library",
   "tags": [],
   "targets": {
-    "build": {
-      "executor": "@nx/rollup:rollup",
-      "outputs": ["{options.outputPath}"],
-      "options": {
-        "outputPath": "dist/libs/web3",
-        "tsConfig": "libs/web3/tsconfig.lib.json",
-        "project": "libs/web3/package.json",
-        "entryFile": "libs/web3/src/index.ts",
-        "external": ["react/jsx-runtime"],
-        "rollupConfig": "@nx/react/plugins/bundle-rollup",
-        "compiler": "babel",
-        "assets": [
-          {
-            "glob": "libs/web3/README.md",
-            "input": ".",
-            "output": "."
-          }
-        ]
-      }
-    },
     "lint": {
       "executor": "@nx/linter:eslint",
       "outputs": ["{options.outputFile}"],

libs/withdraws/package.json

@@ -1,4 +0,0 @@
-{
-  "name": "@vegaprotocol/withdraws",
-  "version": "0.0.1"
-}

libs/withdraws/project.json

@@ -5,26 +5,6 @@
   "projectType": "library",
   "tags": [],
   "targets": {
-    "build": {
-      "executor": "@nx/rollup:rollup",
-      "outputs": ["{options.outputPath}"],
-      "options": {
-        "outputPath": "dist/libs/withdraws",
-        "tsConfig": "libs/withdraws/tsconfig.lib.json",
-        "project": "libs/withdraws/package.json",
-        "entryFile": "libs/withdraws/src/index.ts",
-        "external": ["react/jsx-runtime"],
-        "rollupConfig": "@nx/react/plugins/bundle-rollup",
-        "compiler": "babel",
-        "assets": [
-          {
-            "glob": "libs/withdraws/README.md",
-            "input": ".",
-            "output": "."
-          }
-        ]
-      }
-    },
     "lint": {
       "executor": "@nx/linter:eslint",
       "outputs": ["{options.outputFile}"],