Skip to content

Commit 6a08ee0

Browse files
DenysKarmazynDFINITYDenysKarmazynDFINITY
committed
feat(frontend): move Pay/WC buttons from Header to Menu
1 parent 8a2b60e commit 6a08ee0

File tree

6 files changed

+147
-11
lines changed

6 files changed

+147
-11
lines changed

‎src/frontend/src/lib/components/core/Menu.svelte‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,12 @@
1212
import MenuCurrencySelector from '$lib/components/currency/MenuCurrencySelector.svelte';
1313
import IconBinance from '$lib/components/icons/IconBinance.svelte';
1414
import IconHelpCircle from '$lib/components/icons/IconHelpCircle.svelte';
15+
import IconPay from '$lib/components/icons/IconPay.svelte';
1516
import IconVipQr from '$lib/components/icons/IconVipQr.svelte';
17+
import IconWalletConnect from '$lib/components/icons/IconWalletConnect.svelte';
1618
import IconEye from '$lib/components/icons/lucide/IconEye.svelte';
1719
import IconEyeOff from '$lib/components/icons/lucide/IconEyeOff.svelte';
20+
import IconMaximize from '$lib/components/icons/lucide/IconMaximize.svelte';
1821
import IconShare from '$lib/components/icons/lucide/IconShare.svelte';
1922
import IconUsersRound from '$lib/components/icons/lucide/IconUsersRound.svelte';
2023
import LicenseAgreementLink from '$lib/components/license-agreement/LicenseAgreementLink.svelte';
@@ -35,6 +38,8 @@
3538
NAVIGATION_MENU_REFERRAL_BUTTON,
3639
NAVIGATION_MENU_ADDRESS_BOOK_BUTTON,
3740
NAVIGATION_MENU_GOLD_BUTTON,
41+
NAVIGATION_MENU_SCANNER_BUTTON,
42+
NAVIGATION_MENU_PAY_BUTTON,
3843
NAVIGATION_MENU_PRIVACY_MODE_BUTTON,
3944
NAVIGATION_MENU_SUPPORT_BUTTON,
4045
NAVIGATION_MENU_DOC_BUTTON
@@ -87,6 +92,8 @@
8792
8893
const addressModalId = Symbol();
8994
const referralModalId = Symbol();
95+
const universalScannerModalId = Symbol();
96+
const payDialogModalId = Symbol();
9097
const goldModalId = Symbol();
9198
const vipModalId = Symbol();
9299
</script>
@@ -167,6 +174,46 @@
167174

168175
<Hr />
169176

177+
<ButtonMenu
178+
ariaLabel={$i18n.navigation.text.wallet_connect}
179+
onclick={() => modalStore.openUniversalScanner({ id: universalScannerModalId })}
180+
styleClass="group"
181+
testId={NAVIGATION_MENU_SCANNER_BUTTON}
182+
>
183+
<IconMaximize />
184+
185+
<span class="flex w-full items-center justify-between">
186+
{$i18n.navigation.text.wallet_connect}
187+
188+
<span
189+
class="text-tertiary-inverted transition-colors duration-700 group-hover:text-brand-primary-alt"
190+
>
191+
<IconWalletConnect />
192+
</span>
193+
</span>
194+
</ButtonMenu>
195+
196+
<ButtonMenu
197+
ariaLabel={replaceOisyPlaceholders($i18n.navigation.text.pay)}
198+
onclick={() => modalStore.openPayDialog(payDialogModalId)}
199+
styleClass="group"
200+
testId={NAVIGATION_MENU_PAY_BUTTON}
201+
>
202+
<IconMaximize />
203+
204+
<span class="flex w-full items-center justify-between">
205+
{replaceOisyPlaceholders($i18n.navigation.text.pay)}
206+
207+
<span
208+
class="text-tertiary-inverted transition-colors duration-700 group-hover:text-brand-primary-alt"
209+
>
210+
<IconPay />
211+
</span>
212+
</span>
213+
</ButtonMenu>
214+
215+
<Hr />
216+
170217
<ButtonMenu
171218
ariaLabel={$i18n.navigation.alt.refer_a_friend}
172219
onclick={() => modalStore.openReferralCode(referralModalId)}

