support debug mode

.env.example

@@ -1,46 +1,6 @@
-# Redis.
+PUBLIC_POP_CLIENT_KEY=
+POP_SERVER_KEY=
+SEND_DEVPROTOCOL_API_KEY=
 REDIS_URL=
 REDIS_USERNAME=
 REDIS_PASSWORD=
-
-# Market auths.
-PUBLIC_DISCORD_CLIENT_ID=
-PUBLIC_DISCORD_CLIENT_SECRET=
-
-PUBLIC_YOUTUBE_CLIENT_ID=
-
-# FIREBASE
-PUBLIC_FIREBASE_APP_ID=
-PUBLIC_FIREBASE_API_KEY=
-PUBLIC_FIREBASE_PROJECT_ID=
-PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
-PUBLIC_FIREBASE_CALLBACK_SIGNIN_URL="http://localhost:3000/signin/authentication"
-
-# Web3.
-PUBLIC_ALCHEMY_KEY=
-PUBLIC_WEB3_PROVIDER_URL=
-PUBLIC_DYNAMIC_ENVIRONMENT_ID=
-PUBLIC_WALLET_CONNECT_PROJECT_ID=
-
-# Imgur.
-PUBLIC_IMGUR_CLIENT_ID=
-PUBLIC_IMGUR_CLIENT_SECRET=
-
-# Email.
-SENDGRID_API_KEY=
-SENDGRID_FROM_EMAIL=
-PUBLIC_EMAIL_AUTH_ENDPOINT=
-PUBLIC_GATED_CONTACT_FORM_SENDGRID_ENV_KEY='SENDGRID_API_KEY'
-
-# Misc.
-SALT=
-SEND_TX_API_KEY=
-SEND_DEVPROTOCOL_API_KEY=
-CREATOR_CLUBS_CREATION_LIMIT='3'
-
-# KYC.
-PUBLIC_ONDATO_VERIFICATION_URL=
-
-# Mock Achievements.
-MOCK_ACHIEVEMENTS_API_MESSAGE=
-MOCK_ACHIEVEMENTS_ADMIN_SIGNATURE=

.preview/config.ts

@@ -1,3 +1,4 @@
+/* eslint-disable functional/functional-parameters */
 import { encode } from '@devprotocol/clubs-core'
 
 export default () =>
@@ -6,18 +7,55 @@ export default () =>
     twitterHandle: '@debug',
     description: '',
     url: '',
-    propertyAddress: '',
+    propertyAddress: '0xF5fb43b4674Cc8D07FB45e53Dc77B651e17dC407',
     chainId: 137,
     rpcUrl: 'https://polygon-rpc.com/',
-    adminRolePoints: 50,
+    adminRolePoints: 0,
     plugins: [
       {
         id: 'example-theme',
         options: [],
       },
       {
         id: 'devprotocol:clubs:plugin:clubs-payments',
-        options: [],
+        options: [
+          { key: 'debug', value: true },
+          {
+            key: 'override',
+            value: [
+              {
+                id: 'id',
+                importFrom: 'devprotocol:clubs:simple-memberships',
+                key: 'memberships',
+                payload: new Uint8Array([0, 1, 2]), // 0xf84a97f1f0a956e738abd85c2e0a5026f8874e3ec09c8f012159dfeeaab2b156
+                price: {
+                  yen: 2000,
+                },
+              },
+            ],
+          },
+        ],
+      },
+      {
+        id: 'devprotocol:clubs:simple-memberships',
+        name: 'memberships',
+        enable: true,
+        options: [
+          {
+            key: 'memberships',
+            value: [
+              {
+                id: 'id',
+                name: 'Debug',
+                description: 'Debug',
+                price: 0.000001,
+                currency: 'MATIC',
+                imageSrc: 'https://i.imgur.com/4Qc8iDc.png',
+                payload: new Uint8Array([0, 1, 2]), // 0xf84a97f1f0a956e738abd85c2e0a5026f8874e3ec09c8f012159dfeeaab2b156
+              },
+            ],
+          },
+        ],
       },
     ],
   })

