Skip to content

Commit

Permalink
style fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@smgv
smgv committed Jan 2, 2025
1 parent 47031a0 commit ae5922f
Show file tree
Hide file tree
Showing 3 changed files with 62 additions and 50 deletions.
89 changes: 46 additions & 43 deletions packages/modal-ui/src/components/Body/Body.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { type SafeEventEmitter } from "@web3auth/auth";
import { ChainNamespaceType, WALLET_ADAPTERS, WalletRegistry } from "@web3auth/base/src";
import Bowser from "bowser";
import { createContext, createEffect, createMemo, Show } from "solid-js";
import { createContext, createEffect, createMemo, Match, Show, Suspense, Switch } from "solid-js";
import { createStore } from "solid-js/store";

import { PAGES } from "../../constants";
Expand Down Expand Up @@ -170,49 +170,54 @@ const Body = (props: BodyProps) => {

return (
<BodyContext.Provider value={{ bodyState, setBodyState }}>
<div class="w3a--h-[760px] w3a--p-6 w3a--flex w3a--flex-col w3a--flex-1 w3a--relative">
<div class="w3a--h-auto w3a--p-6 w3a--flex w3a--flex-col w3a--flex-1 w3a--relative">
<Show
when={props.modalState.status !== MODAL_STATUS.INITIALIZED}
fallback={
<>
<Show
when={
props.modalState.currentPage === PAGES.LOGIN && props.showExternalWalletPage && props.modalState.status === MODAL_STATUS.INITIALIZED
}
>
<Login
{...props}
showPasswordLessInput={props.showPasswordLessInput}
showExternalWalletButton={props.showExternalWalletButton}
handleSocialLoginClick={props.handleSocialLoginClick}
socialLoginsConfig={props.socialLoginsConfig}
areSocialLoginsVisible={props.areSocialLoginsVisible}
isEmailPrimary={props.isEmailPrimary}
isExternalPrimary={props.isExternalPrimary}
handleExternalWalletBtnClick={handleExternalWalletBtnClick}
isEmailPasswordLessLoginVisible={props.isEmailPasswordLessLoginVisible}
isSmsPasswordLessLoginVisible={props.isSmsPasswordLessLoginVisible}
/>
</Show>
<Show
when={
props.modalState.currentPage === PAGES.CONNECT_WALLET &&
!props.showExternalWalletPage &&
props.modalState.status === MODAL_STATUS.INITIALIZED
}
>
<ConnectWallet
onBackClick={handleBackClick}
modalStatus={props.modalState.status}
showBackButton={props.areSocialLoginsVisible || props.showPasswordLessInput}
handleExternalWalletClick={props.preHandleExternalWalletClick}
chainNamespace={props.chainNamespace}
walletConnectUri={props.modalState.walletConnectUri}
config={props.modalState.externalWalletsConfig}
walletRegistry={props.walletRegistry}
/>
</Show>
</>
<Suspense>
<Switch>
<Match
when={
props.modalState.currentPage === PAGES.LOGIN &&
props.showExternalWalletPage &&
props.modalState.status === MODAL_STATUS.INITIALIZED
}
>
<Login
{...props}
showPasswordLessInput={props.showPasswordLessInput}
showExternalWalletButton={props.showExternalWalletButton}
handleSocialLoginClick={props.handleSocialLoginClick}
socialLoginsConfig={props.socialLoginsConfig}
areSocialLoginsVisible={props.areSocialLoginsVisible}
isEmailPrimary={props.isEmailPrimary}
isExternalPrimary={props.isExternalPrimary}
handleExternalWalletBtnClick={handleExternalWalletBtnClick}
isEmailPasswordLessLoginVisible={props.isEmailPasswordLessLoginVisible}
isSmsPasswordLessLoginVisible={props.isSmsPasswordLessLoginVisible}
/>
</Match>
<Match
when={
props.modalState.currentPage === PAGES.CONNECT_WALLET &&
!props.showExternalWalletPage &&
props.modalState.status === MODAL_STATUS.INITIALIZED
}
>
<ConnectWallet
onBackClick={handleBackClick}
modalStatus={props.modalState.status}
showBackButton={props.areSocialLoginsVisible || props.showPasswordLessInput}
handleExternalWalletClick={props.preHandleExternalWalletClick}
chainNamespace={props.chainNamespace}
walletConnectUri={props.modalState.walletConnectUri}
config={props.modalState.externalWalletsConfig}
walletRegistry={props.walletRegistry}
appLogo={props.appLogo}
/>
</Match>
</Switch>
</Suspense>
}
>
<Loader
Expand All @@ -223,9 +228,7 @@ const Body = (props: BodyProps) => {
appLogo={props.appLogo}
/>
</Show>

<Footer />

<Show when={bodyState.showWalletDetails}>
<div
class="w3a--absolute w3a--h-full w3a--w-full w3a--top-0 w3a--left-0 w3a--bottom-sheet-bg w3a--rounded-3xl"
Expand Down
21 changes: 15 additions & 6 deletions packages/modal-ui/src/components/Body/ConnectWallet.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,9 @@ import { createEffect, createMemo, createSignal, For, Show, useContext } from "s
import { MaskType, QRCodeCanvas } from "solid-qr-code";

import { CONNECT_WALLET_PAGES } from "../../constants";
import { browser, ExternalButton, ModalStatusType, os, platform } from "../../interfaces";
import { browser, DEFAULT_LOGO_DARK, DEFAULT_LOGO_LIGHT, ExternalButton, ModalStatusType, os, platform } from "../../interfaces";
import { t } from "../../localeImport";
import { cn } from "../../utils/common";
import { Image } from "../Image";
import { WalletButton } from "../WalletButton";
import { BodyContext } from "./Body";
Expand All @@ -18,6 +19,7 @@ export interface ConnectWalletProps {
modalStatus: ModalStatusType;
chainNamespace: ChainNamespaceType;
walletRegistry?: WalletRegistry;
appLogo?: string;
}

const ConnectWallet = (props: ConnectWalletProps) => {
Expand Down Expand Up @@ -224,6 +226,8 @@ const ConnectWallet = (props: ConnectWalletProps) => {
}
};

const headerLogo = createMemo(() => ([DEFAULT_LOGO_DARK, DEFAULT_LOGO_LIGHT].includes(props.appLogo) ? "" : props.appLogo));

return (
<div class="w3a--flex w3a--flex-col w3a--gap-y-4 w3a--flex-1 w3a--relative">
<div class="w3a--flex w3a--items-center w3a--justify-between">
Expand Down Expand Up @@ -267,7 +271,12 @@ const ConnectWallet = (props: ConnectWalletProps) => {
class="w3a--appearance-none w3a--px-4 w3a--py-2.5 w3a--border w3a--text-app-gray-900 w3a--border-app-gray-300 w3a--bg-app-gray-50 dark:w3a--bg-app-gray-700 dark:w3a--border-app-gray-600 dark:w3a--text-app-white placeholder:w3a--text-app-gray-500 dark:placeholder:w3a--text-app-gray-400 placeholder:w3a--text-sm placeholder:w3a--font-normal w3a--rounded-full w3a--outline-none focus:w3a--outline-none active:w3a--outline-none"
/>
</Show>
<ul class="w3a--h-[calc(100dvh_-_240px)] w3a--overflow-y-auto w3a--flex w3a--flex-col">
<ul
class={cn("w3a--overflow-y-auto w3a--flex w3a--flex-col", {
"w3a--h-[calc(100dvh_-_400px)]": headerLogo(),
"w3a--h-[calc(100dvh_-_460px)]": !headerLogo(),
})}
>
<Show
when={externalButtons().length > 0}
fallback={
Expand Down Expand Up @@ -305,7 +314,7 @@ const ConnectWallet = (props: ConnectWalletProps) => {
<Show
when={props.walletConnectUri}
fallback={
<div class="w3a--bg-app-gray-200 dark:w3a--bg-app-gray-700 w3a--animate-pulse w3a--rounded-lg w3a--h-[320px] w3a--w-[320px] w3a--mx-auto w3a--p-2 w3a--flex w3a--items-center w3a--justify-center">
<div class="w3a--bg-app-gray-200 dark:w3a--bg-app-gray-700 w3a--animate-pulse w3a--rounded-lg w3a--h-[300px] w3a--w-[300px] w3a--mx-auto w3a--p-2 w3a--flex w3a--items-center w3a--justify-center">
<Image
imageId={`login-${selectedButton().name}`}
hoverImageId={`login-${selectedButton().name}`}
Expand All @@ -318,16 +327,16 @@ const ConnectWallet = (props: ConnectWalletProps) => {
</div>
}
>
<div class="w3a--relative w3a--bg-app-gray-200 w3a--rounded-lg w3a--h-[320px] w3a--w-[320px] w3a--mx-auto w3a--p-2 w3a--flex w3a--items-center w3a--justify-center">
<div class="w3a--relative w3a--bg-app-gray-200 w3a--rounded-lg w3a--h-[300px] w3a--w-[300px] w3a--mx-auto w3a--flex w3a--items-center w3a--justify-center">
<QRCodeCanvas
value={props.walletConnectUri || ""}
level="low"
backgroundColor="transparent"
backgroundAlpha={0}
foregroundColor="#000000"
foregroundAlpha={1}
width={300}
height={300}
width={280}
height={280}
x={0}
y={0}
maskType={MaskType.FLOWER_IN_SQAURE}
Expand Down
2 changes: 1 addition & 1 deletion packages/modal-ui/src/components/Modal/Modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ const Modal: Component<ModalProps> = (props: ModalProps) => {
})}
>
<div
class={cn("w3a--modal-bg w3a--rounded-3xl w3a--w-full sm:w3a--w-[400px] w3a--duration-500", {
class={cn("w3a--modal-bg w3a--rounded-3xl w3a--w-[96%] sm:w3a--w-[380px] w3a--duration-500", {
"w3a--translate-y-0 w3a--delay-100": isOpen(),
"w3a--translate-y-[100vh]": !isOpen(),
"w3a--p-4": mergedProps.padding,
Expand Down

0 comments on commit ae5922f

Please sign in to comment.