chore(pml-ack): use checkbox w/ link

package.json

@@ -59,7 +59,7 @@
     "@datadog/browser-logs": "^5.23.3",
     "@dydxprotocol/v4-abacus": "1.13.16",
     "@dydxprotocol/v4-client-js": "1.12.1",
-    "@dydxprotocol/v4-localization": "^1.1.237",
+    "@dydxprotocol/v4-localization": "^1.1.238",
     "@dydxprotocol/v4-proto": "^7.0.0-dev.0",
     "@funkit/connect": "^3.4.9",
     "@emotion/is-prop-valid": "^1.3.0",

public/configs/v1/env.json

@@ -92,7 +92,8 @@
          "getInTouch": "",
          "deployerTermsAndConditions": "",
          "dydxLearnMore": "https://www.mintscan.io/dydx",
-         "affiliateProgram": ""
+         "affiliateProgram": "",
+         "launchMarketTos": null
       },
       "dydxprotocol-testnet": {
          "tos": "https://dydx.exchange/v4-terms",
@@ -133,7 +134,8 @@
          "getInTouch": "",
          "deployerTermsAndConditions": "",
          "dydxLearnMore": "https://www.mintscan.io/dydx",
-         "affiliateProgram": ""
+         "affiliateProgram": "",
+         "launchMarketTos": null
       },
       "dydx-testnet-4": {
          "tos": "https://dydx.exchange/v4-terms",
@@ -175,7 +177,8 @@
          "getInTouch": "",
          "deployerTermsAndConditions": "",
          "dydxLearnMore": "https://www.mintscan.io/dydx",
-         "affiliateProgram": ""
+         "affiliateProgram": "",
+         "launchMarketTos": null
       },
       "[mainnet chain id]": {
          "tos": "[HTTP link to TOS]",
@@ -217,7 +220,8 @@
          "getInTouch": "[HTTP link to get in touch with traders]",
          "deployerTermsAndConditions": "[HTTP link to terms and conditions, can be null]",
          "dydxLearnMore": "[HTTP link to information about the dYdX blockchain]",
-         "affiliateProgram": "[HTTP link to information about the affiliate program]"
+         "affiliateProgram": "[HTTP link to information about the affiliate program]",
+         "launchMarketTos": "[HTTP link to launch market ToS]"
       }
    },
    "wallets": {

src/hooks/useURLConfigs.ts

@@ -46,6 +46,7 @@ export interface LinksConfigs {
   deployerTermsAndConditions?: string;
   dydxLearnMore?: string;
   affiliateProgram?: string;
+  launchMarketTos?: string;
 }
 
 export const useURLConfigs = (): LinksConfigs => {
@@ -94,5 +95,6 @@ export const useURLConfigs = (): LinksConfigs => {
     deployerTermsAndConditions: linksConfigs.deployerTermsAndConditions,
     dydxLearnMore: linksConfigs.dydxLearnMore ?? FALLBACK_URL,
     affiliateProgram: linksConfigs.affiliateProgram,
+    launchMarketTos: linksConfigs.launchMarketTos ?? FALLBACK_URL,
   };
 };

src/views/forms/NewMarketForm/v7/NewMarketPreviewStep.tsx

@@ -16,15 +16,18 @@ import { useNow } from '@/hooks/useNow';
 import { useStringGetter } from '@/hooks/useStringGetter';
 import { useSubaccount } from '@/hooks/useSubaccount';
 import { useTokenConfigs } from '@/hooks/useTokenConfigs';
+import { useURLConfigs } from '@/hooks/useURLConfigs';
 
 import { formMixins } from '@/styles/formMixins';
 import { layoutMixins } from '@/styles/layoutMixins';
 
 import { AlertMessage } from '@/components/AlertMessage';
 import { AssetIcon } from '@/components/AssetIcon';
 import { Button } from '@/components/Button';
+import { Checkbox } from '@/components/Checkbox';
 import { Details, type DetailsItem } from '@/components/Details';
 import { Icon, IconName } from '@/components/Icon';
+import { Link } from '@/components/Link';
 import { LoadingSpinner } from '@/components/Loading/LoadingSpinner';
 import { Output, OutputType } from '@/components/Output';
 import { MegaVaultYieldOutput } from '@/views/MegaVaultYieldOutput';
@@ -37,8 +40,6 @@ import { getDisplayableAssetFromTicker } from '@/lib/assetUtils';
 import { MustBigNumber } from '@/lib/numbers';
 import { log } from '@/lib/telemetry';
 
-import { NewMarketAgreement } from '../NewMarketAgreement';
-
 const ESTIMATED_LAUNCH_TIMEOUT = timeUnits.minute;
 
 type NewMarketPreviewStepProps = {
@@ -61,8 +62,8 @@ export const NewMarketPreviewStep = ({
   const stringGetter = useStringGetter();
   const [errorMessage, setErrorMessage] = useState<string>();
   const [hasAcceptedTerms, setHasAcceptedTerms] = useState(false);
+  const { launchMarketTos } = useURLConfigs();
   const [isLoading, setIsLoading] = useState(false);
-  const [showAgreement, setShowAgreement] = useState(false);
   const baseAsset = getDisplayableAssetFromTicker(ticker);
   const launchableAsset = useMetadataServiceAssetFromId(ticker);
   const { createPermissionlessMarket } = useSubaccount();
@@ -230,95 +231,98 @@ export const NewMarketPreviewStep = ({
       onSubmit={async (e: FormEvent<HTMLFormElement>) => {
         e.preventDefault();
 
-        if (!hasAcceptedTerms) {
-          setShowAgreement(true);
-        } else {
-          setIsLoading(true);
-          setIsParentLoading?.(true);
-          setErrorMessage(undefined);
-
-          try {
-            const tx = await createPermissionlessMarket(ticker);
+        setIsLoading(true);
+        setIsParentLoading?.(true);
+        setErrorMessage(undefined);
 
-            // Add try/catch for encode/parse so that it doesn't mess with loading states below
-            try {
-              if ((tx as IndexedTx | undefined)?.code === 0) {
-                const encodedTx = encodeJson(tx);
-                const parsedTx = JSON.parse(encodedTx);
-                const hash = parsedTx.hash.toUpperCase();
+        try {
+          const tx = await createPermissionlessMarket(ticker);
 
-                if (!hash) {
-                  throw new Error('Invalid transaction hash');
-                }
+          // Add try/catch for encode/parse so that it doesn't mess with loading states below
+          try {
+            if ((tx as IndexedTx | undefined)?.code === 0) {
+              const encodedTx = encodeJson(tx);
+              const parsedTx = JSON.parse(encodedTx);
+              const hash = parsedTx.hash.toUpperCase();
 
-                setTxHash(hash);
+              if (!hash) {
+                throw new Error('Invalid transaction hash');
               }
-            } catch (error) {
-              setErrorMessage(error.message);
-            }
 
-            setEta(Date.now() + ESTIMATED_LAUNCH_TIMEOUT);
+              setTxHash(hash);
+            }
           } catch (error) {
-            log('NewMarketPreviewForm/createPermissionlessMarket', error);
             setErrorMessage(error.message);
-            setIsLoading(false);
-            setIsParentLoading?.(false);
           }
+
+          setEta(Date.now() + ESTIMATED_LAUNCH_TIMEOUT);
+        } catch (error) {
+          log('NewMarketPreviewForm/createPermissionlessMarket', error);
+          setErrorMessage(error.message);
+          setIsLoading(false);
+          setIsParentLoading?.(false);
         }
       }}
     >
-      {showAgreement ? (
-        <NewMarketAgreement
-          onAccept={() => {
-            setHasAcceptedTerms(true);
-            setShowAgreement(false);
-          }}
-          onCancel={() => setShowAgreement(false)}
-        />
-      ) : (
-        <>
-          {heading}
-
-          {launchVisualization}
-
-          {liquidityTier}
-
-          {alertMessage}
-
-          <Details
-            items={receiptItems}
-            tw="rounded-[0.625rem] bg-color-layer-2 px-1 py-0.5 text-small"
-          />
-
-          <div tw="grid w-full grid-cols-[1fr_2fr] gap-1">
-            <Button onClick={onBack} state={{ isDisabled: isLoading }}>
-              {stringGetter({ key: STRING_KEYS.BACK })}
-            </Button>
-            <Button
-              type={ButtonType.Submit}
-              action={ButtonAction.Primary}
-              state={{ isDisabled: shouldDisableForm, isLoading }}
-            >
-              {hasAcceptedTerms
-                ? stringGetter({ key: STRING_KEYS.DEPOSIT_AND_LAUNCH })
-                : stringGetter({ key: STRING_KEYS.ACKNOWLEDGE_TERMS })}
-            </Button>
-          </div>
-
-          <span tw="text-center text-color-text-1 font-small-book">
-            {secondsLeft > 0 &&
-              stringGetter({
-                key:
-                  Math.ceil(secondsLeft) === 1
-                    ? STRING_KEYS.WAIT_SECONDS_SINGULAR
-                    : STRING_KEYS.WAIT_SECONDS,
-                params: {
-                  SECONDS: String(Math.ceil(secondsLeft)),
-                },
-              })}
+      {heading}
+
+      {launchVisualization}
+
+      {liquidityTier}
+
+      {alertMessage}
+
+      <Details
+        items={receiptItems}
+        tw="rounded-[0.625rem] bg-color-layer-2 px-1 py-0.5 text-small"
+      />
+
+      <Checkbox
+        checked={hasAcceptedTerms}
+        onCheckedChange={(checked) => setHasAcceptedTerms(checked)}
+        id="launch-market-ack"
+        label={
+          <span>
+            {stringGetter({
+              key: STRING_KEYS.MEGAVAULT_TERMS_TEXT,
+              params: {
+                CONFIRM_BUTTON_TEXT: stringGetter({ key: STRING_KEYS.DEPOSIT_AND_LAUNCH }),
+                LINK: (
+                  <Link tw="inline-flex" href={launchMarketTos} withIcon>
+                    {stringGetter({ key: STRING_KEYS.LAUNCH_MARKET_TERMS })}
+                  </Link>
+                ),
+              },
+            })}
           </span>
-        </>
-      )}
+        }
+      />
+
+      <div tw="grid w-full grid-cols-[1fr_2fr] gap-1">
+        <Button onClick={onBack} state={{ isDisabled: isLoading }}>
+          {stringGetter({ key: STRING_KEYS.BACK })}
+        </Button>
+        <Button
+          type={ButtonType.Submit}
+          action={ButtonAction.Primary}
+          state={{ isDisabled: shouldDisableForm || !hasAcceptedTerms, isLoading }}
+        >
+          {stringGetter({ key: STRING_KEYS.DEPOSIT_AND_LAUNCH })}
+        </Button>
+      </div>
+
+      <span tw="text-center text-color-text-1 font-small-book">
+        {secondsLeft > 0 &&
+          stringGetter({
+            key:
+              Math.ceil(secondsLeft) === 1
+                ? STRING_KEYS.WAIT_SECONDS_SINGULAR
+                : STRING_KEYS.WAIT_SECONDS,
+            params: {
+              SECONDS: String(Math.ceil(secondsLeft)),
+            },
+          })}
+      </span>
     </$Form>
   );
 };