.preview/plugins.ts

@@ -1,4 +1,8 @@
 import theme from './theme'
 import thisPlugin from '../src/index'
 
-export default [theme, thisPlugin]
+export default [
+  theme,
+  thisPlugin,
+  { meta: { id: 'devprotocol:clubs:simple-memberships' } },
+]

.preview/preview.ssr/src/env.d.ts

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/triple-slash-reference */
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
 
 declare module '*.astro' {

.preview/theme/Connect.vue

@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue'
+import { BrowserProvider } from 'ethers'
+import { connection } from '@devprotocol/clubs-core/connection'
+
+const walletAddress = ref<string | undefined>('')
+
+const handleConnection = async () => {
+  const signer = connection().signer.value
+  if (!signer) {
+    return
+  }
+
+  // get wallet address
+  const connectedAddress = await signer.getAddress()
+  walletAddress.value = connectedAddress
+}
+
+onMounted(() => {
+  connection().signer.subscribe(handleConnection)
+})
+
+const onClick = async () => {
+  try {
+    const eth = (window as any).ethereum
+    await eth.send('eth_requestAccounts')
+    connection().setEip1193Provider(eth, BrowserProvider)
+  } catch (error) {
+    console.error(error)
+  }
+}
+</script>
+
+<template>
+  <span>
+    <button
+      v-if="!walletAddress"
+      class="rounded-3xl w-full border border-transparent bg-blue-600 px-8 py-2 text-base text-white shadow-sm focus:outline-none"
+      @click="onClick"
+    >
+      Wallet connect
+    </button>
+  </span>
+</template>

.preview/theme/Default.astro

@@ -1,16 +1,23 @@
 ---
+import { ClubsSlotName } from '@devprotocol/clubs-core'
 import '@devprotocol/clubs-core/styles'
+import Connect from './Connect.vue'
 ---
 
 <!doctype html>
-<html class="dark" lang="en">
+<html class="bg-gray-100" lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width" />
   </head>
 
   <body>
     <main>
+      <span class="container mx-auto flex justify-end">
+        <span class="inline-block">
+          <Connect client:only="vue" slot={ClubsSlotName.ConnectButton} />
+        </span>
+      </span>
       <slot />
     </main>
   </body>

README.md

@@ -1,53 +1,7 @@
-## development
+## Clubs Payments
 
-Install Dependencies:
+### Development
 
-```bash
-yarn install
-```
+Accessing the following local URL, you can debug the Checkout flow with the ClubsConfigration in `.preview/config.ts`.
 
-Start the app:
-
-```bash
-yarn dev
-```
-
-## releases
-
-Use `npm version` to manage git tags and update hosted Clubs by publishing them as GitHub Releases.
-
-```bash
-npm version [patch|minor|major]
-git push && git push --tags
-```
-
-Semantic versioning can basically be determined by the following rules:
-
-| command               | when                                               |
-| --------------------- | -------------------------------------------------- |
-| npm version **patch** | Bug fixes, Updates without changing functionality. |
-| npm version **minor** | Updates without breaking changes.                  |
-| npm version **major** | Major updates with breaking changes.               |
-
-### pre-release
-
-Changes to the `main` branch are always automatically deployed as prereleases.
-
-## setup env file
-
-example:
-
-```
-REDIS_USERNAME=default
-REDIS_PASSWORD=my-redis-password
-REDIS_URL='redis://redis....com:16141'
-```
-
-## populate Redis with tenants
-
-Once you have set the Redis env variables, you are ready to populate your database.
-You can do this by running `yarn run populate`.
-
-## copy clubs from the production
-
-For debugging purposes, you can copy the production configuration to a locally connected Redis by running `yarn copy --club CLUB_TENANT_ID`.
+http://localhost:4321/fiat/yen/0xf84a97f1f0a956e738abd85c2e0a5026f8874e3ec09c8f012159dfeeaab2b156

package.json

@@ -19,9 +19,10 @@
     "@astrojs/svelte": "5.7.2",
     "@astrojs/tailwind": "5.1.1",
     "@astrojs/vue": "4.5.2",
-    "@devprotocol/clubs-core": "3.21.1",
+    "@devprotocol/clubs-core": "3.22.0",
     "@eslint/js": "^9.13.0",
     "@rollup/plugin-typescript": "^12.1.1",
+    "@tailwindcss/typography": "^0.5.15",
     "@types/dotenv": "8.2.0",
     "@types/eslint__js": "^8.42.3",
     "@types/jsonwebtoken": "^9.0.7",
@@ -43,6 +44,7 @@
     "prettier-plugin-svelte": "3.2.7",
     "prettier-plugin-tailwindcss": "0.6.8",
     "rollup": "^4.24.2",
+    "sass": "^1.80.4",
     "svelte": "4.2.19",
     "svelte-check": "^4.0.0",
     "tailwindcss": "^3.3.3",

src/Id.astro

@@ -6,12 +6,13 @@ import { Checkout } from '@devprotocol/clubs-core/ui/components'
 import { i18nFactory } from '@devprotocol/clubs-core'
 import { Strings } from './i18n'
 
-const { item, propertyAddress, rpcUrl, chainId, ...other } =
+const { item, propertyAddress, rpcUrl, chainId, debugMode, ...other } =
   Astro.props as ClubsPropsPages & {
     item: ComposedItem
     propertyAddress: string
     rpcUrl: string
     chainId: number
+    debugMode: boolean
   }
 
 const i18nBase = i18nFactory(Strings)
@@ -51,6 +52,7 @@ const { PUBLIC_POP_CLIENT_KEY } = import.meta.env
       item={item}
       chainId={chainId}
       rpcUrl={rpcUrl}
+      debugMode={debugMode}
     />
   </div>
   <div slot="checkout:after:transaction-form" class="p-3">

src/TransactionForm.svelte

@@ -19,6 +19,7 @@
   export let item: ComposedItem
   export let chainId: number
   export let rpcUrl: string
+  export let debugMode: boolean
   let account: string | undefined
   let customerEmail: string | undefined
   let customerName: string | undefined
@@ -94,7 +95,7 @@
             account: account_,
             customerName: customerName_,
             customerEmail: customerEmail_,
-            dummy: chainId !== 137 && chainId !== 1,
+            dummy: debugMode,
           }),
         ) ?? new Error('Required fields missing'),
     )

