feat(frontend): implements feature

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

@@ -7,6 +7,7 @@
 	import AboutWhyOisy from '$lib/components/about/AboutWhyOisy.svelte';
 	import MenuAddresses from '$lib/components/core/MenuAddresses.svelte';
 	import SignOut from '$lib/components/core/SignOut.svelte';
+	import IconBinance from '$lib/components/icons/IconBinance.svelte';
 	import IconGitHub from '$lib/components/icons/IconGitHub.svelte';
 	import IconVipQr from '$lib/components/icons/IconVipQr.svelte';
 	import IconShare from '$lib/components/icons/lucide/IconShare.svelte';
@@ -24,7 +25,8 @@
 		NAVIGATION_MENU,
 		NAVIGATION_MENU_VIP_BUTTON,
 		NAVIGATION_MENU_REFERRAL_BUTTON,
-		NAVIGATION_MENU_ADDRESS_BOOK_BUTTON
+		NAVIGATION_MENU_ADDRESS_BOOK_BUTTON,
+		NAVIGATION_MENU_GOLD_BUTTON
 	} from '$lib/constants/test-ids.constants';
 	import { authIdentity } from '$lib/derived/auth.derived';
 	import { QrCodeType } from '$lib/enums/qr-code-types';
@@ -42,9 +44,10 @@
 	let button: HTMLButtonElement | undefined;
 
 	let isVip = false;
+	let isGold = false;
 	onMount(async () => {
 		if (nonNullish($authIdentity)) {
-			({ is_vip: isVip } = await getUserRoles({ identity: $authIdentity }));
+			({ is_vip: isVip, is_gold: isGold } = await getUserRoles({ identity: $authIdentity }));
 		}
 	});
 
@@ -107,6 +110,17 @@
 			{$i18n.navigation.text.refer_a_friend}
 		</ButtonMenu>
 
+		{#if isGold}
+			<ButtonMenu
+				ariaLabel={$i18n.navigation.alt.binance_qr_code}
+				testId={NAVIGATION_MENU_GOLD_BUTTON}
+				on:click={() => modalStore.openVipQrCode(QrCodeType.GOLD)}
+			>
+				<IconBinance size="20" />
+				{$i18n.navigation.text.binance_qr_code}
+			</ButtonMenu>
+		{/if}
+
 		{#if isVip}
 			<ButtonMenu
 				ariaLabel={$i18n.navigation.alt.vip_qr_code}

src/frontend/src/lib/components/icons/IconBinance.svelte

@@ -0,0 +1,31 @@
+<!-- source: DFINITY foundation -->
+<script lang="ts">
+	export let size = '24';
+</script>
+
+<svg width={size} height={size} viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<g clip-path="url(#clip0_10767_21883)">
+		<path
+			d="M11 22C17.0751 22 22 17.0751 22 11C22 4.92487 17.0751 0 11 0C4.92487 0 0 4.92487 0 11C0 17.0751 4.92487 22 11 22Z"
+			fill="currentColor"
+		/>
+		<g class="logo">
+			<path
+				d="M8.32975 9.90275L11 7.2325L13.6716 9.90413L15.2254 8.35038L11 4.125L6.776 8.349L8.32975 9.90275ZM4.125 11L5.67875 9.44625L7.2325 11L5.67875 12.5538L4.125 11ZM8.32975 12.0973L11 14.7675L13.6716 12.0959L15.2254 13.6489L11 17.875L6.776 13.651L6.77394 13.6489L8.32975 12.0973ZM14.7675 11L16.3212 9.44625L17.875 11L16.3212 12.5538L14.7675 11ZM12.5758 10.9986H12.5771V11L11 12.5771L9.42494 11.0027L9.42219 11L9.42494 10.9979L9.70062 10.7216L9.83469 10.5875L11 9.42288L12.5764 10.9993L12.5758 10.9986Z"
+			/>
+		</g>
+	</g>
+</svg>
+
+<style lang="scss">
+	:root {
+		--logo-fill-color: white;
+	}
+	:root[theme='dark'] {
+		--logo-fill-color: black;
+	}
+
+	.logo {
+		fill: var(--logo-fill-color);
+	}
+</style>

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

@@ -1,6 +1,7 @@
 export const NAVIGATION_MENU_BUTTON = 'navigation-menu-button';
 export const NAVIGATION_MENU = 'navigation-menu';
 export const NAVIGATION_MENU_VIP_BUTTON = 'navigation-menu-vip-button';
+export const NAVIGATION_MENU_GOLD_BUTTON = 'navigation-menu-gold-button';
 export const NAVIGATION_MENU_REFERRAL_BUTTON = 'navigation-menu-referral-button';
 export const NAVIGATION_MENU_ADDRESS_BOOK_BUTTON = 'navigation-menu-address-book-button';
 

src/frontend/src/lib/i18n/en.json

@@ -53,6 +53,7 @@
 			"support": "Support",
 			"confirm_navigate": "Are you sure you want to navigate away?",
 			"vip_qr_code": "VIP QR codes",
+			"binance_qr_code": "Binance Clubhouse QR",
 			"refer_a_friend": "Refer your friends",
 			"address_book": "Address book"
 		},
@@ -69,6 +70,7 @@
 			"support": "Open the Support section of the $oisy_name documentation",
 			"open_twitter": "Open the DFINITY X/Twitter feed",
 			"vip_qr_code": "Generate an invitation link",
+			"binance_qr_code": "Generate a binance clubhouse link",
 			"refer_a_friend": "Generate a referral link for a friend",
 			"address_book": "Open address book"
 		},

