Skip to content

Update PnP SDK References #650

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yashovardhan merged 11 commits into from
Mar 15, 2024
Merged

Update PnP SDK References #650

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
9669672
update docs for Flutter
AyushBherwani1998 Mar 11, 2024
b1aa8a9
update docs for Android
AyushBherwani1998 Mar 11, 2024
b879e84
update docs for iOS
AyushBherwani1998 Mar 11, 2024
dd27664
update docs for react-native
AyushBherwani1998 Mar 11, 2024
8281524
improve pnp docs
AyushBherwani1998 Mar 12, 2024
c4ad903
mention saphire in networks
AyushBherwani1998 Mar 12, 2024
6ae95ae
extract out whitelabel showcase
AyushBherwani1998 Mar 12, 2024
6016888
add images
AyushBherwani1998 Mar 12, 2024
61e4fbf
resolve merge conflicts
AyushBherwani1998 Mar 14, 2024
ac06632
fix table for web3authoptions
AyushBherwani1998 Mar 14, 2024
94a4111
Merge branch 'master' into enhancements/sdk-references
yashovardhan Mar 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
138 changes: 2 additions & 136 deletions docs/pnp/features/whitelabel/user-flow-screens.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,7 @@ description: "User Flow Screens | Documentation - Web3Auth"

import OpenloginWhiteLabelConfig from "@site/src/common/sdk/pnp/web/_openlogin-whitelabel-config.mdx";
import OpenloginWhiteLabelExample from "@site/src/common/sdk/pnp/web/_openlogin-whitelabel-example.mdx";
import Image4 from "@site/static/guides/whitelabel-web3auth-openlogin-dark.png";
import Image7 from "@site/static/guides/whitelabel-web3auth-openlogin-language.png";
import Image3 from "@site/static/guides/whitelabel-web3auth-openlogin-light.png";
import Image9 from "@site/static/guides/whitelabel-web3auth-openlogin-logo-dark.png";
import Image8 from "@site/static/guides/whitelabel-web3auth-openlogin-logo-light.png";
import DashboardImage from "@site/static/guides/whitelabel-web3auth-openlogin-theme1.png";
import Image6 from "@site/static/guides/whitelabel-web3auth-openlogin-theme2.png";
import WhiteLabelShowcase from "@site/src/common/sdk/pnp/_whitelabel_showcase.mdx";

Web3Auth's User Flow Screens can be customized to match a dApp's branding using the `OpenLoginAdapter` settings, providing more options for a
personalized user experience.
Expand All @@ -27,135 +21,7 @@ whitelabel the Web3Auth's User Flow Screens.

<OpenloginWhiteLabelConfig />

### `name`

The name of the application. This will be displayed in the key reconstruction page.

<div className="text-image-column">
<div>
<h4>
Standard screen <strong>without</strong> any change
</h4>
<img style={{ display: "block", maxHeight: "500px", alignSelf: "center" }} src={DashboardImage} alt="Standard screen without any change" />
</div>
<div>
<h4>
Name changed to <code>Formidable Duo</code>
</h4>
<img style={{ display: "block", maxHeight: "500px", alignSelf: "center" }} src={Image6} alt="Name changed to Formidable Duo" />
</div>
</div>
<br />

### `logoLight` & `logoDark`

The logo of the application. Displayed in dark and light mode respectively. This will be displayed in the key reconstruction page.

<div className="text-image-column">
<div>
<h4>
<code>logoLight</code> on dark mode
</h4>
<img style={{ display: "block", maxHeight: "500px", alignSelf: "center" }} src={Image8} alt="logoLight on dark mode" />
</div>
<div>
<h4>
<code>logoDark</code> on light mode
</h4>
<img style={{ display: "block", maxHeight: "500px", alignSelf: "center" }} src={Image9} alt="logoDark on light mode" />
</div>
</div>
<br />

### `defaultLanguage`

Default language will set the language used on all OpenLogin screens. The supported languages are:

<div className="text-image-column">
<div style={{ flexGrow: "1", minWidth: "200px" }}>
<ul>
<li>
<code>en</code> - English (default)
</li>
<li>
<code>de</code> - German
</li>
<li>
<code>ja</code> - Japanese
</li>
<li>
<code>ko</code> - Korean
</li>
<li>
<code>zh</code> - Mandarin
</li>
<li>
<code>es</code> - Spanish
</li>
<li>
<code>fr</code> - French
</li>
<li>
<code>pt</code> - Portuguese
</li>
<li>
<code>nl</code> - Dutch
</li>
</ul>
</div>
<div>
<img style={{ width: "100%", maxWidth: "500px" }} src={Image7} alt="default Language screen" />
</div>
</div>
<br />

### `dark`

Can be set to `true` or `false` with default set to `false`.

<br />

<div className="text-image-column">
<div>
<h4>
For Light: <code>dark: false</code>
</h4>
<img style={{ display: "block", maxHeight: "500px", alignSelf: "center" }} src={Image3} alt="light theme" />
</div>
<div>
<h4>
For Dark: <code>dark: true</code>
</h4>
<img style={{ display: "block", maxHeight: "500px", alignSelf: "center" }} src={Image4} alt="dark theme" />
</div>
</div>

<br />

### `theme`

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
color is `#0364FF`). Theme affects icons and links. Examples below.

<div className="text-image-column">
<div>
<h4>
Standard color <code>#0364FF</code>
</h4>
<img
style={{ display: "block", maxHeight: "500px", alignSelf: "center" }}
src={DashboardImage}
alt="Theme is a record of colors that can be configured."
/>
</div>
<div>
<h4>
Color changed to <code>#D72F7A</code>
</h4>
<img style={{ display: "block", maxHeight: "500px", alignSelf: "center" }} src={Image6} alt="Theme affects icons and links." />
</div>
</div>
<br />
<WhiteLabelShowcase />

## Example

Expand Down
Loading