React with Custom Auth

npm install @chipi-stack/chipi-react

VITE_CHIPI_API_KEY=your_chipi_api_public_key

// App.tsx

import { ChipiProvider } from "@chipi-stack/chipi-react";

export default function App() {
  return (
    <YourAuthProvider>
      <ChipiProvider config={{ apiPublicKey: import.meta.env.VITE_CHIPI_API_KEY }}>
        {/* Your app components */}
      </ChipiProvider>
    </YourAuthProvider>
  );
}

// components/CreateWallet.tsx

import { useState } from "react";
import { useCreateWallet, Chain } from "@chipi-stack/chipi-react";

// Replace with your auth provider's token method
async function getBearerToken(): Promise<string> {
  // Auth0: const { getAccessTokenSilently } = useAuth0();
  // Cognito: const session = await Auth.currentSession();
  // Okta: const { authState } = useOktaAuth();
  // Keycloak: const { token } = useKeycloak();
  return "your-jwt-token";
}

export default function CreateWallet() {
  const { createWalletAsync, isLoading } = useCreateWallet();
  const [encryptKey, setEncryptKey] = useState("");

  const handleCreateWallet = async () => {
    const bearerToken = await getBearerToken();

    const response = await createWalletAsync({
      params: { encryptKey, externalUserId: "your-user-id", chain: Chain.STARKNET },
      bearerToken,
    });

    console.log("Wallet created:", response.publicKey);
  };

  return (
    <div>
      <input
        type="password"
        placeholder="Enter encryption key"
        value={encryptKey}
        onChange={(e) => setEncryptKey(e.target.value)}
      />
      <button onClick={handleCreateWallet} disabled={isLoading}>
        {isLoading ? "Creating..." : "Create Wallet"}
      </button>
    </div>
  );
}