Skip to content

Commit 3a09111

Browse files
arch1995arch1995
committed
fixes css issues + eslint + add better types
1 parent b4246a1 commit 3a09111

File tree

32 files changed

+117
-117
lines changed

32 files changed

+117
-117
lines changed

‎packages/modal/src/ui/components/Button/Button.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { ButtonProps } from "./Button.type";
2-
import ButtonSocial, { ButtonSocialProps } from "./ButtonSocial";
3-
import ButtonWallet, { ButtonWalletProps } from "./ButtonWallet";
1+
import { BUTTON_TYPE, ButtonProps } from "./Button.type";
2+
import ButtonSocial, { type ButtonSocialProps } from "./ButtonSocial";
3+
import ButtonWallet, { type ButtonWalletProps } from "./ButtonWallet";
44

55
function Button(props: ButtonProps) {
66
const { type, props: buttonProps } = props;
@@ -13,7 +13,7 @@ function Button(props: ButtonProps) {
1313

1414
return (
1515
<>
16-
{type === "social" && (
16+
{type === BUTTON_TYPE.SOCIAL && (
1717
<ButtonSocial
1818
text={text}
1919
showIcon={showIcon}
@@ -27,7 +27,7 @@ function Button(props: ButtonProps) {
2727
{children}
2828
</ButtonSocial>
2929
)}
30-
{type === "wallet" && (
30+
{type === BUTTON_TYPE.WALLET && (
3131
<ButtonWallet label={label} walletConnectUri={walletConnectUri} onClick={walletOnClick} button={button} deviceDetails={deviceDetails} />
3232
)}
3333
</>

‎packages/modal/src/ui/components/Button/Button.type.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
import { ButtonSocialProps } from "./ButtonSocial";
22
import { ButtonWalletProps } from "./ButtonWallet";
33

4-
export type ButtonType = "social" | "wallet";
4+
export const BUTTON_TYPE = {
5+
SOCIAL: "social",
6+
WALLET: "wallet",
7+
} as const;
8+
9+
export type ButtonType = (typeof BUTTON_TYPE)[keyof typeof BUTTON_TYPE];
510
export type ButtonPropsType = ButtonSocialProps | ButtonWalletProps;
611

712
export interface ButtonProps {

‎packages/modal/src/ui/components/Button/ButtonWallet/ButtonWallet.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,12 +31,12 @@ function ButtonWallet(props: ButtonWalletProps) {
3131
return (
3232
<button
3333
type="button"
34-
className="w3a--w-full w3a--flex w3a--items-center w3a--justify-between w3a--p-3 w3a--rounded-2xl w3a--bg-app-gray-50
35-
dark:w3a--bg-app-gray-800 hover:w3a--bg-app-gray-200 hover:text-app-gray-900 dark:hover:w3a--bg-app-gray-600"
34+
className="w3a--flex w3a--w-full w3a--items-center w3a--justify-between w3a--rounded-2xl w3a--bg-app-gray-50 w3a--p-3
35+
hover:w3a--bg-app-gray-200 hover:w3a--text-app-gray-900 dark:w3a--bg-app-gray-800 dark:hover:w3a--bg-app-gray-600"
3636
onClick={handleBtnClick}
3737
>
3838
<div className="w3a--flex w3a--items-center w3a--gap-x-2">
39-
<figure className="w3a--w-5 w3a--h-5 w3a--rounded-full w3a--bg-app-gray-300">
39+
<figure className="w3a--size-5 w3a--rounded-full w3a--bg-app-gray-300">
4040
<Image
4141
imageId={`login-${button.name}`}
4242
hoverImageId={`login-${button.name}`}
@@ -51,8 +51,8 @@ function ButtonWallet(props: ButtonWalletProps) {
5151
</div>
5252
{button.hasInjectedWallet && (
5353
<span
54-
className="w3a--inline-flex w3a--items-center w3a--rounded-md w3a--px-2 w3a--py-1 w3a--text-xs w3a--font-medium w3a--bg-app-primary-100 w3a--text-app-primary-800
55-
dark:w3a--bg-transparent dark:w3a--text-app-primary-400 dark:w3a--border dark:w3a--border-app-primary-400"
54+
className="w3a--inline-flex w3a--items-center w3a--rounded-md w3a--bg-app-primary-100 w3a--px-2 w3a--py-1 w3a--text-xs w3a--font-medium w3a--text-app-primary-800
55+
dark:w3a--border dark:w3a--border-app-primary-400 dark:w3a--bg-transparent dark:w3a--text-app-primary-400"
5656
>
5757
{t("modal.external.installed")}
5858
</span>

‎packages/modal/src/ui/components/Button/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
export { default } from "./Button";
2-
export type { ButtonProps, ButtonPropsType, ButtonType } from "./Button.type";
2+
export { BUTTON_TYPE, type ButtonProps, type ButtonPropsType, type ButtonType } from "./Button.type";

‎packages/modal/src/ui/components/ConnectWallet/ConnectWallet.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import { WALLET_CONNECTORS } from "@web3auth/no-modal";
22
import { FormEvent, useContext, useEffect, useMemo, useState } from "react";
33

4-
import { CHAIN_LIST, CONNECT_WALLET_PAGES } from "../../constants";
4+
import { CONNECT_WALLET_PAGES } from "../../constants";
55
import { RootContext } from "../../context/RootContext";
66
import { ExternalButton } from "../../interfaces";
77
import { ConnectWalletProps } from "./ConnectWallet.type";
8-
import ConnectWalletChainFilter from "./ConnectWalletChainFilter";
98
import ConnectWalletHeader from "./ConnectWalletHeader";
109
import ConnectWalletList from "./ConnectWalletList";
1110
import ConnectWalletQrCode from "./ConnectWalletQrCode";
@@ -36,7 +35,7 @@ function ConnectWallet(props: ConnectWalletProps) {
3635
const [selectedButton, setSelectedButton] = useState<ExternalButton>(null);
3736
const [walletSearch, setWalletSearch] = useState<string>("");
3837
const [isLoading, setIsLoading] = useState<boolean>(true);
39-
const [selectedChain, setSelectedChain] = useState<string>("all");
38+
// const [selectedChain, setSelectedChain] = useState<string>("all");
4039
const [initialWalletCount, setInitialWalletCount] = useState<number>(0);
4140

4241
const handleBack = () => {
@@ -139,7 +138,7 @@ function ConnectWallet(props: ConnectWalletProps) {
139138
};
140139

141140
return (
142-
<div className="w3a--flex w3a--flex-col w3a--gap-y-4 w3a--flex-1 w3a--relative">
141+
<div className="w3a--relative w3a--flex w3a--flex-1 w3a--flex-col w3a--gap-y-4">
143142
{/* Header */}
144143
<ConnectWalletHeader onBackClick={handleBack} currentPage={currentPage} selectedButton={selectedButton} />
145144
{/* Body */}
@@ -153,14 +152,14 @@ function ConnectWallet(props: ConnectWalletProps) {
153152
/>
154153
) : (
155154
<div className="w3a--flex w3a--flex-col w3a--gap-y-2">
156-
{/* Chain Filters */}
157-
<ConnectWalletChainFilter
155+
{/* TODO: To be implemented */}
156+
{/* <ConnectWalletChainFilter
158157
isDark={isDark}
159158
isLoading={isLoading}
160159
selectedChain={selectedChain}
161160
setSelectedChain={setSelectedChain}
162161
chains={CHAIN_LIST}
163-
/>
162+
/> */}
164163
{/* Search Input */}
165164
<ConnectWalletSearch
166165
totalExternalWallets={totalExternalWalletsCount}

‎packages/modal/src/ui/components/ConnectWallet/ConnectWallet.type.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
1-
import { BaseConnectorConfig, WalletRegistry } from "@web3auth/no-modal";
1+
import type { BaseConnectorConfig, WalletRegistry } from "@web3auth/no-modal";
22

3-
import { browser, ExternalButton, os, platform } from "../../interfaces";
3+
import type { browser, ExternalButton, os, platform } from "../../interfaces";
44

55
export interface ConnectWalletProps {
66
isDark: boolean;
7-
onBackClick?: (flag: boolean) => void;
8-
handleExternalWalletClick: (params: { connector: string }) => void;
97
config: Record<string, BaseConnectorConfig>;
108
walletConnectUri: string | undefined;
119
walletRegistry?: WalletRegistry;
@@ -14,5 +12,7 @@ export interface ConnectWalletProps {
1412
customAdapterButtons: ExternalButton[];
1513
adapterVisibilityMap: Record<string, boolean>;
1614
deviceDetails: { platform: platform; browser: browser; os: os };
15+
onBackClick?: (flag: boolean) => void;
16+
handleExternalWalletClick: (params: { connector: string }) => void;
1717
handleWalletDetailsHeight: () => void;
1818
}

‎packages/modal/src/ui/components/ConnectWallet/ConnectWalletChainFilter/ConnectWalletChainFilter.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ function ConnectWalletChainFilter(props: ConnectWalletChainFilterProps) {
1111
return (
1212
<div className="w3a--flex w3a--items-center w3a--justify-between w3a--gap-x-2">
1313
{Array.from({ length: chains.length }).map(() => (
14-
<div key={uuid} className="w3a--w-[100px] w3a--h-12 w3a--rounded-2xl w3a--bg-app-gray-200 dark:w3a--bg-app-gray-700 w3a--animate-pulse" />
14+
<div key={uuid} className="w3a--h-12 w3a--w-[100px] w3a--animate-pulse w3a--rounded-2xl w3a--bg-app-gray-200 dark:w3a--bg-app-gray-700" />
1515
))}
1616
</div>
1717
);

‎packages/modal/src/ui/components/ConnectWallet/ConnectWalletHeader/ConnectWalletHeader.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ function ConnectWalletHeader(props: ConnectWalletHeaderProps) {
1414
<div className="w3a--flex w3a--items-center w3a--justify-between">
1515
<button
1616
type="button"
17-
className="w3a--w-5 w3a--h-5 w3a--rounded-full w3a--cursor-pointer w3a--flex w3a--items-center w3a--justify-center w3a--z-20"
17+
className="w3a--z-20 w3a--flex w3a--size-5 w3a--cursor-pointer w3a--items-center w3a--justify-center w3a--rounded-full"
1818
onClick={handleBack}
1919
>
2020
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" className="w3a--text-app-gray-900 dark:w3a--text-app-white">
@@ -29,7 +29,7 @@ function ConnectWalletHeader(props: ConnectWalletHeaderProps) {
2929
<p className="w3a--text-base w3a--font-medium w3a--text-app-gray-900">
3030
{currentPage === CONNECT_WALLET_PAGES.SELECTED_WALLET ? selectedButton?.displayName : currentPage}
3131
</p>
32-
<div className="w3a--w-5 w3a--h-5 w3a--z-[-1]" />
32+
<div className="w3a--z-[-1] w3a--size-5" />
3333
</div>
3434
);
3535
}

‎packages/modal/src/ui/components/ConnectWallet/ConnectWalletList/ConnectWalletList.tsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
1-
import { useId } from "react";
21
import { useTranslation } from "react-i18next";
32

43
import i18n from "../../../localeImport";
54
import { cn, getIcons } from "../../../utils";
6-
import Button from "../../Button";
5+
import Button, { BUTTON_TYPE } from "../../Button";
76
import { ConnectWalletListProps, MoreWalletsButtonProps, WalletsFoundProps } from "./ConnectWalletList.type";
87

98
function NoWalletsFound() {
109
const [t] = useTranslation(undefined, { i18n });
1110

1211
return (
13-
<div className="w3a--w-full w3a--text-center w3a--text-app-gray-400 dark:w3a--text-app-gray-500 w3a--py-6 w3a--flex w3a--justify-center w3a--items-center">
12+
<div className="w3a--flex w3a--w-full w3a--items-center w3a--justify-center w3a--py-6 w3a--text-center w3a--text-app-gray-400 dark:w3a--text-app-gray-500">
1413
{t("modal.external.no-wallets-found")}
1514
</div>
1615
);
@@ -19,13 +18,14 @@ function NoWalletsFound() {
1918
function WalletsFound(props: WalletsFoundProps) {
2019
const { externalButtons, isLoading, handleWalletClick, deviceDetails, walletConnectUri } = props;
2120

22-
const uuid = useId();
23-
2421
if (isLoading) {
2522
return (
2623
<div className="w3a--flex w3a--flex-col w3a--gap-y-2 w3a--pr-1.5">
27-
{Array.from({ length: 6 }).map(() => (
28-
<div key={uuid} className="w3a--w-full w3a--h-12 w3a--animate-pulse w3a--rounded-2xl w3a--bg-app-gray-200 dark:w3a--bg-app-gray-700" />
24+
{Array.from({ length: 6 }).map((_, index) => (
25+
<div
26+
key={`loader-${index}`}
27+
className="w3a--h-12 w3a--w-full w3a--animate-pulse w3a--rounded-2xl w3a--bg-app-gray-200 dark:w3a--bg-app-gray-700"
28+
/>
2929
))}
3030
</div>
3131
);
@@ -35,8 +35,8 @@ function WalletsFound(props: WalletsFoundProps) {
3535
<div className="w3a--flex w3a--flex-col w3a--gap-y-2 w3a--pr-1.5">
3636
{externalButtons.map((button) => (
3737
<Button
38-
key={uuid}
39-
type="wallet"
38+
key={button.name}
39+
type={BUTTON_TYPE.WALLET}
4040
props={{
4141
label: button.displayName,
4242
onClick: () => handleWalletClick(button),
@@ -60,20 +60,20 @@ function MoreWalletsButton(props: MoreWalletsButtonProps) {
6060
};
6161

6262
if (isLoading && initialWalletCount < totalExternalWallets) {
63-
return <div className="w3a--w-full w3a--h-12 w3a--animate-pulse w3a--rounded-full w3a--bg-app-gray-200 dark:w3a--bg-app-gray-700" />;
63+
return <div className="w3a--h-12 w3a--w-full w3a--animate-pulse w3a--rounded-full w3a--bg-app-gray-200 dark:w3a--bg-app-gray-700" />;
6464
}
6565

6666
return (
6767
<button
6868
type="button"
69-
className="w3a--flex w3a--items-center w3a--justify-start w3a--gap-x-2 w3a--p-3 w3a--rounded-2xl w3a--bg-app-gray-50 dark:w3a--bg-app-gray-800 hover:w3a--bg-app-gray-200 dark:hover:w3a--bg-app-gray-600"
69+
className="w3a--flex w3a--items-center w3a--justify-start w3a--gap-x-2 w3a--rounded-2xl w3a--bg-app-gray-50 w3a--p-3 hover:w3a--bg-app-gray-200 dark:w3a--bg-app-gray-800 dark:hover:w3a--bg-app-gray-600"
7070
onClick={onMoreWalletsClick}
7171
>
7272
<img src={getIcons(isDark ? "view-dark" : "view-light")} alt="view" height="24" width="24" />
7373
<p className="w3a--text-base w3a--font-normal w3a--text-app-gray-700 dark:w3a--text-app-white">More Wallets</p>
7474
<span
75-
className="w3a--inline-flex w3a--items-center w3a--rounded-full w3a--px-2 w3a--py-1 w3a--text-xs w3a--font-medium w3a--bg-app-primary-100 w3a--text-app-primary-800
76-
dark:w3a--bg-transparent dark:w3a--text-app-primary-400 dark:w3a--border dark:w3a--border-app-primary-400"
75+
className="w3a--inline-flex w3a--items-center w3a--rounded-full w3a--bg-app-primary-100 w3a--px-2 w3a--py-1 w3a--text-xs w3a--font-medium w3a--text-app-primary-800
76+
dark:w3a--border dark:w3a--border-app-primary-400 dark:w3a--bg-transparent dark:w3a--text-app-primary-400"
7777
>
7878
{totalExternalWallets - initialWalletCount}
7979
</span>

‎packages/modal/src/ui/components/ConnectWallet/ConnectWalletQrCode/ConnectWalletQrCode.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@ function ConnectWalletQrCode(props: ConnectWalletQrCodeProps) {
2626
return (
2727
<div className="w3a--contents">
2828
{walletConnectUri ? (
29-
<div className="w3a--flex w3a--flex-col w3a--gap-y-4 w3a--items-center w3a--justify-center w3a--border w3a--border-app-gray-200 dark:w3a--border-app-gray-700 w3a--rounded-2xl w3a--p-4">
30-
<div className="w3a--relative w3a--rounded-2xl w3a--h-[300px] w3a--w-[300px] w3a--flex w3a--items-center w3a--justify-center">
29+
<div className="w3a--flex w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-4 w3a--rounded-2xl w3a--border w3a--border-app-gray-200 w3a--p-4 dark:w3a--border-app-gray-700">
30+
<div className="w3a--relative w3a--flex w3a--size-[300px] w3a--items-center w3a--justify-center w3a--rounded-2xl">
3131
<QRCode
3232
size={isDesktop ? 300 : 260}
3333
eyeRadius={5}
@@ -42,7 +42,7 @@ function ConnectWalletQrCode(props: ConnectWalletQrCodeProps) {
4242
bgColor={isDark ? modalColor : whiteColor}
4343
fgColor={isDark ? whiteColor : blackColor}
4444
/>
45-
<div className="w3a--absolute w3a--top-[43%] w3a--left-[43%] w3a--transform -translate-y-1/2 w3a--w-10 w3a--h-10 w3a--bg-app-white w3a--rounded-full w3a--flex w3a--items-center w3a--justify-center">
45+
<div className="w3a--absolute w3a--left-[43%] w3a--top-[43%] w3a--flex w3a--size-10 w3a--translate-y-1/2 w3a--transform w3a--items-center w3a--justify-center w3a--rounded-full w3a--bg-app-white">
4646
<Image
4747
imageId={`login-${selectedButton.name}`}
4848
hoverImageId={`login-${selectedButton.name}`}
@@ -54,12 +54,12 @@ function ConnectWalletQrCode(props: ConnectWalletQrCodeProps) {
5454
/>
5555
</div>
5656
</div>
57-
<p className="w3a--text-center w3a--text-sm w3a--text-app-gray-500 dark:w3a--text-app-gray-300 w3a--font-normal">
57+
<p className="w3a--text-center w3a--text-sm w3a--font-normal w3a--text-app-gray-500 dark:w3a--text-app-gray-300">
5858
{t("modal.external.walletconnect-copy")}
5959
</p>
6060
</div>
6161
) : (
62-
<div className="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">
62+
<div className="w3a--mx-auto w3a--flex w3a--size-[300px] w3a--animate-pulse w3a--items-center w3a--justify-center w3a--rounded-lg w3a--bg-app-gray-200 w3a--p-2 dark:w3a--bg-app-gray-700">
6363
<Image
6464
imageId={`login-${selectedButton.name}`}
6565
hoverImageId={`login-${selectedButton.name}`}
@@ -73,15 +73,15 @@ function ConnectWalletQrCode(props: ConnectWalletQrCodeProps) {
7373
)}
7474

7575
<div
76-
className="w3a--flex w3a--items-center w3a--justify-between w3a--w-full w3a--text-app-gray-900 w3a--bg-app-gray-50
77-
dark:w3a--bg-app-gray-800 dark:w3a--text-app-white w3a--rounded-2xl w3a--px-4 w3a--py-2"
76+
className="w3a--flex w3a--w-full w3a--items-center w3a--justify-between w3a--rounded-2xl w3a--bg-app-gray-50
77+
w3a--px-4 w3a--py-2 w3a--text-app-gray-900 dark:w3a--bg-app-gray-800 dark:w3a--text-app-white"
7878
>
7979
<p className="w3a--text-sm w3a--text-app-gray-900 dark:w3a--text-app-white">
8080
{t("modal.external.dont-have")} <span>{selectedButton?.displayName}</span>?
8181
</p>
8282
<button
8383
type="button"
84-
className="w3a--appearance-none w3a--border w3a--border-app-gray-400 w3a--text-sm w3a--font-medium w3a--text-app-gray-400 hover:w3a--bg-app-white dark:hover:w3a--bg-app-gray-700 dark:w3a--text-app-gray-300 dark:w3a--border-app-gray-300 w3a--rounded-full w3a--px-3 w3a--py-2 hover:w3a--shadow-2xl"
84+
className="w3a--appearance-none w3a--rounded-full w3a--border w3a--border-app-gray-400 w3a--px-3 w3a--py-2 w3a--text-sm w3a--font-medium w3a--text-app-gray-400 hover:w3a--bg-app-white hover:w3a--shadow-2xl dark:w3a--border-app-gray-300 dark:w3a--text-app-gray-300 dark:hover:w3a--bg-app-gray-700"
8585
onClick={() => {
8686
setBodyState({
8787
...bodyState,

0 commit comments

Comments
 (0)