Skip to content

Commit 6ae95ae

Browse files
AyushBherwani1998AyushBherwani1998
committed
extract out whitelabel showcase
1 parent c4ad903 commit 6ae95ae

11 files changed

Lines changed: 165 additions & 142 deletions

File tree

‎docs/pnp/features/whitelabel/user-flow-screens.mdx‎

Lines changed: 2 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ description: "User Flow Screens | Documentation - Web3Auth"
77

88
import OpenloginWhiteLabelConfig from "@site/src/common/sdk/pnp/web/_openlogin-whitelabel-config.mdx";
99
import OpenloginWhiteLabelExample from "@site/src/common/sdk/pnp/web/_openlogin-whitelabel-example.mdx";
10+
import WhiteLabelShowcase from "@site/src/common/sdk/pnp/_whitelabel_showcase.mdx";
1011
import Image4 from "@site/static/guides/whitelabel-web3auth-openlogin-dark.png";
1112
import Image7 from "@site/static/guides/whitelabel-web3auth-openlogin-language.png";
1213
import Image3 from "@site/static/guides/whitelabel-web3auth-openlogin-light.png";
@@ -27,135 +28,7 @@ whitelabel the Web3Auth's User Flow Screens.
2728

2829
<OpenloginWhiteLabelConfig />
2930

30-
### `name`
31-
32-
The name of the application. This will be displayed in the key reconstruction page.
33-
34-
<div className="text-image-column">
35-
<div>
36-
<h4>
37-
Standard screen <strong>without</strong> any change
38-
</h4>
39-
<img style={{ display: "block", maxHeight: "500px", alignSelf: "center" }} src={DashboardImage} alt="Standard screen without any change" />
40-
</div>
41-
<div>
42-
<h4>
43-
Name changed to <code>Formidable Duo</code>
44-
</h4>
45-
<img style={{ display: "block", maxHeight: "500px", alignSelf: "center" }} src={Image6} alt="Name changed to Formidable Duo" />
46-
</div>
47-
</div>
48-
<br />
49-
50-
### `logoLight` & `logoDark`
51-
52-
The logo of the application. Displayed in dark and light mode respectively. This will be displayed in the key reconstruction page.
53-
54-
<div className="text-image-column">
55-
<div>
56-
<h4>
57-
<code>logoLight</code> on dark mode
58-
</h4>
59-
<img style={{ display: "block", maxHeight: "500px", alignSelf: "center" }} src={Image8} alt="logoLight on dark mode" />
60-
</div>
61-
<div>
62-
<h4>
63-
<code>logoDark</code> on light mode
64-
</h4>
65-
<img style={{ display: "block", maxHeight: "500px", alignSelf: "center" }} src={Image9} alt="logoDark on light mode" />
66-
</div>
67-
</div>
68-
<br />
69-
70-
### `defaultLanguage`
71-
72-
Default language will set the language used on all OpenLogin screens. The supported languages are:
73-
74-
<div className="text-image-column">
75-
<div style={{ flexGrow: "1", minWidth: "200px" }}>
76-
<ul>
77-
<li>
78-
<code>en</code> - English (default)
79-
</li>
80-
<li>
81-
<code>de</code> - German
82-
</li>
83-
<li>
84-
<code>ja</code> - Japanese
85-
</li>
86-
<li>
87-
<code>ko</code> - Korean
88-
</li>
89-
<li>
90-
<code>zh</code> - Mandarin
91-
</li>
92-
<li>
93-
<code>es</code> - Spanish
94-
</li>
95-
<li>
96-
<code>fr</code> - French
97-
</li>
98-
<li>
99-
<code>pt</code> - Portuguese
100-
</li>
101-
<li>
102-
<code>nl</code> - Dutch
103-
</li>
104-
</ul>
105-
</div>
106-
<div>
107-
<img style={{ width: "100%", maxWidth: "500px" }} src={Image7} alt="default Language screen" />
108-
</div>
109-
</div>
110-
<br />
111-
112-
### `dark`
113-
114-
Can be set to `true` or `false` with default set to `false`.
115-
116-
<br />
117-
118-
<div className="text-image-column">
119-
<div>
120-
<h4>
121-
For Light: <code>dark: false</code>
122-
</h4>
123-
<img style={{ display: "block", maxHeight: "500px", alignSelf: "center" }} src={Image3} alt="light theme" />
124-
</div>
125-
<div>
126-
<h4>
127-
For Dark: <code>dark: true</code>
128-
</h4>
129-
<img style={{ display: "block", maxHeight: "500px", alignSelf: "center" }} src={Image4} alt="dark theme" />
130-
</div>
131-
</div>
132-
133-
<br />
134-
135-
### `theme`
136-
137-
Theme is a record of colors that can be configured. As of, now only `primary` color can be set and has effect on OpenLogin screens (default primary
138-
color is `#0364FF`). Theme affects icons and links. Examples below.
139-
140-
<div className="text-image-column">
141-
<div>
142-
<h4>
143-
Standard color <code>#0364FF</code>
144-
</h4>
145-
<img
146-
style={{ display: "block", maxHeight: "500px", alignSelf: "center" }}
147-
src={DashboardImage}
148-
alt="Theme is a record of colors that can be configured."
149-
/>
150-
</div>
151-
<div>
152-
<h4>
153-
Color changed to <code>#D72F7A</code>
154-
</h4>
155-
<img style={{ display: "block", maxHeight: "500px", alignSelf: "center" }} src={Image6} alt="Theme affects icons and links." />
156-
</div>
157-
</div>
158-
<br />
31+
<WhiteLabelShowcase />
15932

