refactor: add & use shared packages (#168)

Author: sidvishnoi

api/package.json

@@ -3,8 +3,9 @@
   "version": "1.0.0",
   "scripts": {
     "dev": "wrangler dev",
-    "build": "tsc --project tsconfig.json",
+    "build": "wrangler deploy --dry-run --outdir dist",
     "preview": "wrangler dev",
+    "typecheck": "tsc --noEmit",
     "deploy": "wrangler deploy"
   },
   "keywords": [],
@@ -16,14 +17,16 @@
     "@interledger/open-payments": "^7.0.0",
     "@noble/ed25519": "^2.2.3",
     "@paralleldrive/cuid2": "^2.2.2",
-    "aws4fetch": "^1.0.20",
+    "@shared/config-storage-service": "workspace:^",
+    "@shared/utils": "workspace:^",
     "hono": "^4.7.8",
     "http-message-signatures": "^1.0.4",
     "httpbis-digest-headers": "^1.0.0",
     "zod": "^3.25.67"
   },
   "types": "./src/types.ts",
   "devDependencies": {
+    "@shared/types": "workspace:^",
     "typescript": "5.1.6",
     "wrangler": "^4.16.1"
   },

api/src/index.ts

@@ -3,15 +3,15 @@ import { cors } from 'hono/cors'
 import { zValidator } from '@hono/zod-validator'
 import { HTTPException } from 'hono/http-exception'
 import { ZodError } from 'zod'
-import { ConfigStorageService } from './utils/config-storage.js'
+import { ConfigStorageService } from '@shared/config-storage-service'
+import type { ConfigVersions } from '@shared/types'
 import { OpenPaymentsService } from './utils/open-payments.js'
 import {
   PaymentQuoteSchema,
   PaymentGrantSchema,
   PaymentFinalizeSchema,
   WalletAddressParamSchema
 } from './schemas/payment.js'