src/frontend/src/lib/types/i18n.d.ts

@@ -49,6 +49,7 @@ interface I18nNavigation {
 		support: string;
 		confirm_navigate: string;
 		vip_qr_code: string;
+		binance_qr_code: string;
 		refer_a_friend: string;
 		address_book: string;
 	};
@@ -65,6 +66,7 @@ interface I18nNavigation {
 		support: string;
 		open_twitter: string;
 		vip_qr_code: string;
+		binance_qr_code: string;
 		refer_a_friend: string;
 		address_book: string;
 	};

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

@@ -5,6 +5,7 @@ import Menu from '$lib/components/core/Menu.svelte';
 import {
 	NAVIGATION_MENU_ADDRESS_BOOK_BUTTON,
 	NAVIGATION_MENU_BUTTON,
+	NAVIGATION_MENU_GOLD_BUTTON,
 	NAVIGATION_MENU_REFERRAL_BUTTON,
 	NAVIGATION_MENU_VIP_BUTTON
 } from '$lib/constants/test-ids.constants';
@@ -15,6 +16,7 @@ import { render, waitFor } from '@testing-library/svelte';
 describe('Menu', () => {
 	const menuButtonSelector = `button[data-tid="${NAVIGATION_MENU_BUTTON}"]`;
 	const menuItemVipButtonSelector = `button[data-tid="${NAVIGATION_MENU_VIP_BUTTON}"]`;
+	const menuItemGoldButtonSelector = `button[data-tid="${NAVIGATION_MENU_GOLD_BUTTON}"]`;
 	const menuItemAddressBookSelector = `button[data-tid="${NAVIGATION_MENU_ADDRESS_BOOK_BUTTON}"]`;
 	const menuItemReferralButtonSelector = `button[data-tid="${NAVIGATION_MENU_REFERRAL_BUTTON}"]`;
 
@@ -79,6 +81,18 @@ describe('Menu', () => {
 		await waitForElement({ selector: menuItemVipButtonSelector, shouldExist: false });
 	});
 
+	it('renders the gold menu item', async () => {
+		vi.spyOn(rewardApi, 'getUserInfo').mockResolvedValue(mockUserData(['gold']));
+
+		await openMenu();
+		await waitForElement({ selector: menuItemGoldButtonSelector });
+	});
+
+	it('does not render the gold menu item', async () => {
+		await openMenu();
+		await waitForElement({ selector: menuItemGoldButtonSelector, shouldExist: false });
+	});
+
 	it('renders the address book button when ADDRESS_BOOK_ENABLED is true', async () => {
 		vi.spyOn(addressBookEnv, 'ADDRESS_BOOK_ENABLED', 'get').mockReturnValue(true);