Feature/argent mobile integration b (#122)

Vagabonds-Labs · Feb 15, 2025 · 708b700 · 708b700
1 parent 3736533
commit 708b700
Show file tree

Hide file tree

Showing 6 changed files with 335 additions and 189 deletions.
diff --git a/apps/web/src/app/_components/features/ImageUpload.tsx b/apps/web/src/app/_components/features/ImageUpload.tsx
@@ -29,7 +29,7 @@ export function ImageUpload({
 			if (!file) return;
 
 			try {
-				// Create preview
+				// Create temporary preview
 				const objectUrl = URL.createObjectURL(file);
 				setPreviewUrl(objectUrl);
 				setIsUploading(true);
@@ -51,7 +51,13 @@ export function ImageUpload({
 					throw new Error(data.error ?? "Failed to upload image");
 				}
 
+				// Update preview URL to use IPFS gateway
+				const ipfsUrl = `${process.env.NEXT_PUBLIC_GATEWAY_URL}/ipfs/${data.ipfsHash}`;
+				setPreviewUrl(ipfsUrl);
 				onImageUploaded(data.ipfsHash);
+
+				// Clean up the temporary object URL
+				URL.revokeObjectURL(objectUrl);
 			} catch (error) {
 				const errorMessage =
 					error instanceof Error ? error.message : "Failed to upload image";
@@ -88,6 +94,7 @@ export function ImageUpload({
 							alt="Preview"
 							fill
 							className="object-cover rounded-lg"
+							unoptimized
 						/>
 					</div>
 				) : (

diff --git a/apps/web/src/app/_components/features/ProductCatalog.tsx b/apps/web/src/app/_components/features/ProductCatalog.tsx
@@ -95,6 +95,13 @@ export default function ProductCatalog({
 			metadata = product.nftMetadata as NftMetadata;
 		}
 
+		// Format the image URL to include the IPFS gateway if it's an IPFS hash
+		const imageUrl = metadata?.imageUrl
+			? metadata.imageUrl.startsWith("Qm")
+				? `${process.env.NEXT_PUBLIC_GATEWAY_URL}/ipfs/${metadata.imageUrl}`
+				: metadata.imageUrl
+			: "/images/cafe1.webp";
+
 		const handleAddToCart = () => {
 			if (!isConnected && onConnect) {
 				onConnect();
@@ -121,7 +128,7 @@ export default function ProductCatalog({
 		return (
 			<ProductCard
 				key={product.id}
-				image={metadata?.imageUrl ?? "/images/cafe1.webp"}
+				image={imageUrl}
 				region={metadata?.region ?? ""}
 				farmName={metadata?.farmName ?? ""}
 				variety={t(product.name)}

diff --git a/apps/web/src/app/_components/features/WalletConnect.tsx b/apps/web/src/app/_components/features/WalletConnect.tsx
@@ -12,7 +12,8 @@ import { signIn, signOut } from "next-auth/react";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { MESSAGE } from "~/constants";
+import { connect } from "starknetkit";
+import { ARGENT_WEBWALLET_URL, MESSAGE } from "~/constants";
 import BottomModal from "../ui/BottomModal";
 
 interface WalletConnectProps {
@@ -31,30 +32,63 @@ export default function WalletConnect({
 	isModal = true,
 }: WalletConnectProps) {
 	const [isClient, setIsClient] = useState(false);
+	const [isConnecting, setIsConnecting] = useState(false);
 	const { address } = useAccount();
-	const { connect, connectors } = useConnect();
+	const { connect: connectWallet, connectors } = useConnect();
 	const { disconnect } = useDisconnect();
 	const { signTypedDataAsync } = useSignTypedData(MESSAGE);
 	const { t } = useTranslation();
 	const router = useRouter();
 
 	const handleConnectWallet = async (connector: Connector): Promise<void> => {
 		if (connector) {
-			connect({ connector });
+			try {
+				const result = connectWallet({ connector });
+				console.log("connector result", result);
+			} catch (error) {
+				console.error("Error connecting wallet:", error);
+			}
+		}
+	};
+
+	const handleConnectArgentMobile = async (): Promise<void> => {
+		try {
+			setIsConnecting(true);
+			const result = await connect({
+				webWalletUrl: ARGENT_WEBWALLET_URL,
+				argentMobileOptions: {
+					dappName: "CofiBlocks",
+					url: "https://web.argent.xyz",
+				},
+			});
+
+			if (result?.connector) {
+				const connectorResult = connectWallet({
+					connector: result.connector as unknown as Connector,
+				});
+				console.log("connectorResult", connectorResult);
+			}
+		} catch (error) {
+			console.error("Error connecting Argent Mobile:", error);
+		} finally {
+			setIsConnecting(false);
 		}
 	};
 
 	const handleSignMessage = async (): Promise<void> => {
 		try {
 			const signature = await signTypedDataAsync();
 
-			await signIn("credentials", {
+			const signInResult = await signIn("credentials", {
 				address,
 				message: JSON.stringify(MESSAGE),
 				redirect: false,
 				signature,
 			});
-			onSuccess?.();
+
+			if (signInResult?.ok) {
+				onSuccess?.();
+			}
 		} catch (err) {
 			console.error(t("error_signing_message"), err);
 		}
@@ -82,7 +116,7 @@ export default function WalletConnect({
 				{address ? (
 					<>
 						<Button
-							onClick={handleSignMessage}
+							onClick={() => void handleSignMessage()}
 							variant="primary"
 							size="lg"
 							className="w-full max-w-[15rem] px-4 py-3 text-content-title text-base font-medium font-inter rounded-lg border border-surface-secondary-default transition-all duration-300 hover:bg-surface-secondary-hover"
@@ -101,20 +135,35 @@ export default function WalletConnect({
 					<>
 						{isClient && (
 							<>
-								{connectors.map((connector) => (
-									<Button
-										key={connector.id}
-										onClick={() => handleConnectWallet(connector)}
-										className="w-full max-w-[15rem]"
-									>
-										<div className="flex items-center justify-between">
-											<div className="flex items-center">
-												<span>{t(`${connector.id}`)}</span>
-											</div>
-											<ChevronRightIcon className="h-5 w-5" />
+								<Button
+									onClick={() => void handleConnectArgentMobile()}
+									className="w-full max-w-[15rem]"
+									disabled={isConnecting}
+								>
+									<div className="flex items-center justify-between">
+										<div className="flex items-center">
+											<span>
+												{isConnecting ? t("connecting") : t("argent_mobile")}
+											</span>
 										</div>
-									</Button>
-								))}
+										<ChevronRightIcon className="h-5 w-5" />
+									</div>
+								</Button>
+								{Array.isArray(connectors) &&
+									connectors.map((connector) => (
+										<Button
+											key={connector.id}
+											onClick={() => void handleConnectWallet(connector)}
+											className="w-full max-w-[15rem]"
+										>
+											<div className="flex items-center justify-between">
+												<div className="flex items-center">
+													<span>{t(`${connector.id}`)}</span>
+												</div>
+												<ChevronRightIcon className="h-5 w-5" />
+											</div>
+										</Button>
+									))}
 							</>
 						)}
 					</>