Configuration types
List of all @brinkninja/widgets configuration types
** Theme **
interface BrinkWidgetThemeConfig {
theme?: {
mode?: 'light' | 'dark'
colors?: {
primary?: BrinkWidgetThemePalleteOptions // Primary color
secondary?: BrinkWidgetThemePalleteOptions // Secondary color
neutral?: BrinkWidgetThemePalleteOptions // Neutral color
informative?: BrinkWidgetThemePalleteOptions // Informative color
error?: BrinkWidgetThemePalleteOptions // Error color
success?: BrinkWidgetThemePalleteOptions // Success color
warning?: BrinkWidgetThemePalleteOptions // Warning color
background?: {
paper?: string
base100?: string
base200?: string
base300?: string
}, // Widget & components base color
text?: {
primary?: string,
secondary?: string,
disabled?: string
} // Text colors
},
shape?: {
roundedBtn?: string | number
roundedBox?: string | number
roundedFormField?: string | number
} // Adding shape to common components
config?: {
syncFieldColorWithText?: boolean // If set to true, form field label color will be same as main color
}
slot?: {
tabsInContainer?: boolean // If set to true, widget tabs will render inside form container
}
}
}
interface BrinkWidgetThemePalleteOptions {
'100': string,
'200': string,
'300': string,
'400': string,
main: string,
'500': string,
'600': string,
'700': string
}
** App config **
interface BrinkWidgetsProviderAppConfig extends BrinkWidgetThemeConfig {
integratorId?: string
appName: string // Your appName
apiKey: string // apiKey which is provided by Brink team
apiKeyName: string // apiKeyName which is provided by Brink team
rpcUrl?: string // rpcUrl used by wagmi provider under the hood
axiosBaseUrl?: string // Setting the base API url
walletConnectProjectId?: string // Wallet connect project id which will be used by wagmi provider
infiniteApproval?: boolean // If set to true, when approving token it will always ask for max approval
enableReactQueryDevtools?: boolean // If set to true, widget will display RQ dev tools for the RQ client used in widget
tabCacheKey?: string // If provided, when clicking on tabs in widget, selected tab will be stored in localStorage, so it can be selected again on page reload
events?: WidgetEvents // If you want to do some analytics tracking or something else on specific form event
}
export interface WidgetEvents {
onNextButtonClick?: () => Promise<void> | void // Event emitted if user proceeds to Sign step
onSignAndSubmit?: () => Promise<void> | void // Event emitted after user successfuly Signed and Submitted Intent
}
** Providers config **
// You can disable providers used by the widget if you want to provide them from your application
export type BrinkWidgetsProviderSubProviderConfig =
WagmiProviderConfigPropTypes &
MuiProviderConfigPropTypes &
FormikProviderConfigPropTypes &
RainbowKitProviderConfigPropTypes &
QueryClientProviderConfigPropTypes
export interface MuiThemeProviderProps<Theme = DefaultTheme> {
children?: React.ReactNode
theme: Partial<Theme> | ((outerTheme: Theme) => Theme)
}
export type WagmiProviderConfig = ReturnType<typeof createConfig>
export type MuiProviderConfig = MuiThemeProviderProps
export type FormikProviderConfig = FormikConfig<FormikValues>
export type RainbowKitProviderConfig = RainbowKitProviderProps
export type QueryClientProviderConfig = QueryClient
export type WagmiProviderConfigPropTypes =
| {
disableWagmiProvider?: false | undefined | never
wagmiProviderConfig?: ReturnType<typeof createConfig>
}
| {
disableWagmiProvider?: true
wagmiProviderConfig?: never
}
export type MuiProviderConfigPropTypes =
| {
disableMuiProvider?: false | undefined | never
muiProviderConfig?: MuiThemeProviderProps
}
| {
disableMuiProvider?: true
muiProviderConfig?: never
}
export type FormikProviderConfigPropTypes =
| {
disableFormikProvider?: false | undefined | never
formikProviderConfig?: FormikConfig<FormikValues>
}
| {
disableFormikProvider?: true
formikProviderConfig?: never
}
export type RainbowKitProviderConfigPropTypes =
| {
disableRainbowkitProvider?: false | undefined | never
rainbowKitProviderConfig?: RainbowKitProviderProps
}
| {
disableRainbowkitProvider?: true
rainbowKitProviderConfig?: never
}
export type QueryClientProviderConfigPropTypes =
| {
disableQueryClientProvider?: false | undefined | never
queryClientProviderConfig?: {
client: QueryClient
}
}
| {
disableQueryClientProvider?: true
queryClientProviderConfig?: never
}
export type BrinkWidgetsProviderConfig = BrinkWidgetsProviderAppConfig &
BrinkWidgetsProviderSubProviderConfig
Updated 9 months ago