Skip to content

Commit 95fba50

Browse files
smgvsmgv
committed
feat: added connect sign ui bottom sheet and created circular loader
1 parent 2334814 commit 95fba50

File tree

8 files changed

+236
-41
lines changed

8 files changed

+236
-41
lines changed

‎demo/vue-app-new/package-lock.json‎

Lines changed: 46 additions & 19 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { BottomSheetProps } from "./BottomSheet.type";
44
* BottomSheet component
55
* @returns BottomSheet component
66
*/
7-
function BottomSheet({ isShown, onClose, children, uiConfig }: BottomSheetProps) {
7+
function BottomSheet({ isShown, onClose, children, uiConfig, sheetClassName, showCloseButton = true }: BottomSheetProps) {
88
const { borderRadiusType = "large" } = uiConfig;
99
return (
1010
<>
@@ -30,27 +30,30 @@ function BottomSheet({ isShown, onClose, children, uiConfig }: BottomSheetProps)
3030
"w3a--rounded-[30px]": borderRadiusType === "large",
3131
"w3a--rounded-2xl": borderRadiusType === "medium",
3232
"w3a--rounded-none": borderRadiusType === "small",
33-
}
33+
},
34+
sheetClassName
3435
)}
3536
>
36-
<div className="w3a--absolute w3a--right-4 w3a--top-[16px] w3a--z-10 w3a--cursor-pointer">
37-
<svg
38-
width="13"
39-
height="13"
40-
viewBox="0 0 13 13"
41-
fill="none"
42-
xmlns="http://www.w3.org/2000/svg"
43-
onClick={onClose}
44-
className="w3a--text-app-gray-500 hover:w3a--text-app-gray-900 dark:w3a--text-app-gray-200 dark:hover:w3a--text-app-white"
45-
>
46-
<path
47-
fillRule="evenodd"
48-
clipRule="evenodd"
49-
d="M0.292787 1.29299C0.480314 1.10552 0.734622 1.0002 0.999786 1.0002C1.26495 1.0002 1.51926 1.10552 1.70679 1.29299L5.99979 5.58599L10.2928 1.29299C10.385 1.19748 10.4954 1.1213 10.6174 1.06889C10.7394 1.01648 10.8706 0.988893 11.0034 0.987739C11.1362 0.986585 11.2678 1.01189 11.3907 1.06217C11.5136 1.11245 11.6253 1.1867 11.7192 1.28059C11.8131 1.37449 11.8873 1.48614 11.9376 1.60904C11.9879 1.73193 12.0132 1.86361 12.012 1.99639C12.0109 2.12917 11.9833 2.26039 11.9309 2.38239C11.8785 2.5044 11.8023 2.61474 11.7068 2.70699L7.41379 6.99999L11.7068 11.293C11.8889 11.4816 11.9897 11.7342 11.9875 11.9964C11.9852 12.2586 11.88 12.5094 11.6946 12.6948C11.5092 12.8802 11.2584 12.9854 10.9962 12.9877C10.734 12.9899 10.4814 12.8891 10.2928 12.707L5.99979 8.41399L1.70679 12.707C1.51818 12.8891 1.26558 12.9899 1.00339 12.9877C0.741188 12.9854 0.490376 12.8802 0.304968 12.6948C0.11956 12.5094 0.0143906 12.2586 0.0121121 11.9964C0.00983372 11.7342 0.110629 11.4816 0.292787 11.293L4.58579 6.99999L0.292787 2.70699C0.105316 2.51946 0 2.26515 0 1.99999C0 1.73483 0.105316 1.48052 0.292787 1.29299V1.29299Z"
50-
fill="currentColor"
51-
/>
52-
</svg>
53-
</div>
37+
{showCloseButton && (
38+
<div className="w3a--absolute w3a--right-4 w3a--top-[16px] w3a--z-10 w3a--cursor-pointer">
39+
<svg
40+
width="13"
41+
height="13"
42+
viewBox="0 0 13 13"
43+
fill="none"
44+
xmlns="http://www.w3.org/2000/svg"
45+
onClick={onClose}
46+
className="w3a--text-app-gray-500 hover:w3a--text-app-gray-900 dark:w3a--text-app-gray-200 dark:hover:w3a--text-app-white"
47+
>
48+
<path
49+
fillRule="evenodd"
50+
clipRule="evenodd"
51+
d="M0.292787 1.29299C0.480314 1.10552 0.734622 1.0002 0.999786 1.0002C1.26495 1.0002 1.51926 1.10552 1.70679 1.29299L5.99979 5.58599L10.2928 1.29299C10.385 1.19748 10.4954 1.1213 10.6174 1.06889C10.7394 1.01648 10.8706 0.988893 11.0034 0.987739C11.1362 0.986585 11.2678 1.01189 11.3907 1.06217C11.5136 1.11245 11.6253 1.1867 11.7192 1.28059C11.8131 1.37449 11.8873 1.48614 11.9376 1.60904C11.9879 1.73193 12.0132 1.86361 12.012 1.99639C12.0109 2.12917 11.9833 2.26039 11.9309 2.38239C11.8785 2.5044 11.8023 2.61474 11.7068 2.70699L7.41379 6.99999L11.7068 11.293C11.8889 11.4816 11.9897 11.7342 11.9875 11.9964C11.9852 12.2586 11.88 12.5094 11.6946 12.6948C11.5092 12.8802 11.2584 12.9854 10.9962 12.9877C10.734 12.9899 10.4814 12.8891 10.2928 12.707L5.99979 8.41399L1.70679 12.707C1.51818 12.8891 1.26558 12.9899 1.00339 12.9877C0.741188 12.9854 0.490376 12.8802 0.304968 12.6948C0.11956 12.5094 0.0143906 12.2586 0.0121121 11.9964C0.00983372 11.7342 0.110629 11.4816 0.292787 11.293L4.58579 6.99999L0.292787 2.70699C0.105316 2.51946 0 2.26515 0 1.99999C0 1.73483 0.105316 1.48052 0.292787 1.29299V1.29299Z"
52+
fill="currentColor"
53+
/>
54+
</svg>
55+
</div>
56+
)}
5457
{children}
5558
</div>
5659
</>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,6 @@ export interface BottomSheetProps {
55
uiConfig: UIConfig;
66
onClose: () => void;
77
children: React.ReactNode;
8+
sheetClassName?: string;
9+
showCloseButton?: boolean;
810
}

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

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import { cn } from "../../utils";
2+
import type { CircularLoaderProps } from "./CircularLoader.type";
3+
4+
function toSize(value?: number | string, fallback = 160): number | string {
5+
return value ?? fallback;
6+
}
7+
8+
const CircularLoader = (props: CircularLoaderProps) => {
9+
const {
10+
width,
11+
height,
12+
thickness = 12,
13+
className = "",
14+
children,
15+
showChildren = true,
16+
trackColor = "rgba(226, 232, 240, 1)", // Tailwind slate-200 equivalent
17+
gradient,
18+
arcSizeDeg = 36,
19+
arcColors,
20+
} = props;
21+
22+
const w = toSize(width, 160);
23+
const h = toSize(height, 160);
24+
const ringMask = `radial-gradient(farthest-side, transparent calc(100% - ${thickness}px), #000 calc(100% - ${thickness}px))`;
25+
26+
function hexToRgba(hex: string, alpha: number) {
27+
const normalized = hex.replace("#", "");
28+
const full =
29+
normalized.length === 3
30+
? normalized
31+
.split("")
32+
.map((c) => c + c)
33+
.join("")
34+
: normalized;
35+
const r = parseInt(full.substring(0, 2), 16);
36+
const g = parseInt(full.substring(2, 4), 16);
37+
const b = parseInt(full.substring(4, 6), 16);
38+
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
39+
}
40+
41+
function withAlpha(color: string, alpha: number) {
42+
if (!color) return color;
43+
const c = color.trim().toLowerCase();
44+
if (c.startsWith("#")) return hexToRgba(c, alpha);
45+
if (c.startsWith("rgba(")) return color;
46+
if (c.startsWith("rgb(")) {
47+
const nums = c.slice(4, -1);
48+
return `rgba(${nums}, ${alpha})`;
49+
}
50+
// Fallback: return the same color (alpha may be ignored by browser)
51+
return color;
52+
}
53+
54+
const arcColorGradient =
55+
gradient ||
56+
(arcColors
57+
? `radial-gradient(210.91% 85.29% at 14.56% 18.67%, ${withAlpha(arcColors[0], 0)} 9.5%, ${arcColors[1]} 41.82%, ${arcColors[1]} 64.83%, ${withAlpha(
58+
arcColors[0],
59+
0.44
60+
)} 100%)`
61+
: "radial-gradient(210.91% 85.29% at 14.56% 18.67%, rgba(255, 98, 58, 0.00) 9.5%, #FF623A 41.82%, #FF623A 64.83%, rgba(255, 98, 58, 0.44) 100%)");
62+
const wedgeMask = `conic-gradient(#000 0deg ${arcSizeDeg}deg, transparent ${arcSizeDeg}deg 360deg)`;
63+
64+
return (
65+
<div className={cn("w3a--relative w3a--inline-flex w3a--items-center w3a--justify-center", className)} style={{ width: w, height: h }}>
66+
<div
67+
className="w3a--absolute w3a--inset-0 w3a--rounded-full"
68+
style={{
69+
background: trackColor,
70+
WebkitMaskImage: ringMask,
71+
maskImage: ringMask,
72+
WebkitMaskRepeat: "no-repeat",
73+
maskRepeat: "no-repeat",
74+
}}
75+
/>
76+
77+
<div
78+
className="w3a--absolute w3a--inset-0 w3a--animate-spin"
79+
style={{
80+
WebkitMaskImage: wedgeMask,
81+
maskImage: wedgeMask,
82+
WebkitMaskRepeat: "no-repeat",
83+
maskRepeat: "no-repeat",
84+
}}
85+
>
86+
<div
87+
className="w3a--absolute w3a--inset-0 w3a--rounded-full"
88+
style={{
89+
background: arcColorGradient,
90+
WebkitMaskImage: ringMask,
91+
maskImage: ringMask,
92+
WebkitMaskRepeat: "no-repeat",
93+
maskRepeat: "no-repeat",
94+
}}
95+
/>
96+
</div>
97+
98+
{showChildren && children ? <div className="w3a--relative">{children}</div> : null}
99+
</div>
100+
);
101+
};
102+
103+
export default CircularLoader;

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import type { ReactNode } from "react";
2+
3+
export interface CircularLoaderProps {
4+
width?: number | string;
5+
height?: number | string;
6+
thickness?: number;
7+
showChildren?: boolean;
8+
children?: ReactNode;
9+
className?: string;
10+
trackColor?: string;
11+
/** Size of the colored arc in degrees (0-360). Default: 40 */
12+
arcSizeDeg?: number;
13+
/** Two colors for the orange arc gradient [start, end]. */
14+
arcColors?: [string, string];
15+
/**
16+
* CSS color stops for conic-gradient. Example:
17+
* "conic-gradient(#f97316, #fdba74 320deg, transparent 320deg)"
18+
*/
19+
gradient?: string;
20+
}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { default } from "./CircularLoader";
2+
export type { CircularLoaderProps } from "./CircularLoader.type";

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ const ConnectWalletChainNamespaceSelect = (props: ConnectWalletChainNamespaceSel
4040
</div>
4141

4242
{/* Description */}
43-
<p className="w3a--my-6 w3a--text-center w3a--text-sm w3a--text-app-gray-500">
43+
<p className="w3a--my-6 w3a--text-center w3a--text-sm w3a--text-app-gray-500 dark:w3a--text-app-gray-400">
4444
{t("modal.external.select-chain-description", { wallet: wallet.displayName })}
4545
</p>
4646

@@ -55,7 +55,9 @@ const ConnectWalletChainNamespaceSelect = (props: ConnectWalletChainNamespaceSel
5555
>
5656
<div className="w3a--flex w3a--items-center">
5757
<Image imageId={imageId} hoverImageId={imageId} fallbackImageId="wallet" height="24" width="24" isButton extension="svg" />
58-
<p className="w3a--ml-2 w3a--text-left w3a--text-sm first-letter:w3a--capitalize">{displayName}</p>
58+
<p className="w3a--ml-2 w3a--text-left w3a--text-sm w3a--text-app-gray-900 first-letter:w3a--capitalize dark:w3a--text-app-gray-200">
59+
{displayName}
60+
</p>
5961
</div>
6062
<img
6163
id="chain-namespace-arrow"

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { ExternalButton, mobileOs, MODAL_STATUS, TOAST_TYPE, ToastType } from ".
99
import i18n from "../../localeImport";
1010
import { cn, getBrowserExtensionUrl, getBrowserName, getIcons, getMobileInstallLink, getOsName } from "../../utils";
1111
import BottomSheet from "../BottomSheet";
12+
import CircularLoader from "../CircularLoader";
1213
import ConnectWallet from "../ConnectWallet";
1314
import ConnectWalletChainNamespaceSelect from "../ConnectWallet/ConnectWalletChainNamespaceSelect";
1415
import ConnectWalletHeader from "../ConnectWallet/ConnectWalletHeader";
@@ -563,6 +564,41 @@ function Root(props: RootProps) {
563564
</ul>
564565
</BottomSheet>
565566
)}
567+
568+
{
569+
<BottomSheet
570+
uiConfig={uiConfig}
571+
isShown={true}
572+
onClose={() => setBodyState({ ...bodyState, installLinks: { show: false, wallet: null } })}
573+
sheetClassName="!w3a--px-8 !w3a--py-4"
574+
showCloseButton={false}
575+
>
576+
<div className="w3a--flex w3a--size-full w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-6">
577+
<p className="w3a--p-2 w3a--text-center w3a--text-base w3a--font-semibold w3a--text-app-gray-900 dark:w3a--text-app-white">
578+
Verify on MetaMask
579+
</p>
580+
<div className="w3a--flex w3a--justify-center">
581+
<CircularLoader width={95} height={95} thickness={6} arcSizeDeg={100}>
582+
<Image
583+
imageId={`login-metamask`}
584+
hoverImageId={`login-metamask`}
585+
fallbackImageId="wallet"
586+
height="45"
587+
width="45"
588+
isButton
589+
extension="svg"
590+
/>
591+
</CircularLoader>
592+
</div>
593+
<p className="w3a--text-center w3a--text-sm w3a--text-app-gray-500 dark:w3a--text-app-gray-400">
594+
We’ve sent a request to your wallet. Verify on your wallet to confirm that you own this wallet.
595+
</p>
596+
<button className="w3a--w-full w3a--rounded-xl w3a--bg-app-gray-100 w3a--p-2 w3a--py-3 w3a--text-sm w3a--text-app-gray-900 dark:w3a--bg-app-gray-800 dark:w3a--text-app-white">
597+
Click here to verify
598+
</button>
599+
</div>
600+
</BottomSheet>
601+
}
566602
</div>
567603
</div>
568604
<Toast />

0 commit comments

Comments
 (0)