#Build a DID Resolver React Application

import React, { useState } from 'react';

const DidResolverForm = () => {
    // State for storing the input DID and resolved document
    const [did, setDid] = useState('');
    const [didDocument, setDidDocument] = useState(null);
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState(null);

    // Handle form submission
    const handleSubmit = async (e) => {
        e.preventDefault();

        // Clear previous results and errors
        setDidDocument(null);
        setError(null);
        setIsLoading(true);

        try {
            // We'll implement the API call in the next step
        } catch (error) {
            setError('Error resolving DID. Please check your input and try again.');
            console.error('Error resolving DID:', error);
        } finally {
            setIsLoading(false);
        }
    };

    return (
        <div className="resolver-container">
            <h2>Vidos DID Resolver</h2>
            <form onSubmit={handleSubmit}>
                <div className="input-group">
                    <label htmlFor="did-input">Enter a DID to resolve:</label>
                    <input
                        id="did-input"
                        type="text"
                        placeholder="e.g., did:key:z6MkhaXgBZDvotDkL5257faiztiGiC2QtKLGpbnnEGta2doK"
                        value={did}
                        onChange={(e) => setDid(e.target.value)}
                        required
                    />
                </div>
                <button type="submit" disabled={isLoading || !did.trim()}>
                    {isLoading ? 'Resolving...' : 'Resolve DID'}
                </button>
            </form>

            {/* Show error message if any */}
            {error && <div className="error-message">{error}</div>}

            {/* Display resolved DID document */}
            {didDocument && (
                <div className="did-document">
                    <div className="document-header">
                        <h3>DID Document</h3>
                        <button
                            onClick={() => navigator.clipboard.writeText(JSON.stringify(didDocument, null, 2))}
                            className="copy-button"
                        >
                            Copy JSON
                        </button>
                    </div>
                    <pre>{JSON.stringify(didDocument, null, 2)}</pre>
                </div>
            )}
        </div>
    );
};

export default DidResolverForm;

import React from 'react';
import './App.css';
import DidResolverForm from './DidResolverForm';

function App() {
    return (
        <div className="App">
            <header className="App-header">
                <h1>Vidos DID Resolution</h1>
            </header>
            <main>
                <DidResolverForm />
            </main>
            <footer>
                <p>Powered by Vidos Universal Resolver</p>
            </footer>
        </div>
    );
}

export default App;

const handleSubmit = async (e) => {
    e.preventDefault();

    // Clear previous results and errors
    setDidDocument(null);
    setError(null);
    setIsLoading(true);

    try {
        // Replace with your actual resolver endpoint and API key
        const resolverEndpoint = 'YOUR_RESOLVER_ENDPOINT';
        const apiKey = 'YOUR_API_KEY';

        // Make the API call
        const response = await fetch(`${resolverEndpoint}/${did}`, {
            headers: {
                Authorization: `Bearer ${apiKey}`,
                Accept: 'application/json',
            },
        });

        // Handle non-200 responses
        if (!response.ok) {
            const errorData = await response.json().catch(() => ({}));
            throw new Error(errorData.message || `HTTP error ${response.status}`);
        }

        // Parse the response
        const data = await response.json();
        setDidDocument(data);
    } catch (error) {
        setError(`Error resolving DID: ${error.message}`);
        console.error('Error details:', error);
    } finally {
        setIsLoading(false);
    }
};

import React, { useState } from 'react';
import './DidResolverForm.css';

// Rest of your component code...

import React, { useState } from 'react';
import './DidResolverForm.css';

const DidResolverForm = () => {
    // Existing state variables...

    // Example DIDs
    const exampleDids = [
        'did:key:z6MkhaXgBZDvotDkL5257faiztiGiC2QtKLGpbnnEGta2doK',
        'did:web:w3c-ccg.github.io',
        'did:ion:EiClkZMDxPKqC9c-umQfTkR8vvZ9JPhl_xLDI9Nfk38w5w',
    ];

    // Function to set an example DID
    const setExampleDid = (example) => {
        setDid(example);
    };

    // Rest of your component code...

    return (
        <div className="resolver-container">
            <h2>Vidos DID Resolver</h2>

            {/* Example DIDs section */}
            <div className="example-dids">
                <p>Try an example DID:</p>
                <div className="example-buttons">
                    {exampleDids.map((example, index) => (
                        <button
                            key={index}
                            type="button"
                            className="example-button"
                            onClick={() => setExampleDid(example)}
                        >
                            {example.split(':').slice(0, 2).join(':')}
                        </button>
                    ))}
                </div>
            </div>

            {/* Existing form code... */}
        </div>
    );
};

// Add a loading state component
const LoadingSpinner = () => (
    <div className="loading-spinner">
        <div className="spinner"></div>
        <p>Resolving DID...</p>
    </div>
);

const DidResolverForm = () => {
    // Existing code...

    return (
        <div className="resolver-container">
            {/* Existing code... */}

            {/* Add this loader */}
            {isLoading && <LoadingSpinner />}

            {/* Rest of your component */}
        </div>
    );
};

// Add state for copy button
const [copied, setCopied] = useState(false);

// Updated copy function
const copyToClipboard = () => {
    navigator.clipboard.writeText(JSON.stringify(didDocument, null, 2));
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
};

// In your didDocument section:
<button onClick={copyToClipboard} className="copy-button">
    {copied ? 'Copied!' : 'Copy JSON'}
</button>;