[STR-639] String Checkout 2.0 Implementation

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "iframe-app",
-	"version": "1.1.1",
+	"version": "2.0.0",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev --host --port 4040",
@@ -16,7 +16,7 @@
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-node": "^1.2.3",
-		"@sveltejs/kit": "^1.15.8",
+		"@sveltejs/kit": "^1.20.0",
 		"@testing-library/jest-dom": "^5.16.5",
 		"@testing-library/svelte": "^3.2.2",
 		"@typescript-eslint/eslint-plugin": "^5.59.1",
@@ -32,19 +32,19 @@
 		"postcss": "^8.4.23",
 		"prettier": "^2.8.8",
 		"prettier-plugin-svelte": "^2.10.0",
-		"svelte": "^3.58.0",
+		"svelte": "^3.59.1",
 		"svelte-check": "^3.2.0",
 		"svelte-preprocess": "^5.0.3",
 		"tailwindcss": "^3.3.1",
-		"tslib": "^2.5.0",
+		"tslib": "^2.5.2",
 		"typescript": "^5.0.4",
-		"vite": "^4.3.2",
+		"vite": "^4.3.9",
 		"vitest": "^0.24.1"
 	},
 	"type": "module",
 	"dependencies": {
-		"@fingerprintjs/fingerprintjs-pro": "^3.8.1",
-		"@fontsource/lora": "^4.5.12",
+		"@fingerprintjs/fingerprintjs-pro": "^3.8.3",
+		"@fontsource/open-sauce-two": "^5.0.2",
 		"zod": "^3.21.4"
 	}
 }

src/app.css

@@ -1,10 +1,10 @@
-@import '@fontsource/lora';
+@import '@fontsource/open-sauce-two';
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 html {
-	font-family: 'Lora';
+	font-family: 'Open Sauce Two', sans-serif;
 	background-color: transparent !important;
 	user-select: none !important;
 }

src/app.d.ts

@@ -1,13 +1,6 @@
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
 // and what to do when importing types