‎src/frontend/src/lib/components/hero/Header.svelte‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
<script lang="ts">
22
import { nonNullish } from '@dfinity/utils';
33
import { page } from '$app/state';
4-
import { UNIVERSAL_SCANNER_ENABLED } from '$env/universal-scanner.env';
54
import AboutWhyOisy from '$lib/components/about/AboutWhyOisy.svelte';
65
import AboutWhyOisyModal from '$lib/components/about/AboutWhyOisyModal.svelte';
76
import Menu from '$lib/components/core/Menu.svelte';
87
import OisyWalletLogoLink from '$lib/components/core/OisyWalletLogoLink.svelte';
98
import DocumentationLink from '$lib/components/navigation/DocumentationLink.svelte';
109
import NetworksSwitcher from '$lib/components/networks/NetworksSwitcher.svelte';
11-
import Pay from '$lib/components/pay/Pay.svelte';
10+
import Scanner from '$lib/components/scanner/Scanner.svelte';
1211
import ThemeSwitchButton from '$lib/components/ui/ThemeSwitchButton.svelte';
1312
import WalletConnect from '$lib/components/wallet-connect/WalletConnect.svelte';
1413
import { LANDING_PAGE_ROUTE } from '$lib/constants/analytics.constants';
@@ -74,14 +73,11 @@
7473
{/if}
7574

