feat: change button to prompt to connect if not connected

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

@@ -1,10 +1,13 @@
-import { useVegaWallet } from '@vegaprotocol/wallet';
+import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
 import { RainbowButton } from './buttons';
 import { useState } from 'react';
 import classNames from 'classnames';
 
 export const CreateCodeForm = () => {
   const [err, setErr] = useState<boolean | null>(null);
+  const openWalletDialog = useVegaWalletDialogStore(
+    (store) => store.openVegaWalletDialog
+  );
   const { isReadOnly, pubKey, sendTx } = useVegaWallet();
   const onSubmit = () => {
     if (isReadOnly || !pubKey) {
@@ -25,28 +28,34 @@ export const CreateCodeForm = () => {
     }
   };
 
-  const btn = (
-    <RainbowButton
-      className={classNames({
-        'animate-shake': err,
-      })}
-      variant="border"
-      onClick={() => onSubmit()}
-    >
-      Create a referral code
-    </RainbowButton>
-  );
-
   return (
     <div className="w-1/2 mx-auto">
-      <h3 className="text-xl mb-5 text-center uppercase calt">
+      <h3 className="mb-5 text-xl text-center uppercase calt">
         Create a referral code
       </h3>
       <p className="mb-6 text-center">
         Generate a referral code to share with your friends and start earning
         commission.
       </p>
-      <div className="text-center">{btn}</div>
+      {pubKey ? (
+        <div className="text-center">
+          <RainbowButton
+            className={classNames({
+              'animate-shake': err,
+            })}
+            variant="border"
+            onClick={() => onSubmit()}
+          >
+            Create a referral code
+          </RainbowButton>
+        </div>
+      ) : (
+        <div className="text-center">
+          <RainbowButton variant="border" onClick={() => openWalletDialog()}>
+            Connect wallet
+          </RainbowButton>
+        </div>
+      )}
     </div>
   );
 };