From 210a16bb9639b118a7f77fa83f4677192833bfc4 Mon Sep 17 00:00:00 2001
From: bluecco <bluecco@gmail.com>
Date: Thu, 21 Nov 2024 13:46:03 +0100
Subject: [PATCH] feat: webwallet connector theme option

---
 src/connectors/webwallet/helpers/trpc.ts            |  5 +++++
 src/connectors/webwallet/index.ts                   |  8 ++++++--
 .../argentStarknetWindowObject.ts                   | 13 ++++++++++---
 .../webwallet/starknetWindowObject/wormhole.ts      |  1 -
 4 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/connectors/webwallet/helpers/trpc.ts b/src/connectors/webwallet/helpers/trpc.ts
index 7a270cf..9fe64c0 100644
--- a/src/connectors/webwallet/helpers/trpc.ts
+++ b/src/connectors/webwallet/helpers/trpc.ts
@@ -61,6 +61,11 @@ const appRouter = t.router({
   }),
   connect: t.procedure.mutation(async () => ""),
   connectWebwallet: t.procedure
+    .input(
+      z.object({
+        theme: z.enum(["light", "dark", "auto"]).optional(),
+      }),
+    )
     .output(
       z.object({
         account: z.string().array().optional(),
diff --git a/src/connectors/webwallet/index.ts b/src/connectors/webwallet/index.ts
index bcb557b..2c8091a 100644
--- a/src/connectors/webwallet/index.ts
+++ b/src/connectors/webwallet/index.ts
@@ -28,13 +28,17 @@ import {
 import { DEFAULT_WEBWALLET_ICON, DEFAULT_WEBWALLET_URL } from "./constants"
 import { openWebwallet } from "./helpers/openWebwallet"
 import { setPopupOptions } from "./helpers/trpc"
-import type { WebWalletStarknetWindowObject } from "./starknetWindowObject/argentStarknetWindowObject"
+import type {
+  Theme,
+  WebWalletStarknetWindowObject,
+} from "./starknetWindowObject/argentStarknetWindowObject"
 
 let _wallet: StarknetWindowObject | null = null
 let _address: string | null = null
 
 interface WebWalletConnectorOptions {
   url?: string
+  theme?: Theme
   ssoToken?: string
   authorizedPartyId?: string
 }
@@ -125,7 +129,7 @@ export class WebWalletConnector extends Connector {
       } else {
         const connectResponse = await (
           this._wallet as WebWalletStarknetWindowObject
-        ).connectWebwallet()
+        ).connectWebwallet({ theme: this._options.theme })
         account = connectResponse.account
         chainId = connectResponse.chainId
       }
diff --git a/src/connectors/webwallet/starknetWindowObject/argentStarknetWindowObject.ts b/src/connectors/webwallet/starknetWindowObject/argentStarknetWindowObject.ts
index 4f67d4a..fc6f1fa 100644
--- a/src/connectors/webwallet/starknetWindowObject/argentStarknetWindowObject.ts
+++ b/src/connectors/webwallet/starknetWindowObject/argentStarknetWindowObject.ts
@@ -33,9 +33,15 @@ export type LoginStatus = {
   isPreauthorized?: boolean
 }
 
+export type Theme = "light" | "dark"
+
+type ConnectWebwalletProps = {
+  theme?: Theme
+}
+
 export type WebWalletStarknetWindowObject = StarknetWindowObject & {
   getLoginStatus(): Promise<LoginStatus>
-  connectWebwallet(): Promise<{
+  connectWebwallet(props?: ConnectWebwalletProps): Promise<{
     account?: string[]
     chainId?: string
   }>
@@ -57,8 +63,9 @@ export const getArgentStarknetWindowObject = (
     getLoginStatus: () => {
       return proxyLink.getLoginStatus.mutate()
     },
-    connectWebwallet: () => {
-      return proxyLink.connectWebwallet.mutate()
+    connectWebwallet: (props = {}) => {
+      const { theme } = props
+      return proxyLink.connectWebwallet.mutate({ theme })
     },
     connectWebwalletSSO: (token, authorizedPartyId) => {
       return proxyLink.connectWebwalletSSO.mutate({ token, authorizedPartyId })
diff --git a/src/connectors/webwallet/starknetWindowObject/wormhole.ts b/src/connectors/webwallet/starknetWindowObject/wormhole.ts
index 62ff42b..3bb3510 100644
--- a/src/connectors/webwallet/starknetWindowObject/wormhole.ts
+++ b/src/connectors/webwallet/starknetWindowObject/wormhole.ts
@@ -20,7 +20,6 @@ const applyModalStyle = (iframe: HTMLIFrameElement) => {
   background.style.left = "0"
   background.style.right = "0"
   background.style.bottom = "0"
-  background.style.backgroundColor = "rgba(0, 0, 0, 0.5)"
   background.style.zIndex = "99999"
   ;(background.style as any).backdropFilter = "blur(4px)"