You need to connect your wallet to view your provider dashboard.
+
+
Provider Dashboard
+
+ {/* Provider information card */}
+
+
+
+
+ Provider Account Details
+
+
+
+
+
Business Information
+
+
Type: {provider.businessType}
+
Email: {provider.businessEmail}
+
Address: {provider.businessAddress}
+
+
+
+
Payment Details
+
+
Method: {provider.paymentMethod}
+ {provider.paymentMethod === 'crypto' && provider.walletAddress && (
+
+ Wallet:
+ {provider.walletAddress}
+
+ )}
+ {provider.paymentMethod === 'bank' && (
+ <>
+
Bank: {provider.bankName}
+
Account: {provider.accountNumber}
+
+ )}
+ {provider.taxId &&
Tax ID: {provider.taxId}
}
+
+
+
+
Verification Status
+
+
+
+
+
+
+
+ {/* Ad Locations */}
+
+
+
Your Ad Locations
window.location.reload()}
+ className="bg-black text-white hover:bg-gray-800"
+ onClick={() => router.push('/provider-dashboard/locations/new')}
>
- Retry Connection
+
- )}
-
- {/* Display blockchain connection status notification if there are errors */}
- {serviceError && (
-
-
Blockchain Connection Error
-
{serviceError.message || "Unable to connect to blockchain service"}
- {!isCorrectChain && (
-
- Switch to Holesky
-
- )}
+
+
+
No ad locations added yet. Add your first location to start earning.
- )}
-
+
+
- )
+ );
}
diff --git a/src/app/provider-registration/page.tsx b/src/app/provider-registration/page.tsx
index 5ce5aae..c3444a1 100644
--- a/src/app/provider-registration/page.tsx
+++ b/src/app/provider-registration/page.tsx
@@ -2,7 +2,7 @@
import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
-import { Check, ChevronRight, Building2, CreditCard, FileText, MapPin, Loader2, AlertCircle, Scan } from "lucide-react"
+import { Check, ChevronRight, Building2, CreditCard, FileText, Loader2, Scan } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
@@ -10,8 +10,6 @@ import { Textarea } from "@/components/ui/textarea"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { useRoleStore } from "@/lib/store"
import { toast } from "@/lib/toast"
-import { useAdContract } from "@/hooks/use-ad-contract"
-import { usePrivy } from "@privy-io/react-auth"
import { v4 as uuidv4 } from "uuid"
import dynamic from "next/dynamic"
@@ -22,8 +20,6 @@ const SelfQRcodeWrapper = dynamic(
)
// Import types but don't actually import the module directly
-// This is just for TypeScript type checking
-type SelfAppBuilderType = import('@selfxyz/qrcode').SelfAppBuilder;
type SelfAppOptionsType = import('@selfxyz/qrcode').SelfAppOptions;
// Type definitions for component props
@@ -246,6 +242,7 @@ const VerificationStep = ({ formData, updateForm, nextStep, prevStep }: StepProp
const [userId, setUserId] = useState
(null);
const [selfAppInstance, setSelfAppInstance] = useState(null);
const [loadingQR, setLoadingQR] = useState(false);
+ const [isSubmitting, setIsSubmitting] = useState(false);
useEffect(() => {
// Generate a user ID when the component mounts if it doesn't exist
@@ -268,18 +265,16 @@ const VerificationStep = ({ formData, updateForm, nextStep, prevStep }: StepProp
const config: SelfAppOptionsType = {
appName: "AdNet Protocol",
scope: "adnet-protocol",
- endpoint: `${window.location.origin}/api/verify`,
+ endpoint: `https://3b28-111-235-226-124.ngrok-free.app/api/verify`,
+ endpointType: "staging_https",
+ logoBase64: "https://i.imgur.com/Rz8B3s7.png",
userId,
+ devMode: true,
disclosures: {
- // Request passport information
name: true,
nationality: true,
date_of_birth: true,
-
- // Set verification rules
minimumAge: 18,
- excludedCountries: ["IRN", "PRK", "RUS"],
- ofac: true,
},
};
@@ -301,7 +296,7 @@ const VerificationStep = ({ formData, updateForm, nextStep, prevStep }: StepProp
setShowSelfQR(true);
};
- const handleSelfVerificationSuccess = (data: any) => {
+ const handleSelfVerificationSuccess = (data: Record) => {
console.log("Self verification successful:", data);
// Update the form with verification data
@@ -310,8 +305,8 @@ const VerificationStep = ({ formData, updateForm, nextStep, prevStep }: StepProp
selfVerificationData: {
name: data?.credentialSubject?.name,
nationality: data?.credentialSubject?.nationality,
- date_of_birth: data?.credentialSubject?.date_of_birth
- }
+ date_of_birth: data?.credentialSubject?.date_of_birth,
+ },
});
setShowSelfQR(false);
@@ -327,7 +322,6 @@ const VerificationStep = ({ formData, updateForm, nextStep, prevStep }: StepProp
// Only render the Self QR code if userId exists and showSelfQR is true
const renderSelfQRCode = () => {
if (!userId || !showSelfQR) return null;
-
if (typeof window === 'undefined') return null;
return (
@@ -373,15 +367,21 @@ const VerificationStep = ({ formData, updateForm, nextStep, prevStep }: StepProp
);
};
+ // Pass the isSubmitting state up to the parent component
+ const handleNext = () => {
+ setIsSubmitting(true);
+ nextStep();
+ };
+
return (
Verification
-
Upload documents to verify your business identity.
+
Verify your identity and business. Choose one option:
{/* Self Protocol Verification Option */}
-
Identity Verification
+
Identity Verification via Self
- {/* Existing Verification Options */}
-
-
ID Verification (Alternative)
-
-
-
-
- Upload a government-issued ID (Passport, Driver's License, etc.)
-
-
updateForm({ idVerified: true })}
- >
- Upload ID
-
- {formData.idVerified && (
-
-
Uploaded
+ {/* Render alternative verification options only if not verified via Self */}
+ {!formData.selfVerified && (
+ <>
+
+
ID Verification (Alternative)
+
+
+
+
+ Upload a government-issued ID (Passport, Driver's License, etc.)
+
+
updateForm({ idVerified: true })}
+ >
+ Upload ID
+
+ {formData.idVerified && (
+
+
+ )}
- )}
+
-
-
-
-
Business Verification
-
-
-
-
Upload business registration documents or proof of business
-
updateForm({ businessVerified: true })}
- >
- Upload Documents
-
- {formData.businessVerified && (
-
-
Uploaded
+
+
Business Verification
+
+
+
+
+ Upload business registration documents or proof of business
+
+
updateForm({ businessVerified: true })}
+ >
+ Upload Documents
+
+ {formData.businessVerified && (
+
+
+ )}
- )}
+
-
-
+
+ )}
+ {/* Terms & Conditions */}
Terms & Conditions
@@ -474,8 +481,7 @@ const VerificationStep = ({ formData, updateForm, nextStep, prevStep }: StepProp
onChange={(e) => updateForm({ termsAgreed: e.target.checked })}
/>
- I agree to the AdNet Provider Terms of Service and understand that my information will be verified before
- I can list locations.
+ I agree to the AdNet Provider Terms of Service and understand that my information will be verified before I can list locations.
@@ -488,25 +494,38 @@ const VerificationStep = ({ formData, updateForm, nextStep, prevStep }: StepProp
Back
- Complete Registration
- )
-}
+ );
+};
-const SuccessStep = ({ router, transactionHash = null }: {
- router: any;
- transactionHash?: string | null;
-}) => {
+const SuccessStep = ({ router }: { router: ReturnType
}) => {
return (
@@ -514,24 +533,9 @@ const SuccessStep = ({ router, transactionHash = null }: {
Registration Complete!
- Congratulations! Your provider account has been successfully created and registered on-chain.
+ Congratulations! Your provider account has been successfully created.
- {transactionHash && (
-
- )}
-
router.push("/provider-dashboard")}
className="w-full bg-[#FF3366] text-white border-[3px] border-black hover:bg-[#e0234e] transition-all font-bold py-6 h-auto rounded-none"
@@ -542,221 +546,11 @@ const SuccessStep = ({ router, transactionHash = null }: {
)
}
-const OnChainRegistrationStep = ({
- formData,
- prevStep,
- completeRegistration
-}: {
- formData: FormData;
- prevStep: () => void;
- completeRegistration: (hash: string) => void;
-}) => {
- const { operations, isLoading, error, isCorrectChain, switchChain } = useAdContract();
- const { authenticated, login } = usePrivy();
- const [isRegistering, setIsRegistering] = useState(false);
-
- // Generate a metadata string from the form data
- const generateMetadata = () => {
- return JSON.stringify({
- businessName: formData.businessName,
- businessType: formData.businessType,
- businessEmail: formData.businessEmail,
- paymentMethod: formData.paymentMethod
- });
- };
-
- // Generate a unique device ID (just for demo purposes)
- const generateDeviceId = () => {
- return `0x${Math.random().toString(16).slice(2, 10)}${Math.random().toString(16).slice(2, 10)}`;
- };
-
- const handleConnect = async () => {
- try {
- await login();
- } catch (err) {
- console.error("Login error:", err);
- toast(
- "Login Failed",
- { description: "Failed to connect wallet. Please try again." },
- "error"
- );
- }
- };
-
- const handleSwitchNetwork = async () => {
- try {
- await switchChain();
- } catch (err) {
- console.error("Network switch error:", err);
- toast(
- "Network Switch Failed",
- { description: "Failed to switch network. Please try manually." },
- "error"
- );
- }
- };
-
- const handleRegister = async () => {
- setIsRegistering(true);
-
- try {
- const metadata = generateMetadata();
- const deviceId = generateDeviceId();
-
- const hash = await operations.registerProvider.execute(metadata, deviceId);
-
- if (hash) {
- toast(
- "Registration Submitted",
- { description: "Your provider registration has been submitted to the blockchain." },
- "success"
- );
-
- // Pass the transaction hash to the success step
- completeRegistration(hash);
- } else {
- throw new Error("Failed to register provider - transaction not sent");
- }
- } catch (err) {
- console.error("Registration error:", err);
- toast(
- "Registration Failed",
- { description: err instanceof Error ? err.message : "Unknown error" },
- "error"
- );
- setIsRegistering(false);
- }
- };
-
- // Not authenticated
- if (!authenticated) {
- return (
-
-
On-Chain Registration
-
Connect your wallet to complete the provider registration on the blockchain.
-
-
-
-
-
-
Wallet Connection Required
-
- To register as a provider, you'll need to connect your wallet and submit an on-chain transaction.
-
-
-
-
-
-
- Connect Wallet
-
-
-
- Back
-
-
-
On-Chain Registration
-
Switch to the Holesky testnet to complete your registration.
-
-
-
-
-
-
Wrong Network
-
- Please switch to the Holesky testnet to register as a provider.
-
-
-
-
-
-
- Switch to Holesky Testnet
-
-
-
- Back
-
-
-
On-Chain Registration
-
Complete your provider registration on the blockchain to start earning.
-
-
-
Ready to Register
-
- Your information is ready to be registered on the blockchain. This requires a transaction to be signed with your wallet.
-
-
-
-
-
Business Name:
-
{formData.businessName}
-
-
Business Type:
-
{formData.businessType}
-
-
Email:
-
{formData.businessEmail}
-
-
-
-
-
-
- Back
-
-
- {isRegistering ? (
- <>
-
-
-
(null)
+ const [isSubmitting, setIsSubmitting] = useState(false)
const [formData, setFormData] = useState({
businessName: "",
businessType: "individual",
@@ -788,6 +582,14 @@ export default function ProviderRegistrationPage() {
toast("Missing Information", { description: "Please enter your wallet address" }, "error")
return
}
+
+ // If we're at the verification step and it's validated, submit the form
+ if (currentStep === 3 &&
+ ((formData.selfVerified && formData.termsAgreed) ||
+ (!formData.selfVerified && formData.idVerified && formData.businessVerified && formData.termsAgreed))) {
+ handleSubmitProvider();
+ return;
+ }
setCurrentStep(currentStep + 1)
}
@@ -795,19 +597,53 @@ export default function ProviderRegistrationPage() {
const prevStep = () => {
setCurrentStep(currentStep - 1)
}
-
- const completeRegistration = (hash: string) => {
- setTransactionHash(hash);
- setProviderRegistered(true);
- setCurrentStep(5);
- }
+
+ const handleSubmitProvider = async () => {
+ try {
+ setIsSubmitting(true);
+
+ const response = await fetch('/api/provider/register', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(formData),
+ });
+
+ const data = await response.json();
+
+ if (!response.ok) {
+ throw new Error(data.error || 'Failed to register provider');
+ }
+
+ // Set provider as registered in the store
+ setProviderRegistered(true);
+
+ // Move to success page
+ setCurrentStep(4);
+
+ toast(
+ "Registration Successful",
+ { description: "Your provider account has been created successfully." },
+ "success"
+ );
+ } catch (error) {
+ console.error('Error registering provider:', error);
+ toast(
+ "Registration Failed",
+ { description: error instanceof Error ? error.message : "An unknown error occurred" },
+ "error"
+ );
+ } finally {
+ setIsSubmitting(false);
+ }
+ };
const renderProgressSteps = () => {
const steps = [
{ icon: Building2, label: "Business Info" },
{ icon: CreditCard, label: "Payment Setup" },
{ icon: FileText, label: "Verification" },
- { icon: MapPin, label: "On-Chain Registration" },
]
return (
@@ -846,7 +682,7 @@ export default function ProviderRegistrationPage() {
Provider Registration
- {currentStep <= 4 && renderProgressSteps()}
+ {currentStep <= 3 && renderProgressSteps()}
{currentStep === 1 &&
)
diff --git a/src/hooks/use-provider.ts b/src/hooks/use-provider.ts
new file mode 100644
index 0000000..7ddf782
--- /dev/null
+++ b/src/hooks/use-provider.ts
@@ -0,0 +1,77 @@
+import { useState, useEffect } from 'react';
+import { toast } from '@/lib/toast';
+
+interface Provider {
+ id: string;
+ businessName: string;
+ businessType: string;
+ businessEmail: string;
+ businessAddress: string;
+ paymentMethod: string;
+ walletAddress: string | null;
+ bankName: string | null;
+ accountNumber: string | null;
+ taxId: string | null;
+ selfVerified: boolean;
+ selfVerificationName: string | null;
+}
+
+interface UseProviderResult {
+ provider: Provider | null;
+ isLoading: boolean;
+ error: string | null;
+ refreshProvider: () => Promise;
+ needsRegistration: boolean;
+}
+
+export function useProvider(): UseProviderResult {
+ const [provider, setProvider] = useState(null);
+ const [isLoading, setIsLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [needsRegistration, setNeedsRegistration] = useState(false);
+
+ const fetchProviderData = async () => {
+ try {
+ setIsLoading(true);
+ setError(null);
+
+ const response = await fetch('/api/provider/data');
+ const data = await response.json();
+
+ if (!response.ok) {
+ // Check if we need registration
+ if (data.needsRegistration) {
+ setNeedsRegistration(true);
+ setProvider(null);
+ } else {
+ throw new Error(data.error || 'Failed to fetch provider data');
+ }
+ } else {
+ setProvider(data.provider);
+ setNeedsRegistration(false);
+ }
+ } catch (err) {
+ console.error('Error fetching provider data:', err);
+ setError(err instanceof Error ? err.message : 'An unknown error occurred');
+ toast(
+ "Error",
+ { description: err instanceof Error ? err.message : "Failed to load provider data" },
+ "error"
+ );
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ useEffect(() => {
+ fetchProviderData();
+ }, []);
+
+ return {
+ provider,
+ isLoading,
+ error,
+ refreshProvider: fetchProviderData,
+ needsRegistration
+ };
+}
\ No newline at end of file
diff --git a/src/lib/auth.ts b/src/lib/auth.ts
new file mode 100644
index 0000000..58f7aaa
--- /dev/null
+++ b/src/lib/auth.ts
@@ -0,0 +1,16 @@
+// Simple auth implementation for development
+// In a real application, you would use a proper auth library
+
+/**
+ * Get the current user session
+ * This is a mock implementation that always returns a dev user
+ */
+export async function getSession() {
+ // For development purposes only - this always returns a mock session
+ // Replace with real authentication in production
+ return {
+ user: {
+ id: 'dev-user-id',
+ }
+ };
+}
\ No newline at end of file
diff --git a/src/types/self.d.ts b/src/types/self.d.ts
index 58607c0..1368faf 100644
--- a/src/types/self.d.ts
+++ b/src/types/self.d.ts
@@ -3,8 +3,10 @@ declare module '@selfxyz/qrcode' {
appName: string;
scope: string;
endpoint: string;
+ endpointType?: string;
logoBase64?: string;
userId: string;
+ devMode?: boolean;
disclosures?: {
issuing_state?: boolean;
name?: boolean;
@@ -47,7 +49,7 @@ declare module '@selfxyz/core' {
}
export class SelfBackendVerifier {
- constructor(rpcUrl: string, scope: string);
+ constructor(scope: string, endpoint: string, identityType?: string, devMode?: boolean, mockPassport?: boolean);
setMinimumAge(age: number): void;
excludeCountries(...countries: string[]): void;
enableNameAndDobOfacCheck(): void;