refactor: viem in payments

.github/knip.jsonc

@@ -3,14 +3,17 @@
   "ignore": [
     ".github/**",
     "./packages/synapse-sdk/src/abis/gen.ts",
-    "./packages/synapse-core/src/abis/generated.ts",
     "./packages/synapse-sdk/wagmi.config.ts",
     "./packages/synapse-sdk/src/test/mocks/**",
+    "./packages/synapse-core/src/abis/generated.ts",
+    "./apps/synapse-playground/src/components/kibo-ui/dropzone/**",
+    "./apps/synapse-playground/src/components/ui/**",
     "utils/**"
   ],
   "ignoreWorkspaces": ["examples/script-tag"],
   "ignoreDependencies": [
-    "@types/mocha",
+    "@types/*",
+    "assert",
     "sharp",
     "mocha",
     "wrangler",
@@ -28,7 +31,40 @@
   },
   "workspaces": {
     "docs": {
-      "ignoreDependencies": ["@types/*", "@filoz/synapse-sdk", "ethers"]
+      "ignoreDependencies": ["@filoz/synapse-sdk", "ethers", "@filoz/synapse-core", "viem"],
+      "ignoreFiles": ["src/custom.css"]
+    },
+    "packages/synapse-sdk": {
+      "entry": ["src/index.ts", "src/{payments,pdp,session,storage,subgraph,warm-storage,sp-registry,filbeam}/index.ts"]
+    },
+    "packages/synapse-react": {
+      "entry": ["src/index.ts", "src/filsnap.ts"]
+    },
+    "packages/synapse-core": {
+      "entry": [
+        "src/index.ts",
+        "src/sp.ts",
+        "src/chains.ts",
+        "src/piece.ts",
+        "src/usdfc.ts",
+        "src/abis/index.ts",
+        "src/auction/index.ts",
+        "src/endorsements/index.ts",
+        "src/erc20/index.ts",
+        "src/errors/index.ts",
+        "src/mocks/index.ts",
+        "src/pay/index.ts",
+        "src/pdp-verifier/index.ts",
+        "src/session-key/index.ts",
+        "src/sp-registry/index.ts",
+        "src/typed-data/index.ts",
+        "src/utils/index.ts",
+        "src/warm-storage/index.ts"
+      ],
+      "ignoreFiles": ["wagmi.config.ts"]
+    },
+    "apps/synapse-playground": {
+      "ignoreDependencies": ["buffer", "globals"]
     }
   }
 }

AGENTS.md

@@ -46,7 +46,7 @@ packages/synapse-sdk/src/
 
 **Commands**:
 
-- Root: `pnpm run fix` (Biome auto-fix all), `pnpm run build` (all packages), `pnpm test`
+- Root: `pnpm run lint:fix` (Biome auto-fix all), `pnpm run build` (all packages), `pnpm test`
 - Package: `pnpm run lint:fix`, `pnpm run build`, `pnpm test` (from `packages/synapse-sdk/`)
 
 **Build**: TypeScript → `dist/` (in package), ES modules with `.js` extensions, strict mode, NodeNext resolution
@@ -59,7 +59,7 @@ packages/synapse-sdk/src/
 **NO** semicolons at line end (`semicolons: "asNeeded"`)
 **MUST** use kebab-case filenames
 
-Run `pnpm run fix` before commits.
+Run `pnpm run lint:fix` before commits.
 
 ## Key Components
 

apps/synapse-playground/package.json

