Merge pull request #158 from argentlabs/feat/argent-webwallet-theme

feat: webwallet connector theme option

Author: bluecco

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(),

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
       }

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 })

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)"