From 21aed772e7714e47a6778449df675517e15ffe30 Mon Sep 17 00:00:00 2001 From: Iulia Cimpeanu Date: Tue, 21 Oct 2025 17:16:14 +0300 Subject: [PATCH 01/11] Refactored unlock panel footer --- .../unlock-panel-footer.scss | 41 +++--------- .../unlock-panel-footer.tsx | 65 +++++++++---------- src/global/tailwind.css | 1 + 3 files changed, 40 insertions(+), 67 deletions(-) diff --git a/src/components/functional/unlock-panel/components/unlock-panel-footer/unlock-panel-footer.scss b/src/components/functional/unlock-panel/components/unlock-panel-footer/unlock-panel-footer.scss index d2fee893..e9b55248 100644 --- a/src/components/functional/unlock-panel/components/unlock-panel-footer/unlock-panel-footer.scss +++ b/src/components/functional/unlock-panel/components/unlock-panel-footer/unlock-panel-footer.scss @@ -1,60 +1,37 @@ .unlock-panel-footer { @apply mvx:mt-auto mvx:flex mvx:cursor-pointer mvx:relative mvx:p-6 mvx:z-1 mvx:rounded-2xl mvx:overflow-hidden; - border: 1px solid var(--mvx-border-color-primary); - background: var(--mvx-bg-accent-color); - box-shadow: 0px -8px 12px 12px var(--mvx-bg-color-primary); + @apply mvx:border mvx:border-outline mvx:bg-emphasize mvx:shadow-[0px_-8px_12px_12px_surface]; &:hover .unlock-panel-footer-wrapper { @apply mvx:opacity-75; } .unlock-panel-footer-image { - @apply mvx:pointer-events-none mvx:-mt-8 mvx:mr-12 mvx:-mb-8 mvx:-ml-20 mvx:hidden mvx:max-h-48; + @apply mvx:pointer-events-none mvx:-mt-8 mvx:mr-12 mvx:-mb-8 mvx:-ml-20 mvx:hidden mvx:max-h-48 mvx:xs:flex; - @media (min-width: 480px) { - @apply mvx:flex; - } } .unlock-panel-footer-wrapper { - @apply mvx:flex mvx:flex-col mvx:transition-all mvx:duration-200 mvx:gap-2 mvx:flex-1 mvx:ease-in-out; - - @media (min-width: 480px) { - @apply mvx:gap-4; - } + @apply mvx:flex mvx:flex-col mvx:transition-all mvx:duration-200 mvx:gap-2 mvx:flex-1 mvx:ease-in-out mvx:xs:gap-4; .unlock-panel-footer-title { - @apply mvx:font-medium mvx:leading-none mvx:text-base; - color: var(--mvx-text-color-primary); - - @media (min-width: 480px) { - @apply mvx:pt-4 mvx:text-xl; - } + @apply mvx:font-medium mvx:leading-none mvx:text-base mvx:text-primary mvx:xs:pt-4 mvx:xs:text-xl; } .unlock-panel-footer-subtitle { - @apply mvx:text-base mvx:leading-tight mvx:opacity-40; - color: var(--mvx-text-color-primary); + @apply mvx:text-base mvx:leading-tight mvx:opacity-40 mvx:text-primary; &.desktop { - @apply mvx:hidden; - - @media (min-width: 480px) { - @apply mvx:flex; - } + @apply mvx:hidden mvx:xs:flex; } &.mobile { - @apply mvx:text-xs; - - @media (min-width: 480px) { - @apply mvx:hidden; - } + @apply mvx:text-xs mvx:xs:hidden; } .unlock-panel-footer-subtitle-link { - color: var(--mvx-text-accent-color); + @apply mvx:text-accent; } } } -} +} \ No newline at end of file diff --git a/src/components/functional/unlock-panel/components/unlock-panel-footer/unlock-panel-footer.tsx b/src/components/functional/unlock-panel/components/unlock-panel-footer/unlock-panel-footer.tsx index 566f9a74..4af53acf 100644 --- a/src/components/functional/unlock-panel/components/unlock-panel-footer/unlock-panel-footer.tsx +++ b/src/components/functional/unlock-panel/components/unlock-panel-footer/unlock-panel-footer.tsx @@ -1,4 +1,4 @@ -import { Component, h, Prop } from '@stencil/core'; +import { h } from '@stencil/core'; import { Icon } from 'common/Icon'; import unlockPanelWalletImg from '../../../../../assets/unlock-panel-wallet.webp'; @@ -8,50 +8,45 @@ const styles = { unlockButton: 'unlock-panel-footer-icon mvx:text-primary mvx:w-4 mvx:h-auto mvx:hidden mvx:xs:flex mvx:ml-auto mvx:mt-auto', } satisfies Record; -@Component({ - tag: 'mvx-unlock-panel-footer', - styleUrl: 'unlock-panel-footer.scss', - shadow: true, -}) -export class UnlockPanel { - @Prop() walletAddress: string; +export function UnlockPanelFooter({ walletAddress }: { walletAddress: string }) { - handleWalletClick = (event: MouseEvent) => { + + const handleWalletClick = (event: MouseEvent) => { event.preventDefault(); event.stopPropagation(); - window.open(this.walletAddress, '_blank'); + window.open(walletAddress, '_blank'); }; - render() { - const processedWalletAddress = String(this.walletAddress).replace('https://', ''); - - return ( -
- -
-
Don't have a wallet?
+ const processedWalletAddress = String(walletAddress).replace('https://', ''); -
- Take full control of
your assets. -
+ return ( +
+ -
- See which one to get on +
+
Don't have a wallet?
- - {processedWalletAddress} - -
+
+ Take full control of
your assets. +
- +
+ See which one to get on + + + {processedWalletAddress} +
+ +
- ); - } +
+ ); + } diff --git a/src/global/tailwind.css b/src/global/tailwind.css index 927d9c18..fd815efa 100644 --- a/src/global/tailwind.css +++ b/src/global/tailwind.css @@ -31,6 +31,7 @@ --color-gray-200: var(--mvx-gray-200); --color-thumb: var(--mvx-scrollbar-thumb); --color-outline-variant: var(--mvx-border-color-secondary); + --color-emphasize: var(--mvx-bg-accent-color); } @layer utilities { From 847f9a752955144389aee07831c0cd76772d72e8 Mon Sep 17 00:00:00 2001 From: Iulia Cimpeanu Date: Mon, 3 Nov 2025 14:16:38 +0200 Subject: [PATCH 02/11] Updated unlock panel footer --- src/components.d.ts | 15 -------- .../UnlockPanelFooter.tsx} | 25 +++++-------- .../components/UnlockPanelFooter/index.ts | 1 + .../unlockPanelFooter.styles.ts | 12 ++++++ .../unlock-panel/components/index.ts | 1 + .../unlock-panel-footer.scss | 37 ------------------- .../functional/unlock-panel/unlock-panel.tsx | 3 +- 7 files changed, 25 insertions(+), 69 deletions(-) rename src/components/functional/unlock-panel/components/{unlock-panel-footer/unlock-panel-footer.tsx => UnlockPanelFooter/UnlockPanelFooter.tsx} (57%) create mode 100644 src/components/functional/unlock-panel/components/UnlockPanelFooter/index.ts create mode 100644 src/components/functional/unlock-panel/components/UnlockPanelFooter/unlockPanelFooter.styles.ts create mode 100644 src/components/functional/unlock-panel/components/index.ts delete mode 100644 src/components/functional/unlock-panel/components/unlock-panel-footer/unlock-panel-footer.scss diff --git a/src/components.d.ts b/src/components.d.ts index eec3481b..8423b564 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -397,9 +397,6 @@ export namespace Components { "closeWithAnimation": () => Promise; "getEventBus": () => Promise; } - interface MvxUnlockPanelFooter { - "walletAddress": string; - } interface MvxUnlockPanelGroup { "class"?: string; /** @@ -1024,12 +1021,6 @@ declare global { prototype: HTMLMvxUnlockPanelElement; new (): HTMLMvxUnlockPanelElement; }; - interface HTMLMvxUnlockPanelFooterElement extends Components.MvxUnlockPanelFooter, HTMLStencilElement { - } - var HTMLMvxUnlockPanelFooterElement: { - prototype: HTMLMvxUnlockPanelFooterElement; - new (): HTMLMvxUnlockPanelFooterElement; - }; interface HTMLMvxUnlockPanelGroupElementEventMap { "login": IProviderBase; } @@ -1176,7 +1167,6 @@ declare global { "mvx-trim": HTMLMvxTrimElement; "mvx-unlock-button": HTMLMvxUnlockButtonElement; "mvx-unlock-panel": HTMLMvxUnlockPanelElement; - "mvx-unlock-panel-footer": HTMLMvxUnlockPanelFooterElement; "mvx-unlock-panel-group": HTMLMvxUnlockPanelGroupElement; "mvx-unlock-provider-button": HTMLMvxUnlockProviderButtonElement; "mvx-wallet-connect": HTMLMvxWalletConnectElement; @@ -1561,9 +1551,6 @@ declare namespace LocalJSX { } interface MvxUnlockPanel { } - interface MvxUnlockPanelFooter { - "walletAddress"?: string; - } interface MvxUnlockPanelGroup { "class"?: string; "onLogin"?: (event: MvxUnlockPanelGroupCustomEvent) => void; @@ -1680,7 +1667,6 @@ declare namespace LocalJSX { "mvx-trim": MvxTrim; "mvx-unlock-button": MvxUnlockButton; "mvx-unlock-panel": MvxUnlockPanel; - "mvx-unlock-panel-footer": MvxUnlockPanelFooter; "mvx-unlock-panel-group": MvxUnlockPanelGroup; "mvx-unlock-provider-button": MvxUnlockProviderButton; "mvx-wallet-connect": MvxWalletConnect; @@ -1755,7 +1741,6 @@ declare module "@stencil/core" { "mvx-trim": LocalJSX.MvxTrim & JSXBase.HTMLAttributes; "mvx-unlock-button": LocalJSX.MvxUnlockButton & JSXBase.HTMLAttributes; "mvx-unlock-panel": LocalJSX.MvxUnlockPanel & JSXBase.HTMLAttributes; - "mvx-unlock-panel-footer": LocalJSX.MvxUnlockPanelFooter & JSXBase.HTMLAttributes; "mvx-unlock-panel-group": LocalJSX.MvxUnlockPanelGroup & JSXBase.HTMLAttributes; "mvx-unlock-provider-button": LocalJSX.MvxUnlockProviderButton & JSXBase.HTMLAttributes; "mvx-wallet-connect": LocalJSX.MvxWalletConnect & JSXBase.HTMLAttributes; diff --git a/src/components/functional/unlock-panel/components/unlock-panel-footer/unlock-panel-footer.tsx b/src/components/functional/unlock-panel/components/UnlockPanelFooter/UnlockPanelFooter.tsx similarity index 57% rename from src/components/functional/unlock-panel/components/unlock-panel-footer/unlock-panel-footer.tsx rename to src/components/functional/unlock-panel/components/UnlockPanelFooter/UnlockPanelFooter.tsx index 4af53acf..b19cc6cf 100644 --- a/src/components/functional/unlock-panel/components/unlock-panel-footer/unlock-panel-footer.tsx +++ b/src/components/functional/unlock-panel/components/UnlockPanelFooter/UnlockPanelFooter.tsx @@ -1,43 +1,36 @@ import { h } from '@stencil/core'; import { Icon } from 'common/Icon'; +import styles from './unlockPanelFooter.styles' import unlockPanelWalletImg from '../../../../../assets/unlock-panel-wallet.webp'; -// prettier-ignore -const styles = { - unlockButton: 'unlock-panel-footer-icon mvx:text-primary mvx:w-4 mvx:h-auto mvx:hidden mvx:xs:flex mvx:ml-auto mvx:mt-auto', -} satisfies Record; - export function UnlockPanelFooter({ walletAddress }: { walletAddress: string }) { - - const handleWalletClick = (event: MouseEvent) => { event.preventDefault(); event.stopPropagation(); window.open(walletAddress, '_blank'); }; - const processedWalletAddress = String(walletAddress).replace('https://', ''); return ( -
- +
+ -
-
Don't have a wallet?
+
+
Don't have a wallet?
-
+
Take full control of
your assets.
-
+
See which one to get on {processedWalletAddress} @@ -46,7 +39,7 @@ export function UnlockPanelFooter({ walletAddress }: { walletAddress: string })
-
+
); } diff --git a/src/components/functional/unlock-panel/components/UnlockPanelFooter/index.ts b/src/components/functional/unlock-panel/components/UnlockPanelFooter/index.ts new file mode 100644 index 00000000..51d58d9a --- /dev/null +++ b/src/components/functional/unlock-panel/components/UnlockPanelFooter/index.ts @@ -0,0 +1 @@ +export * from './UnlockPanelFooter'; \ No newline at end of file diff --git a/src/components/functional/unlock-panel/components/UnlockPanelFooter/unlockPanelFooter.styles.ts b/src/components/functional/unlock-panel/components/UnlockPanelFooter/unlockPanelFooter.styles.ts new file mode 100644 index 00000000..9fe36958 --- /dev/null +++ b/src/components/functional/unlock-panel/components/UnlockPanelFooter/unlockPanelFooter.styles.ts @@ -0,0 +1,12 @@ +// prettier-ignore +export default { + unlockButton: 'unlock-panel-footer-icon mvx:text-primary mvx:w-4 mvx:h-auto mvx:hidden mvx:xs:flex mvx:ml-auto mvx:mt-auto', + unlockPanelFooter: 'unlock-panel-footer mvx:mt-auto mvx:flex mvx:cursor-pointer mvx:relative mvx:p-6 mvx:z-1 mvx:rounded-2xl mvx:overflow-hidden mvx:border mvx:border-outline mvx:bg-emphasize mvx:shadow-[0px_-8px_12px_12px_surface] group', + unlockPanelFooterImage: 'unlock-panel-footer-image mvx:pointer-events-none mvx:-mt-8 mvx:mr-12 mvx:-mb-8 mvx:-ml-20 mvx:hidden mvx:max-h-48 mvx:xs:flex', + unlockPanelFooterWrapper: 'unlock-panel-footer-wrapper mvx:flex mvx:flex-col mvx:transition-all mvx:duration-200 mvx:gap-2 mvx:flex-1 mvx:ease-in-out mvx:xs:gap-4 group-hover:mvx:opacity-75', + unlockPanelFooterTitle: 'unlock-panel-footer-title mvx:font-medium mvx:leading-none mvx:text-base mvx:text-primary mvx:xs:pt-4 mvx:xs:text-xl', + unlockPanelFooterSubtitle: 'unlock-panel-footer-subtitle mvx:text-base mvx:leading-tight mvx:opacity-40 mvx:text-primary', + unlockPanelFooterSubtitleDesktop: 'unlock-panel-footer-subtitle-desktop mvx:hidden mvx:xs:flex', + unlockPanelFooterSubtitleMobile: 'unlock-panel-footer-subtitle-mobile mvx:text-xs mvx:xs:hidden', + unlockPanelFooterSubtitleLink: 'unlock-panel-footer-subtitle-link mvx:text-accent' +} satisfies Record; \ No newline at end of file diff --git a/src/components/functional/unlock-panel/components/index.ts b/src/components/functional/unlock-panel/components/index.ts new file mode 100644 index 00000000..51d58d9a --- /dev/null +++ b/src/components/functional/unlock-panel/components/index.ts @@ -0,0 +1 @@ +export * from './UnlockPanelFooter'; \ No newline at end of file diff --git a/src/components/functional/unlock-panel/components/unlock-panel-footer/unlock-panel-footer.scss b/src/components/functional/unlock-panel/components/unlock-panel-footer/unlock-panel-footer.scss deleted file mode 100644 index e9b55248..00000000 --- a/src/components/functional/unlock-panel/components/unlock-panel-footer/unlock-panel-footer.scss +++ /dev/null @@ -1,37 +0,0 @@ -.unlock-panel-footer { - @apply mvx:mt-auto mvx:flex mvx:cursor-pointer mvx:relative mvx:p-6 mvx:z-1 mvx:rounded-2xl mvx:overflow-hidden; - @apply mvx:border mvx:border-outline mvx:bg-emphasize mvx:shadow-[0px_-8px_12px_12px_surface]; - - &:hover .unlock-panel-footer-wrapper { - @apply mvx:opacity-75; - } - - .unlock-panel-footer-image { - @apply mvx:pointer-events-none mvx:-mt-8 mvx:mr-12 mvx:-mb-8 mvx:-ml-20 mvx:hidden mvx:max-h-48 mvx:xs:flex; - - } - - .unlock-panel-footer-wrapper { - @apply mvx:flex mvx:flex-col mvx:transition-all mvx:duration-200 mvx:gap-2 mvx:flex-1 mvx:ease-in-out mvx:xs:gap-4; - - .unlock-panel-footer-title { - @apply mvx:font-medium mvx:leading-none mvx:text-base mvx:text-primary mvx:xs:pt-4 mvx:xs:text-xl; - } - - .unlock-panel-footer-subtitle { - @apply mvx:text-base mvx:leading-tight mvx:opacity-40 mvx:text-primary; - - &.desktop { - @apply mvx:hidden mvx:xs:flex; - } - - &.mobile { - @apply mvx:text-xs mvx:xs:hidden; - } - - .unlock-panel-footer-subtitle-link { - @apply mvx:text-accent; - } - } - } -} \ No newline at end of file diff --git a/src/components/functional/unlock-panel/unlock-panel.tsx b/src/components/functional/unlock-panel/unlock-panel.tsx index 689ba13c..d73c770c 100644 --- a/src/components/functional/unlock-panel/unlock-panel.tsx +++ b/src/components/functional/unlock-panel/unlock-panel.tsx @@ -11,6 +11,7 @@ import { UnlockPanelGroupSlotEnum } from './components/unlock-panel-group/unlock import { getIsExtensionAvailable, getIsMetaMaskAvailable } from './helpers'; import type { IUnlockPanelManagerData } from './unlock-panel.types'; import { UnlockPanelEventsEnum } from './unlock-panel.types'; +import { UnlockPanelFooter } from './components'; const unlockPanelClasses: Record = { detectedPanelGroup: 'mvx:hidden mvx:sm:flex', @@ -214,7 +215,7 @@ export class UnlockPanel {
- +
)} From 4034909104e7409a9ec8138f26071b61d21350e5 Mon Sep 17 00:00:00 2001 From: Iulia Cimpeanu Date: Mon, 3 Nov 2025 18:02:43 +0200 Subject: [PATCH 03/11] Refactored unlock-panel-group component --- src/components.d.ts | 39 ------------ .../unlock-panel-group.scss | 25 -------- .../unlock-panel-group/unlock-panel-group.tsx | 62 ++++++++----------- .../unlockPanelGroup.styles.ts | 9 +++ .../functional/unlock-panel/unlock-panel.tsx | 36 +++++------ 5 files changed, 54 insertions(+), 117 deletions(-) delete mode 100644 src/components/functional/unlock-panel/components/unlock-panel-group/unlock-panel-group.scss create mode 100644 src/components/functional/unlock-panel/components/unlock-panel-group/unlockPanelGroup.styles.ts diff --git a/src/components.d.ts b/src/components.d.ts index 8423b564..a21048f7 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -397,13 +397,6 @@ export namespace Components { "closeWithAnimation": () => Promise; "getEventBus": () => Promise; } - interface MvxUnlockPanelGroup { - "class"?: string; - /** - * @default [] - */ - "providers": IProviderBase[]; - } interface MvxUnlockProviderButton { "class"?: string; "provider": IProviderBase; @@ -511,10 +504,6 @@ export interface MvxTransactionToastContentCustomEvent extends CustomEvent detail: T; target: HTMLMvxTransactionToastContentElement; } -export interface MvxUnlockPanelGroupCustomEvent extends CustomEvent { - detail: T; - target: HTMLMvxUnlockPanelGroupElement; -} export interface MvxWalletConnectScanCustomEvent extends CustomEvent { detail: T; target: HTMLMvxWalletConnectScanElement; @@ -1021,23 +1010,6 @@ declare global { prototype: HTMLMvxUnlockPanelElement; new (): HTMLMvxUnlockPanelElement; }; - interface HTMLMvxUnlockPanelGroupElementEventMap { - "login": IProviderBase; - } - interface HTMLMvxUnlockPanelGroupElement extends Components.MvxUnlockPanelGroup, HTMLStencilElement { - addEventListener(type: K, listener: (this: HTMLMvxUnlockPanelGroupElement, ev: MvxUnlockPanelGroupCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; - addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; - addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; - addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; - removeEventListener(type: K, listener: (this: HTMLMvxUnlockPanelGroupElement, ev: MvxUnlockPanelGroupCustomEvent) => any, options?: boolean | EventListenerOptions): void; - removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; - removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; - removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; - } - var HTMLMvxUnlockPanelGroupElement: { - prototype: HTMLMvxUnlockPanelGroupElement; - new (): HTMLMvxUnlockPanelGroupElement; - }; interface HTMLMvxUnlockProviderButtonElement extends Components.MvxUnlockProviderButton, HTMLStencilElement { } var HTMLMvxUnlockProviderButtonElement: { @@ -1167,7 +1139,6 @@ declare global { "mvx-trim": HTMLMvxTrimElement; "mvx-unlock-button": HTMLMvxUnlockButtonElement; "mvx-unlock-panel": HTMLMvxUnlockPanelElement; - "mvx-unlock-panel-group": HTMLMvxUnlockPanelGroupElement; "mvx-unlock-provider-button": HTMLMvxUnlockProviderButtonElement; "mvx-wallet-connect": HTMLMvxWalletConnectElement; "mvx-wallet-connect-app-gallery-icon": HTMLMvxWalletConnectAppGalleryIconElement; @@ -1551,14 +1522,6 @@ declare namespace LocalJSX { } interface MvxUnlockPanel { } - interface MvxUnlockPanelGroup { - "class"?: string; - "onLogin"?: (event: MvxUnlockPanelGroupCustomEvent) => void; - /** - * @default [] - */ - "providers"?: IProviderBase[]; - } interface MvxUnlockProviderButton { "class"?: string; "provider"?: IProviderBase; @@ -1667,7 +1630,6 @@ declare namespace LocalJSX { "mvx-trim": MvxTrim; "mvx-unlock-button": MvxUnlockButton; "mvx-unlock-panel": MvxUnlockPanel; - "mvx-unlock-panel-group": MvxUnlockPanelGroup; "mvx-unlock-provider-button": MvxUnlockProviderButton; "mvx-wallet-connect": MvxWalletConnect; "mvx-wallet-connect-app-gallery-icon": MvxWalletConnectAppGalleryIcon; @@ -1741,7 +1703,6 @@ declare module "@stencil/core" { "mvx-trim": LocalJSX.MvxTrim & JSXBase.HTMLAttributes; "mvx-unlock-button": LocalJSX.MvxUnlockButton & JSXBase.HTMLAttributes; "mvx-unlock-panel": LocalJSX.MvxUnlockPanel & JSXBase.HTMLAttributes; - "mvx-unlock-panel-group": LocalJSX.MvxUnlockPanelGroup & JSXBase.HTMLAttributes; "mvx-unlock-provider-button": LocalJSX.MvxUnlockProviderButton & JSXBase.HTMLAttributes; "mvx-wallet-connect": LocalJSX.MvxWalletConnect & JSXBase.HTMLAttributes; "mvx-wallet-connect-app-gallery-icon": LocalJSX.MvxWalletConnectAppGalleryIcon & JSXBase.HTMLAttributes; diff --git a/src/components/functional/unlock-panel/components/unlock-panel-group/unlock-panel-group.scss b/src/components/functional/unlock-panel/components/unlock-panel-group/unlock-panel-group.scss deleted file mode 100644 index 40b240b4..00000000 --- a/src/components/functional/unlock-panel/components/unlock-panel-group/unlock-panel-group.scss +++ /dev/null @@ -1,25 +0,0 @@ -:host { - @apply mvx:overflow-hidden mvx:flex; - - @media (min-width: 640px) { - @apply mvx:overflow-visible; - } - - .unlock-panel-group { - @apply mvx:flex mvx:flex-col mvx:flex-1 mvx:overflow-hidden; - - .unlock-panel-group-label { - @apply mvx:leading-none mvx:relative; - color: var(--mvx-text-color-secondary); - } - - .unlock-panel-group-providers { - @apply mvx:flex mvx:flex-col mvx:gap-0.5 mvx:rounded-tl-lg mvx:rounded-tr-lg mvx:overflow-auto; - @apply mvx:pb-6 mvx:mt-3; - - &::-webkit-scrollbar { - @apply mvx:hidden; - } - } - } -} diff --git a/src/components/functional/unlock-panel/components/unlock-panel-group/unlock-panel-group.tsx b/src/components/functional/unlock-panel/components/unlock-panel-group/unlock-panel-group.tsx index bc21c63e..ac60a8ea 100644 --- a/src/components/functional/unlock-panel/components/unlock-panel-group/unlock-panel-group.tsx +++ b/src/components/functional/unlock-panel/components/unlock-panel-group/unlock-panel-group.tsx @@ -1,57 +1,49 @@ -import type { EventEmitter } from '@stencil/core'; -import { Component, Event, h, Prop } from '@stencil/core'; +import { h } from '@stencil/core'; import classNames from 'classnames'; import { type IProviderBase, ProviderTypeEnum } from 'types/provider.types'; +import styles from './unlockPanelGroup.styles' export enum UnlockPanelGroupSlotEnum { groupLabel = 'group-label', } -const unlockPanelGroupClasses: Record = { - detectedPanelGroup: 'mvx:hidden mvx:sm:block', - lastProviderButton: 'mvx:rounded-bl-lg mvx:rounded-br-lg mvx:overflow-hidden', -}; - -@Component({ - tag: 'mvx-unlock-panel-group', - styleUrl: 'unlock-panel-group.scss', - shadow: true, -}) -export class UnlockPanelGroup { - @Event({ composed: false, bubbles: false }) login: EventEmitter; - - @Prop() providers: IProviderBase[] = []; - @Prop() class?: string; +interface UnlockPanelGroupPropsType { + providers: IProviderBase[]; + class?: string; + onLogin?: (provider: IProviderBase) => void; + groupLabel?: JSX.Element; +} - private handleLogin = (provider: IProviderBase) => { - this.login.emit(provider); +export function UnlockPanelGroup({ providers = [], class: className, onLogin, groupLabel }: UnlockPanelGroupPropsType) { + const handleLogin = (provider: IProviderBase) => { + if (onLogin) { + onLogin(provider); + } }; - render() { - const isInstallableExtension = (provider: IProviderBase) => - [ProviderTypeEnum.extension, ProviderTypeEnum.metamask].includes(provider.type as ProviderTypeEnum); + const isInstallableExtension = (provider: IProviderBase) => + [ProviderTypeEnum.extension, ProviderTypeEnum.metamask].includes(provider.type as ProviderTypeEnum); - return ( -
-
- + return ( +
+
+
+ {groupLabel}
-
- {this.providers.map((provider, providerIndex) => ( +
+ {providers.map((provider, providerIndex) => ( this.handleLogin(provider)} + onClick={() => handleLogin(provider)} class={classNames({ - [unlockPanelGroupClasses.detectedPanelGroup]: isInstallableExtension(provider), - [unlockPanelGroupClasses.lastProviderButton]: providerIndex === this.providers.length - 1, + [styles.detectedPanelGroup]: isInstallableExtension(provider), + [styles.lastProviderButton]: providerIndex === providers.length - 1, })} /> ))} - -
- ); - } +
+ ); } diff --git a/src/components/functional/unlock-panel/components/unlock-panel-group/unlockPanelGroup.styles.ts b/src/components/functional/unlock-panel/components/unlock-panel-group/unlockPanelGroup.styles.ts new file mode 100644 index 00000000..a573cf6b --- /dev/null +++ b/src/components/functional/unlock-panel/components/unlock-panel-group/unlockPanelGroup.styles.ts @@ -0,0 +1,9 @@ +// prettier-ignore +export default { + unlockPanelGroupContainer: 'unlock-panel-group-container mvx:overflow-hidden mvx:flex mvx:sm:overflow-visible', + unlockPanelGroup: 'unlock-panel-group mvx:flex mvx:flex-col mvx:flex-1 mvx:overflow-hidden', + unlockPanelGroupLabel: 'unlock-panel-group-label mvx:leading-none mvx:relative mvx:text-secondary-text', + unlockPanelGroupProviders: 'unlock-panel-group-providers mvx:flex mvx:flex-col mvx:gap-0.5 mvx:rounded-tl-lg mvx:rounded-tr-lg mvx:overflow-auto mvx:pb-6 mvx:mt-3 mvx:scrollbar-hide', + detectedPanelGroup: 'mvx:hidden mvx:sm:block', + lastProviderButton: 'mvx:rounded-bl-lg mvx:rounded-br-lg mvx:overflow-hidden', +} satisfies Record; \ No newline at end of file diff --git a/src/components/functional/unlock-panel/unlock-panel.tsx b/src/components/functional/unlock-panel/unlock-panel.tsx index d73c770c..f4ac1c9f 100644 --- a/src/components/functional/unlock-panel/unlock-panel.tsx +++ b/src/components/functional/unlock-panel/unlock-panel.tsx @@ -7,14 +7,14 @@ import { ConnectionMonitor } from 'utils/ConnectionMonitor'; import type { IEventBus } from 'utils/EventBus'; import { EventBus } from 'utils/EventBus'; -import { UnlockPanelGroupSlotEnum } from './components/unlock-panel-group/unlock-panel-group'; +import { UnlockPanelGroup } from './components/unlock-panel-group/unlock-panel-group'; import { getIsExtensionAvailable, getIsMetaMaskAvailable } from './helpers'; import type { IUnlockPanelManagerData } from './unlock-panel.types'; import { UnlockPanelEventsEnum } from './unlock-panel.types'; import { UnlockPanelFooter } from './components'; const unlockPanelClasses: Record = { - detectedPanelGroup: 'mvx:hidden mvx:sm:flex', + detectedPanelGroup: 'mvx:hidden mvx:sm:flex mvx:sm:flex-col', desktopPanelGroupTitle: 'mvx:hidden mvx:sm:flex', mobilePanelGroupTitle: 'mvx:sm:hidden', }; @@ -192,28 +192,28 @@ export class UnlockPanel {
{hasDetectedProviders && ( - this.handleLogin(event.detail)} + onLogin={(provider) => this.handleLogin(provider)} class={unlockPanelClasses.detectedPanelGroup} - > -
Detected
- + groupLabel={ +
Detected
+ } + /> )} - this.handleLogin(event.detail)} - > -
-
Options
-
- {hasDetectedProviders ? 'Other Options' : 'Options'} + onLogin={(provider) => this.handleLogin(provider)} + groupLabel={ +
+
Options
+
+ {hasDetectedProviders ? 'Other Options' : 'Options'} +
-
- - - + } + />
From 312315deb77f6dc054cc5eab1b626f9cd9d5de54 Mon Sep 17 00:00:00 2001 From: Iulia Cimpeanu Date: Tue, 4 Nov 2025 11:10:29 +0200 Subject: [PATCH 04/11] Updated imports --- .../UnlockPanelGroup.tsx} | 0 .../unlock-panel/components/UnlockPanelGroup/index.ts | 1 + .../unlockPanelGroup.styles.ts | 0 src/components/functional/unlock-panel/components/index.ts | 3 ++- src/components/functional/unlock-panel/unlock-panel.tsx | 3 +-- 5 files changed, 4 insertions(+), 3 deletions(-) rename src/components/functional/unlock-panel/components/{unlock-panel-group/unlock-panel-group.tsx => UnlockPanelGroup/UnlockPanelGroup.tsx} (100%) create mode 100644 src/components/functional/unlock-panel/components/UnlockPanelGroup/index.ts rename src/components/functional/unlock-panel/components/{unlock-panel-group => UnlockPanelGroup}/unlockPanelGroup.styles.ts (100%) diff --git a/src/components/functional/unlock-panel/components/unlock-panel-group/unlock-panel-group.tsx b/src/components/functional/unlock-panel/components/UnlockPanelGroup/UnlockPanelGroup.tsx similarity index 100% rename from src/components/functional/unlock-panel/components/unlock-panel-group/unlock-panel-group.tsx rename to src/components/functional/unlock-panel/components/UnlockPanelGroup/UnlockPanelGroup.tsx diff --git a/src/components/functional/unlock-panel/components/UnlockPanelGroup/index.ts b/src/components/functional/unlock-panel/components/UnlockPanelGroup/index.ts new file mode 100644 index 00000000..385d1c8f --- /dev/null +++ b/src/components/functional/unlock-panel/components/UnlockPanelGroup/index.ts @@ -0,0 +1 @@ +export * from './UnlockPanelGroup'; \ No newline at end of file diff --git a/src/components/functional/unlock-panel/components/unlock-panel-group/unlockPanelGroup.styles.ts b/src/components/functional/unlock-panel/components/UnlockPanelGroup/unlockPanelGroup.styles.ts similarity index 100% rename from src/components/functional/unlock-panel/components/unlock-panel-group/unlockPanelGroup.styles.ts rename to src/components/functional/unlock-panel/components/UnlockPanelGroup/unlockPanelGroup.styles.ts diff --git a/src/components/functional/unlock-panel/components/index.ts b/src/components/functional/unlock-panel/components/index.ts index 51d58d9a..76926144 100644 --- a/src/components/functional/unlock-panel/components/index.ts +++ b/src/components/functional/unlock-panel/components/index.ts @@ -1 +1,2 @@ -export * from './UnlockPanelFooter'; \ No newline at end of file +export * from './UnlockPanelFooter'; +export * from './UnlockPanelGroup'; \ No newline at end of file diff --git a/src/components/functional/unlock-panel/unlock-panel.tsx b/src/components/functional/unlock-panel/unlock-panel.tsx index f4ac1c9f..98f66682 100644 --- a/src/components/functional/unlock-panel/unlock-panel.tsx +++ b/src/components/functional/unlock-panel/unlock-panel.tsx @@ -7,11 +7,10 @@ import { ConnectionMonitor } from 'utils/ConnectionMonitor'; import type { IEventBus } from 'utils/EventBus'; import { EventBus } from 'utils/EventBus'; -import { UnlockPanelGroup } from './components/unlock-panel-group/unlock-panel-group'; import { getIsExtensionAvailable, getIsMetaMaskAvailable } from './helpers'; import type { IUnlockPanelManagerData } from './unlock-panel.types'; import { UnlockPanelEventsEnum } from './unlock-panel.types'; -import { UnlockPanelFooter } from './components'; +import { UnlockPanelFooter, UnlockPanelGroup } from './components'; const unlockPanelClasses: Record = { detectedPanelGroup: 'mvx:hidden mvx:sm:flex mvx:sm:flex-col', From bd67ae5185507c4316dc94dcf67dba41dc56cd36 Mon Sep 17 00:00:00 2001 From: Iulia Cimpeanu Date: Tue, 4 Nov 2025 16:46:05 +0200 Subject: [PATCH 05/11] Fixed trim component flickering --- src/common/Trim/Trim.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/common/Trim/Trim.tsx b/src/common/Trim/Trim.tsx index 9bdd61b3..e1fdfb5e 100644 --- a/src/common/Trim/Trim.tsx +++ b/src/common/Trim/Trim.tsx @@ -22,6 +22,7 @@ export function Trim({ let currentTrimFontSize = '1rem'; let trimFullElement: HTMLDivElement; let trimWrapperElement: HTMLDivElement; + let isCurrentlyOverflowing: boolean | null = null; const handleTrimElementReference = (element: HTMLDivElement) => { if (element) { @@ -72,6 +73,12 @@ export function Trim({ const trimmedElementWidth = trimElementReference.clientWidth; const isTrimElementOverflowing = hiddenFullWidthElementWidth > trimmedElementWidth; + if (isCurrentlyOverflowing === isTrimElementOverflowing) { + return; + } + + isCurrentlyOverflowing = isTrimElementOverflowing; + if (safeWindow) { currentTrimFontSize = safeWindow.getComputedStyle(trimElementReference).fontSize; } From 1da617eb26bd464eee3145346c7c56b7074d5aa7 Mon Sep 17 00:00:00 2001 From: Iulia Cimpeanu Date: Mon, 10 Nov 2025 13:13:36 +0200 Subject: [PATCH 06/11] Fixed trim flickering --- src/common/Trim/Trim.tsx | 66 ++++++++++++++++++++++++---------------- 1 file changed, 39 insertions(+), 27 deletions(-) diff --git a/src/common/Trim/Trim.tsx b/src/common/Trim/Trim.tsx index e1fdfb5e..826a3075 100644 --- a/src/common/Trim/Trim.tsx +++ b/src/common/Trim/Trim.tsx @@ -79,35 +79,47 @@ export function Trim({ isCurrentlyOverflowing = isTrimElementOverflowing; - if (safeWindow) { - currentTrimFontSize = safeWindow.getComputedStyle(trimElementReference).fontSize; - } - - const getIdentifierClass = (classes: string) => classes.split(' ')[0]; - - const trimLeftSelector = `.${getIdentifierClass(styles.trimLeft)}`; - const trimRightSelector = `.${getIdentifierClass(styles.trimRight)}`; - - const trimLeftElement = trimElementReference.querySelector(trimLeftSelector) as HTMLElement; - const trimRightElement = trimElementReference.querySelector(trimRightSelector) as HTMLElement; - if (trimLeftElement) { - trimLeftElement.style.fontSize = currentTrimFontSize; - } - - if (trimRightElement) { - trimRightElement.style.fontSize = currentTrimFontSize; + if (resizeObserver) { + resizeObserver.disconnect(); } - const trimFullVisibleClasses = styles.trimFullVisible.split(/\s+/); - const trimWrapperVisibleClasses = styles.trimWrapperVisible.split(/\s+/); - - if (isTrimElementOverflowing) { - trimFullElement.classList.remove(...trimFullVisibleClasses); - trimWrapperElement.classList.add(...trimWrapperVisibleClasses); - } else { - trimFullElement.classList.add(...trimFullVisibleClasses); - trimWrapperElement.classList.remove(...trimWrapperVisibleClasses); - } + requestAnimationFrame(() => { + if (safeWindow) { + currentTrimFontSize = safeWindow.getComputedStyle(trimElementReference).fontSize; + } + + const getIdentifierClass = (classes: string) => classes.split(' ')[0]; + + const trimLeftSelector = `.${getIdentifierClass(styles.trimLeft)}`; + const trimRightSelector = `.${getIdentifierClass(styles.trimRight)}`; + + const trimLeftElement = trimElementReference.querySelector(trimLeftSelector) as HTMLElement; + const trimRightElement = trimElementReference.querySelector(trimRightSelector) as HTMLElement; + if (trimLeftElement) { + trimLeftElement.style.fontSize = currentTrimFontSize; + } + + if (trimRightElement) { + trimRightElement.style.fontSize = currentTrimFontSize; + } + + const trimFullVisibleClasses = styles.trimFullVisible.split(/\s+/); + const trimWrapperVisibleClasses = styles.trimWrapperVisible.split(/\s+/); + + if (isTrimElementOverflowing) { + trimFullElement.classList.remove(...trimFullVisibleClasses); + trimWrapperElement.classList.add(...trimWrapperVisibleClasses); + } else { + trimFullElement.classList.add(...trimFullVisibleClasses); + trimWrapperElement.classList.remove(...trimWrapperVisibleClasses); + } + + requestAnimationFrame(() => { + if (resizeObserver && trimElementReference) { + resizeObserver.observe(trimElementReference); + } + }); + }); }; const middleTextIndex = Math.floor(text.length / 2); From c65b252791ceaddeb4d5b1904bca61fa7534e34f Mon Sep 17 00:00:00 2001 From: Iulia Cimpeanu Date: Mon, 10 Nov 2025 13:41:40 +0200 Subject: [PATCH 07/11] Fixes after review --- .../components/UnlockPanelFooter/UnlockPanelFooter.tsx | 4 ++-- .../components/UnlockPanelGroup/UnlockPanelGroup.tsx | 4 +--- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/src/components/functional/unlock-panel/components/UnlockPanelFooter/UnlockPanelFooter.tsx b/src/components/functional/unlock-panel/components/UnlockPanelFooter/UnlockPanelFooter.tsx index b19cc6cf..3c167cf2 100644 --- a/src/components/functional/unlock-panel/components/UnlockPanelFooter/UnlockPanelFooter.tsx +++ b/src/components/functional/unlock-panel/components/UnlockPanelFooter/UnlockPanelFooter.tsx @@ -11,7 +11,7 @@ export function UnlockPanelFooter({ walletAddress }: { walletAddress: string }) window.open(walletAddress, '_blank'); }; - const processedWalletAddress = String(walletAddress).replace('https://', ''); + const noProtocolWalletAddress = String(walletAddress).replace('https://', ''); return (
@@ -33,7 +33,7 @@ export function UnlockPanelFooter({ walletAddress }: { walletAddress: string }) class={styles.unlockPanelFooterSubtitleLink} href={walletAddress} > - {processedWalletAddress} + {noProtocolWalletAddress}
diff --git a/src/components/functional/unlock-panel/components/UnlockPanelGroup/UnlockPanelGroup.tsx b/src/components/functional/unlock-panel/components/UnlockPanelGroup/UnlockPanelGroup.tsx index ac60a8ea..19d16b67 100644 --- a/src/components/functional/unlock-panel/components/UnlockPanelGroup/UnlockPanelGroup.tsx +++ b/src/components/functional/unlock-panel/components/UnlockPanelGroup/UnlockPanelGroup.tsx @@ -16,9 +16,7 @@ interface UnlockPanelGroupPropsType { export function UnlockPanelGroup({ providers = [], class: className, onLogin, groupLabel }: UnlockPanelGroupPropsType) { const handleLogin = (provider: IProviderBase) => { - if (onLogin) { - onLogin(provider); - } + onLogin?.(provider); }; const isInstallableExtension = (provider: IProviderBase) => From 61046d3c96d17c67450d84518981c5c8c8dcec80 Mon Sep 17 00:00:00 2001 From: Iulia Cimpeanu Date: Tue, 11 Nov 2025 13:44:04 +0200 Subject: [PATCH 08/11] Refactored unlock-provider-button to functional component --- src/common/UnlockButton/UnlockButton.tsx | 12 +----- .../UnlockButton/unlockButton.styles.ts | 10 +++++ src/components.d.ts | 21 +--------- .../UnlockPanelGroup/UnlockPanelGroup.tsx | 5 ++- .../unlockPanelGroup.styles.ts | 2 +- .../UnlockProviderButton.tsx | 40 ++++++++++++++++++ .../components/UnlockProviderButton/index.ts | 1 + .../unlock-panel/components/index.ts | 3 +- .../unlock-provider-button.scss | 1 - .../unlock-provider-button.tsx | 42 ------------------- .../functional/unlock-panel/unlock-panel.scss | 16 +------ .../unlock-panel/unlock-panel.styles.ts | 12 ++++++ .../functional/unlock-panel/unlock-panel.tsx | 19 ++++----- 13 files changed, 80 insertions(+), 104 deletions(-) create mode 100644 src/common/UnlockButton/unlockButton.styles.ts create mode 100644 src/components/functional/unlock-panel/components/UnlockProviderButton/UnlockProviderButton.tsx create mode 100644 src/components/functional/unlock-panel/components/UnlockProviderButton/index.ts delete mode 100644 src/components/functional/unlock-panel/components/unlock-provider-button/unlock-provider-button.scss delete mode 100644 src/components/functional/unlock-panel/components/unlock-provider-button/unlock-provider-button.tsx create mode 100644 src/components/functional/unlock-panel/unlock-panel.styles.ts diff --git a/src/common/UnlockButton/UnlockButton.tsx b/src/common/UnlockButton/UnlockButton.tsx index 1f6d8faa..480e6979 100644 --- a/src/common/UnlockButton/UnlockButton.tsx +++ b/src/common/UnlockButton/UnlockButton.tsx @@ -13,17 +13,7 @@ import { safeWindow } from 'constants/window.constants'; import type { IProviderBase } from 'types/provider.types'; import { ProviderTypeEnum } from 'types/provider.types'; import { getDetectedBrowser } from 'utils/getDetectedBrowser'; - -// prettier-ignore -const styles = { - unlockButton: 'unlock-button mvx:pl-3 mvx:pr-4 mvx:h-15 mvx:flex! mvx:gap-4 mvx:cursor-pointer mvx:items-center mvx:transition-all mvx:duration-200 mvx:ease-in-out mvx:bg-secondary mvx:hover:bg-hover', - unlockButtonIcon: 'unlock-button-icon mvx:-order-1 mvx:h-10 mvx:flex mvx:relative mvx:z-1 mvx:items-center mvx:justify-center mvx:w-10', - unlockButtonIconClipped: 'mvx:items-end mvx:justify-start', - unlockButtonLabel: 'unlock-button-label mvx:text-base mvx:relative mvx:z-1 mvx:text-primary mvx:leading-none', - unlockButtonStatus: 'unlock-button-status mvx:ml-auto mvx:relative mvx:rounded-3xl mvx:z-1 mvx:leading-none mvx:flex mvx:items-center mvx:py-1 mvx:px-2 mvx:font-medium mvx:gap-1 mvx:text-xs mvx:bg-surface mvx:border mvx:border-solid mvx:border-outline', - unlockButtonStatusText: 'unlock-button-status-text mvx:text-accent', - unlockButtonStatusIcon: 'unlock-button-status-icon mvx:flex mvx:items-center mvx:text-accent mvx:w-2.5 mvx:h-2.5', -} satisfies Record; +import styles from './unlockButton.styles'; interface UnlockButtonPropsType { label: string; diff --git a/src/common/UnlockButton/unlockButton.styles.ts b/src/common/UnlockButton/unlockButton.styles.ts new file mode 100644 index 00000000..87dd6af7 --- /dev/null +++ b/src/common/UnlockButton/unlockButton.styles.ts @@ -0,0 +1,10 @@ +// prettier-ignore +export default { + unlockButton: 'unlock-button mvx:pl-3 mvx:pr-4 mvx:h-15 mvx:flex mvx:gap-4 mvx:cursor-pointer mvx:items-center mvx:transition-all mvx:duration-200 mvx:ease-in-out mvx:bg-secondary mvx:hover:bg-hover', + unlockButtonIcon: 'unlock-button-icon mvx:-order-1 mvx:h-10 mvx:flex mvx:relative mvx:z-1 mvx:items-center mvx:justify-center mvx:w-10', + unlockButtonIconClipped: 'mvx:items-end mvx:justify-start', + unlockButtonLabel: 'unlock-button-label mvx:text-base mvx:relative mvx:z-1 mvx:text-primary mvx:leading-none', + unlockButtonStatus: 'unlock-button-status mvx:ml-auto mvx:relative mvx:rounded-3xl mvx:z-1 mvx:leading-none mvx:flex mvx:items-center mvx:py-1 mvx:px-2 mvx:font-medium mvx:gap-1 mvx:text-xs mvx:bg-surface mvx:border mvx:border-solid mvx:border-outline', + unlockButtonStatusText: 'unlock-button-status-text mvx:text-accent', + unlockButtonStatusIcon: 'unlock-button-status-icon mvx:flex mvx:items-center mvx:text-accent mvx:w-2.5 mvx:h-2.5', +} satisfies Record; \ No newline at end of file diff --git a/src/components.d.ts b/src/components.d.ts index a21048f7..3d50c26c 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -17,7 +17,7 @@ import { ITransactionListItem as ITransactionListItem1 } from "./components/visu import { IToastDataState, ITransactionProgressState } from "./components/functional/toasts-list/components/transaction-toast/transaction-toast.type"; import { TransactionStatusEnum } from "./constants/transactionStatus.enum"; import { TransactionRowType } from "./components/controlled/transactions-table/transactions-table.type"; -import { IProviderBase, ProviderTypeEnum } from "./types/provider.types"; +import { IProviderBase } from "./types/provider.types"; import { IEventBus as IEventBus1, unknown as IWalletConnectPanelData } from "./components.d"; export { IAddressTableData } from "./types/address-table.types"; export { ButtonSizeEnum, ButtonVariantEnum } from "./components/visual/button/button.types"; @@ -31,7 +31,7 @@ export { ITransactionListItem as ITransactionListItem1 } from "./components/visu export { IToastDataState, ITransactionProgressState } from "./components/functional/toasts-list/components/transaction-toast/transaction-toast.type"; export { TransactionStatusEnum } from "./constants/transactionStatus.enum"; export { TransactionRowType } from "./components/controlled/transactions-table/transactions-table.type"; -export { IProviderBase, ProviderTypeEnum } from "./types/provider.types"; +export { IProviderBase } from "./types/provider.types"; export { IEventBus as IEventBus1, unknown as IWalletConnectPanelData } from "./components.d"; export namespace Components { interface MvxAddressTable { @@ -397,10 +397,6 @@ export namespace Components { "closeWithAnimation": () => Promise; "getEventBus": () => Promise; } - interface MvxUnlockProviderButton { - "class"?: string; - "provider": IProviderBase; - } interface MvxWalletConnect { /** * @default { wcURI: '' } @@ -1010,12 +1006,6 @@ declare global { prototype: HTMLMvxUnlockPanelElement; new (): HTMLMvxUnlockPanelElement; }; - interface HTMLMvxUnlockProviderButtonElement extends Components.MvxUnlockProviderButton, HTMLStencilElement { - } - var HTMLMvxUnlockProviderButtonElement: { - prototype: HTMLMvxUnlockProviderButtonElement; - new (): HTMLMvxUnlockProviderButtonElement; - }; interface HTMLMvxWalletConnectElement extends Components.MvxWalletConnect, HTMLStencilElement { } var HTMLMvxWalletConnectElement: { @@ -1139,7 +1129,6 @@ declare global { "mvx-trim": HTMLMvxTrimElement; "mvx-unlock-button": HTMLMvxUnlockButtonElement; "mvx-unlock-panel": HTMLMvxUnlockPanelElement; - "mvx-unlock-provider-button": HTMLMvxUnlockProviderButtonElement; "mvx-wallet-connect": HTMLMvxWalletConnectElement; "mvx-wallet-connect-app-gallery-icon": HTMLMvxWalletConnectAppGalleryIconElement; "mvx-wallet-connect-app-store-icon": HTMLMvxWalletConnectAppStoreIconElement; @@ -1522,10 +1511,6 @@ declare namespace LocalJSX { } interface MvxUnlockPanel { } - interface MvxUnlockProviderButton { - "class"?: string; - "provider"?: IProviderBase; - } interface MvxWalletConnect { /** * @default { wcURI: '' } @@ -1630,7 +1615,6 @@ declare namespace LocalJSX { "mvx-trim": MvxTrim; "mvx-unlock-button": MvxUnlockButton; "mvx-unlock-panel": MvxUnlockPanel; - "mvx-unlock-provider-button": MvxUnlockProviderButton; "mvx-wallet-connect": MvxWalletConnect; "mvx-wallet-connect-app-gallery-icon": MvxWalletConnectAppGalleryIcon; "mvx-wallet-connect-app-store-icon": MvxWalletConnectAppStoreIcon; @@ -1703,7 +1687,6 @@ declare module "@stencil/core" { "mvx-trim": LocalJSX.MvxTrim & JSXBase.HTMLAttributes; "mvx-unlock-button": LocalJSX.MvxUnlockButton & JSXBase.HTMLAttributes; "mvx-unlock-panel": LocalJSX.MvxUnlockPanel & JSXBase.HTMLAttributes; - "mvx-unlock-provider-button": LocalJSX.MvxUnlockProviderButton & JSXBase.HTMLAttributes; "mvx-wallet-connect": LocalJSX.MvxWalletConnect & JSXBase.HTMLAttributes; "mvx-wallet-connect-app-gallery-icon": LocalJSX.MvxWalletConnectAppGalleryIcon & JSXBase.HTMLAttributes; "mvx-wallet-connect-app-store-icon": LocalJSX.MvxWalletConnectAppStoreIcon & JSXBase.HTMLAttributes; diff --git a/src/components/functional/unlock-panel/components/UnlockPanelGroup/UnlockPanelGroup.tsx b/src/components/functional/unlock-panel/components/UnlockPanelGroup/UnlockPanelGroup.tsx index 19d16b67..b6b1a91e 100644 --- a/src/components/functional/unlock-panel/components/UnlockPanelGroup/UnlockPanelGroup.tsx +++ b/src/components/functional/unlock-panel/components/UnlockPanelGroup/UnlockPanelGroup.tsx @@ -1,7 +1,8 @@ import { h } from '@stencil/core'; import classNames from 'classnames'; import { type IProviderBase, ProviderTypeEnum } from 'types/provider.types'; -import styles from './unlockPanelGroup.styles' +import styles from './unlockPanelGroup.styles'; +import { UnlockProviderButton } from '../UnlockProviderButton'; export enum UnlockPanelGroupSlotEnum { groupLabel = 'group-label', @@ -31,7 +32,7 @@ export function UnlockPanelGroup({ providers = [], class: className, onLogin, gr
{providers.map((provider, providerIndex) => ( - handleLogin(provider)} class={classNames({ diff --git a/src/components/functional/unlock-panel/components/UnlockPanelGroup/unlockPanelGroup.styles.ts b/src/components/functional/unlock-panel/components/UnlockPanelGroup/unlockPanelGroup.styles.ts index a573cf6b..8b4a8c3e 100644 --- a/src/components/functional/unlock-panel/components/UnlockPanelGroup/unlockPanelGroup.styles.ts +++ b/src/components/functional/unlock-panel/components/UnlockPanelGroup/unlockPanelGroup.styles.ts @@ -4,6 +4,6 @@ export default { unlockPanelGroup: 'unlock-panel-group mvx:flex mvx:flex-col mvx:flex-1 mvx:overflow-hidden', unlockPanelGroupLabel: 'unlock-panel-group-label mvx:leading-none mvx:relative mvx:text-secondary-text', unlockPanelGroupProviders: 'unlock-panel-group-providers mvx:flex mvx:flex-col mvx:gap-0.5 mvx:rounded-tl-lg mvx:rounded-tr-lg mvx:overflow-auto mvx:pb-6 mvx:mt-3 mvx:scrollbar-hide', - detectedPanelGroup: 'mvx:hidden mvx:sm:block', + detectedPanelGroup: 'mvx:hidden mvx:sm:flex', lastProviderButton: 'mvx:rounded-bl-lg mvx:rounded-br-lg mvx:overflow-hidden', } satisfies Record; \ No newline at end of file diff --git a/src/components/functional/unlock-panel/components/UnlockProviderButton/UnlockProviderButton.tsx b/src/components/functional/unlock-panel/components/UnlockProviderButton/UnlockProviderButton.tsx new file mode 100644 index 00000000..37b0502c --- /dev/null +++ b/src/components/functional/unlock-panel/components/UnlockProviderButton/UnlockProviderButton.tsx @@ -0,0 +1,40 @@ +import { h } from '@stencil/core'; +import classNames from 'classnames'; +import { UnlockButton } from 'common/UnlockButton/UnlockButton'; +import type { IProviderBase } from 'types/provider.types'; +import type { ProviderTypeEnum } from 'types/provider.types'; + +import { getProviderButtonIcon } from '../../helpers'; + +const unlockProviderButtonClasses: Record = { + button: 'mvx:w-full', +}; + +interface UnlockProviderButtonPropsType { + provider: IProviderBase; + class?: string; + onClick?: () => void; +} + +export function UnlockProviderButton({ provider, class: className, onClick }: UnlockProviderButtonPropsType) { + if (!provider) { + return null; + } + + const icon: HTMLElement | null = !provider.iconUrl + ? getProviderButtonIcon({ providerType: provider.type }) + : null; + + return ( +
+ +
+ ); +} diff --git a/src/components/functional/unlock-panel/components/UnlockProviderButton/index.ts b/src/components/functional/unlock-panel/components/UnlockProviderButton/index.ts new file mode 100644 index 00000000..54c0f59c --- /dev/null +++ b/src/components/functional/unlock-panel/components/UnlockProviderButton/index.ts @@ -0,0 +1 @@ +export * from './UnlockProviderButton'; \ No newline at end of file diff --git a/src/components/functional/unlock-panel/components/index.ts b/src/components/functional/unlock-panel/components/index.ts index 76926144..92aa6a2e 100644 --- a/src/components/functional/unlock-panel/components/index.ts +++ b/src/components/functional/unlock-panel/components/index.ts @@ -1,2 +1,3 @@ export * from './UnlockPanelFooter'; -export * from './UnlockPanelGroup'; \ No newline at end of file +export * from './UnlockPanelGroup'; +export * from './UnlockProviderButton'; \ No newline at end of file diff --git a/src/components/functional/unlock-panel/components/unlock-provider-button/unlock-provider-button.scss b/src/components/functional/unlock-panel/components/unlock-provider-button/unlock-provider-button.scss deleted file mode 100644 index 21b0cbc1..00000000 --- a/src/components/functional/unlock-panel/components/unlock-provider-button/unlock-provider-button.scss +++ /dev/null @@ -1 +0,0 @@ -// This is needed to trigger the Stecil Tailwind compilation for inline Tailwind classes. diff --git a/src/components/functional/unlock-panel/components/unlock-provider-button/unlock-provider-button.tsx b/src/components/functional/unlock-panel/components/unlock-provider-button/unlock-provider-button.tsx deleted file mode 100644 index e55cb4d0..00000000 --- a/src/components/functional/unlock-panel/components/unlock-provider-button/unlock-provider-button.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { Component, h, Prop } from '@stencil/core'; -import classNames from 'classnames'; -import { UnlockButton } from 'common/UnlockButton/UnlockButton'; -import type { IProviderBase } from 'types/provider.types'; -import type { ProviderTypeEnum } from 'types/provider.types'; - -import { getProviderButtonIcon } from '../../helpers'; - -const unlockProviderButtonClasses: Record = { - button: 'mvx:w-full', -}; - -@Component({ - tag: 'mvx-unlock-provider-button', - styleUrl: 'unlock-provider-button.scss', - shadow: true, -}) -export class UnlockProviderButton { - @Prop() provider: IProviderBase; - @Prop() class?: string; - - render() { - if (!this.provider) { - return null; - } - - const icon: HTMLElement | null = !this.provider.iconUrl - ? getProviderButtonIcon({ providerType: this.provider.type }) - : null; - - return ( - - ); - } -} diff --git a/src/components/functional/unlock-panel/unlock-panel.scss b/src/components/functional/unlock-panel/unlock-panel.scss index 42e63fe3..ff1190ee 100644 --- a/src/components/functional/unlock-panel/unlock-panel.scss +++ b/src/components/functional/unlock-panel/unlock-panel.scss @@ -1,15 +1 @@ -.unlock-panel-anchor { - @apply mvx:flex mvx:flex-col mvx:flex-1 mvx:overflow-hidden; -} - -.unlock-panel { - @apply mvx:flex mvx:flex-col mvx:h-full mvx:justify-between mvx:overflow-auto mvx:pb-6; - - .unlock-panel-groups { - @apply mvx:flex mvx:flex-col mvx:gap-4 mvx:pt-6; - } - - &::-webkit-scrollbar { - @apply mvx:hidden; - } -} +// This is needed to trigger the Stecil Tailwind compilation for inline Tailwind classes. \ No newline at end of file diff --git a/src/components/functional/unlock-panel/unlock-panel.styles.ts b/src/components/functional/unlock-panel/unlock-panel.styles.ts new file mode 100644 index 00000000..401b0782 --- /dev/null +++ b/src/components/functional/unlock-panel/unlock-panel.styles.ts @@ -0,0 +1,12 @@ +// prettier-ignore +export default { + unlockPanelAnchor: 'unlock-panel-anchor mvx:flex mvx:flex-col mvx:flex-1 mvx:overflow-hidden', + unlockPanel: 'unlock-panel mvx:flex mvx:flex-col mvx:h-full mvx:justify-between mvx:overflow-auto mvx:pb-6 mvx:scrollbar-hide', + unlockPanelGroups: 'unlock-panel-groups mvx:flex mvx:flex-col mvx:gap-4 mvx:pt-6', + unlockButton: 'unlock-button mvx:flex mvx:pl-3 mvx:pr-4 mvx:h-15 mvx:bg-secondary mvx:hover:bg-hover', + unlockButtonIcon: 'unlock-button-icon mvx:-order-1 mvx:h-10 mvx:w-10', + unlockButtonStatus: 'unlock-button-status mvx:rounded-3xl mvx:py-1 mvx:px-2 mvx:bg-surface', + detectedPanelGroup: 'mvx:hidden mvx:sm:flex mvx:sm:flex-col', + desktopPanelGroupTitle: 'mvx:hidden mvx:sm:flex', + mobilePanelGroupTitle: 'mvx:sm:hidden', +} satisfies Record; \ No newline at end of file diff --git a/src/components/functional/unlock-panel/unlock-panel.tsx b/src/components/functional/unlock-panel/unlock-panel.tsx index 98f66682..788d755b 100644 --- a/src/components/functional/unlock-panel/unlock-panel.tsx +++ b/src/components/functional/unlock-panel/unlock-panel.tsx @@ -11,12 +11,7 @@ import { getIsExtensionAvailable, getIsMetaMaskAvailable } from './helpers'; import type { IUnlockPanelManagerData } from './unlock-panel.types'; import { UnlockPanelEventsEnum } from './unlock-panel.types'; import { UnlockPanelFooter, UnlockPanelGroup } from './components'; - -const unlockPanelClasses: Record = { - detectedPanelGroup: 'mvx:hidden mvx:sm:flex mvx:sm:flex-col', - desktopPanelGroupTitle: 'mvx:hidden mvx:sm:flex', - mobilePanelGroupTitle: 'mvx:sm:hidden', -}; +import styles from './unlock-panel.styles'; @Component({ tag: 'mvx-unlock-panel', @@ -175,7 +170,7 @@ export class UnlockPanel {
this.setAnchor(element)} - class={{ 'unlock-panel-anchor': this.isLoggingIn || this.isIntroScreenVisible }} + class={{ [styles.unlockPanelAnchor]: this.isLoggingIn || this.isIntroScreenVisible }} > {this.isIntroScreenVisible && ( {isProviderScreenVisible && ( -
-
+
+
{hasDetectedProviders && ( this.handleLogin(provider)} - class={unlockPanelClasses.detectedPanelGroup} + class={styles.detectedPanelGroup} groupLabel={
Detected
} @@ -206,8 +201,8 @@ export class UnlockPanel { onLogin={(provider) => this.handleLogin(provider)} groupLabel={
-
Options
-
+
Options
+
{hasDetectedProviders ? 'Other Options' : 'Options'}
From d2563a93c5a11d5f03c9232d6534793d909c145d Mon Sep 17 00:00:00 2001 From: Iulia Cimpeanu Date: Tue, 11 Nov 2025 17:05:27 +0200 Subject: [PATCH 09/11] Fixed trim flickering --- src/common/Trim/Trim.tsx | 47 ++++++++++++++++++++++++++++++++++------ 1 file changed, 40 insertions(+), 7 deletions(-) diff --git a/src/common/Trim/Trim.tsx b/src/common/Trim/Trim.tsx index 826a3075..121bc535 100644 --- a/src/common/Trim/Trim.tsx +++ b/src/common/Trim/Trim.tsx @@ -23,6 +23,7 @@ export function Trim({ let trimFullElement: HTMLDivElement; let trimWrapperElement: HTMLDivElement; let isCurrentlyOverflowing: boolean | null = null; + let isCheckingOverflow = false; const handleTrimElementReference = (element: HTMLDivElement) => { if (element) { @@ -65,24 +66,57 @@ export function Trim({ } const checkOverflow = () => { + if (isCheckingOverflow) { + return; + } + if (!fullWidthUntrimmedElementReference || !trimElementReference || !trimFullElement || !trimWrapperElement) { return; } + isCheckingOverflow = true; + + if (resizeObserver) { + resizeObserver.disconnect(); + } + + const trimFullVisibleClasses = styles.trimFullVisible.split(/\s+/); + const trimWrapperVisibleClasses = styles.trimWrapperVisible.split(/\s+/); + + const hasFullVisible = trimFullElement.classList.contains(trimFullVisibleClasses[0]); + const hasWrapperVisible = trimWrapperElement.classList.contains(trimWrapperVisibleClasses[0]); + + if (hasFullVisible) { + trimFullElement.classList.remove(...trimFullVisibleClasses); + } + if (hasWrapperVisible) { + trimWrapperElement.classList.remove(...trimWrapperVisibleClasses); + } + const hiddenFullWidthElementWidth = fullWidthUntrimmedElementReference.scrollWidth; const trimmedElementWidth = trimElementReference.clientWidth; const isTrimElementOverflowing = hiddenFullWidthElementWidth > trimmedElementWidth; if (isCurrentlyOverflowing === isTrimElementOverflowing) { + if (hasFullVisible) { + trimFullElement.classList.add(...trimFullVisibleClasses); + } + if (hasWrapperVisible) { + trimWrapperElement.classList.add(...trimWrapperVisibleClasses); + } + + isCheckingOverflow = false; + + setTimeout(() => { + if (resizeObserver && trimElementReference) { + resizeObserver.observe(trimElementReference); + } + }); return; } isCurrentlyOverflowing = isTrimElementOverflowing; - if (resizeObserver) { - resizeObserver.disconnect(); - } - requestAnimationFrame(() => { if (safeWindow) { currentTrimFontSize = safeWindow.getComputedStyle(trimElementReference).fontSize; @@ -103,9 +137,6 @@ export function Trim({ trimRightElement.style.fontSize = currentTrimFontSize; } - const trimFullVisibleClasses = styles.trimFullVisible.split(/\s+/); - const trimWrapperVisibleClasses = styles.trimWrapperVisible.split(/\s+/); - if (isTrimElementOverflowing) { trimFullElement.classList.remove(...trimFullVisibleClasses); trimWrapperElement.classList.add(...trimWrapperVisibleClasses); @@ -114,6 +145,8 @@ export function Trim({ trimWrapperElement.classList.remove(...trimWrapperVisibleClasses); } + isCheckingOverflow = false; + requestAnimationFrame(() => { if (resizeObserver && trimElementReference) { resizeObserver.observe(trimElementReference); From 4225d0c0cdb0aa561d065e242d7bc327c04134ce Mon Sep 17 00:00:00 2001 From: Iulia Cimpeanu Date: Tue, 11 Nov 2025 17:10:04 +0200 Subject: [PATCH 10/11] Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4a8e607c..82a9fa01 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +- [Refactored unlock panel components](https://github.com/multiversx/mx-sdk-dapp-ui/pull/255) - [Added github release on publish](https://github.com/multiversx/mx-sdk-dapp-ui/pull/264) ## [[0.1.2](https://github.com/multiversx/mx-sdk-dapp-ui/pull/263)] - 2025-11-06 From 235fd1fe8dba779afbd6224df2e91f99a4b654c9 Mon Sep 17 00:00:00 2001 From: Iulia Cimpeanu Date: Tue, 11 Nov 2025 17:19:04 +0200 Subject: [PATCH 11/11] updates --- src/common/Trim/Trim.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/common/Trim/Trim.tsx b/src/common/Trim/Trim.tsx index 121bc535..8a671942 100644 --- a/src/common/Trim/Trim.tsx +++ b/src/common/Trim/Trim.tsx @@ -80,11 +80,14 @@ export function Trim({ resizeObserver.disconnect(); } + + const getIdentifierClass = (classes: string) => classes.split(' ')[0]; + const trimFullVisibleClasses = styles.trimFullVisible.split(/\s+/); const trimWrapperVisibleClasses = styles.trimWrapperVisible.split(/\s+/); - const hasFullVisible = trimFullElement.classList.contains(trimFullVisibleClasses[0]); - const hasWrapperVisible = trimWrapperElement.classList.contains(trimWrapperVisibleClasses[0]); + const hasFullVisible = trimFullElement.classList.contains(getIdentifierClass(styles.trimFullVisible)); + const hasWrapperVisible = trimWrapperElement.classList.contains(getIdentifierClass(styles.trimWrapperVisible)); if (hasFullVisible) { trimFullElement.classList.remove(...trimFullVisibleClasses); @@ -122,8 +125,6 @@ export function Trim({ currentTrimFontSize = safeWindow.getComputedStyle(trimElementReference).fontSize; } - const getIdentifierClass = (classes: string) => classes.split(' ')[0]; - const trimLeftSelector = `.${getIdentifierClass(styles.trimLeft)}`; const trimRightSelector = `.${getIdentifierClass(styles.trimRight)}`;