Merge branch 'main' into patch-checkout-localisation

Author: KukretiShubham

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@devprotocol/clubs-core",
-	"version": "3.24.3-beta.0",
+	"version": "3.26.6",
 	"description": "Core library for Clubs",
 	"main": "dist/index.mjs",
 	"exports": {
@@ -54,6 +54,16 @@
 		},
 		"./styles/variants": {
 			"default": "./src/styles/clubs.variants.scss"
+		},
+		"./redis": {
+			"import": "./dist/src/redis/index.mjs",
+			"require": "./dist/src/redis/index.cjs",
+			"types": "./redis.d.ts"
+		},
+		"./tailwind": {
+			"import": "./dist/src/tailwind/index.mjs",
+			"require": "./dist/src/tailwind/index.cjs",
+			"types": "./tailwind.d.ts"
 		}
 	},
 	"types": "./dist/clubs-core.d.ts",
@@ -94,8 +104,8 @@
 	"license": "MIT",
 	"dependencies": {
 		"@devprotocol/dev-kit": "8.7.0",
-		"@devprotocol/elements": "1.5.3",
-		"@devprotocol/hashi": "2.4.0-beta.0",
+		"@devprotocol/elements": "1.6.0",
+		"@devprotocol/hashi": "2.4.0-beta.3",
 		"@devprotocol/util-ts": "4.0.0",
 		"@ethersproject/abstract-provider": "^5.7.0",
 		"@metamask/detect-provider": "^2.0.0",
@@ -158,6 +168,7 @@
 		"prettier-plugin-tailwindcss": "^0.4.0",
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
+		"redis": "^4.7.0",
 		"rollup": "4.28.0",
 		"rollup-plugin-dts": "6.1.1",
 		"sass": "1.81.1",
@@ -182,6 +193,7 @@
 		"lit": "^2.3.1 || ^3.0.0",
 		"react": "^18.0.0",
 		"react-dom": "^18.0.0",
+		"redis": "^4.7.0",
 		"svelte": "^3.49.0 || ^4.0.0 || ^5.0.0",
 		"tailwindcss": "^3.2.4",
 		"vue": "^3.2.0"

rollup.config.mjs

@@ -8,6 +8,8 @@ const majorCoreAPIs = [
 	'dist/src/images/index.js',
 	'dist/src/connection/index.js',
 	'dist/src/styles/index.js',
+	'dist/src/redis/index.js',
+	'dist/src/tailwind/index.js',
 ]
 
 export const useSrc = ({ out, ext } = {}) => ({

src/redis/index.ts

@@ -0,0 +1,42 @@
+import { createClient } from 'redis'
+
+type Options = typeof createClient extends (...args: infer Params) => unknown
+	? Params
+	: never
+export const defaultClient = (options?: Options) =>
+	createClient({
+		url: import.meta.env.REDIS_URL,
+		username: import.meta.env.REDIS_USERNAME ?? '',
+		password: import.meta.env.REDIS_PASSWORD ?? '',
+		...options,
+	})
+
+type Redis = ReturnType<typeof defaultClient>
+
+export const Redis = (() => {
+	const instances: Map<string, Redis> = new Map()
+
+	const createInstance = (options?: Options) => {
+		// eslint-disable-next-line functional/no-expression-statements
+		console.log('$$$$$', 'new redis connection will be created')
+		return defaultClient(options)
+	}
+
+	return {
+		client: async (params?: { key?: string; options: Options }) => {
+			const key = params?.key ?? ''
+			const fromCache = instances.get(key)
+			const instance = fromCache
+				? fromCache
+				: (instances
+						.set(key, createInstance(params?.options))
+						.get(key) as Redis)
+			// eslint-disable-next-line functional/no-conditional-statements
+			if (instance.isOpen === false) {
+				// eslint-disable-next-line functional/no-expression-statements
+				await instance.connect()
+			}
+			return instance
+		},
+	}
+})()

src/styles/build/global.css

@@ -98,15 +98,6 @@
   --hs-shadow-color: rgba(0, 0, 0, 0.15);
 }
 
-*,
-:before,
-:after {
-  margin: 0;
-  padding: 0;
-  color: inherit;
-  box-sizing: inherit;
-}
-
 h1,
 h2,
 h3,
@@ -119,15 +110,16 @@ h6 {
   line-height: inherit;
 }
 
+/*
 p,
 span,
 a {
-  font-family: var(--hs-theme-body-family);
-  font-size: var(--hs-theme-body-size);
-  font-weight: var(--hs-theme-body-weight);
-  line-height: var(--hs-theme-body-line-height);
+  font-family: hs-core.token-get('body-family');
+  font-size: hs-core.token-get('body-size');
+  font-weight: hs-core.token-get('body-weight');
+  line-height: hs-core.token-get('body-line-height');
 }
-
+*/
 a {
   text-decoration: none;
 }
@@ -151,10 +143,6 @@ code * {
   line-height: var(--hs-theme-mono-line-height);
 }
 
-dialog {
-  all: unset;
-}
-
 html {
   width: 100%;
   height: 100%;

src/styles/build/global.css.map

@@ -17,3 +17,5 @@ export const clubs = {
 	},
 	plugins: [containerQueries],
 }
+
+export default clubs

src/tailwind/index.ts

@@ -599,7 +599,7 @@ onUnmounted(() => {
 
 					<span
 						v-if="!previewVideoSrc"
-						class="size-24 rounded-lg border border-black/20 bg-black/10 p-1"
+						class="h-auto min-h-24 w-24 rounded-lg border border-black/20 bg-black/10 p-1"
 					>
 						<img
 							v-if="previewImageSrc"
@@ -629,7 +629,7 @@ onUnmounted(() => {
 				<aside
 					v-if="htmlDescription"
 					v-html="htmlDescription"
-					class="prose-hr:my-5 opacity-50"
+					class="prose-hr:my-5"
 					:class="ProseTextInherit"
 				></aside>
 

src/ui/components/Checkout/Checkout.vue

@@ -4,7 +4,7 @@ import { Strings } from './i18n'
 import Skeleton from '../Skeleton/Skeleton.vue'
 import { ProseTextInherit } from '../../../constants'
 import { computed, onMounted, ref, useTemplateRef } from 'vue'
-import { UndefinedOr } from '@devprotocol/util-ts'
+import type { UndefinedOr } from '@devprotocol/util-ts'
 import Spinner from '../../../layouts/components/Spinner.vue'
 // @ts-ignore
 import VideoFetch from '../../vue/VideoFetch.vue'
@@ -22,6 +22,7 @@ const props = defineProps<{
 const cronCalling = ref<UndefinedOr<Promise<UndefinedOr<Response>>>>()
 const clicked = ref(false)
 const cronFinished = ref(false)
+const eoa = ref(props.eoa)
 
 const imageRef = useTemplateRef(`imageRef`)
 
@@ -30,11 +31,11 @@ let i18n = i18nBase(['en'])
 
 const passportPageUrl = computed(() =>
 	window.location.hostname.includes('prerelease.clubs.place')
-		? `https://prerelease.clubs.place/passport/${props.eoa ?? ''}/edit`
+		? `https://prerelease.clubs.place/passport/${eoa.value ?? ''}/edit`
 		: window.location.hostname.includes('clubs.place')
-		? `https://clubs.place/passport/${props.eoa ?? ''}/edit`
+		? `https://clubs.place/passport/${eoa.value ?? ''}/edit`
 		: `http://localhost:${window.location.port}/passport/${
-				props.eoa ?? ''
+				eoa.value ?? ''
 		  }/edit`
 )
 
@@ -64,6 +65,12 @@ onMounted(async () => {
 	} catch (error) {
 		console.error('Error loading image:', error)
 	}
+	if (eoa.value === undefined) {
+		const C = await import('../../../connection/connection')
+		C.connection().account.subscribe((acc) => {
+			eoa.value = acc
+		})
+	}
 })
 </script>
 
@@ -140,8 +147,28 @@ onMounted(async () => {
 
 <template>
 	<div
-		class="m-auto w-full max-w-screen-lg rounded-xl bg-white p-4 text-black shadow @container/clb_result_modal"
+		class="relative w-full max-w-screen-lg rounded-xl bg-white p-4 text-black shadow @container/clb_result_modal"
 	>
+		<a
+			:href="props.base ?? '/'"
+			class="absolute -right-10 -top-10 flex h-8 w-8 items-center justify-center hover:bg-none"
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-6 w-6"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="white"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M6 18L18 6M6 6l12 12"
+				/>
+			</svg>
+		</a>
+
 		<div
 			class="bg-color-navy relative mb-6 flex h-auto min-h-52 w-full flex-col items-center justify-center overflow-hidden rounded-md border border-black p-2 @xl/clb_result_modal:h-96 @xl/clb_result_modal:min-h-0 @xl/clb_result_modal:p-8"
 		>
@@ -159,12 +186,13 @@ onMounted(async () => {
 			<img
 				v-if="imageSrc"
 				ref="imageRef"
-				class="z-10 max-h-60 min-h-full max-w-60 object-contain @xl/clb_result_modal:max-h-none @xl/clb_result_modal:max-w-xl"
+				class="z-10 max-h-60 min-h-full max-w-60 rounded-md object-contain @xl/clb_result_modal:max-h-none @xl/clb_result_modal:max-w-xl"
 			/>
 			<!-- video -->
 			<VideoFetch
 				v-if="!imageSrc && videoSrc"
-				class="max-w-60 rounded"
+				class="aspect-[1/1] max-w-60 rounded-md"
+				video-class="rounded-md [&>video]:rounded-md"
 				:url="videoSrc"
 			/>
 			<span class="text-base italic text-white">
@@ -210,7 +238,7 @@ onMounted(async () => {
 					:href="props.base ?? '/'"
 					class="hs-button is-filled rounded-lg border px-12 py-4 text-base @4xl/clb_result_modal:py-6"
 				>
-					{{ i18n('Home') }}
+					{{ i18n('ContinueShopping') }}
 				</a>
 				<button
 					v-if="false /* HIDDEN FOR NOW */"