src/index.ts

@@ -42,6 +42,7 @@ export const getPagePaths = (async (
   utils,
 ) => {
   const items = composeItems(options, utils)
+  const debugMode = options.find(({ key }) => key === 'debug')?.value === true
 
   return items
     ? [
@@ -55,6 +56,7 @@ export const getPagePaths = (async (
             signals: [ClubsPluginSignal.DisplayFullPage],
             accessControlUrl: item.source.accessControl?.url,
             accessControlDescription: item.source.accessControl?.description,
+            debugMode,
           },
           component: Id,
         })),

tailwind.config.js

@@ -1,24 +1,8 @@
-const { tailwindPreset } = require('@devprotocol/clubs-core')
-const typography = require('@tailwindcss/typography')
+import { tailwindPreset as clubs } from '@devprotocol/clubs-core'
+import typography from '@tailwindcss/typography'
 
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  mode: 'jit',
-  presets: [tailwindPreset],
+export default {
+  presets: [clubs],
+  content: [...clubs.content, '.preview/**/*'],
   plugins: [typography],
-  theme: {
-    extend: {
-      animation: {
-        'c-bash-spinner': 'c-bash-spinner 1s linear infinite',
-      },
-      keyframes: {
-        'c-bash-spinner': {
-          '0%': { content: '"/"' },
-          '33%': { content: '"-"' },
-          '66%': { content: '"\\005C"' },
-          '100%': { content: '"|"' },
-        },
-      },
-    },
-  },
 }