16033
## Example
16134

‎docs/sdk/pnp/android/whitelabel.mdx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ description: "Web3Auth PnP Android SDK - Whitelabel | Documentation - Web3Auth"
77

88
import TabItem from "@theme/TabItem";
99
import Tabs from "@theme/Tabs";
10+
import WhiteLabelShowcase from "@site/src/common/sdk/pnp/_whitelabel_showcase.mdx";
1011

1112
For defining custom UI, branding, and translations for your brand, you just need to specify an additional parameter within the `Web3AuthOptions`
1213
object called `whiteLabel`. This parameter takes object called `WhiteLabelData`.
@@ -61,9 +62,12 @@ data class WhiteLabelData(
6162
```
6263

6364
</TabItem>
64-
6565
</Tabs>
6666

67+
<WhiteLabelShowcase />
68+
69+
### Example
70+
6771
```kotlin title="Usage"
6872
web3Auth = Web3Auth (
6973
Web3AuthOptions (

‎docs/sdk/pnp/flutter/whitelabel.mdx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ description: "Web3Auth PnP Flutter SDK - Whitelabel | Documentation - Web3Auth"
77

88
import TabItem from "@theme/TabItem";
99
import Tabs from "@theme/Tabs";
10+
import WhiteLabelShowcase from "@site/src/common/sdk/pnp/_whitelabel_showcase.mdx";
1011

1112
For defining custom UI, branding, and translations for your brand app, you just need to define an optional object called `WhiteLabelData`.
1213
`WhiteLabelData` can be definied during initialization of the SDK in `LoginParams` object.
@@ -44,7 +45,6 @@ Plan**. You can use this feature in the development environment for free.
4445
| `useLogoLoader?` | Use logo loader. If `logoDark` and `logoLight` are null, the default Web3Auth logo will be used for the loader. Default value is false. |
4546

4647
</TabItem>
47-
4848
<TabItem value="class">
4949

5050
```dart
@@ -87,6 +87,10 @@ class WhiteLabelData {
8787
</TabItem>
8888
</Tabs>
8989

90+
<WhiteLabelShowcase />
91+
92+
### Example
93+
9094
```dart title="Usage"
9195
Future<void> initWeb3Auth() async {
9296

‎docs/sdk/pnp/ios/whitelabel.mdx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ description: "Web3Auth PnP iOS SDK - Whitelabel | Documentation - Web3Auth"
77

88
import TabItem from "@theme/TabItem";
99
import Tabs from "@theme/Tabs";
10+
import WhiteLabelShowcase from "@site/src/common/sdk/pnp/_whitelabel_showcase.mdx";
1011

1112
For defining custom UI, branding, and translations for your brand app, you just need to define an optional object called `W3AWhiteLabelData`.
1213
`W3AWhiteLabelData` can be definied during initialization of the SDK in `W3AInitParams` object.
@@ -61,9 +62,12 @@ public struct W3AWhiteLabelData: Codable {
6162
```
6263

6364
</TabItem>
64-
6565
</Tabs>
6666

67+
<WhiteLabelShowcase />
68+
69+
### Example
70+
6771
```swift title="Usage"
6872
web3Auth = await Web3Auth(
6973
W3AInitParams(

‎docs/sdk/pnp/react-native/whitelabel.mdx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ description: "Web3Auth PnP React Native SDK - Whitelabel | Documentation - Web3A
77

88
import TabItem from "@theme/TabItem";
99
import Tabs from "@theme/Tabs";
10+
import WhiteLabelShowcase from "@site/src/common/sdk/pnp/_whitelabel_showcase.mdx";
1011

1112
`whiteLabel`
1213

@@ -132,9 +133,10 @@ export type WhiteLabelData = {
132133
```
133134

134135
</TabItem>
135-
136136
</Tabs>
137137

138+
<WhiteLabelShowcase />
139+
138140
### Example
139141

140142
<Tabs

‎docs/sdk/pnp/unity/whitelabel.mdx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ description: "Web3Auth PnP Unity SDK - Whitelabel | Documentation - Web3Auth"
77

88
import TabItem from "@theme/TabItem";
99
import Tabs from "@theme/Tabs";
10+
import WhiteLabelShowcase from "@site/src/common/sdk/pnp/_whitelabel_showcase.mdx";
1011

1112
For defining custom UI, branding, and translations for your brand app, you just need to specify an additional parameter within the `Web3AuthOptions`
1213
class called `whiteLabel`. This parameter takes another object called `WhiteLabelData`.
@@ -61,9 +62,10 @@ public class WhiteLabelData {
6162
```
6263

6364
</TabItem>
64-
6565
</Tabs>
6666

67+
<WhiteLabelShowcase />
68+
6769
## Example
6870

6971
```cs

‎docs/sdk/pnp/unreal/whitelabel.mdx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ description: "Web3Auth PnP Unreal Engine SDK - Whitelabel | Documentation - Web3
77

88
import TabItem from "@theme/TabItem";
99
import Tabs from "@theme/Tabs";
10+
import WhiteLabelShowcase from "@site/src/common/sdk/pnp/_whitelabel_showcase.mdx";
1011

1112
For defining custom UI, branding, and translations for your brand app, you just need to specify an additional parameter within the `Web3AuthOptions`
1213
class called `whiteLabel`. This parameter takes another object called `WhiteLabelData`.
@@ -44,7 +45,6 @@ Plan**. You can use this feature in the development environment for free.
4445
| `useLogoLoader?` | Use logo loader. If `logoDark` and `logoLight` are null, the default Web3Auth logo will be used for the loader. Default value is false. |
4546

4647
</TabItem>
47-
4848
<TabItem value="interface">
4949

5050
```cs
@@ -94,9 +94,10 @@ struct FWhiteLabelData
9494
```
9595

9696
</TabItem>
97-
9897
</Tabs>
9998

100-
# Example
99+
<WhiteLabelShowcase />
100+
101+
## Example
101102

102103
![Unreal Whitelabel](/guides/sdk/unreal/unreal-whitelable-data.png)

‎docs/sdk/pnp/web/modal/whitelabel.mdx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ description: "Whitelabel Web3Auth | Documentation - Web3Auth"
66
---
77

88
import InitModalConfigExample from "@site/src/common/sdk/pnp/web/_init-modal-config-example.mdx";
9+
import WhiteLabelShowcase from "@site/src/common/sdk/pnp/_whitelabel_showcase.mdx";
910
import ModalConfig from "@site/src/common/sdk/pnp/web/_modal-config.mdx";
1011
import OpenloginWhiteLabelConfig from "@site/src/common/sdk/pnp/web/_openlogin-whitelabel-config.mdx";
1112
import OpenloginWhiteLabelExample from "@site/src/common/sdk/pnp/web/_openlogin-whitelabel-example.mdx";
@@ -21,8 +22,8 @@ Whitelabeling, giving granular customization capability across all our offerings
2122

2223
:::note
2324

24-
This is a paid feature and the minimum [pricing plan](https://web3auth.io/pricing.html) to use this SDK in a production environment is the
25-
**Growth Plan**. You can use this feature in the development environment for free.
25+
This is a paid feature and the minimum [pricing plan](https://web3auth.io/pricing.html) to use this SDK in a production environment is the **Growth
26+
Plan**. You can use this feature in the development environment for free.
2627

2728
:::
2829

@@ -101,6 +102,7 @@ customizations.
101102
:::
102103

103104
<OpenloginWhiteLabelConfig />
105+
<WhiteLabelShowcase />
104106

105107
### Example
106108

‎docs/sdk/pnp/web/no-modal/whitelabel.mdx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ description: "Web3Auth PnP Web No Modal SDK - Whitelabel | Documentation - Web3A
66
---
77

88
import OpenloginWhiteLabelConfig from "@site/src/common/sdk/pnp/web/_openlogin-whitelabel-config.mdx";
9+
import WhiteLabelShowcase from "@site/src/common/sdk/pnp/_whitelabel_showcase.mdx";
910
import OpenloginWhiteLabelExample from "@site/src/common/sdk/pnp/web/_openlogin-whitelabel-example.mdx";
1011
import PluginConfig from "@site/src/common/sdk/pnp/web/_plugin-config.mdx";
1112
import PluginWhitelabelConfig from "@site/src/common/sdk/pnp/web/_plugin-whitelabel-config.mdx";
@@ -17,8 +18,8 @@ UI for triggering the login. Further, Whitelabeling enables you to customize the
1718

1819
:::note
1920

20-
This is a paid feature and the minimum [pricing plan](https://web3auth.io/pricing.html) to use this SDK in a production environment is the
21-
**Growth Plan**. You can use this feature in the development environment for free.
21+
This is a paid feature and the minimum [pricing plan](https://web3auth.io/pricing.html) to use this SDK in a production environment is the **Growth
22+
Plan**. You can use this feature in the development environment for free.
2223

2324
:::
2425

@@ -32,6 +33,8 @@ Within the Web3Auth Plug and Play No Modal SDK, whitelabeling can happen in 2 di
3233

3334
<OpenloginWhiteLabelConfig />
3435

36+
<WhiteLabelShowcase />
37+
3538
## Openlogin Adapter
3639

3740
Web3Auth's Social Logins and Email Login run using the OpenLogin Flow. The whole OpenLogin user experience can also be whitelabeled using OpenLogin

0 commit comments

Comments
 (0)