fix: open legal links in new tab

.changeset/strange-cooks-share.md

@@ -0,0 +1,6 @@
+---
+'@reown/appkit-scaffold-ui': minor
+'@reown/appkit-core': minor
+---
+
+Added legalLinksNewTab option to allow legal links to optionally open in new tabs

apps/laboratory/.env.example

@@ -1,5 +1,5 @@
 # Obtain a project ID from https://cloud.walletconnect.com
-NEXT_PUBLIC_PROJECT_ID=""
+NEXT_PUBLIC_PROJECT_ID="ee7410d12dfbe505287359a4dd81ac22"
 # See 1password for `NEXT_AUTH_SECRET`
 NEXTAUTH_SECRET=""
 # See 1password for `Mailsac AppKit API Key`

apps/laboratory/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

packages/core/src/controllers/OptionsController.ts

@@ -140,6 +140,11 @@ export interface OptionsControllerStatePublic {
    * @default false
    */
   allowUnsupportedChain?: boolean
+  /**
+   * Open legal links (Terms and Privacy) in new tab
+   * @default false
+   */
+  legalLinksNewTab?: boolean
 }
 
 export interface OptionsControllerStateInternal {
@@ -319,6 +324,10 @@ export const OptionsController = {
     state.useInjectedUniversalProvider = useInjectedUniversalProvider
   },
 
+  setLegalLinksNewTab(legalLinksNewTab: OptionsControllerState['legalLinksNewTab']) {
+    state.legalLinksNewTab = legalLinksNewTab
+  },
+
   getSnapshot() {
     return snapshot(state)
   }

packages/scaffold-ui/src/partials/w3m-legal-footer/index.ts

@@ -44,7 +44,12 @@ export class W3mLegalFooter extends LitElement {
       return null
     }
 
-    return html`<a href=${termsConditionsUrl}>Terms of Service</a>`
+    const { target, rel } = this.getLinkAttributes()
+    return html`<a 
+      href=${termsConditionsUrl}
+      ?target=${target} 
+      ?rel=${rel}
+    >Terms of Service</a>`
   }
 
   private privacyTemplate() {
@@ -53,12 +58,17 @@ export class W3mLegalFooter extends LitElement {
       return null
     }
 
-    return html`<a href=${privacyPolicyUrl}>Privacy Policy</a>`
+    const { target, rel } = this.getLinkAttributes()
+    return html`<a 
+      href=${privacyPolicyUrl}
+      ?target=${target}
+      ?rel=${rel}
+    >Privacy Policy</a>`
   }
 }
 
 declare global {
   interface HTMLElementTagNameMap {
     'w3m-legal-footer': W3mLegalFooter
   }
-}
+}