-declare namespace App {
-	// interface Locals {}
-	// interface PageData {}
-	// interface Error {}
-	// interface Platform {}
-}
-
 declare global {
 	interface Window {
 		ethereum: any;

src/index.ts

@@ -1,8 +1,21 @@
-import Onboarding from './lib/modals/onboarding/Onboarding.svelte';
-
 import { Events, sendEvent, registerEvents, sdkEvents, type StringEvent } from '$lib/events/events';
 import { __user, modalManager, item } from '$lib/stores';
-import { parsePayload } from '$lib/utils';
+import { type IframePayload, zNFT, zUser } from '$lib/types';
+
+import AuthWallet from '$lib/modals/onboarding/AuthWallet.svelte';
+
+// Validate payload before it reaches the API so nothing breaks
+export const parsePayload = (payload: IframePayload) => {
+	try {
+		const nft = zNFT.parse(payload.nft);
+		const user = zUser.parse(payload.user);
+
+		return { item: nft, user }
+	} catch (e: any) {
+		console.debug("Error parsing payload", e);
+		alert("An unexpected error has occurred. Please try again.");
+	}
+}
 
 export const startIframe = async () => {
 	await registerEvents();
@@ -12,7 +25,8 @@ export const startIframe = async () => {
 
 		item.set(payload.item);
 		__user.set(payload.user);
-		modalManager.set(Onboarding);
+
+		modalManager.set(AuthWallet);
 	});
 
 	sendEvent(Events.IFRAME_READY);

src/lib/components/checkout/Address.svelte

@@ -1,13 +1,11 @@
 <script lang="ts">
 	import { __user } from '$lib/stores';
-	import { abbrev } from '$lib/utils';
+	import { abbrevAddr } from '$lib/utils';
 
 	$: address = $__user.walletAddress || 'No Wallet Connected';
+
 </script>
 
-<div class="addr">
-	<h2 class="text-md flex justify-between mt-5">
-		<span>Send to</span>
-		<span>{abbrev(address)}</span>
-	</h2>
+<div class="rounded-lg bg-primary py-1 px-2">
+	<span class="text-gray-blue-10 text-sm font-semibold">{abbrevAddr(address)}</span>
 </div>

src/lib/components/checkout/ItemSummary.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { item } from "$lib/stores";
+
+	import Address from "./Address.svelte";
+</script>
+
+<div class="flex justify-between bg-gray-blue-10 bg-opacity-40 rounded-2xl font-semibold w-full p-4">
+	<div class="flex justify-items-start w-3/4">
+		<img
+			src={$item.imageSrc}
+			alt={$item.imageAlt ?? "Item image"}
+			class="rounded-lg mr-4"
+			width="72px"
+			height="72px"
+		/>
+		<div class="select-text whitespace-nowrap w-3/4">
+			<p class="text-primary my-1 truncate">{$item.collection ?? ""}</p>
+			<p class="text-xl truncate">{$item.assetName}</p>
+		</div>
+	</div>
+	<div class="flex flex-col">
+		<span class="flex items-center text-gray-blue-100 ml-auto mb-2">
+			<img
+				src={`/assets/tokens/${$item.currency}.svg`}
+				alt={$item.currency + " Logo"}
+				class="inline mr-2"
+				width="16px"
+				height="16px"
+			/>
+
+			{$item.price}
+		</span>
+		<Address />
+	</div>
+</div>

src/lib/components/checkout/PaymentSelect.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+	import { modalManager, cardList, selectedCard } from "$lib/stores";
+	import { capitalize, formatExpiryDate, numericFilter } from "$lib/utils";
+
+	import StyledButton from "../shared/StyledButton.svelte";
+
+	import AddCard from "$lib/modals/checkout/AddCard.svelte";
+
+	export let cvvInput = '';
+
+	let cvvFocused = false;
+
+	let isCvvValid = true;
+
+	let isDDOpen = false;
+
+	const acceptedVendors = ["visa", "mastercard", "discover", "amex"];
+
+	const cardAssetPath = "/assets/cards/"
+	const ddAssetPath = "/assets/dropdown/";
+
+	// [src, alt text]
+	const radioChecked = [ddAssetPath + "radio_checked.svg", "radio-checked"];
+	const radioUnchecked = [ddAssetPath + "radio_unchecked.svg", "radio-unchecked"];
+
+	$: arrowIcon = ddAssetPath + (isDDOpen ? "up_arrow.svg" : "down_arrow.svg");
+
+	const getCardIcon = (scheme: string) => {
+		return cardAssetPath + (acceptedVendors.includes(scheme.toLowerCase()) ? scheme : "card") + ".svg";
+	}
+
+	const toggleDropdown = () => {
+		isDDOpen = !isDDOpen;
+	}
+
+	const gotoAddCard = () => {
+		modalManager.set(AddCard);
+	}
+
+</script>
+
+<div class="flex justify-between w-full">
+	{#if $cardList && $cardList.length > 0}
+		<div class="flex flex-col box w-3/4 p-4">
+			{#each $cardList as card}
+				{@const active = card == $selectedCard}
+				<div class="flex justify-between items-center">
+					<div class="flex">
+						<img src={active ? radioChecked[0] : radioUnchecked[0]} alt={active ? radioChecked[1] : radioUnchecked[1]} />
+						<img src={getCardIcon(card.scheme)} alt={card.scheme} class="mx-3"/>
+						<div class="flex flex-col">
+							<span class="text-gray-blue-80 font-semibold mb-1">{capitalize(card.scheme)} *{card.last4}</span>
+							{#if !card.expired}
+								<span class="text-gray-blue-40 text-sm font-medium">Expires on {formatExpiryDate(card)}</span>
+							{:else}
+								<span class="text-error text-sm font-medium">Expired {formatExpiryDate(card)}</span>
+							{/if}
+						</div>
+					</div>
+
+					<button on:click={toggleDropdown}>
+						<img src={arrowIcon} alt="arrow" />
+					</button>
+				</div>
+			{/each}
+		</div>
+	{:else}
+		<StyledButton
+			className="btn-primary-special !w-3/4"
+			action={gotoAddCard}
+		>
+		Add New Card
+		</StyledButton>
+	{/if}
+	{#if $selectedCard?.isSavedCard}
+		<div
+			class="flex box justify-between w-1/4 ml-4"
+			class:border-primary={cvvFocused}
+			class:border-error={!isCvvValid}
+		>
+			<input
+				class="cvv-input"
+				placeholder="CVV"
+				pattern="[0-9]"
+				bind:value={cvvInput}
+				on:keypress={(e) => numericFilter(e, cvvInput, 4)}
+				on:paste|preventDefault={() => false}
+				on:focus={() => cvvFocused = true}
+				on:blur={() => cvvFocused = false}
+			/>
+			<img src="/assets/cards/card.svg" alt="card" class="inline" width="32px" height="32px" />
+		</div>
+	{/if}
+</div>
+
+<style lang='postcss'>
+	.box {
+		@apply border;
+		@apply rounded-2xl;
+		@apply border-gray-blue-20;
+		@apply p-4;
+	}
+
+	.cvv-input {
+		@apply text-gray-blue-100;
+		@apply font-medium;
+		border: none;
+		outline: none;
+		width: 100%;
+	}
+
+	::placeholder {
+		@apply text-gray-blue-40;
+	}
+</style>