feat: use viem instead of ethers

Author: adklempner

package-lock.json

@@ -21,7 +21,7 @@
     "@radix-ui/react-toggle": "^1.1.2",
     "@radix-ui/react-toggle-group": "^1.1.2",
     "@radix-ui/react-tooltip": "^1.1.8",
-    "@waku/rln": "0.1.10-593bc45.0",
+    "@waku/rln": "0.1.11-44ad556.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "framer-motion": "^12.6.3",
@@ -32,7 +32,8 @@
     "react-dom": "^19.0.0",
     "react-markdown": "^10.1.0",
     "sonner": "^2.0.3",
-    "tailwind-merge": "^3.1.0"
+    "tailwind-merge": "^3.1.0",
+    "viem": "^2.21.54"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",

package.json

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Button } from './ui/button';
 import { Copy, Clock, Trash2, Wallet } from 'lucide-react';
-import { ethers } from 'ethers';
+import { formatEther } from 'viem'
 import { MembershipState } from '@waku/rln';
 import { useRLN } from '../contexts/rln/RLNContext';
 import { toast } from 'sonner';
@@ -17,7 +17,7 @@ interface MembershipDetailsProps {
     startBlock: number;
     endBlock: number;
     state: MembershipState;
-    depositAmount: ethers.BigNumber;
+    depositAmount: bigint;
     activeDuration: number;
     gracePeriodDuration: number;
     holder: string;
@@ -273,7 +273,7 @@ export function MembershipDetails({ membershipInfo, copyToClipboard, hash }: Mem
           <div>
             <span className="text-muted-foreground text-xs">Deposit Amount:</span>
             <div className="text-accent">
-              {membershipInfo.depositAmount ? `${ethers.utils.formatEther(membershipInfo.depositAmount)} ETH` : 'N/A'}
+              {membershipInfo.depositAmount ? `${formatEther(membershipInfo.depositAmount)} ETH` : 'N/A'}
             </div>
           </div>
 

src/components/MembershipDetails.tsx

@@ -10,7 +10,6 @@ import { Button } from '../../ui/button';
 import { Copy, Eye, Download, Trash2, ArrowDownToLine, Pencil, Check, X } from 'lucide-react';
 import { KeystoreExporter } from '../../KeystoreExporter';
 import { keystoreManagement, type ContentSegment } from '../../../content/index';
-import { ethers } from 'ethers';
 import { toast } from 'sonner';
 import { CredentialDetails } from '@/components/CredentialDetails';
 import { MembershipDetails } from '@/components/MembershipDetails';
@@ -25,7 +24,7 @@ interface ExtendedMembershipInfo extends Omit<MembershipInfo, 'state'> {
   startBlock: number;
   endBlock: number;
   state: MembershipState;
-  depositAmount: ethers.BigNumber;
+  depositAmount: bigint;
   activeDuration: number;
   gracePeriodDuration: number;
   holder: string;