7675
{#if $authSignedIn}
77-
<WalletConnect />
78-
79-
{#if UNIVERSAL_SCANNER_ENABLED}
80-
<!-- TODO: Re-enable the scanner button when it includes WalletConnect and remove the modal from pay button -->
81-
<!-- <Scanner /> -->
82-
83-
<Pay />
76+
{#if nonNullish($walletConnectListenerStore)}
77+
<WalletConnect />
8478
{/if}
79+
80+
<Scanner />
8581
{/if}
8682

8783
{#if $authSignedIn}

‎src/frontend/src/lib/components/icons/lucide/IconMaximize.svelte‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<script lang="ts">
2+
interface Props {
3+
size?: string;
4+
}
5+
6+
let { size = '22' }: Props = $props();
7+
</script>
8+
9+
<svg fill="none" height={size} viewBox="0 0 22 22" width={size} xmlns="http://www.w3.org/2000/svg">
10+
<path
11+
clip-rule="evenodd"
12+
d="M2.63871 2.63895C3.15443 2.12323 3.85391 1.8335 4.58325 1.8335H7.33325C7.83951 1.8335 8.24992 2.2439 8.24992 2.75016C8.24992 3.25642 7.83951 3.66683 7.33325 3.66683H4.58325C4.34014 3.66683 4.10698 3.76341 3.93507 3.93531C3.76316 4.10722 3.66659 4.34038 3.66659 4.5835V7.3335C3.66659 7.83976 3.25618 8.25016 2.74992 8.25016C2.24366 8.25016 1.83325 7.83976 1.83325 7.3335V4.5835C1.83325 3.85415 2.12298 3.15468 2.63871 2.63895Z"
13+
fill="currentColor"
14+
fill-rule="evenodd"
15+
/>
16+
<path
17+
clip-rule="evenodd"
18+
d="M13.75 2.75016C13.75 2.2439 14.1604 1.8335 14.6667 1.8335H17.4167C18.146 1.8335 18.8455 2.12323 19.3612 2.63895C19.8769 3.15468 20.1667 3.85415 20.1667 4.5835V7.3335C20.1667 7.83976 19.7563 8.25016 19.25 8.25016C18.7437 8.25016 18.3333 7.83976 18.3333 7.3335V4.5835C18.3333 4.34038 18.2368 4.10722 18.0648 3.93531C17.8929 3.76341 17.6598 3.66683 17.4167 3.66683H14.6667C14.1604 3.66683 13.75 3.25642 13.75 2.75016Z"
19+
fill="currentColor"
20+
fill-rule="evenodd"
21+
/>
22+
<path
23+
clip-rule="evenodd"
24+
d="M2.74992 13.75C3.25618 13.75 3.66659 14.1604 3.66659 14.6667V17.4167C3.66659 17.6598 3.76316 17.8929 3.93507 18.0648C4.10698 18.2368 4.34014 18.3333 4.58325 18.3333H7.33325C7.83951 18.3333 8.24992 18.7437 8.24992 19.25C8.24992 19.7563 7.83951 20.1667 7.33325 20.1667H4.58325C3.85391 20.1667 3.15443 19.8769 2.63871 19.3612C2.12298 18.8455 1.83325 18.146 1.83325 17.4167V14.6667C1.83325 14.1604 2.24366 13.75 2.74992 13.75Z"
25+
fill="currentColor"
26+
fill-rule="evenodd"
27+
/>
28+
<path
29+
clip-rule="evenodd"
30+
d="M19.25 13.75C19.7563 13.75 20.1667 14.1604 20.1667 14.6667V17.4167C20.1667 18.146 19.8769 18.8455 19.3612 19.3612C18.8455 19.8769 18.146 20.1667 17.4167 20.1667H14.6667C14.1604 20.1667 13.75 19.7563 13.75 19.25C13.75 18.7437 14.1604 18.3333 14.6667 18.3333H17.4167C17.6598 18.3333 17.8929 18.2368 18.0648 18.0648C18.2368 17.8929 18.3333 17.6598 18.3333 17.4167V14.6667C18.3333 14.1604 18.7437 13.75 19.25 13.75Z"
31+
fill="currentColor"
32+
fill-rule="evenodd"
33+
/>
34+
</svg>

‎src/frontend/src/lib/components/ui/ButtonMenu.svelte‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,26 @@
99
children: Snippet;
1010
disabled?: boolean;
1111
ariaLabel: string;
12+
styleClass?: string;
1213
testId?: string;
1314
tag?: string;
1415
tagVariant?: TagVariant;
1516
}
1617
17-
let { onclick, children, disabled = false, ariaLabel, testId, tag, tagVariant }: Props = $props();
18+
let {
19+
onclick,
20+
children,
21+
disabled = false,
22+
ariaLabel,
23+
styleClass = '',
24+
testId,
25+
tag,
26+
tagVariant
27+
}: Props = $props();
1828
</script>
1929

2030
<button
21-
class="nav-item nav-item-condensed"
31+
class={`${styleClass} nav-item nav-item-condensed`}
2232
class:opacity-50={disabled}
2333
aria-label={ariaLabel}
2434
data-tid={testId}

‎src/frontend/src/lib/constants/test-ids.constants.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ export const NAVIGATION_MENU_VIP_BUTTON = 'navigation-menu-vip-button';
55
export const NAVIGATION_MENU_GOLD_BUTTON = 'navigation-menu-gold-button';
66
export const NAVIGATION_MENU_REFERRAL_BUTTON = 'navigation-menu-referral-button';
77
export const NAVIGATION_MENU_ADDRESS_BOOK_BUTTON = 'navigation-menu-address-book-button';
8+
export const NAVIGATION_MENU_SCANNER_BUTTON = 'navigation-menu-scanner-button';
9+
export const NAVIGATION_MENU_PAY_BUTTON = 'navigation-menu-pay-button';
810
export const NAVIGATION_MENU_PRIVACY_MODE_BUTTON = 'navigation-menu-privacy-mode-button';
911
export const NAVIGATION_MENU_WHY_OISY_BUTTON = 'about-why-oisy-modal-open-button';
1012
export const NAVIGATION_MENU_DOC_BUTTON = 'navigation-documentation-button';

‎src/frontend/src/tests/lib/components/core/Menu.spec.ts‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,11 @@ import {
77
NAVIGATION_MENU_BUTTON,
88
NAVIGATION_MENU_DOC_BUTTON,
99
NAVIGATION_MENU_GOLD_BUTTON,
10+
NAVIGATION_MENU_PAY_BUTTON,
1011
NAVIGATION_MENU_PRIVACY_MODE_BUTTON,
1112
NAVIGATION_MENU_RECEIVE_BUTTON,
1213
NAVIGATION_MENU_REFERRAL_BUTTON,
14+
NAVIGATION_MENU_SCANNER_BUTTON,
1315
NAVIGATION_MENU_SUPPORT_BUTTON,
1416
NAVIGATION_MENU_VIP_BUTTON,
1517
NAVIGATION_MENU_WHY_OISY_BUTTON
@@ -30,6 +32,8 @@ describe('Menu', () => {
3032
const menuItemVipButtonSelector = `button[data-tid="${NAVIGATION_MENU_VIP_BUTTON}"]`;
3133
const menuItemGoldButtonSelector = `button[data-tid="${NAVIGATION_MENU_GOLD_BUTTON}"]`;
3234
const menuItemAddressBookSelector = `button[data-tid="${NAVIGATION_MENU_ADDRESS_BOOK_BUTTON}"]`;
35+
const menuItemScannerButtonSelector = `button[data-tid="${NAVIGATION_MENU_SCANNER_BUTTON}"]`;
36+
const menuItemPayButtonSelector = `button[data-tid="${NAVIGATION_MENU_PAY_BUTTON}"]`;
3337
const menuItemReferralButtonSelector = `button[data-tid="${NAVIGATION_MENU_REFERRAL_BUTTON}"]`;
3438
const menuItemWhyOisyButtonSelector = `button[data-tid="${NAVIGATION_MENU_WHY_OISY_BUTTON}"]`;
3539
const menuItemDocButtonSelector = `a[data-tid="${NAVIGATION_MENU_DOC_BUTTON}"]`;
@@ -120,6 +124,49 @@ describe('Menu', () => {
120124
await waitForElement({ selector: menuItemGoldButtonSelector, shouldExist: false });
121125
});
122126

127+
it('renders the scanner button in the menu', async () => {
128+
await openMenu();
129+
await waitForElement({ selector: menuItemScannerButtonSelector });
130+
});
131+
132+
it('renders the pay button in the menu', async () => {
133+
await openMenu();
134+
await waitForElement({ selector: menuItemPayButtonSelector });
135+
});
136+
137+
it('should open the universal scanner modal', async () => {
138+
const openUniversalScannerSpy = vi.spyOn(modalStore, 'openUniversalScanner');
139+
140+
await openMenu();
141+
await waitForElement({ selector: menuItemScannerButtonSelector });
142+
143+
const button: HTMLButtonElement | null =
144+
container.querySelector(menuItemScannerButtonSelector);
145+
146+
assertNonNullish(button);
147+
148+
button.click();
149+
150+
expect(openUniversalScannerSpy).toHaveBeenCalledExactlyOnceWith({
151+
id: expect.any(Symbol)
152+
});
153+
});
154+
155+
it('should open the pay dialog modal', async () => {
156+
const openPayDialogSpy = vi.spyOn(modalStore, 'openPayDialog');
157+
158+
await openMenu();
159+
await waitForElement({ selector: menuItemPayButtonSelector });
160+
161+
const button: HTMLButtonElement | null = container.querySelector(menuItemPayButtonSelector);
162+
163+
assertNonNullish(button);
164+
165+
button.click();
166+
167+
expect(openPayDialogSpy).toHaveBeenCalledExactlyOnceWith(expect.any(Symbol));
168+
});
169+
123170
it('renders the address book button in the menu', async () => {
124171
await openMenu();
125172
await waitForElement({ selector: menuItemAddressBookSelector });

0 commit comments

Comments
 (0)