Feat: Implement Dasboard Wallet Branding Changes

examples/index.html

@@ -78,5 +78,9 @@ <h2 class="section-heading">STATUS</h2>
     </div>
     <script src="../dist/standalone/auth.umd.js"></script>
     <script src="./index.js"></script>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Onest:wght@100..900&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Syne:wght@400..800&display=swap"
+      rel="stylesheet"
+    />
   </body>
 </html>

src/appInfo.ts

@@ -1,4 +1,4 @@
-import { AppThemeInfo, AppInfo, Theme } from './typings'
+import { AppInfo, AppThemeInfo, Theme } from './typings'
 
 function getImageUrls(appId: string, theme: Theme, gatewayUrl: string) {
   const u = new URL(`/api/v2/app/${appId}/logo/?type=${theme}`, gatewayUrl)
@@ -20,4 +20,4 @@ async function getAppInfo(appId: string, gatewayUrl: string) {
   return appInfo
 }
 
-export { getImageUrls, getAppInfo, getAppThemeInfo }
+export { getAppInfo, getAppThemeInfo, getImageUrls }

src/index.ts

@@ -1,26 +1,21 @@
-import { ArcanaProvider } from './provider'
-import IframeWrapper from './iframeWrapper'
-import {
-  getConstructorParams,
-  getErrorReporter,
-  getParamsFromClientId,
-  isClientId,
-  onWindowReady,
-  preLoadIframe,
-  removeHexPrefix,
-  validateAppAddress,
-} from './utils'
+import { getAppInfo, getAppThemeInfo, getImageUrls } from './appInfo'
 import { getNetworkConfig } from './config'
+import { ArcanaAuthError, ErrorNotInitialized } from './errors'
+import IframeWrapper from './iframeWrapper'
+import { LOG_LEVEL, setExceptionReporter, setLogLevel } from './logger'
+import Popup from './popup'
+import { ArcanaProvider } from './provider'
+import { ArcanaSolanaAPI } from './solana'
 import {
   AppConfig,
   AppMode,
   BearerAuthentication,
+  BearerAuthParams,
   ChainType,
   ConstructorParams,
   CustomProviderParams,
   EIP6963ProviderInfo,
   EthereumProvider,
-  BearerAuthParams,
   InitStatus,
   Logins,
   NetworkConfig,
@@ -29,12 +24,17 @@
   ThemeConfig,
   UserInfo,
 } from './typings'
-import { getAppInfo, getAppThemeInfo, getImageUrls } from './appInfo'
-import { ArcanaAuthError, ErrorNotInitialized } from './errors'
-import { LOG_LEVEL, setExceptionReporter, setLogLevel } from './logger'
-import Popup from './popup'
 import { ModalController } from './ui/modalController'
-import { ArcanaSolanaAPI } from './solana'
+import {
+  getConstructorParams,
+  getErrorReporter,
+  getParamsFromClientId,
+  isClientId,
+  onWindowReady,
+  preLoadIframe,
+  removeHexPrefix,
+  validateAppAddress,
+} from './utils'
 
 import isEmail from 'validator/es/lib/isEmail'
 
@@ -54,7 +54,7 @@
   private connectCtrl: ModalController
   private _standaloneMode: {
     mode: 1 | 2
     handler: (...args: any) => void | undefined
   }
   constructor(clientId: string, p?: Partial<ConstructorParams>) {
     let network = p?.network
@@ -192,6 +192,7 @@
         mode: this.theme,
         logo: this.logo.vertical,
         options: this.params.connectOptions,
+        theme_settings: this.appConfig.theme_settings,
       })
     }
     return new Promise((resolve, reject) => {
@@ -462,9 +463,10 @@
       getAppThemeInfo(this.appId, this.networkConfig.gatewayUrl),
       getAppInfo(this.appId, this.networkConfig.gatewayUrl),
     ])
+
     const appImageURLs = getImageUrls(
       this.appId,
-      this.params.theme,
+      appThemeInfo.theme,
       this.networkConfig.gatewayUrl
     )
     const horizontalLogo =
@@ -484,7 +486,14 @@
             vertical: verticalLogo ? appImageURLs.vertical : '',
           },
         },
-        theme: this.params.theme,
+        theme: appThemeInfo.theme,
+      },
+      theme_settings: {
+        accent_color: appInfo.theme_settings.accent_color,
+        font_pairing: appInfo.theme_settings.font_pairing,
+        font_color: appInfo.theme_settings.font_color,
+        radius: appInfo.theme_settings.radius,
+        font_size: appInfo.theme_settings.font_size,
       },
     }
   }
@@ -585,7 +594,7 @@
 
   private standaloneMode(
     mode: 1 | 2,
     handler: (eventName: string, data: any) => void
   ) {
     this._standaloneMode = {
       mode,
@@ -595,15 +604,15 @@
 }
 
 export {
+  AppConfig,
   AuthProvider,
+  BearerAuthentication,
   ConstructorParams,
   EthereumProvider,
-  BearerAuthentication,
-  AppConfig,
-  Theme,
-  Position,
   Logins,
-  UserInfo,
-  ThemeConfig,
   NetworkConfig,
+  Position,
+  Theme,
+  ThemeConfig,
+  UserInfo,
 }

src/typings.ts

@@ -43,6 +43,11 @@ export interface JsonRpcSuccess<T> extends JsonRpcResponseBase {
   result: Maybe<T>
 }
 
+export type FirebaseBearer = {
+  uid?: string | undefined
+  token: string
+}
+
 export type JsonRpcResponse<T> = JsonRpcSuccess<T> | JsonRpcFailure
 /* end of json-rpc-engine types */
 
@@ -84,15 +89,25 @@ export interface AppThemeInfo {
     light_vertical?: string
   }
 }
+
+export interface ThemeSettings {
+  accent_color: string
+  font_pairing: string
+  font_size: string
+  font_color: string
+  radius: string
+}
 export interface AppInfo {
   name: string
   chain_type: 'evm' | 'solana'
+  theme_settings: ThemeSettings
 }
 
 export interface AppConfig {
   name: string
   chainType: ChainType
   themeConfig: ThemeConfig
+  theme_settings: ThemeSettings
 }
 
 export interface UserInfo {