-import type { ConfigVersions } from './types.js'
 import { createHTTPException, serializeError } from './utils/utils.js'
 
 export type Env = {

api/src/types.ts

@@ -6,65 +6,6 @@ import type {
 } from './schemas/payment.js'
 import type { z } from 'zod/v4'
 
-export interface ConfigVersions {
-  [key: string]: ElementConfigType
-}
-
-export interface ElementConfigType {
-  // general config
-  css: string
-  walletAddress: string
-
-  // button specific
-  buttonFontName: string
-  buttonText: string
-  buttonBorder: CornerType
-  buttonTextColor: string
-  buttonBackgroundColor: string
-  buttonDescriptionText?: string
-
-  // banner specific
-  bannerFontName: string
-  bannerFontSize: number
-  bannerTitleText: string
-  bannerDescriptionText: string
-  bannerSlideAnimation: SlideAnimationType
-  bannerPosition: PositionType
-  bannerBorder: CornerType
-  bannerTextColor: string
-  bannerBackgroundColor: string
-
-  // widget specific
-  widgetFontName: string
-  widgetFontSize: number
-  widgetTitleText: string
-  widgetDescriptionText: string
-  widgetButtonText: string
-  widgetButtonBorder: CornerType
-  widgetTextColor: string
-  widgetBackgroundColor: string
-  widgetButtonTextColor: string
-  widgetButtonBackgroundColor: string
-  widgetTriggerBackgroundColor: string
-  widgetTriggerIcon: string
-}
-
-export enum CornerType {
-  None = 'None',
-  Light = 'Light',
-  Pill = 'Pill'
-}
-
-export enum SlideAnimationType {
-  None = 'None',
-  Down = 'Down'
-}
-
-export enum PositionType {
-  Top = 'Top',
-  Bottom = 'Bottom'
-}
-
 export type PaymentQuoteInput = z.infer<typeof PaymentQuoteSchema>
 export type PaymentGrantInput = z.infer<typeof PaymentGrantSchema>
 export type PaymentFinalizeInput = z.infer<typeof PaymentFinalizeSchema>

api/src/utils/config-storage.ts

@@ -8,9 +8,9 @@ import {
   isPendingGrant,
   createAuthenticatedClient
 } from '@interledger/open-payments'
+import { getWalletAddress } from '@shared/utils'
 import {
   createHeaders,
-  toWalletAddressUrl,
   timeout,
   createHTTPException,
   urlWithParams
@@ -122,9 +122,7 @@ export class OpenPaymentsService {
     amount: number
     note?: string
   }) {
-    const receiverWallet = await this.getWalletAddress(
-      args.receiverWalletAddress
-    )
+    const receiverWallet = await getWalletAddress(args.receiverWalletAddress)
     const { quote, incomingPaymentGrant } = await this.fetchQuote(
       {
         walletAddress: args.senderWalletAddress,
@@ -152,7 +150,7 @@ export class OpenPaymentsService {
     },
     receiverWallet: WalletAddress
   ): Promise<CreatePayment> {
-    const walletAddress = await this.getWalletAddress(args.walletAddress)
+    const walletAddress = await getWalletAddress(args.walletAddress)
 
     const amountObj = {
       value: BigInt(
@@ -474,14 +472,4 @@ export class OpenPaymentsService {
 
     return { success: true }
   }
-
-  private async getWalletAddress(url: string): Promise<WalletAddress> {
-    const walletAddress = await this.client!.walletAddress.get({
-      url: toWalletAddressUrl(url)
-    }).catch(() => {
-      throw new Error('Invalid wallet address.')
-    })
-
-    return walletAddress
-  }
 }

api/src/utils/open-payments.ts

@@ -28,18 +28,10 @@ interface SignOptions {
   keyId: string
 }
 
-export function walletAddressToKey(walletAddress: string): string {
-  return `${decodeURIComponent(walletAddress).replace('$', '').replace('https://', '')}.json`
-}
-
 export function timeout(delay: number): Promise<void> {
   return new Promise((resolve) => setTimeout(resolve, delay))
 }
 
-export function toWalletAddressUrl(s: string): string {
-  return s.startsWith('$') ? s.replace('$', 'https://') : s
-}
-
 export async function createHeaders({
   request,
   privateKey,

api/src/utils/utils.ts

@@ -8,6 +8,7 @@
     "build": "vite build",
     "preview": "npm run build && vite preview",
     "deploy": "wrangler deploy",
+    "typecheck": "tsc --noEmit",
     "prepare": "wrangler types"
   },
   "devDependencies": {

cdn/package.json

@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
     "lib": ["ES2022"],
+    "skipLibCheck": true,
     "types": ["./worker-configuration.d.ts", "vite/client"]
   }
 }

cdn/tsconfig.json

@@ -9,12 +9,16 @@
     "./*": "./src/*.ts"
   },
   "dependencies": {
+    "@shared/utils": "workspace:^",
     "lit": "^3.1.0"
   },
   "devDependencies": {
     "@interledger/open-payments": "^7.1.0",
     "publisher-tools-api": "workspace:^",
     "typescript": "^5.3.3",
     "vite": "^7.0.5"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit"
   }
 }

components/package.json

@@ -1,11 +1,11 @@
-import type { Grant, Quote, PendingGrant } from '@interledger/open-payments'
-import type { ReactiveController, ReactiveControllerHost } from 'lit'
 import type {
-  WalletAddress,
-  WidgetConfig,
-  FormatAmountArgs,
-  FormattedAmount
-} from './types'
+  Grant,
+  Quote,
+  PendingGrant,
+  WalletAddress
+} from '@interledger/open-payments'
+import type { ReactiveController, ReactiveControllerHost } from 'lit'
+import type { WidgetConfig, FormatAmountArgs, FormattedAmount } from './types'
 
 export interface WidgetState {
   walletAddress: WalletAddress