refactor: singature pad & provider stuff

Signed-off-by: Adithya Krishna <adi@documenso.com>

apps/web/src/app/(dashboard)/settings/profile/page.tsx

@@ -1,19 +1,24 @@
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 
+import { SigningProvider } from '~/app/(signing)/sign/[token]/provider';
 import { ProfileForm } from '~/components/forms/profile';
 
 export default async function ProfileSettingsPage() {
   const { user } = await getRequiredServerComponentSession();
 
   return (
-    <div>
-      <h3 className="text-2xl font-semibold">Profile</h3>
+    <SigningProvider email={user.email} fullName={user.name} signature={user.signature}>
+      <div>
+        <h3 className="text-2xl font-semibold">Profile</h3>
 
-      <p className="text-muted-foreground mt-2 text-sm">Here you can edit your personal details.</p>
+        <p className="text-muted-foreground mt-2 text-sm">
+          Here you can edit your personal details.
+        </p>
 
-      <hr className="my-4" />
+        <hr className="my-4" />
 
-      <ProfileForm user={user} className="max-w-xl" />
-    </div>
+        <ProfileForm user={user} className="max-w-xl" />
+      </div>
+    </SigningProvider>
   );
 }

apps/web/src/components/forms/profile.tsx

@@ -7,7 +7,7 @@ import { Loader } from 'lucide-react';
 import { Controller, useForm } from 'react-hook-form';
 import { z } from 'zod';
 
-import { User } from '@documenso/prisma/client';
+import type { User } from '@documenso/prisma/client';
 import { TRPCClientError } from '@documenso/trpc/client';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
@@ -17,6 +17,8 @@ import { Label } from '@documenso/ui/primitives/label';
 import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
+import { useRequiredSigningContext } from '~/app/(signing)/sign/[token]/provider';
+
 import { FormErrorMessage } from '../form/form-error-message';
 
 export const ZProfileFormSchema = z.object({
@@ -36,6 +38,8 @@ export const ProfileForm = ({ className, user }: ProfileFormProps) => {
 
   const { toast } = useToast();
 
+  const { signature, setSignature } = useRequiredSigningContext();
+
   const {
     register,
     control,
@@ -121,6 +125,8 @@ export const ProfileForm = ({ className, user }: ProfileFormProps) => {
                 containerClassName="rounded-lg border bg-background"
                 defaultValue={user.signature ?? undefined}
                 onChange={(v) => onChange(v ?? '')}
+                signature={signature}
+                setSignature={setSignature}
               />
             )}
           />

packages/ui/primitives/signature-pad/signature-pad.tsx

@@ -9,7 +9,6 @@ import { getStroke } from 'perfect-freehand';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
-import { useRequiredSigningContext } from '../../../../apps/web/src/app/(signing)/sign/[token]/provider';
 import { cn } from '../../lib/utils';
 import { Input } from '../input';
 import { getSvgPathFromStroke } from './helper';
@@ -18,6 +17,8 @@ import { Point } from './point';
 const DPI = 2;
 
 export type SignaturePadProps = Omit<HTMLAttributes<HTMLCanvasElement>, 'onChange'> & {
+  signature: string | null;
+  setSignature: (_value: string | null) => void;
   onChange?: (_signatureDataUrl: string | null) => void;
   containerClassName?: string;
   clearSignatureClassName?: string;
@@ -44,6 +45,8 @@ export const SignaturePad = ({
   clearSignatureClassName,
   onFormSubmit,
   onChange,
+  signature,
+  setSignature,
   ...props
 }: SignaturePadProps) => {
   const $el = useRef<HTMLCanvasElement>(null);
@@ -51,8 +54,6 @@ export const SignaturePad = ({
   const [isPressed, setIsPressed] = useState(false);
   const [points, setPoints] = useState<Point[]>([]);
 
-  const { signature, setSignature } = useRequiredSigningContext();
-
   const {
     register,
     handleSubmit,
@@ -68,7 +69,7 @@ export const SignaturePad = ({
     resolver: zodResolver(ZSigningpadSchema),
   });
 
-  const signatureDataUrl = watch('signatureDataUrl');
+  // const signatureDataUrl = watch('signatureDataUrl');
   const signatureText = watch('signatureText');
 
   const perfectFreehandOptions = useMemo(() => {
@@ -248,26 +249,18 @@ export const SignaturePad = ({
   return (
     <form onSubmit={handleSubmit(onFormSubmit ?? (() => undefined))}>
       <div className={cn('relative block', containerClassName)}>
-        <canvas
-          ref={$el}
-          className={cn('relative block dark:invert', className)}
-          style={{ touchAction: 'none' }}
-          onPointerMove={(event) => onMouseMove(event)}
-          onPointerDown={(event) => onMouseDown(event)}
-          onPointerUp={(event) => onMouseUp(event)}
-          onPointerLeave={(event) => onMouseLeave(event)}
-          onPointerEnter={(event) => onMouseEnter(event)}
-          {...props}
-        />
-
         <div className="flex h-44 items-center justify-center pb-6">
           {!signatureText && signature && (
-            <SignaturePad
-              className="h-44 w-full"
-              defaultValue={signature ?? undefined}
-              onChange={(value) => {
-                setSignature(value);
-              }}
+            <canvas
+              ref={$el}
+              className={cn('relative block dark:invert', className)}
+              style={{ touchAction: 'none' }}
+              onPointerMove={(event) => onMouseMove(event)}
+              onPointerDown={(event) => onMouseDown(event)}
+              onPointerUp={(event) => onMouseUp(event)}
+              onPointerLeave={(event) => onMouseLeave(event)}
+              onPointerEnter={(event) => onMouseEnter(event)}
+              {...props}
             />
           )}