feat(trading): enable chinese language, use locize

Co-authored-by: Madalina Raicu <madalina@raygroup.uk>

apps/governance/src/components/heading/heading.tsx

@@ -23,10 +23,13 @@ export const Heading = ({
       })}
     >
       <h1
-        className={classNames('font-alpha calt text-5xl break-words', {
-          'mt-0': !marginTop,
-          'mb-0': !marginBottom,
-        })}
+        className={classNames(
+          'font-alpha calt text-5xl [word-break:break-word]',
+          {
+            'mt-0': !marginTop,
+            'mb-0': !marginBottom,
+          }
+        )}
       >
         {title}
       </h1>

apps/governance/src/routes/proposals/components/proposal-asset-details/proposal-asset-details.tsx

@@ -7,8 +7,10 @@ import type { AssetFieldsFragment } from '@vegaprotocol/assets';
 
 export const ProposalAssetDetails = ({
   asset,
+  originalAsset,
 }: {
   asset: AssetFieldsFragment;
+  originalAsset?: AssetFieldsFragment;
 }) => {
   const { t } = useTranslation();
   const [showAssetDetails, setShowAssetDetails] = useState(false);
@@ -27,6 +29,7 @@ export const ProposalAssetDetails = ({
         <div className="mb-10 pb-4">
           <AssetDetailsTable
             asset={asset}
+            originalAsset={originalAsset}
             omitRows={[
               AssetDetail.STATUS,
               AssetDetail.INFRASTRUCTURE_FEE_ACCOUNT_BALANCE,

apps/governance/src/routes/proposals/components/proposal/proposal.tsx

@@ -65,10 +65,13 @@ export const Proposal = ({
     ? removePaginationWrapper(assetData.assetsConnection?.edges)[0]
     : undefined;
 
+  const originalAsset = asset;
+
   if (proposal.terms.change.__typename === 'UpdateAsset' && asset) {
     asset = {
       ...asset,
       quantum: proposal.terms.change.quantum,
+      source: { ...asset.source },
     };
 
     if (asset.source.__typename === 'ERC20') {
@@ -228,7 +231,7 @@ export const Proposal = ({
         proposal.terms.change.__typename === 'UpdateAsset') &&
         asset && (
           <div className="mb-4">
-            <ProposalAssetDetails asset={asset} />
+            <ProposalAssetDetails asset={asset} originalAsset={originalAsset} />
           </div>
         )}
 

apps/trading/client-pages/portfolio/portfolio.tsx

@@ -14,6 +14,7 @@ import { PositionsMenu } from '../../components/positions-menu';
 import { WithdrawalsContainer } from '../../components/withdrawals-container';
 import { OrdersContainer } from '../../components/orders-container';
 import { LedgerContainer } from '../../components/ledger-container';
+import { RewardsContainer } from '../../components/rewards-container';
 import {
   ResizableGrid,
   ResizableGridPanel,
@@ -86,6 +87,9 @@ export const Portfolio = () => {
               <Tab id="ledger-entries" name={t('Ledger entries')}>
                 <LedgerContainer />
               </Tab>
+              <Tab id="rewards" name={t('Rewards')}>
+                <RewardsContainer />
+              </Tab>
             </Tabs>
           </PortfolioGridChild>
         </ResizableGridPanel>

apps/trading/components/navbar/navbar.spec.tsx

@@ -68,7 +68,6 @@ describe('Navbar', () => {
       ['/portfolio', 'Portfolio'],
       ['/referrals', 'Referrals'],
       ['/fees', 'Fees'],
-      ['/rewards', 'Rewards'],
       [expect.stringContaining('governance'), 'Governance'],
     ];
 
@@ -103,7 +102,6 @@ describe('Navbar', () => {
       ['/portfolio', 'Portfolio'],
       ['/referrals', 'Referrals'],
       ['/fees', 'Fees'],
-      ['/rewards', 'Rewards'],
       [expect.stringContaining('governance'), 'Governance'],
     ];
     const links = menu.getAllByRole('link');

apps/trading/components/navbar/navbar.tsx

@@ -213,11 +213,6 @@ const NavbarMenu = ({ onClick }: { onClick: () => void }) => {
             {t('Fees')}
           </NavbarLink>
         </NavbarItem>
-        <NavbarItem>
-          <NavbarLink to={Links.REWARDS()} onClick={onClick}>
-            {t('Rewards')}
-          </NavbarLink>
-        </NavbarItem>
         <NavbarItem>
           <NavbarLinkExternal to={useLinks(DApp.Governance)()}>
             {t('Governance')}

apps/trading/components/rewards-container/rewards-container.tsx

@@ -70,7 +70,7 @@ export const RewardsContainer = () => {
   );
 
   return (
-    <div className="grid auto-rows-min grid-cols-6 gap-3">
+    <div className="grid auto-rows-min grid-cols-6 gap-3 p-2">
       {/* Always show reward information for vega */}
       <Card
         key={params.reward_asset}

apps/trading/e2e/conftest.py

@@ -12,6 +12,7 @@ from contextlib import contextmanager
 from vega_sim.null_service import VegaServiceNull
 from playwright.sync_api import Browser, Page
 from config import console_image_name, vega_version
+from datetime import datetime, timedelta
 from fixtures.market import (
     setup_simple_market,
     setup_opening_auction_market,
@@ -78,6 +79,7 @@ def init_vega(request=None):
         store_transactions=True,
         transactions_per_block=1000,
         seconds_per_block=seconds_per_block,
+        genesis_time= datetime.now() - timedelta(days=1),
     ) as vega:
         try:
             container = docker_client.containers.run(

apps/trading/e2e/poetry.lock

@@ -1161,7 +1161,7 @@ profile = ["pytest-profiling", "snakeviz"]
 type = "git"
 url = "https://github.com/vegaprotocol/vega-market-sim.git"
 reference = "HEAD"
-resolved_reference = "e93f7dfa8463c59cfd0e299362b845511cebeef6"
+resolved_reference = "fbcb974b2055bbc80169cdfd69987f087f9969fb"
 
 [[package]]
 name = "websocket-client"

apps/trading/e2e/pyproject.toml

@@ -9,7 +9,7 @@ packages = [{include = "trading market-sim e2e"}]
 [tool.poetry.dependencies]
 python = ">=3.9,<3.11"
 psutil = "^5.9.5"
-vega-sim = {git = "https://github.com/vegaprotocol/vega-market-sim.git"}
+vega-sim = {git = "https://github.com/vegaprotocol/vega-market-sim.git/", branch = "fix/genesis_panic"}
 pytest-playwright = "^0.4.2"
 docker = "^6.1.3"
 pytest-xdist = "^3.3.1"

apps/trading/e2e/tests/market/test_closed_markets.py

@@ -58,7 +58,6 @@ class TestSettledMarket:
     def test_settled_rows(self, page: Page, create_settled_market):
         page.goto(f"/#/markets/all")
         page.get_by_test_id("Closed markets").click()
-
         row_selector = page.locator(
             '[data-testid="tab-closed-markets"] .ag-center-cols-container .ag-row'
         ).first
@@ -72,7 +71,7 @@ class TestSettledMarket:
         # 6001-MARK-009
         # 6001-MARK-008
         # 6001-MARK-010
-        pattern = r"(\d+)\s+months\s+ago"
+        pattern = r"(\d+)\s+(months|hours|days)\s+ago"
         date_text = row_selector.locator('[col-id="settlementDate"]').inner_text()
         assert re.match(pattern, date_text), f"Expected text to match pattern but got {date_text}"
        

apps/trading/e2e/tests/perpetual_market/test_perpetuals.py

@@ -0,0 +1,138 @@
+import pytest
+import re
+from playwright.sync_api import Page, expect
+from vega_sim.service import VegaService
+from vega_sim.service import MarketStateUpdateType
+from datetime import datetime, timedelta
+from conftest import init_vega
+from actions.utils import change_keys
+from actions.vega import submit_multiple_orders
+from fixtures.market import setup_perps_market
+from wallet_config import MM_WALLET, MM_WALLET2, TERMINATE_WALLET
+
+row_selector = '[data-testid="tab-funding-payments"] .ag-center-cols-container .ag-row'
+col_amount = '[col-id="amount"]'
+
+class TestPerpetuals:
+
+    @pytest.fixture(scope="class")
+    def vega(self, request):
+        with init_vega(request) as vega:
+            yield vega
+
+    @pytest.fixture(scope="class")
+    def perps_market(self, vega: VegaService):
+        perps_market = setup_perps_market(vega)
+        submit_multiple_orders(
+            vega, MM_WALLET.name, perps_market, "SIDE_SELL", [[1, 110], [1, 105]]
+        )
+        submit_multiple_orders(
+            vega, MM_WALLET2.name, perps_market, "SIDE_BUY", [[1, 90], [1, 95]]
+        )
+        vega.submit_settlement_data(
+            settlement_key=TERMINATE_WALLET.name,
+            settlement_price=110,
+            market_id=perps_market,
+        )
+        vega.forward("10s")
+        vega.wait_fn(1)
+        vega.wait_for_total_catchup()
+        submit_multiple_orders(
+            vega, MM_WALLET.name, perps_market, "SIDE_SELL", [[1, 110], [1, 105]]
+        )
+        submit_multiple_orders(
+            vega, MM_WALLET2.name, perps_market, "SIDE_BUY", [[1, 112], [1, 115]]
+        )
+        vega.submit_settlement_data(
+            settlement_key=TERMINATE_WALLET.name,
+            settlement_price=110,
+            market_id=perps_market,
+        )
+        vega.forward("10s")
+        vega.wait_fn(1)
+        vega.wait_for_total_catchup()
+        return perps_market
+
+    @pytest.mark.usefixtures("page","risk_accepted", "auth")
+    def test_funding_payment_profit(self, perps_market, page: Page):
+        page.goto(f"/#/markets/{perps_market}")    
+        page.get_by_test_id("Funding payments").click()
+        row = page.locator(row_selector)
+        expect(row.locator(col_amount)).to_have_text("9.00 tDAI")
+
+    @pytest.mark.usefixtures("page","risk_accepted", "auth")
+    def test_funding_payment_loss(self, perps_market, page: Page, vega):
+        page.goto(f"/#/markets/{perps_market}")   
+        change_keys(page, vega, "market_maker")
+        page.get_by_test_id("Funding payments").click()
+        row = page.locator(row_selector)
+        expect(row.locator(col_amount)).to_have_text("-27.00 tDAI")
+        
+    @pytest.mark.usefixtures("page","risk_accepted", "auth")
+    def test_funding_header(self, perps_market, page: Page):
+        page.goto(f"/#/markets/{perps_market}")
+        expect(page.get_by_test_id("market-funding")).to_contain_text("Funding Rate / Countdown-8.1818%")
+        expect(page.get_by_test_id("index-price")).to_have_text("Index Price110.00")
+
+    @pytest.mark.skip("Skipped due to issue #5421")
+    @pytest.mark.usefixtures("page","risk_accepted", "auth")
+    def test_funding_payment_history(perps_market, page: Page, vega):
+        page.goto(f"/#/markets/{perps_market}")   
+        change_keys(page, vega, "market_maker")
+        page.get_by_test_id("Funding history").click()
+        element = page.get_by_test_id("tab-funding-history")
+        # Get the bounding box of the element
+        bounding_box = element.bounding_box()
+        if bounding_box:
+            bottom_right_x = bounding_box["x"] + bounding_box["width"]
+            bottom_right_y = bounding_box["y"] + bounding_box["height"]
+
+            # Hover over the bottom-right corner of the element
+            element.hover(position={"x": bottom_right_x, "y": bottom_right_y})
+        else:
+            print("Bounding box not found for the element")
+
+@pytest.mark.usefixtures("page","risk_accepted", "auth")
+def test_perps_market_termination_proposed(page: Page, vega: VegaService):
+    perpetual_market = setup_perps_market(vega)
+    page.goto(f"/#/markets/{perpetual_market}") 
+    vega.update_market_state(
+        proposal_key=MM_WALLET.name,
+        market_id=perpetual_market,
+        market_state=MarketStateUpdateType.Terminate,
+        price=100,
+        vote_closing_time = datetime.now() + timedelta(seconds=15),
+        vote_enactment_time = datetime.now() + timedelta(seconds=60),
+        approve_proposal = True,
+        forward_time_to_enactment = False,
+    )
+    vega.forward("10s")
+    vega.wait_fn(1)
+    vega.wait_for_total_catchup()
+    banner_text = page.get_by_test_id(f"termination-warning-banner-{perpetual_market}").text_content()
+    pattern = re.compile(
+    r"Trading on Market BTC:DAI_Perpetual may stop on \d{2} [A-Za-z]+\. There is open proposal to close this market\.Proposed final price is 100\.00 BTC\.View proposal"
+    )
+    assert pattern.search(banner_text), f"Text did not match pattern. Text was: {banner_text}"
+
+@pytest.mark.usefixtures("page","risk_accepted", "auth" )
+def test_perps_market_terminated(page: Page, vega: VegaService):
+    perpetual_market = setup_perps_market(vega)
+    page.goto(f"/#/markets/{perpetual_market}") 
+    vega.update_market_state(
+        proposal_key=MM_WALLET.name,
+        market_id=perpetual_market,
+        market_state=MarketStateUpdateType.Terminate,
+        price=100,
+        approve_proposal = True,
+        forward_time_to_enactment = True,
+    )
+    expect(page.get_by_test_id("market-price")).to_have_text("Mark Price100.00")
+    expect(page.get_by_test_id("market-change")).to_have_text("Change (24h)-")
+    expect(page.get_by_test_id("market-volume")).to_have_text("Volume (24h)-")
+    expect(page.get_by_test_id("market-trading-mode")).to_have_text("Trading modeNo trading")
+    expect(page.get_by_test_id("market-state")).to_have_text("StatusClosed")
+    expect(page.get_by_test_id("liquidity-supplied")).to_have_text("Liquidity supplied 0.00 (0.00%)")
+    expect(page.get_by_test_id("market-funding")).to_have_text("Funding Rate / Countdown-Unknown")
+    expect(page.get_by_test_id("index-price")).to_have_text("Index Price-")
+    expect(page.get_by_test_id("deal-ticket-error-message-summary")).to_have_text("This market is closed and not accepting orders")

apps/trading/lib/i18n/index.ts

@@ -6,10 +6,10 @@ import type { HttpBackendOptions, RequestCallback } from 'i18next-http-backend';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import { initReactI18next } from 'react-i18next';
 
-export const supportedLngs = ['en'];
+export const supportedLngs = ['en', 'zh'];
 
 const isInDev = process.env.NODE_ENV === 'development';
-const useLocize = isInDev && !!process.env.NX_USE_LOCIZE;
+const useLocize = true; // isInDev && !!process.env.NX_USE_LOCIZE;
 
 const backend = useLocize
   ? {

apps/trading/pages/client-router.tsx

@@ -13,7 +13,6 @@ import { Deposit } from '../client-pages/deposit';
 import { Withdraw } from '../client-pages/withdraw';
 import { Transfer } from '../client-pages/transfer';
 import { Fees } from '../client-pages/fees';
-import { Rewards } from '../client-pages/rewards';
 import { Routes as AppRoutes } from '../lib/links';
 import { LayoutWithSky } from '../client-pages/referrals/layout';
 import { Referrals } from '../client-pages/referrals/referrals';
@@ -100,16 +99,6 @@ export const routerConfig: RouteObject[] = compact([
       },
     ],
   },
-  {
-    path: 'rewards/*',
-    element: <LayoutWithSidebar sidebar={<PortfolioSidebar />} />,
-    children: [
-      {
-        index: true,
-        element: <Rewards />,
-      },
-    ],
-  },
   {
     path: 'markets/*',
     element: (

libs/assets/src/lib/asset-details-table.tsx

@@ -18,7 +18,7 @@ type Rows = {
   key: AssetDetail;
   label: string;
   tooltip: string;
-  value: (asset: Asset) => ReactNode | undefined;
+  value: (asset: Asset, orignalAsset?: Asset) => ReactNode | undefined;
   valueTooltip?: (asset: Asset) => string | null | undefined;
 }[];
 
@@ -52,6 +52,21 @@ const num = (asset: Asset, n: string | undefined | null) => {
   return addDecimalsFormatNumber(n, asset.decimals);
 };
 
+const Diff = ({
+  oldValue,
+  newValue,
+}: {
+  oldValue: ReactNode;
+  newValue: ReactNode;
+}) => (
+  <span className="flex gap-1">
+    <span className="line-through bg-vega-red-300 dark:bg-vega-red-600">
+      {oldValue}
+    </span>
+    <span className="bg-vega-green-300 dark:bg-vega-green-600">{newValue}</span>
+  </span>
+);
+
 export const useRows = () => {
   const t = useT();
   const AssetTypeMapping = useAssetTypeMapping();
@@ -103,7 +118,14 @@ export const useRows = () => {
         key: AssetDetail.QUANTUM,
         label: t('Quantum'),
         tooltip: t('The minimum economically meaningful amount of the asset'),
-        value: (asset) => num(asset, asset.quantum),
+        value: (asset, originalAsset) => {
+          const value = num(asset, asset.quantum);
+          if (originalAsset && originalAsset.quantum !== asset.quantum) {
+            const original = num(originalAsset, originalAsset.quantum);
+            return <Diff oldValue={original} newValue={value} />;
+          }
+          return value;
+        },
       },
       {
         key: AssetDetail.STATUS,
@@ -143,8 +165,24 @@ export const useRows = () => {
         tooltip: t('WITHDRAW_THRESHOLD_TOOLTIP_TEXT', {
           defaultValue: WITHDRAW_THRESHOLD_TOOLTIP_TEXT,
         }),
-        value: (asset) =>
-          num(asset, (asset.source as Schema.ERC20).withdrawThreshold),
+        value: (asset, originalAsset) => {
+          const value = num(
+            asset,
+            (asset.source as Schema.ERC20).withdrawThreshold
+          );
+          if (
+            originalAsset &&
+            (originalAsset.source as Schema.ERC20).withdrawThreshold !==
+              (asset.source as Schema.ERC20).withdrawThreshold
+          ) {
+            const original = num(
+              asset,
+              (originalAsset.source as Schema.ERC20).withdrawThreshold
+            );
+            return <Diff oldValue={original} newValue={value} />;
+          }
+          return value;
+        },
       },
       {
         key: AssetDetail.LIFETIME_LIMIT,
@@ -152,8 +190,26 @@ export const useRows = () => {
         tooltip: t(
           'The lifetime deposit limit per address. Note: this is a temporary measure that can be changed or removed through governance'
         ),
-        value: (asset) =>
-          num(asset, (asset.source as Schema.ERC20).lifetimeLimit),
+        value: (asset, originalAsset) => {
+          const value = num(
+            asset,
+            (asset.source as Schema.ERC20).lifetimeLimit
+          );
+
+          if (
+            originalAsset &&
+            (originalAsset.source as Schema.ERC20).lifetimeLimit !==
+              (asset.source as Schema.ERC20).lifetimeLimit
+          ) {
+            const original = num(
+              asset,
+              (originalAsset.source as Schema.ERC20).lifetimeLimit
+            );
+            return <Diff oldValue={original} newValue={value} />;
+          }
+
+          return value;
+        },
       },
       {
         key: AssetDetail.MAX_FAUCET_AMOUNT_MINT,
@@ -261,10 +317,13 @@ export const testId = (detail: AssetDetail, field: 'label' | 'value') =>
 
 export type AssetDetailsTableProps = {
   asset: Asset;
+  originalAsset?: Asset;
+
   omitRows?: AssetDetail[];
 } & Omit<KeyValueTableRowProps, 'children'>;
 export const AssetDetailsTable = ({
   asset,
+  originalAsset,
   omitRows = [],
   ...props
 }: AssetDetailsTableProps) => {
@@ -275,7 +334,7 @@ export const AssetDetailsTable = ({
 
   const details = useRows().map((r) => ({
     ...r,
-    value: r.value(asset),
+    value: r.value(asset, originalAsset),
     valueTooltip: r.valueTooltip?.(asset),
   }));
 

libs/liquidity/src/lib/liquidity-table.tsx

@@ -413,14 +413,9 @@ export const LiquidityTable = ({
               },
               'text-red-500': ({ data }: { data: LiquidityProvisionData }) => {
                 if (!data.sla) return false;
-                return (
-                  new BigNumber(
-                    data.sla.currentEpochFractionOfTimeOnBook
-                  ).isLessThan(data.commitmentMinTimeFraction) &&
-                  new BigNumber(
-                    data.sla.currentEpochFractionOfTimeOnBook
-                  ).isGreaterThan(0)
-                );
+                return new BigNumber(
+                  data.sla.currentEpochFractionOfTimeOnBook
+                ).isLessThan(data.commitmentMinTimeFraction);
               },
             },
           },