feat: handle avatar uploading on verify

web/src/pages/Verify/Avatar/index.tsx

@@ -1,5 +1,6 @@
 import { Button } from "@/components/ui/button";
 import { useAuth } from "@/store/auth";
+import { useVerify } from "@/store/verify";
 import { User } from "lucide-react";
 import { useCallback, useEffect, useRef, useState, type FC } from "react";
 import { Link } from "react-router";
@@ -16,6 +17,9 @@ const VerifyAvatarPage: FC = () => {
 
   const fileInputRef = useRef<HTMLInputElement | null>(null);
 
+  const uploadAvatar = useVerify((s) => s.uploadAvatar);
+  const uploading = useVerify((s) => s.uploading);
+
   useEffect(() => {
     if (profile?.profile_picture) setAvatar(profile.profile_picture);
   }, [profile?.profile_picture]);
@@ -97,6 +101,17 @@ const VerifyAvatarPage: FC = () => {
     setTakingPicture(false);
   }, []);
 
+  const handleUpload = useCallback(async () => {
+    if (!avatar) return;
+
+    const res = await fetch(avatar);
+    const blob = await res.blob();
+
+    const file = new File([blob], "avatar.png", { type: blob.type });
+
+    uploadAvatar(file);
+  }, [avatar, uploadAvatar]);
+
   return (
     <div className="w-full sm:max-w-sm mx-auto p-4">
       <div className="flex flex-col gap-2 w-full max-w-xs mx-auto">
@@ -161,7 +176,14 @@ const VerifyAvatarPage: FC = () => {
         {avatar && (
           <>
             <Link to="/verify/review" className="w-full">
-              <Button className="w-full">Next</Button>
+              <Button
+                className="w-full"
+                loading={uploading}
+                disabled={uploading}
+                onClick={handleUpload}
+              >
+                Next
+              </Button>
             </Link>
             <Button
               className="border-yellow-500 text-yellow-500 hover:border-yellow-600 hover:text-yellow-600"