feat: request grant confirmation for config updates

backend/package.json

@@ -21,10 +21,14 @@
   },
   "dependencies": {
     "@aws-sdk/client-s3": "^3.645.0",
+    "@remix-run/node": "^2.14.0",
     "@smithy/node-http-handler": "^3.2.3",
+    "@types/express-session": "^1.18.1",
     "@types/underscore": "^1.11.15",
+    "cookie-parser": "^1.4.7",
     "dotenv": "^16.4.5",
     "express": "^4.19.2",
+    "express-session": "^1.18.1",
     "he": "^1.2.0",
     "module-alias": "^2.2.3",
     "sanitize-html": "^2.14.0",

backend/src/controllers/tools.ts

@@ -16,6 +16,7 @@ import {
   SanitizedFields,
   SaveUserConfigRequest
 } from './types.js'
+import { getSession } from '@/services/session.js'
 
 export const getDefault = async (_: Request, res: Response) => {
   try {
@@ -33,15 +34,24 @@ export const createUserConfig = async (req: Request, res: Response) => {
     const data: CreateConfigRequest = req.body
     const tag = data.version || data.tag
 
-    if (!data.walletAddress) {
+    if (!data?.walletAddress) {
       throw 'Wallet address is required'
     }
+    const walletAddress = decodeURIComponent(`https://${data.walletAddress}`)
+
+    const cookieHeader = req.headers.cookie
+    const session = await getSession(cookieHeader)
+
+    const validForWallet = session?.get('validForWallet')
+
+    if (!session || validForWallet !== walletAddress) {
+      throw 'Grant confirmation is required'
+    }
+
     const defaultData = await getDefaultData()
     const defaultDataContent: ConfigVersions['default'] =
       JSON.parse(defaultData).default
-    defaultDataContent.walletAddress = decodeURIComponent(
-      `https://${data.walletAddress}`
-    )
+    defaultDataContent.walletAddress = walletAddress
 
     sanitizeConfigFields({ ...defaultDataContent, tag })
 
@@ -51,6 +61,7 @@ export const createUserConfig = async (req: Request, res: Response) => {
     try {
       // existing config
       const s3data = await s3.send(new GetObjectCommand(params))
+
       // Convert the file stream to a string
       fileContentString = await streamToString(
         s3data.Body as NodeJS.ReadableStream
@@ -97,10 +108,17 @@ export const createUserConfig = async (req: Request, res: Response) => {
 export const saveUserConfig = async (req: Request, res: Response) => {
   try {
     const data: SaveUserConfigRequest = req.body
+    const cookieHeader = req.headers.cookie
+    const session = await getSession(cookieHeader)
+
+    const validForWallet = session?.get('validForWallet')
 
     if (!data.walletAddress) {
       throw 'Wallet address is required'
     }
+    if (!session || validForWallet !== data.walletAddress) {
+      throw 'Grant confirmation is required'
+    }
 
     const { s3, params } = getS3AndParams(data.walletAddress)
 

backend/src/server.ts

@@ -2,6 +2,7 @@ import https from 'https'
 import http from 'http'
 import fs from 'fs'
 import express, { Express } from 'express'
+import session from 'express-session'
 import routes from './routes/index.js'
 
 const router: Express = express()
@@ -21,10 +22,24 @@ if (isDevelopment) {
 router.use(express.urlencoded({ extended: true }))
 router.use(express.json())
 
+// Session middleware
+router.use(
+  session({
+    secret: process.env.SESSION_COOKIE_SECRET_KEY || 'supersecretilpaystring',
+    resave: false,
+    saveUninitialized: true, // Only save the session if it is modified
+    cookie: {
+      httpOnly: true,
+      secure: true,
+      sameSite: 'none'
+    }
+  })
+)
+
 router.use((req, res, next) => {
   // set the CORS policy
   res.header('Access-Control-Allow-Origin', '*')
-  // set the CORS headers
+  res.header('Access-Control-Allow-Credentials', 'true')
   res.header(
     'Access-Control-Allow-Headers',
     'origin,X-Requested-With,Content-Type,Accept,Authorization'

backend/src/services/session.ts

@@ -0,0 +1,16 @@
+import { createCookieSessionStorage } from '@remix-run/node'
+
+const { getSession, commitSession, destroySession } =
+  createCookieSessionStorage({
+    cookie: {
+      name: 'wmtools-session',
+      httpOnly: true,
+      secure: true,
+      sameSite: 'none',
+      secrets: [
+        process.env.SESSION_COOKIE_SECRET_KEY || 'supersecretilpaystring'
+      ]
+    }
+  })
+
+export { getSession, commitSession, destroySession }

backend/src/types/index.ts

@@ -0,0 +1,7 @@
+import 'express-session'
+
+declare module 'express-session' {
+  interface Session {
+    validForWallet?: string
+  }
+}

backend/tsconfig.json

@@ -10,5 +10,6 @@
     }
   },
   "include": ["src/**/*", "tests/**/*"],
-  "exclude": ["node_modules", "**/node_modules/*"]
+  "exclude": ["node_modules", "**/node_modules/*"],
+  "files": ["src/types/index.ts"]
 }

docker/dev/.env.example

@@ -5,6 +5,11 @@ SCRIPT_FRONTEND_URL=https://localhost:5100/
 SCRIPT_ILPAY_URL=https://interledgerpay.com/extension/
 SCRIPT_EMBED_URL=https://localhost:5100/
 
+OP_KEY_ID=
+OP_PRIVATE_KEY=
+OP_WALLET_ADDRESS=
+OP_REDIRECT_URL=
+
 # BACKEND
 AWS_ACCESS_KEY_ID=
 AWS_SECRET_ACCESS_KEY=

docker/dev/docker-compose.yml

@@ -50,6 +50,10 @@ services:
       ILPAY_URL: ${SCRIPT_ILPAY_URL}
       FRONTEND_URL: ${SCRIPT_FRONTEND_URL}
       INIT_SCRIPT_URL: ${SCRIPT_EMBED_URL}
+      OP_KEY_ID: ${OP_KEY_ID}
+      OP_PRIVATE_KEY: ${OP_PRIVATE_KEY}
+      OP_WALLET_ADDRESS: ${OP_WALLET_ADDRESS}
+      OP_REDIRECT_URL: ${OP_REDIRECT_URL}
     networks:
       - wm-tools
     command: pnpm run dev

frontend/Dockerfile

@@ -44,10 +44,12 @@ RUN pnpm --filter frontend build
 ARG VITE_SCRIPT_API_URL
 ARG VITE_SCRIPT_FRONTEND_URL
 ARG VITE_SCRIPT_ILPAY_URL
+ARG VITE_INIT_SCRIPT_URL
 
 ENV VITE_SCRIPT_API_URL=$VITE_SCRIPT_API_URL \
     VITE_SCRIPT_FRONTEND_URL=$VITE_SCRIPT_FRONTEND_URL \
-    VITE_SCRIPT_ILPAY_URL=$VITE_SCRIPT_ILPAY_URL
+    VITE_SCRIPT_ILPAY_URL=$VITE_SCRIPT_ILPAY_URL \
+    VITE_INIT_SCRIPT_URL=$VITE_INIT_SCRIPT_URL
 
 RUN pnpm --filter frontend build:init
 

frontend/Dockerfile.dev

@@ -31,10 +31,12 @@ EXPOSE 5100
 ARG VITE_SCRIPT_API_URL
 ARG VITE_SCRIPT_FRONTEND_URL
 ARG VITE_SCRIPT_ILPAY_URL
+ARG VITE_INIT_SCRIPT_URL
 
 ENV VITE_SCRIPT_API_URL=$VITE_SCRIPT_API_URL \
     VITE_SCRIPT_FRONTEND_URL=$VITE_SCRIPT_FRONTEND_URL \
-    VITE_SCRIPT_ILPAY_URL=$VITE_SCRIPT_ILPAY_URL
+    VITE_SCRIPT_ILPAY_URL=$VITE_SCRIPT_ILPAY_URL \
+    VITE_INIT_SCRIPT_URL=$VITE_INIT_SCRIPT_URL
 
 WORKDIR /app/frontend
 

frontend/app/components/Snackbar.tsx

@@ -2,7 +2,7 @@ import { Transition } from '@headlessui/react'
 import { cx } from 'class-variance-authority'
 import type { FC } from 'react'
 import { Fragment, useEffect } from 'react'
-import { type Message } from '~/lib/message.server'
+import { type Message } from '~/lib/server/message.server.js'
 import { CheckCircleSolid, XIcon, XCircleSolid } from '../components/icons.js'
 
 interface SnackbarProps {

frontend/app/components/modals/Confirm.tsx

@@ -3,9 +3,11 @@ import { Form } from '@remix-run/react'
 import { ElementErrors } from '~/lib/types.js'
 import { XIcon } from '~/components/icons.js'
 import { Button } from '~/components/index.js'
+import { ReactElement } from 'react'
 
 type ConfirmModalProps = {
-  title: string
+  title: string | ReactElement
+  description: string | ReactElement
   isOpen: boolean
   errors?: ElementErrors
   onClose: () => void
@@ -14,6 +16,7 @@ type ConfirmModalProps = {
 
 export const ConfirmModal = ({
   title,
+  description,
   isOpen,
   onClose,
   onConfirm
@@ -44,13 +47,16 @@ export const ConfirmModal = ({
               <div className="mt-2">
                 <Form method="post" replace preventScrollReset>
                   <fieldset>
+                    <div className="flex justify-center p-4 mx-2">
+                      {description}
+                    </div>
                     <div className="flex justify-center space-x-4">
                       <Button
                         className="mx-0"
                         aria-label={`confirm`}
                         onClick={onConfirm}
                       >
-                        Yes
+                        Continue
                       </Button>
                       <Button aria-label={`close`} onClick={onClose}>
                         Cancel

frontend/app/lib/apiClient.ts

@@ -56,7 +56,9 @@ export class ApiClient {
     const wa = encodeURIComponent(
       walletAddress.replace('$', '').replace('https://', '')
     )
-    const response = await axios.get(`${apiUrl}tools/${wa}`, { httpsAgent })
+    const response = await axios.get(`${apiUrl}tools/${wa}`, {
+      httpsAgent
+    })
 
     if (response.status === 200) {
       return {
@@ -73,7 +75,8 @@ export class ApiClient {
 
   public static async createUserConfig(
     version: string,
-    walletAddress: string
+    walletAddress: string,
+    cookieHeader: string
   ): Promise<ApiResponse> {
     const tag = encodeURIComponent(version)
     const wa = encodeURIComponent(
@@ -83,7 +86,11 @@ export class ApiClient {
       `${apiUrl}tools`,
       { walletAddress: wa, tag },
       {
-        httpsAgent
+        httpsAgent,
+        withCredentials: true,
+        headers: {
+          Cookie: cookieHeader // Manually attach the session cookie
+        }
       }
     )
 
@@ -102,10 +109,15 @@ export class ApiClient {
   }
 
   public static async saveUserConfig(
-    configData: Partial<ElementConfigType>
+    configData: Partial<ElementConfigType>,
+    cookieHeader: string
   ): Promise<ApiResponse> {
     const response = await axios.put(`${apiUrl}tools`, configData, {
-      httpsAgent
+      httpsAgent,
+      withCredentials: true,
+      headers: {
+        Cookie: cookieHeader // Manually attach the session cookie
+      }
     })
 
     if (response.status === 200) {

frontend/app/lib/presets.ts

@@ -2,6 +2,16 @@ import { tooltips } from './tooltips.js'
 import { CornerType, SlideAnimationType, PositionType } from './types.js'
 
 export const validConfigTypes = ['button', 'banner', 'widget']
+export const modalTypes = [
+  'confirm',
+  'import',
+  'info',
+  'new-version',
+  'script',
+  'wallet-ownership',
+  'grant-response'
+]
+export type ModalType = (typeof modalTypes)[number]
 
 export const textColorPresets = ['#ffffff', '#000000']
 export const triggerColorPresets = ['#ffffff', '#000000', '#096b63']