feat(trading): referral initial state when no sets are available (#5294)

apps/trading/client-pages/referrals/create-code-form.tsx

@@ -95,6 +95,11 @@ const CreateCodeDialog = ({
   const { stakeAvailable: currentStakeAvailable, requiredStake } =
     useStakeAvailable();
 
+  const { data: referralSets } = useReferral({
+    pubKey,
+    role: 'referrer',
+  });
+
   const onSubmit = () => {
     if (isReadOnly || !pubKey) {
       setErr('Not connected');
@@ -193,6 +198,68 @@ const CreateCodeDialog = ({
     );
   }
 
+  if (!referralSets) {
+    return (
+      <div className="flex flex-col gap-4">
+        {(status === 'idle' || status === 'loading' || status === 'error') && (
+          <>
+            {
+              <p>
+                {t(
+                  'There is currently no referral program active, are you sure you want to create a code?'
+                )}
+              </p>
+            }
+          </>
+        )}
+        {status === 'success' && code && (
+          <div className="flex items-center gap-2">
+            <div className="flex-1 min-w-0 p-2 text-sm rounded bg-vega-clight-700 dark:bg-vega-cdark-700">
+              <p className="overflow-hidden whitespace-nowrap text-ellipsis">
+                {code}
+              </p>
+            </div>
+            <CopyWithTooltip text={code}>
+              <TradingButton
+                className="text-sm no-underline"
+                icon={<VegaIcon name={VegaIconNames.COPY} />}
+              >
+                <span>{t('Copy')}</span>
+              </TradingButton>
+            </CopyWithTooltip>
+          </div>
+        )}
+        <TradingButton
+          fill={true}
+          intent={Intent.Primary}
+          onClick={() => onSubmit()}
+          {...getButtonProps()}
+        ></TradingButton>
+        {status === 'idle' && (
+          <TradingButton
+            fill={true}
+            intent={Intent.Primary}
+            onClick={() => {
+              refetch();
+              setDialogOpen(false);
+            }}
+          >
+            {t('No')}
+          </TradingButton>
+        )}
+        {err && <InputError>{err}</InputError>}
+        <div className="flex justify-center pt-5 mt-2 text-sm border-t gap-4 text-default border-default">
+          <ExternalLink href={ABOUT_REFERRAL_DOCS_LINK}>
+            {t('About the referral program')}
+          </ExternalLink>
+          <ExternalLink href={DISCLAIMER_REFERRAL_DOCS_LINK}>
+            {t('Disclaimer')}
+          </ExternalLink>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="flex flex-col gap-4">
       {(status === 'idle' || status === 'loading' || status === 'error') && (

apps/trading/client-pages/referrals/tiers.tsx

@@ -6,7 +6,12 @@ import { BORDER_COLOR, GRADIENT } from './constants';
 import { Tag } from './tag';
 import type { ComponentProps, ReactNode } from 'react';
 import { ExternalLink } from '@vegaprotocol/ui-toolkit';
-import { DApp, TOKEN_PROPOSALS, useLinks } from '@vegaprotocol/environment';
+import {
+  DApp,
+  DocsLinks,
+  TOKEN_PROPOSALS,
+  useLinks,
+} from '@vegaprotocol/environment';
 import { useT, ns } from '../../lib/use-t';
 import { Trans } from 'react-i18next';
 
@@ -88,10 +93,19 @@ export const TiersContainer = () => {
     return (
       <div className="text-base px-5 py-10 text-center">
         <Trans
-          defaults="We're sorry but we don't have an active referral programme currently running. You can propose a new programme <0>here</0>."
+          defaults="There are currently no active referral programs. Check the <0>Governance App</0> to see if there are any proposals in progress and vote."
           components={[
             <ExternalLink href={governanceLink(TOKEN_PROPOSALS)} key="link">
-              {t('here')}
+              {t('Governance App')}
+            </ExternalLink>,
+          ]}
+          ns={ns}
+        />
+        <Trans
+          defaults="You can propose a new program via the <0>Docs</0>."
+          components={[
+            <ExternalLink href={DocsLinks?.REFERRALS} key="link">
+              {t('Docs')}
             </ExternalLink>,
           ]}
           ns={ns}

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

@@ -85,6 +85,7 @@ export const DocsLinks = VEGA_DOCS_URL
       ICEBERG_ORDERS: `${VEGA_DOCS_URL}/concepts/trading-on-vega/orders#iceberg-order`,
       POST_REDUCE_ONLY: `${VEGA_DOCS_URL}/concepts/trading-on-vega/orders#conditional-order-parameters`,
       QUANTUM: `${VEGA_DOCS_URL}/concepts/assets/asset-framework#quantum`,
+      REFERRALS: `${VEGA_DOCS_URL}/tutorials/proposals/referral-program-proposal`,
     }
   : undefined;