Skip to content

Commit f086b0a

Browse files
smgvsmgv
committed
feddback changes
1 parent c246ab3 commit f086b0a

File tree

5 files changed

+56
-21
lines changed

5 files changed

+56
-21
lines changed

‎demo/vue-app-new/src/MainView.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -259,6 +259,6 @@ const configs = computed(() => {
259259
<AppSettings />
260260
<AppDashboard />
261261
</main>
262-
<div id="w3a-parent-test-container" class="flex flex-col items-center justify-center"></div>
262+
<div id="w3a-parent-test-container" class="flex flex-col items-center justify-center mt-10"></div>
263263
</Web3AuthProvider>
264264
</template>

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

Lines changed: 26 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ const ConnectWallet = (props: ConnectWalletProps) => {
4343
const [isLoading, setIsLoading] = createSignal<boolean>(true);
4444
const [selectedChain, setSelectedChain] = createSignal<"all" | "ethereum" | "polygon" | "solana">("all");
4545
const [isInputFocused, setIsInputFocused] = createSignal(false);
46+
const [initialWalletCount, setInitialWalletCount] = createSignal<number>(0);
4647

4748
const handleBack = () => {
4849
log.debug("handleBack", selectedWallet(), currentPage());
@@ -111,9 +112,12 @@ const ConnectWallet = (props: ConnectWalletProps) => {
111112
createEffect(() => {
112113
if (walletDiscoverySupported()) {
113114
setExternalButtons(sortedButtons());
115+
log.debug("sortedButtons", sortedButtons().length);
116+
setInitialWalletCount(sortedButtons().length);
114117
setTotalExternalWallets(props.totalExternalWallets);
115118
} else {
116119
setExternalButtons(visibleButtons());
120+
log.debug("visibleButtons", visibleButtons().length);
117121
setTotalExternalWallets(visibleButtons().length);
118122
}
119123
setTimeout(() => {
@@ -139,7 +143,15 @@ const ConnectWallet = (props: ConnectWalletProps) => {
139143
}
140144
};
141145

142-
// const headerLogo = createMemo(() => ([DEFAULT_LOGO_DARK, DEFAULT_LOGO_LIGHT].includes(props.appLogo) ? "" : props.appLogo));
146+
const handleMoreWallets = () => {
147+
// setIsLoading(true);
148+
log.debug("handleMoreWallets", initialWalletCount(), props.allExternalButtons, props.customAdapterButtons);
149+
setInitialWalletCount((prev) => prev + 10);
150+
const allButtons = [...props.allExternalButtons, ...props.customAdapterButtons];
151+
const buttons = allButtons.slice(initialWalletCount(), initialWalletCount() + 10);
152+
log.debug("buttons", buttons);
153+
setExternalButtons((prev) => [...prev, ...buttons]);
154+
};
143155

144156
return (
145157
<div class="w3a--flex w3a--flex-col w3a--gap-y-4 w3a--flex-1 w3a--relative">
@@ -289,19 +301,27 @@ const ConnectWallet = (props: ConnectWalletProps) => {
289301
</Show>
290302
</ul>
291303
<Show
292-
when={totalExternalWallets() > 15 && !isLoading()}
293-
fallback={<div class="w3a--w-full w3a--h-12 w3a--animate-pulse w3a--rounded-full w3a--bg-app-gray-200 dark:w3a--bg-app-gray-700" />}
304+
when={totalExternalWallets() > 15 && !isLoading() && initialWalletCount() < totalExternalWallets()}
305+
fallback={
306+
<Show when={initialWalletCount() < totalExternalWallets()}>
307+
<div class="w3a--w-full w3a--h-12 w3a--animate-pulse w3a--rounded-full w3a--bg-app-gray-200 dark:w3a--bg-app-gray-700" />
308+
</Show>
309+
}
294310
>
295-
<div class="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">
311+
<button
312+
type="button"
313+
class="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"
314+
onClick={handleMoreWallets}
315+
>
296316
<img src={getIcons(props.isDark ? "view-dark" : "view-light")} alt="view" height="24" width="24" />
297317
<p class="w3a--text-base w3a--font-normal w3a--text-app-gray-700 dark:w3a--text-app-white">More Wallets</p>
298318
<span
299319
class="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
300320
dark:w3a--bg-transparent dark:w3a--text-app-primary-400 dark:w3a--border dark:w3a--border-app-primary-400"
301321
>
302-
{props.totalExternalWallets}
322+
{props.totalExternalWallets - initialWalletCount()}
303323
</span>
304-
</div>
324+
</button>
305325
</Show>
306326
</div>
307327
}

‎packages/modal-ui/src/components/Body/Login.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -313,11 +313,13 @@ const Login = (props: LoginProps) => {
313313
}}
314314
type="text"
315315
autofocus
316-
class="w3a--appearance-none w3a--outline-none active:w3a--outline-none focus:w3a--outline-none w3a--bg-transparent placeholder:w3a--text-app-gray-400 dark:placeholder:w3a--text-app-gray-500 w3a--text-app-gray-900 dark:w3a--text-app-white"
316+
class="w-full w3a--appearance-none w3a--outline-none active:w3a--outline-none focus:w3a--outline-none w3a--bg-transparent placeholder:w3a--text-xs placeholder:w3a--text-app-gray-400 dark:placeholder:w3a--text-app-gray-500 w3a--text-app-gray-900 dark:w3a--text-app-white"
317317
/>
318-
<button class="w3a--appearance-none w3a--icon-animation" onClick={handleFormSubmit}>
319-
<img src={getIcons(props.isDark ? "chevron-right-dark" : "chevron-right-light")} alt="arrow" />
320-
</button>
318+
<Show when={fieldValue() && isValidInput() && isInputFocused()}>
319+
<button class="w3a--appearance-none w3a--icon-animation" onClick={handleFormSubmit}>
320+
<img src={getIcons(props.isDark ? "chevron-right-dark" : "chevron-right-light")} alt="arrow" />
321+
</button>
322+
</Show>
321323
</div>
322324
<Show when={!isValidInput() && isPasswordlessCtaClicked()}>
323325
<p class="w3a--text-xs w3a--font-normal w3a--text-app-red-500 dark:w3a--text-app-red-400 w3a--text-start -w3a--mt-2 w3a--w-full w3a--pl-6">

‎packages/modal-ui/src/components/Embed/Embed.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,10 @@ const Embed: Component<EmbedProps> = (props: EmbedProps) => {
2626
return (
2727
<div
2828
class={cn(
29-
"w3a--bg-app-light-surface1 dark:w3a--bg-app-dark-surface-main w3a--rounded-3xl w3a--w-[96%] sm:w3a--w-[393px] w3a--h-[642px] w3a--flex w3a--flex-col w3a--duration-500",
29+
"w3a--bg-app-light-surface1 dark:w3a--bg-app-dark-surface-main w3a--rounded-3xl w3a--w-[96%] sm:w3a--w-[393px] w3a--flex w3a--flex-col w3a--duration-500",
3030
{
31-
"w3a--opacity-100 w3a--delay-100": isOpen(),
32-
"w3a--opacity-0": !isOpen(),
31+
"w3a--opacity-100 w3a--delay-100 w3a--max-h-[800px]": isOpen(),
32+
"w3a--opacity-0 w3a--max-h-0": !isOpen(),
3333
"w3a--p-4": mergedProps.padding,
3434
"w3a--shadow-xl sm:w3a--shadow-lg": mergedProps.shadow,
3535
"w3a--border w3a--border-app-gray-100 dark:w3a--border-app-gray-800": mergedProps.border,

‎packages/modal-ui/src/index.css‎

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,6 @@
33
@tailwind components;
44
@tailwind utilities;
55

6-
* {
7-
scrollbar-color: #E5E7EB;
8-
}
9-
106
@layer base {
117
body {
128
padding: 0px !important;
@@ -19,6 +15,23 @@
1915
position: relative;
2016
}
2117

18+
.w3a-parent-container > * {
19+
scrollbar-color: #E5E7EB !important;
20+
}
21+
22+
.w3a-modal-container {
23+
overflow: hidden;
24+
transition-property: max-height;
25+
transition-duration: .15s;
26+
transition-timing-function: ease-out;
27+
position: relative;
28+
}
29+
30+
.w3a-modal-container-height {
31+
max-height: 800px;
32+
height: 100vh;
33+
}
34+
2235
.w3a-external-wallet-btn #external-wallet-count {
2336
display: block;
2437
}
@@ -131,15 +144,15 @@
131144

132145
/* Track */
133146
::-webkit-scrollbar-track {
134-
background: #E5E7EB;
147+
background: #E5E7EB !important;
135148
}
136149

137150
/* Handle */
138151
::-webkit-scrollbar-thumb {
139-
background: #E5E7EB;
152+
background: #E5E7EB !important;
140153
}
141154

142155
/* Handle on hover */
143156
::-webkit-scrollbar-thumb:hover {
144-
background: #E5E7EB;
157+
background: #E5E7EB !important;
145158
}

0 commit comments

Comments
 (0)