@@ -4,7 +4,6 @@
   "version": "0.0.1",
   "type": "module",
   "scripts": {
-    "format": "biome check --write --no-errors-on-unmatched --files-ignore-unknown=true .",
     "dev": "wireit",
     "build": "wireit",
     "lint": "wireit",
@@ -26,7 +25,7 @@
       ]
     },
     "lint": {
-      "command": "biome check --no-errors-on-unmatched --files-ignore-unknown=true .",
+      "command": "biome check --fix .",
       "files": [
         "src/**/*.{tsx,ts}",
         "tsconfig.json",
@@ -75,15 +74,14 @@
     "lucide-react": "^0.562.0",
     "nanostores": "^1.0.1",
     "next-themes": "^0.4.6",
-    "p-retry": "^7.1.0",
-    "react": "19.2.3",
-    "react-dom": "19.2.3",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
     "react-dropzone": "^14.3.8",
     "react-hook-form": "^7.66.1",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.14",
-    "viem": "catalog:",
+    "viem": "2.x",
     "wagmi": "catalog:",
     "zod": "^4.1.13"
   },

apps/synapse-playground/src/app.tsx

@@ -1,6 +1,7 @@
 import { useAccount } from 'wagmi'
 import * as Icons from '@/components/icons.tsx'
 import { NetworkSelector } from '@/components/network-selector.tsx'
+import { Button } from '@/components/ui/button.tsx'
 import { Toaster } from '@/components/ui/sonner.tsx'
 import { ConnectSection } from './components/connect-section.tsx'
 import { PaymentsAccount } from './components/payments-account.tsx'
@@ -25,9 +26,14 @@ export function App() {
             </a>
             <span className="text-xl font-bold">Filecoin Onchain Cloud</span>
           </div>
-          <div className="flex flex-row gap-2 items-center">
+          <div className="flex flex-row gap-3 items-center">
             {isConnected && <WalletMenu />}
             <NetworkSelector />
+            <Button asChild size="icon" variant="ghost">
+              <a href="https://github.com/FilOzone/synapse-sdk" rel="noopener noreferrer" target="_blank">
+                <Icons.Github />
+              </a>
+            </Button>
           </div>
         </nav>
       </header>

apps/synapse-playground/src/components/icons.tsx

@@ -59,3 +59,15 @@ export function Filecoin(props: React.SVGProps<SVGSVGElement>) {
     </svg>
   )
 }
+
+export function Github(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg height={24} viewBox="0 0 24 24" width={24} xmlns="http://www.w3.org/2000/svg" {...props}>
+      <title>Github</title>
+      <path
+        d="M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+        fill="currentColor"
+      ></path>
+    </svg>
+  )
+}

apps/synapse-playground/src/components/payments-account.tsx

@@ -1,5 +1,5 @@
 import { formatFraction } from '@filoz/synapse-core/utils'
-import { useAccountInfo, useApproveAllowance, useDeposit, useWithdraw } from '@filoz/synapse-react'
+import { useAccountInfo, useWithdraw } from '@filoz/synapse-react'
 import { useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { parseEther } from 'viem'
@@ -111,212 +111,17 @@ export function PaymentsAccount() {
       </CardContent>
       <CardFooter className="flex-row gap-2">
         <DepositAndApproveDialog />
-        {/* <AllowanceDialog /> */}
-        {/* <DepositDialog /> */}
         <WithdrawDialog />
       </CardFooter>
     </Card>
   )
 }
 
