feat(frontend): implements feature

dfx.json

@@ -448,8 +448,8 @@
 		},
 		"rewards": {
 			"type": "custom",
-			"candid": "https://github.com/dfinity/oisy-wallet/releases/download/rc0.3.1/rewards.did",
-			"wasm": "https://github.com/dfinity/oisy-wallet/releases/download/rc0.3.1/rewards.wasm.gz",
+			"candid": "https://github.com/dfinity/oisy-wallet/releases/download/rc0.4.0-api.1/rewards.did",
+			"wasm": "https://github.com/dfinity/oisy-wallet/releases/download/rc0.4.0-api.1/rewards.wasm.gz",
 			"remote": {
 				"id": {
 					"ic": "nynz6-haaaa-aaaan-qzqda-cai",

scripts/did.update.types.mjs

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 
 import { existsSync, readdirSync } from 'node:fs';
-import { open, readFile, rename, rm, writeFile } from 'node:fs/promises';
+import { readFile, rename, rm, writeFile } from 'node:fs/promises';
 import { join } from 'node:path';
 
 const deleteIndexes = async ({ dest = `./src/declarations` }) => {
@@ -50,13 +50,7 @@
 export const init = ({ IDL }) => {`
 					);
 
-					// Open the file for writing only if it does not already exist (wx flag).
-					// This avoids a potential file system race condition warning.
-					const fd = await open(factoryPath, 'wx');
-
-					await writeFile(fd, cleanInit, 'utf8');
-
-					await fd.close();
+					await writeFile(factoryPath, cleanInit, 'utf8');
 
 					resolve();
 				};

src/frontend/src/lib/api/reward.api.ts

@@ -1,4 +1,5 @@
 import type {
+	ClaimedVipReward,
 	ClaimVipRewardResponse,
 	NewVipRewardResponse,
 	ReferrerInfo,
@@ -25,11 +26,14 @@
 };
 
 export const getNewVipReward = async ({
+	rewardType,
 	identity
-}: CanisterApiFunctionParams): Promise<NewVipRewardResponse> => {
+}: CanisterApiFunctionParams<{
+	rewardType: ClaimedVipReward;
+}>): Promise<NewVipRewardResponse> => {
 	const { getNewVipReward } = await rewardCanister({ identity });
 
-	return getNewVipReward();
+	return getNewVipReward(rewardType);
 };
 
 export const claimVipReward = async ({

src/frontend/src/lib/canisters/reward.canister.ts

@@ -1,5 +1,6 @@
 import type {
 	ClaimVipRewardResponse,
+	ClaimedVipReward,
 	NewVipRewardResponse,
 	ReferrerInfo,
 	_SERVICE as RewardService,
@@ -39,10 +40,10 @@
 		return user_info();
 	};
 
-	getNewVipReward = (): Promise<NewVipRewardResponse> => {
+	getNewVipReward = (rewardType: ClaimedVipReward): Promise<NewVipRewardResponse> => {
 		const { new_vip_reward } = this.caller({ certified: true });
 
-		return new_vip_reward();
+		return new_vip_reward(rewardType);
 	};
 
 	claimVipReward = (vipReward: VipReward): Promise<ClaimVipRewardResponse> => {

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,10 +25,12 @@
 		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 { isVipUser } from '$lib/services/reward.services';
+	import { QrCodeType } from '$lib/enums/qr-code-types';
+	import { getUserRoles } from '$lib/services/reward.services';
 	import { i18n } from '$lib/stores/i18n.store';
 	import { modalStore } from '$lib/stores/modal.store';
 	import {
@@ -41,13 +44,10 @@
 	let button: HTMLButtonElement | undefined;
 
 	let isVip = false;
+	let isGold = false;
 	onMount(async () => {
 		if (nonNullish($authIdentity)) {
-			isVip = (
-				await isVipUser({
-					identity: $authIdentity
-				})
-			).success;
+			({ is_vip: isVip, is_gold: isGold } = await getUserRoles({ identity: $authIdentity }));
 		}
 	});
 
@@ -110,11 +110,22 @@
 			{$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}
 				testId={NAVIGATION_MENU_VIP_BUTTON}
-				on:click={modalStore.openVipQrCode}
+				on:click={() => modalStore.openVipQrCode(QrCodeType.VIP)}
 			>
 				<IconVipQr size="20" />
 				{$i18n.navigation.text.vip_qr_code}

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { nonNullish } from '@dfinity/utils';
 	import HideTokenModal from '$eth/components/tokens/HideTokenModal.svelte';
 	import IcHideTokenModal from '$icp/components/tokens/IcHideTokenModal.svelte';
 	import AddressBookModal from '$lib/components/address-book/AddressBookModal.svelte';
@@ -16,7 +17,8 @@
 		modalRewardDetails,
 		modalSettingsState,
 		modalReferralCode,
-		modalAddressBook
+		modalAddressBook,
+		modalVipQrCodeData
 	} from '$lib/derived/modal.derived';
 
 	/**
@@ -33,8 +35,8 @@
 		<DappModalDetails />
 	{:else if $modalRewardDetails}
 		<AirdropModalDetails />
-	{:else if $modalVipQrCode}
-		<VipQrCodeModal />
+	{:else if $modalVipQrCode && nonNullish($modalVipQrCodeData)}
+		<VipQrCodeModal codeType={$modalVipQrCodeData} />
 	{:else if $modalSettingsState}
 		<SettingsModal />
 	{:else if $modalReferralCode}

src/frontend/src/lib/components/guard/UrlGuard.svelte

@@ -3,7 +3,8 @@
 	import { page } from '$app/stores';
 	import VipRewardStateModal from '$lib/components/qr/VipRewardStateModal.svelte';
 	import { authIdentity } from '$lib/derived/auth.derived';
-	import { modalVipRewardState } from '$lib/derived/modal.derived';
+	import { modalVipRewardState, modalVipRewardStateData } from '$lib/derived/modal.derived';
+	import { QrCodeType } from '$lib/enums/qr-code-types';
 	import { claimVipReward, setReferrer } from '$lib/services/reward.services';
 	import { loading } from '$lib/stores/loader.store';
 	import { modalStore } from '$lib/stores/modal.store';
@@ -16,7 +17,7 @@
 				const result = await claimVipReward({ identity: $authIdentity, code: rewardCode });
 
 				removeSearchParam({ url: $page.url, searchParam: 'code' });
-				modalStore.openVipRewardState(result.success);
+				modalStore.openVipRewardState({ success: result.success, codeType: QrCodeType.VIP });
 			}
 		}
 
@@ -31,13 +32,13 @@
 			}
 		}
 	})();
-
-	let rewardState: boolean | undefined;
-	$: rewardState = $modalVipRewardState ? ($modalStore?.data as boolean | undefined) : undefined;
 </script>
 
 <slot />
 
-{#if nonNullish(rewardState)}
-	<VipRewardStateModal isSuccessful={rewardState} />
+{#if $modalVipRewardState && nonNullish($modalVipRewardStateData)}
+	<VipRewardStateModal
+		isSuccessful={$modalVipRewardStateData.success}
+		codeType={$modalVipRewardStateData.codeType}
+	/>
 {/if}

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

@@ -1,5 +1,16 @@
 <!-- source: DFINITY foundation -->
-<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<script lang="ts">
+	export let testId: string | undefined = undefined;
+</script>
+
+<svg
+	width="44"
+	height="44"
+	viewBox="0 0 44 44"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	data-tid={testId}
+>
 	<g class="text-brand-primary">
 		<circle cx="22" cy="22" r="22" fill="currentColor" />
 	</g>

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/components/icons/IconBinanceYellow.svelte

@@ -0,0 +1,27 @@
+<!-- source: DFINITY foundation -->
+<script lang="ts">
+	export let size = '24';
+	export let testId: string | undefined = undefined;
+</script>
+
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 22 22"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	data-tid={testId}
+>
+	<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="#F3BA2F"
+		/>
+		<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"
+				fill="white"
+			/>
+		</g>
+	</g>
+</svg>

src/frontend/src/lib/components/qr/VipQrCodeModal.svelte

@@ -3,25 +3,31 @@
 	import { isNullish, nonNullish } from '@dfinity/utils';
 	import { onDestroy, onMount } from 'svelte';
 	import IconAstronautHelmet from '$lib/components/icons/IconAstronautHelmet.svelte';
+	import IconBinanceYellow from '$lib/components/icons/IconBinanceYellow.svelte';
 	import ReceiveCopy from '$lib/components/receive/ReceiveCopy.svelte';
 	import Button from '$lib/components/ui/Button.svelte';
 	import ButtonCloseModal from '$lib/components/ui/ButtonCloseModal.svelte';
 	import ButtonGroup from '$lib/components/ui/ButtonGroup.svelte';
 	import ContentWithToolbar from '$lib/components/ui/ContentWithToolbar.svelte';
 	import SkeletonText from '$lib/components/ui/SkeletonText.svelte';
-	import { VIP_CODE_REGENERATE_INTERVAL_IN_SECONDS } from '$lib/constants/app.constants';
+	import { CODE_REGENERATE_INTERVAL_IN_SECONDS } from '$lib/constants/app.constants';
 	import {
 		VIP_CODE_REGENERATE_BUTTON,
-		VIP_QR_CODE_COPY_BUTTON
+		VIP_QR_CODE_BINANCE_ICON,
+		VIP_QR_CODE_COPY_BUTTON,
+		VIP_QR_CODE_ICON
 	} from '$lib/constants/test-ids.constants';
 	import { authIdentity } from '$lib/derived/auth.derived';
+	import { QrCodeType } from '$lib/enums/qr-code-types';
 	import { nullishSignOut } from '$lib/services/auth.services';
 	import { getNewReward } from '$lib/services/reward.services';
 	import { i18n } from '$lib/stores/i18n.store';
 	import { modalStore } from '$lib/stores/modal.store';
 	import { replacePlaceholders } from '$lib/utils/i18n.utils';
 
-	let counter = VIP_CODE_REGENERATE_INTERVAL_IN_SECONDS;
+	export let codeType: QrCodeType = QrCodeType.VIP;
+
+	let counter = CODE_REGENERATE_INTERVAL_IN_SECONDS;
 	let countdown: NodeJS.Timeout | undefined;
 	const maxRetriesToGetRewardCode = 3;
 	let retriesToGetRewardCode = 0;
@@ -33,7 +39,7 @@
 			return;
 		}
 
-		const vipReward = await getNewReward($authIdentity);
+		const vipReward = await getNewReward({ campaignId: 'vip', identity: $authIdentity });
 		if (nonNullish(vipReward)) {
 			code = vipReward.code;
 		} else {
@@ -49,7 +55,7 @@
 		}
 
 		await generateCode();
-		counter = VIP_CODE_REGENERATE_INTERVAL_IN_SECONDS;
+		counter = CODE_REGENERATE_INTERVAL_IN_SECONDS;
 		countdown = setInterval(intervalFunction, 1000);
 	};
 
@@ -80,15 +86,23 @@
 
 <Modal on:nnsClose={modalStore.close}>
 	<svelte:fragment slot="title"
-		><span class="text-xl">{$i18n.vip.invitation.text.title}</span>
+		><span class="text-xl"
+			>{codeType === QrCodeType.VIP
+				? $i18n.vip.invitation.text.title
+				: $i18n.vip.invitation.text.binance_title}</span
+		>
 	</svelte:fragment>
 
 	<ContentWithToolbar>
 		<div class="mx-auto mb-8 aspect-square h-80 max-h-[44vh] max-w-full rounded-xl bg-white p-4">
 			{#if nonNullish(code)}
 				<QRCode value={qrCodeUrl}>
-					<div slot="logo" class="flex items-center justify-center rounded-lg bg-primary p-2">
-						<IconAstronautHelmet />
+					<div slot="logo" class="flex items-center justify-center rounded-full bg-primary p-2">
+						{#if codeType === QrCodeType.VIP}
+							<IconAstronautHelmet testId={VIP_QR_CODE_ICON} />
+						{:else}
+							<IconBinanceYellow size="44" testId={VIP_QR_CODE_BINANCE_ICON} />
+						{/if}
 					</div>
 				</QRCode>
 			{/if}