-const formSchema = z.object({
-  amount: z.string().min(1),
-})
-export function AllowanceDialog() {
-  const [hash, setHash] = useState<string | null>(null)
-  const {
-    mutate: approve,
-    isPending,
-    isSuccess,
-    error,
-    reset,
-  } = useApproveAllowance({
-    onHash: (hash) => {
-      setHash(hash)
-    },
-    mutation: {
-      onSettled: () => {
-        setHash(null)
-      },
-    },
-  })
-
-  const form = useForm<z.infer<typeof formSchema>>({
-    defaultValues: {
-      amount: '1',
-    },
-  })
-
-  function onSubmit(values: z.infer<typeof formSchema>) {
-    const amount = parseEther(values.amount)
-    approve({ amount })
-  }
-
-  return (
-    <Dialog
-      onOpenChange={() => {
-        reset()
-      }}
-    >
-      <DialogTrigger asChild>
-        <Button>Allowance</Button>
-      </DialogTrigger>
-      <DialogContent className="sm:max-w-[425px]">
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)}>
-            <DialogHeader>
-              <DialogTitle>Manage Allowance</DialogTitle>
-              <DialogDescription>
-                Manage the allowance for the Payments contract to spend your USDFC tokens.
-              </DialogDescription>
-            </DialogHeader>
-
-            <div className="grid gap-4 py-4">
-              <div className="grid gap-3">
-                <FormField
-                  control={form.control}
-                  name="amount"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>Amount</FormLabel>
-                      <FormControl>
-                        <Input {...field} />
-                      </FormControl>
-                      <FormDescription>Amount of USDFC to approve.</FormDescription>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                  rules={{
-                    required: 'Amount is required',
-                    validate: (value) => {
-                      const amount = parseEther(value)
-                      if (amount < 0n) {
-                        return 'Amount must be greater than 0'
-                      }
-                      return true
-                    },
-                  }}
-                />
-              </div>
-              <HashAlert hash={hash} />
-              <ErrorAlert error={error} />
-              <SuccessAlert message="Allowance approved" show={isSuccess} />
-            </div>
-            <DialogFooter>
-              <DialogClose asChild>
-                <Button variant="outline">Cancel</Button>
-              </DialogClose>
-              <ButtonLoading className="sm:w-24 w-full" loading={isPending} type="submit">
-                Approve
-              </ButtonLoading>
-            </DialogFooter>
-          </form>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-const depositFormSchema = z.object({
-  amount: z.string().min(1),
-})
-export function DepositDialog() {
-  const [hash, setHash] = useState<string | null>(null)
-  const {
-    mutate: deposit,
-    isPending,
-    isSuccess,
-    error,
-    reset,
-  } = useDeposit({
-    onHash: (hash) => {
-      setHash(hash)
-    },
-    mutation: {
-      onSettled: () => {
-        setHash(null)
-      },
-    },
-  })
-
-  const form = useForm<z.infer<typeof depositFormSchema>>({
-    defaultValues: {
-      amount: '1',
-    },
-  })
-
-  function onSubmit(values: z.infer<typeof depositFormSchema>) {
-    const amount = parseEther(values.amount)
-    deposit({ amount })
-  }
-
-  return (
-    <Dialog
-      onOpenChange={() => {
-        reset()
-      }}
-    >
-      <DialogTrigger asChild>
-        <Button variant="secondary">Deposit</Button>
-      </DialogTrigger>
-      <DialogContent className="sm:max-w-[425px]">
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)}>
-            <DialogHeader>
-              <DialogTitle>Deposit USDFC</DialogTitle>
-              <DialogDescription>Deposit USDFC tokens to the Payments contract.</DialogDescription>
-            </DialogHeader>
-
-            <div className="grid gap-4 py-4">
-              <div className="grid gap-3">
-                <FormField
-                  control={form.control}
-                  name="amount"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>Amount</FormLabel>
-                      <FormControl>
-                        <Input {...field} />
-                      </FormControl>
-                      <FormDescription>Amount of USDFC to deposit.</FormDescription>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                  rules={{
-                    required: 'Amount is required',
-                    validate: (value) => {
-                      const amount = parseEther(value)
-                      if (amount <= 0n) {
-                        return 'Amount must be greater than 0'
-                      }
-                      return true
-                    },
-                  }}
-                />
-              </div>
-              <HashAlert hash={hash} />
-              <ErrorAlert error={error} />
-              <SuccessAlert message="USDFC deposited" show={isSuccess} />
-            </div>
-            <DialogFooter>
-              <DialogClose asChild>
-                <Button variant="outline">Cancel</Button>
-              </DialogClose>
-              <ButtonLoading className="sm:w-24 w-full" loading={isPending} type="submit">
-                Deposit
-              </ButtonLoading>
-            </DialogFooter>
-          </form>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
 const withdrawFormSchema = z.object({
   amount: z.string().min(1),
 })
-export function WithdrawDialog() {
+
+function WithdrawDialog() {
   const [hash, setHash] = useState<string | null>(null)
   const {
     mutate: withdraw,

apps/synapse-playground/src/components/warm-storage/storage-menu.tsx

@@ -53,7 +53,7 @@ export function StorageMenu() {
           <span>Rate</span>
           <span className="text-muted-foreground">
             {formatFraction({
-              value: operatorApprovals?.rateUsed,
+              value: operatorApprovals?.rateUsage,
               digits: 12,
             })}
           </span>
@@ -62,7 +62,7 @@ export function StorageMenu() {
           <span>Lockup </span>
           <span className="text-muted-foreground">
             {formatFraction({
-              value: operatorApprovals?.lockupUsed,
+              value: operatorApprovals?.lockupUsage,
             })}
           </span>
         </DropdownMenuLabel>