### Install @justweb3/ui

Source: https://github.com/justaname-id/justaname-sdk/blob/main/docs/sdk/JustWeb3 UI/README.md

Instructions for installing the @justweb3/ui library using npm or yarn package managers.

```bash
npm install @justweb3/ui

# or

yarn add @justweb3/ui
```

--------------------------------

### Install @justaname.id/siwens Package

Source: https://github.com/justaname-id/justaname-sdk/blob/main/docs/sdk/siwens/README.md

Instructions for installing the SIWENS SDK using either npm or yarn package managers.

```bash
npm install @justaname.id/siwens

# or

yarn add @justaname.id/siwens
```

--------------------------------

### Install Talent Protocol Plugin

Source: https://github.com/justaname-id/justaname-sdk/blob/main/packages/@justweb3/talent-protocol-plugin/README.md

Demonstrates how to install the @justweb3/talent-protocol-plugin using npm or yarn package managers.

```bash
npm install @justweb3/talent-protocol-plugin
```

```bash
yarn add @justweb3/talent-protocol-plugin
```

--------------------------------

### Install @justweb3/poap-plugin

Source: https://github.com/justaname-id/justaname-sdk/blob/main/packages/@justweb3/poap-plugin/README.md

Instructions for installing the POAP Plugin using npm or yarn package managers.

```bash
npm install @justweb3/poap-plugin

# or

yarn add @justweb3/poap-plugin
```

--------------------------------

### Install @justweb3/widget and Dependencies

Source: https://github.com/justaname-id/justaname-sdk/blob/main/docs/sdk/JustWeb3 Widget/README.md

Installs the main widget library and essential dependencies like wagmi, RainbowKit, and React Query using npm.

```bash
npm install @justweb3/widget
npm install wagmi @rainbow-me/rainbowkit @tanstack/react-query
```

--------------------------------

### Install @justweb3/xmtp-plugin

Source: https://github.com/justaname-id/justaname-sdk/blob/main/packages/@justweb3/xmtp-plugin/README.md

Instructions for installing the XMTP Plugin using npm or yarn. This is the first step to integrate XMTP chat capabilities.

```bash
npm install @justweb3/xmtp-plugin

# or

yarn add @justweb3/xmtp-plugin
```

--------------------------------

### Install @justweb3/efp-plugin

Source: https://github.com/justaname-id/justaname-sdk/blob/main/docs/sdk/JustWeb3 EFP Plugin/README.md

Installs the EFP Plugin using npm or yarn. This is the first step to integrating EFP functionalities into your dApp.

```bash
npm install @justweb3/efp-plugin

# or

yarn add @justweb3/efp-plugin
```

--------------------------------

### Install JustaName SDK

Source: https://github.com/justaname-id/justaname-sdk/blob/main/docs/sdk/JustaName Core SDK/README.md

Installs the JustaName SDK package using npm or yarn. This is the first step to integrate the SDK into your project.

```bash
npm install @justaname.id/sdk

# or

yarn add @justaname.id/sdk
```

--------------------------------

### Install JustaName React SDK

Source: https://github.com/justaname-id/justaname-sdk/blob/main/docs/sdk/JustaName React SDK/README.md

Installs the JustaName React SDK using either npm or yarn package managers.

```bash
npm install @justaname.id/react

# or

yarn add @justaname.id/react
```

--------------------------------

### Install SIWENS Package

Source: https://github.com/justaname-id/justaname-sdk/blob/main/packages/siwens/README.md

Installs the SIWENS SDK using either npm or yarn package managers. This is the first step to integrate SIWENS into your project.

```bash
npm install siwens

# or

yarn add siwens
```

--------------------------------

### Install Dentity Plugin

Source: https://github.com/justaname-id/justaname-sdk/blob/main/packages/@justweb3/dentity-plugin/README.md

Installs the Dentity Plugin using npm or yarn. This is a prerequisite for using the plugin in your JustWeb3 Widget.

```bash
npm install @justweb3/dentity-plugin

# or

yarn add @justweb3/dentity-plugin
```

--------------------------------

### Install @justverified/plugin using npm or yarn

Source: https://github.com/justaname-id/justaname-sdk/blob/main/packages/@justverified/plugin/README.md

This snippet shows how to install the @justverified/plugin using either npm or yarn. It's a prerequisite for integrating social verification into your dApp.

```bash
npm install @justverified/plugin

# or

yarn add @justverified/plugin
```

--------------------------------

### Install @justverified/plugin via npm or yarn

Source: https://github.com/justaname-id/justaname-sdk/blob/main/docs/sdk/JustVerified Plugin/README.md

Installs the @justverified/plugin package using either npm or yarn package managers. This is the initial step to integrate social verification capabilities into your dApp.

```bash
npm install @justverified/plugin
```

```bash
yarn add @justverified/plugin
```

--------------------------------

### Setup JustWeb3ThemeProvider for consistent theming

Source: https://github.com/justaname-id/justaname-sdk/blob/main/packages/@justweb3/ui/README.md

This React/TypeScript code demonstrates how to wrap your application with `JustWeb3ThemeProvider` to enable theme context and customize colors like primary, background, and destructive.

```tsx
'use client';

import { JustWeb3ThemeProvider } from '@justweb3/ui';

const App = ({ children }) => {
  return (
    <JustWeb3ThemeProvider
      color={{
        primary: 'hsl(216, 90%, 58%)', // Custom primary color
        background: 'hsl(0, 0%, 98%)', // Custom background color
        destructive: 'hsl(0, 100%, 50%)', // Custom destructive color
      }}
    >
      {children}
    </JustWeb3ThemeProvider>
  );
};

export default App;

```

--------------------------------

### Setup JustWeb3ThemeProvider

Source: https://github.com/justaname-id/justaname-sdk/blob/main/docs/sdk/JustWeb3 UI/README.md

Demonstrates how to set up the `JustWeb3ThemeProvider` to enable theme context for a React application. It shows how to wrap the application with the provider and set initial custom colors for primary, background, and destructive themes.

```tsx
'use client';

import { JustWeb3ThemeProvider } from '@justweb3/ui';

const App = ({ children }) => {
  return (
    <JustWeb3ThemeProvider
      color={{
        primary: 'hsl(216, 90%, 58%)',
        background: 'hsl(0, 0%, 98%)',
        destructive: 'hsl(0, 100%, 50%)',
      }}
    >
      {children}
    </JustWeb3ThemeProvider>
  );
};

export default App;
```

--------------------------------

### Configure JustWeb3 Widget with @justverified/plugin

Source: https://github.com/justaname-id/justaname-sdk/blob/main/docs/sdk/JustVerified Plugin/README.md

Example configuration for the JustWeb3 Widget, enabling social verification for GitHub and Discord using the JustVerifiedPlugin. This setup allows users to authenticate via these social platforms.

```tsx
import { JustVerifiedPlugin } from '@justverified/plugin';

const justweb3Config = {
  config: {
    origin: "http://localhost:3000/",
    domain: "localhost",
    signInTtl: 86400000,
  },
  openOnWalletConnect: true,
  allowedEns: "all",
  logo: "",
  ensDomains: [
    {
      ensDomain: "yourdomain.eth",
      apiKey: "YOUR_API_KEY",
      chainId: 1,
    },
  ],
  plugins: [
    JustVerifiedPlugin(['github', 'discord']) // Enable GitHub and Discord verification
  ],
  color: {
    primary: "#FEA801",
    background: "hsl(0, 0%, 100%)",
    destructive: "hsl(0, 100%, 50%)",
  },
};

```

--------------------------------

### Enable XMTP Plugin in JustWeb3 Widget Configuration

Source: https://github.com/justaname-id/justaname-sdk/blob/main/packages/@justweb3/xmtp-plugin/README.md

Example demonstrating how to configure the JustWeb3 Widget to use the XMTPPlugin. It requires importing the plugin and passing an environment parameter.

```tsx
import { XMTPPlugin } from '@justweb3/xmtp-plugin';

const justweb3Config = {
  config: {
    origin: 'http://localhost:3000/',
    domain: 'localhost',
    signInTtl: 86400000,
  },
  plugins: [
    XMTPPlugin(env), // 'local' | 'production' | 'dev'
  ],
  ensDomains: [
    {
      ensDomain: 'yourdomain.eth',
      apiKey: 'YOUR_API_KEY',
      chainId: 1,
    },
  ],
  color: {
    primary: '#FEA801',
    background: 'hsl(0, 0%, 100%)',
    destructive: 'hsl(0, 100%, 50%)',
  },
};
```

--------------------------------

### Button Component React Example

Source: https://github.com/justaname-id/justaname-sdk/blob/main/docs/sdk/JustWeb3 UI/functions/Button.md

Demonstrates the usage of the Button component from the @justweb3/ui library. It accepts ButtonProps and RefAttributes.

```typescript
import React, { ReactNode, RefAttributes } from "react";
import { ButtonProps } from "../interfaces/ButtonProps";

/**
 * Button Component
 * @param props - ButtonProps and RefAttributes<HTMLButtonElement>
 * @returns ReactNode
 */
function Button(props: ButtonProps & RefAttributes<HTMLButtonElement>): ReactNode {
  // Implementation details would go here
  return (
    <button {...props}>
      {/* Button content */}
    </button>
  );
}

export default Button;
```

--------------------------------

### Example Integration with RainbowKit and Wagmi

Source: https://github.com/justaname-id/justaname-sdk/blob/main/docs/sdk/JustWeb3 Widget/README.md

Demonstrates setting up the JustWeb3 Widget within a React application using Next.js, integrating with RainbowKit for wallet connections and Wagmi for blockchain interactions. It configures necessary providers like WagmiProvider, QueryClientProvider, RainbowKitProvider, and JustWeb3Provider.

```tsx
'use client';

import "@rainbow-me/rainbowkit/styles.css";
import '@justweb3/widget/styles.css';
import {
  getDefaultConfig,
  getDefaultWallets,
  RainbowKitProvider,
} from "@rainbow-me/rainbowkit";
import { WagmiProvider } from "wagmi";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { JustWeb3Provider, JustWeb3Button } from "@justweb3/widget";
import { mainnet, sepolia } from "wagmi/chains";

const Providers = ({ children }) => {
  const { wallets } = getDefaultWallets();
  const config = getDefaultConfig({
    appName: "Your dApp",
    wallets,
    chains: [mainnet, sepolia],
  });

  const justweb3Config = {
    config: {
      origin: "http://localhost:3000/",
      domain: "localhost",
      signInTtl: 86400000,
    },
    openOnWalletConnect: true,
    allowedEns: "all",
    logo: "",
    ensDomains: [
      {
        ensDomain: "yourdomain.eth",
        apiKey: "YOUR_API_KEY",
        chainId: 1,
      },
    ],
  };

  const queryClient = new QueryClient();

  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>
          <JustWeb3Provider config={justweb3Config}>
            {children}
          </JustWeb3Provider>
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
};

export default Providers;

```

--------------------------------

### Install GitHub Integration Component

Source: https://github.com/justaname-id/justaname-sdk/blob/main/docs/guide/use-cases/for-developers.md

This snippet shows the type definition for a component or class that can be used for GitHub integrations. It specifies the expected types for its properties or arguments.

```typescript
string | ComponentClass<any, any> | FunctionComponent<any>
```

--------------------------------

### Setup JustaNameProvider in React App

Source: https://github.com/justaname-id/justaname-sdk/blob/main/docs/sdk/JustaName React SDK/README.md

Sets up the JustaNameProvider within a React application, integrating with Wagmi and RainbowKit for wallet connectivity and ENS interactions. It configures networks, ENS domains, and backend URLs.

```tsx
'use client';
import { JustaNameProvider } from '@justaname.id/react';
import { configureChains, createClient, WagmiConfig } from 'wagmi';
import { publicProvider } from 'wagmi/providers/public';
import { getDefaultWallets, RainbowKitProvider } from '@rainbow-me/rainbowkit';
import '@rainbow-me/rainbowkit/styles.css';
import { AddSubname } from './AddSubname';

const { wallets } = getDefaultWallets();

const config = getDefaultConfig({
  appName: 'JustaName Console',
  projectId: 'YOUR_PROJECT_ID',
  wallets: [
    ...wallets,
    {
      groupName: 'Other',
      wallets: [argentWallet, trustWallet, ledgerWallet],
    },
  ],
  chains: [mainnet, sepolia],
  ssr: true,
});

const justaNameConfig = {
  networks: [{ chainId: 1, providerUrl: 'https://mainnet.infura.io/v3/YOUR_INFURA_KEY' }],
  ensDomains: [
    {
      chainId: 1,
      domain: 'your_ens_domain.eth',
      apiKey: 'your-api-key' // Not recommended for production, use a backend server to protect your API key
    }
  ],
  backendUrl: 'https://your-backend-url.com' // Leave empty for same origin (e.g when using Next.js)
};

export const App = () => {
  return (
    <WagmiConfig client={config}>
      <RainbowKitProvider chains={chains}>
        <JustaNameProvider config={justaNameConfig}>
            <AddSubname />
        </JustaNameProvider>
      </RainbowKitProvider>
    </WagmiConfig>
  );
}

```

--------------------------------

### SIWENS Authentication: Sign In and Verify User Signature

Source: https://github.com/justaname-id/justaname-sdk/blob/main/docs/sdk/siwens/README.md

Example TypeScript code demonstrating how to use the SIWENS SDK to prepare a message for signing, sign it with an Ethereum wallet, and then verify the signature along with ENS domain ownership.

```typescript
import { SIWENS, InvalidDomainException, InvalidENSException, InvalidStatementException, InvalidTimeException } from '@justaname.id/siwens';
import { ethers } from 'ethers';

// Define your provider URL (e.g., Infura)
const providerUrl = 'https://mainnet.infura.io/v3/YOUR_INFURA_KEY';

const signer = new ethers.Wallet('YOUR_PRIVATE_KEY_ENS_HOLDER')

async function signInUser() {
   const siwens = new SIWENS({
      params: {
         domain: 'example.eth',       // The domain you're authenticating for
         ttl: 3600000,                // Time-to-Live (TTL) in milliseconds (1 hour)
         ens: 'user.example.eth',     // The ENS name being used
         statement: 'Signing into dApp',  // Optional custom sign-in statement
      },
      providerUrl
    });
   const message = await siwens.prepareMessage();
   const signature = await signer.signMessage(message);
   return signature;
}

// Verifying a user's sign-in request
async function verifyUserSignature(signature: string, message: string) {
    try {
        const siwe =  new SIWENS({
          params: message,
          providerUrl
        })
       
        const verification = await siwe.verifySignature({
            signature: signature,
        });
        
        console.log('ENS Sign-in successful!', verification.ens);
    } catch (error) {
        if (error instanceof InvalidENSException) {
            console.error('ENS Verification Failed:', error.message);
        } else {
            console.error('Error during verification:', error.message);
        }
    }
}

// Example usage
signInUser().then(async (signature) => {
    await verifyUserSignature(signature, 'Signing into dApp');
});
```

--------------------------------

### Widget Configuration Options

Source: https://github.com/justaname-id/justaname-sdk/blob/main/docs/sdk/JustWeb3 Widget/README.md

Defines the configuration object for the JustWeb3 Widget, including API key setup, origin, domain, sign-in TTL, wallet connect behavior, allowed ENS domains, logo, ENS domain specifics, backend URL, and color customizations.

```tsx
const justweb3Config = {
  config: {
    origin: "http://localhost:3000/",
    domain: "localhost",
    signInTtl: 86400000,
  },
  openOnWalletConnect: true,
  allowedEns: "all",
  logo: "https://yourdomain.com/your-logo.png",
  ensDomains: [
    {
      chainId: 1,
      domain: 'your_ens_domain.eth',
      apiKey: 'your-api-key' // Not recommended for production, use a backend server to protect your API key
    }
  ],
  backendUrl: 'https://your-backend-url.com', // Leave empty for same origin (e.g when using Next.js)
  color: {
    primary: 'hsl(216, 90%, 58%)', // Sky Blue
    background: 'hsl(0, 0%, 100%)', // White
    destructive: 'hsl(0, 100%, 50%)', // Red
  },
};

```

--------------------------------

### Enable POAP Plugin in JustWeb3 Widget Configuration

Source: https://github.com/justaname-id/justaname-sdk/blob/main/packages/@justweb3/poap-plugin/README.md

Example of how to integrate and configure the POAPPlugin within the JustWeb3 Widget's configuration object. It shows how to optionally provide an API key for client-side or backend calls to the Talent Protocol API.

```tsx
import { POAPPlugin } from '@justweb3/poap-plugin';

const justweb3Config = {
  config: {
    origin: 'http://localhost:3000/',
    domain: 'localhost',
    signInTtl: 86400000,
  },
  plugins: [
    POAPPlugin({
      apiKey: "<YOUR_API_KEY>", // # Optional: Calls the Talent Protocol API from the client side
      backendUrl: "<YOUR_BACKEND_URL>", // # Optional: Calls the Talent Protocol API from the backend, best for production
    })
  ],
  ensDomains: [
    {
      ensDomain: 'yourdomain.eth',
      apiKey: 'YOUR_API_KEY',
      chainId: 1,
    },
  ],
  color: {
    primary: '#FEA801',
    background: 'hsl(0, 0%, 100%)',
    destructive: 'hsl(0, 100%, 50%)',
  },
};

```

--------------------------------

### CSS Variables for Theming

Source: https://github.com/justaname-id/justaname-sdk/blob/main/docs/sdk/JustWeb3 UI/README.md

Provides an example of CSS variables used internally by `@justweb3/ui` for theme management. These variables define primary, background, destructive colors, border colors, and font families, enabling consistent styling across components.

```css
:root {
  --justweb3-primary-color: hsl(216, 90%, 58%);
  --justweb3-primary-color-light: hsl(216, 90%, 68%);
  --justweb3-primary-color-dark: hsl(216, 90%, 48%);
  --justweb3-background-color: hsl(0, 0%, 100%);
  --justweb3-border-color: hsl(0, 0%, 0%);
  --justweb3-destructive-color: hsl(0, 100%, 50%);
  --justweb3-font-family: 'Inter', sans-serif;
}
```

--------------------------------

### TypeScript Example: SIWENS Authentication Flow

Source: https://github.com/justaname-id/justaname-sdk/blob/main/packages/@justaname.id/siwens/README.md

Demonstrates how to use the @justaname.id/siwens library to prepare a SIWENS message for signing and then verify the signature. It includes setting up an ethers.js Wallet and handling potential ENS verification errors.

```typescript
import { SIWENS, InvalidENSException } from '@justaname.id/siwens';
import { Wallet } from 'ethers';

// Define your provider URL (e.g., Infura)
const infuraProjectId = 'YOUR_INFURA_PROJECT_ID';
const providerUrl = 'https://mainnet.infura.io/v3/' + infuraProjectId;

// const signer = Wallet.createRandom();
const signer = new Wallet('YOUR_PRIVATE_KEY');

async function signInUser() {
   const siwens = new SIWENS({
      params: {
         domain: 'example.com',       // The domain you're authenticating for
         uri: 'https://example.com',  // The URI of the dApp
         chainId: 1,                   // The chain ID of the network
         ttl: 3600000,                // Time-to-Live (TTL) in milliseconds (1 hour)
         ens: 'user.example.eth',     // The ENS name being used
         statement: 'Signing into dApp',  // Optional custom sign-in statement
         address: signer.address
      },
      providerUrl
   });
   const message = await siwens.prepareMessage();
   const signature = await signer.signMessage(message);
   return {signature, message};
}

// Verifying a user's sign-in request
async function verifyUserSignature(signature, message) {
   try {
      const siwe =  new SIWENS({
         params: message,
         providerUrl
      })

      const verification = await siwe.verify({
         signature: signature,
      });

      console.log('ENS Sign-in successful!', verification.ens);
   } catch (error) {
      console.error('Error during verification:', error);
      if (error instanceof InvalidENSException) {
         console.error('ENS Verification Failed:', error.message);
      } else {
         console.error('Error during verification:', error);
      }
   }
}

// Example usage
signInUser().then(async ({message, signature}) => {
   await verifyUserSignature(signature, message);
});

```

--------------------------------

### Use useJustWeb3Theme Hook

Source: https://github.com/justaname-id/justaname-sdk/blob/main/docs/sdk/JustWeb3 UI/README.md

Shows how to consume the `useJustWeb3Theme` hook within a React component to access the current theme, colors, and the `changeTheme` function. This example demonstrates switching the background color to a dark shade.

```tsx
import { useJustWeb3Theme } from '@justweb3/ui';

const Component = () => {
  const { theme, color, changeTheme } = useJustWeb3Theme();

  console.log('Current Theme:', theme);

  const switchToDarkBackground = () => {
    changeTheme('background', 'hsl(0, 0%, 10%)');
  };

  return (
    <div>
      <button onClick={switchToDarkBackground}>Switch to Dark Background</button>
    </div>
  );
};

```

--------------------------------

### Run Nx Development Server and View Project Details

Source: https://github.com/justaname-id/justaname-sdk/blob/main/README.md

This snippet shows how to run the development server for a specific project within your Nx workspace and how to retrieve detailed information about a project. This is essential for local development and debugging.

```bash
npx nx serve demo

npx nx show project demo --web
```

--------------------------------

### Initialize JustaName SDK

Source: https://github.com/justaname-id/justaname-sdk/blob/main/docs/sdk/JustaName Core SDK/README.md

Initializes the JustaName SDK with network configurations, ENS domain details, and application settings. It also creates an ethers signer for transaction signing. Dependencies include `@justaname.id/sdk` and `ethers`.

```typescript
import { JustaName } from '@justaname.id/sdk';
import { ethers } from 'ethers';

// Initialize the SDK with your configuration
const justaname = JustaName.init({
    networks: [
        {
          chainId: 1, // Ethereum Mainnet
          providerUrl: 'https://mainnet.infura.io/v3/YOUR_INFURA_KEY'
        }
    ],
    ensDomains: [
        {
          chainId: 1,
          domain: 'your_ens_domain.eth',
          apiKey: 'your-api-key',
        }
            
    ],
    config: {
        domain: 'yourdapp.com',
        origin: 'https://yourdapp.com'
    }
});

// Create a signer (for example purposes, we're creating a random wallet)
const signer = ethers.Wallet.createRandom();
```

--------------------------------

### JustaName Class Initialization

Source: https://github.com/justaname-id/justaname-sdk/blob/main/docs/sdk/JustaName Core SDK/classes/JustaName.md

Demonstrates how to initialize the JustaName SDK with a given configuration, including API key, network details, and ENS domains.

```APIDOC
## `JustaName.init(configuration)`

### Description
Initializes the JustaName SDK with the provided configuration object. This is the entry point for using the SDK.

### Method
`static init`

### Parameters
#### Request Body
- **configuration** (JustaNameConfig) - Required - The configuration object for the SDK. It includes:
  - **apiKey** (string) - Required - Your JustaName API key.
  - **networks** (Array<NetworkConfig>) - Optional - An array of network configurations, each with:
    - **chainId** (number) - Required - The chain ID of the network.
    - **providerUrl** (string) - Required - The URL of the network provider.
  - **ensDomains** (Array<string>) - Optional - A list of ENS domains to be managed.

### Request Example
```typescript
const configuration = {
  apiKey: 'your-api-key',
  networks: [
    {
      chainId: 1,
      providerUrl: 'https://mainnet.infura.io/v3/your-infura-key'
    }
  ],
  ensDomains: ['justan.id']
};

const justaName = JustaName.init(configuration);
```

### Response
#### Success Response (200)
- **JustaName** (JustaName) - An instance of the JustaName class.
```

--------------------------------

### Get Subname API

Source: https://github.com/justaname-id/justaname-sdk/blob/main/docs/sdk/JustaName Core SDK/classes/Subnames.md

Retrieves details for a specific subname.

```APIDOC
## GET /api/subnames/{subname}

### Description
Retrieves details for a specific subname.

### Method
GET

### Endpoint
/api/subnames/{subname}

### Parameters
#### Path Parameters
- **subname** (string) - Required - The name of the subname to retrieve.

#### Query Parameters
- **params** (Omit<MakeOptionalProps<SubnameGetBySubnameRequest, "chainId">, never>) - Required - Parameters to identify the subname.

### Request Example
```json
{
  "params": { ... }
}
```

### Response
#### Success Response (200)
- **result** (SubnameResponse) - The details of the requested subname.

#### Response Example
```json
{
  "result": { ... }
}
```
```

--------------------------------

### Get Subname Records API

Source: https://github.com/justaname-id/justaname-sdk/blob/main/docs/sdk/JustaName Core SDK/classes/Subnames.md

Retrieves the records associated with a specific subname.

```APIDOC
## GET /api/subnames/records

### Description
Retrieves the records associated with a specific subname.

### Method
GET

### Endpoint
/api/subnames/records

### Parameters
#### Query Parameters
- **params** (Omit<MakeOptionalProps<SubnameRecordsRequest, "providerUrl">, never> & object) - Required - Parameters to identify the subname and retrieve its records.

### Request Example
```json
{
  "params": { ... }
}
```

### Response
#### Success Response (200)
- **result** (SubnameResponse) - The records associated with the subname.

#### Response Example
```json
{
  "result": { ... }
}
```
```

--------------------------------

### Get Subname Invitations API

Source: https://github.com/justaname-id/justaname-sdk/blob/main/docs/sdk/JustaName Core SDK/classes/Subnames.md

Retrieves subname invitations for a given address.

```APIDOC
## GET /api/subnames/invitations

### Description
Retrieves subname invitations for a given address.

### Method
GET

### Endpoint
/api/subnames/invitations

### Parameters
#### Query Parameters
- **params** (Omit<MakeOptionalProps<SubnameGetInvitationsByAddressRequest, "coinType" | "chainId">, "isClaimed">) - Required - Parameters to filter invitations by address.

### Request Example
```json
{
  "params": { ... }
}
```

### Response
#### Success Response (200)
- **result** (SubnameGetInvitationsByAddressResponse) - A list of subname invitations associated with the address.

#### Response Example
```json
{
  "result": { ... }
}
```
```

--------------------------------

### Get Primary Name API

Source: https://github.com/justaname-id/justaname-sdk/blob/main/docs/sdk/JustaName Core SDK/classes/Subnames.md

Retrieves the primary name associated with a given address.

```APIDOC
## GET /api/subnames/primary

### Description
Retrieves the primary name associated with a given address.

### Method
GET

### Endpoint
/api/subnames/primary

### Parameters
#### Query Parameters
- **params** (Omit<MakeOptionalProps<PrimaryNameGetByAddressRequest, "chainId">, never>) - Required - Parameters to identify the address.

### Request Example
```json
{
  "params": { ... }
}
```

### Response
#### Success Response (200)
- **result** (PrimaryNameGetByAddressResponse) - The primary name details for the address.

#### Response Example
```json
{
  "result": { ... }
}
```
```

--------------------------------

### Initialize JustaName SDK

Source: https://github.com/justaname-id/justaname-sdk/blob/main/docs/sdk/JustaName Core SDK/classes/JustaName.md

Demonstrates how to initialize the JustaName SDK by providing a configuration object. This includes setting up API keys, network details (like chainId and providerUrl), and ENS domains.

```typescript
import { JustaName } from '@justaname.id/sdk';

const configuration = {
 apiKey: 'your-api-key',
 networks: [
 {
 chainId: 1,
 providerUrl: 'https://mainnet.infura.io/v3/your-infura-key'
 },
 ],
 ensDomains: ['justan.id']
 };

 const justaName = JustaName.init(configuration);

```

--------------------------------

### SiweConfig Interface

Source: https://github.com/justaname-id/justaname-sdk/blob/main/docs/sdk/JustaName Core SDK/interfaces/SiweConfig.md

Details the configuration options for SIWE (Sign-In with Ethereum) within the Justaname SDK.

```APIDOC
## SiweConfig Interface

### Description
This interface defines the configuration object for SIWE (Sign-In with Ethereum) functionality within the Justaname SDK. It allows customization of parameters such as the blockchain chain ID, the user's ENS domain, the origin of the request, and the time-to-live for authentication tokens.

### Properties

#### `chainId`
- **chainId** (ChainId) - Required - Represents the chain ID of the blockchain to be used for SIWE.

#### `domain`
- **domain** (string) - Required - Represents the ENS domain associated with the user or application.

#### `origin`
- **origin** (string) - Required - Represents the origin of the request, typically the domain of the website initiating the SIWE process.

#### `ttl`
- **ttl** (number) - Optional - Specifies the time-to-live (TTL) in milliseconds for the SIWE authentication. The default value is 120000 ms (2 minutes).

### Request Example
```json
{
  "chainId": 1,
  "domain": "example.com",
  "origin": "app.example.com"
}
```

### Response Example
```json
{
  "chainId": 1,
  "domain": "example.com",
  "origin": "app.example.com",
  "ttl": 120000
}
```
```

--------------------------------

### Instantiate SignIn Class

Source: https://github.com/justaname-id/justaname-sdk/blob/main/docs/sdk/JustaName Core SDK/classes/SignIn.md

Demonstrates how to create a new instance of the SignIn class. It requires a SignInParams object as input and returns a SignIn instance.

```typescript
new SignIn(params: SignInParams): SignIn
```

--------------------------------

### Get All Offchain Resolvers

Source: https://github.com/justaname-id/justaname-sdk/blob/main/docs/sdk/JustaName Core SDK/classes/OffchainResolvers.md

Retrieves all offchain resolvers. This asynchronous method returns a Promise that resolves to an OffchainResolverGetAllResponse object.

```typescript
getAllOffchainResolvers(): Promise<OffchainResolverGetAllResponse>;
```

--------------------------------

### Get Subname Records - TypeScript

Source: https://github.com/justaname-id/justaname-sdk/blob/main/docs/sdk/JustaName Core SDK/classes/Subnames.md

Retrieves records associated with a subname. This method is asynchronous and requires a parameters object.

```typescript
getRecords(params: Omit<MakeOptionalProps<SubnameRecordsRequest, "providerUrl">, never> & object): Promise<SubnameResponse>
```

--------------------------------

### GET /subname/getAllByAddress

Source: https://github.com/justaname-id/justaname-sdk/blob/main/docs/sdk/JustaName Core SDK/interfaces/SubnameGetAllByAddressRoute.md

This endpoint retrieves a list of subnames associated with a given address. It supports filtering by chain ID, coin type, and claim status.

```APIDOC
## GET /subname/getAllByAddress

### Description
Retrieves a list of subnames associated with a given address. Supports filtering by chain ID, coin type, and claim status.

### Method
GET

### Endpoint
/subname/getAllByAddress

### Parameters
#### Query Parameters
- **address** (string) - Required - The address to retrieve subnames for.
- **chainId** (number) - Optional - The ID of the blockchain network.
- **coinType** (number) - Optional - The type of cryptocurrency coin.
- **isClaimed** (boolean) - Optional - Filter by claim status.

### Request Example
```json
{
  "address": "0x1234567890abcdef1234567890abcdef12345678",
  "chainId": 1,
  "isClaimed": true
}
```

### Response
#### Success Response (200)
- **subnames** (array) - An array of subname objects.
  - **name** (string) - The name of the subname.
  - **owner** (string) - The owner's address.
  - **chainId** (number) - The chain ID where the subname is registered.
  - **coinType** (number) - The coin type associated with the subname.
  - **isClaimed** (boolean) - Indicates if the subname has been claimed.

#### Response Example
```json
{
  "subnames": [
    {
      "name": "example.justaname.id",
      "owner": "0x1234567890abcdef1234567890abcdef12345678",
      "chainId": 1,
      "coinType": 60,
      "isClaimed": true
    }
  ]
}
```
```

--------------------------------

### React onDragStartCapture Event Handler

Source: https://github.com/justaname-id/justaname-sdk/blob/main/docs/sdk/JustWeb3 UI/interfaces/DialogContentProps.md

Handles the onDragStart event during the capture phase when the user starts dragging an element. This is an optional property.

```typescript
onDragStartCapture?: DragEventHandler<HTMLDivElement>;

```

--------------------------------

### Get Subname by Subname - TypeScript

Source: https://github.com/justaname-id/justaname-sdk/blob/main/docs/sdk/JustaName Core SDK/classes/Subnames.md

Fetches details for a specific subname using its identifier. This is an asynchronous operation returning a Promise.

```typescript
getSubname(params: Omit<MakeOptionalProps<SubnameGetBySubnameRequest, "chainId">, never>): Promise<SubnameResponse>
```

--------------------------------

### Initialize JustaName Instance

Source: https://github.com/justaname-id/justaname-sdk/blob/main/docs/sdk/JustaName Core SDK/classes/JustaName.md

The static `init` method is used to create and return an instance of the JustaName class. It accepts a configuration object that defines various SDK parameters.

```typescript
static init(configuration: JustaNameConfig<Configuration, Networks, undefined | EnsDomains, undefined | ChainId>): JustaName
```

--------------------------------

### Get Subname Invitations by Address - TypeScript

Source: https://github.com/justaname-id/justaname-sdk/blob/main/docs/sdk/JustaName Core SDK/classes/Subnames.md

Retrieves subname invitations associated with a specific address. This is an asynchronous operation that returns a Promise.

```typescript
getInvitationsByAddress(params: Omit<MakeOptionalProps<SubnameGetInvitationsByAddressRequest, "coinType" | "chainId">, "isClaimed">): Promise<SubnameGetInvitationsByAddressResponse>
```

--------------------------------

### React Media Load Event Handlers

Source: https://github.com/justaname-id/justaname-sdk/blob/main/docs/sdk/JustWeb3 UI/interfaces/DialogContentProps.md

Handles events related to media loading, such as when metadata is loaded or loading starts. These are optional event handlers.

```typescript
onLoadedMetadata?: ReactEventHandler<HTMLDivElement>;
onLoadStart?: ReactEventHandler<HTMLDivElement>;
onLoadStartCapture?: ReactEventHandler<HTMLDivElement>;
```

--------------------------------

### JustVerifiedPlugin Constructor (TypeScript)

Source: https://github.com/justaname-id/justaname-sdk/blob/main/docs/sdk/JustVerified Plugin/functions/JustVerifiedPlugin.md

Initializes the JustVerifiedPlugin with provided credentials, a verification backend URL, and an mApp identifier. The backend URL and mApp have default values if not explicitly provided.

```TypeScript
new JustVerifiedPlugin(credentials, verificationBackendUrl, mApp)
```

--------------------------------

### Request SIWE Challenge with JustaName SDK

Source: https://github.com/justaname-id/justaname-sdk/blob/main/docs/sdk/JustaName Core SDK/interfaces/SubnameChallengeSiweConfig.md

Demonstrates how to initialize the JustaName SDK and request a Sign-In with Ethereum (SIWE) challenge. Requires an API key and SIWE parameters like chainId, origin, address, and domain.

```typescript
import { JustaName } from '@justaname.id/sdk';

const configuration = {
 apiKey: 'your-api-key'
 };

 const justaName = JustaName.init(configuration);

const requestChallengeResponse = await justaName.siwe.requestChallenge({
 chainId: 1,
 origin: 'http://localhost:3333',
 address: '0x59c44836630760F97b74b569B379ca94c37B93ca',
 domain: 'localhost',
 ttl?: 120000,
});
 
```

--------------------------------

### React onDragStart Event Handler

Source: https://github.com/justaname-id/justaname-sdk/blob/main/docs/sdk/JustWeb3 UI/interfaces/DialogContentProps.md

Handles the onDragStart event, which is fired when the user starts dragging an element. It's an optional event handler inherited from ComponentPropsWithoutRef.

```typescript
onDragStart?: DragEventHandler<HTMLDivElement>;

```

--------------------------------

### React Event Handler: onAnimationStart

Source: https://github.com/justaname-id/justaname-sdk/blob/main/docs/sdk/JustWeb3 UI/interfaces/PopoverContentProps.md

Specifies the event handler for the 'animationstart' event on a div element. This event fires when a CSS animation starts. Inherited from React.ComponentPropsWithoutRef.

```typescript
onAnimationStart?: AnimationEventHandler<HTMLDivElement>
```

--------------------------------

### MApps Constructor

Source: https://github.com/justaname-id/justaname-sdk/blob/main/docs/sdk/JustaName Core SDK/classes/MApps.md

Initializes a new instance of the MApps class.

```APIDOC
## Constructor MApps()

### Description
Initializes a new instance of the MApps class.

### Method
CONSTRUCTOR

### Parameters
#### Request Body
- **params** (MAppsParams) - Required - Parameters for initializing MApps.

### Response
#### Success Response (Instance)
- Returns an instance of MApps.

### Request Example
```json
{
  "params": {}
}
```

### Response Example
```json
{
  "instance": "MApps"
}
```
```

--------------------------------

### SIWENS Authentication Flow (TypeScript)

Source: https://github.com/justaname-id/justaname-sdk/blob/main/packages/siwens/README.md

Demonstrates the complete SIWENS authentication process, including generating a signed message with ENS verification and verifying the signature. It requires an Ethereum provider URL and a signer (e.g., a Wallet instance).

```typescript
import { SIWENS, InvalidENSException } from 'siwens';
import { Wallet } from 'ethers';

// Define your provider URL (e.g., Infura)
const infuraProjectId = 'YOUR_INFURA_PROJECT_ID';
const providerUrl = 'https://mainnet.infura.io/v3/' + infuraProjectId;

// const signer = Wallet.createRandom();
const signer = new Wallet('YOUR_PRIVATE_KEY');

async function signInUser() {
   const siwens = new SIWENS({
      params: {
         domain: 'example.com',       // The domain you're authenticating for
         uri: 'https://example.com',  // The URI of the dApp
         chainId: 1,                   // The chain ID of the network
         ttl: 3600000,                // Time-to-Live (TTL) in milliseconds (1 hour)
         ens: 'user.example.eth',     // The ENS name being used
         statement: 'Signing into dApp',  // Optional custom sign-in statement
         address: signer.address
      },
      providerUrl
   });
   const message = await siwens.prepareMessage();
   const signature = await signer.signMessage(message);
   return {signature, message};
}

// Verifying a user's sign-in request
async function verifyUserSignature(signature, message) {
   try {
      const siwe =  new SIWENS({
         params: message,
         providerUrl
      })

      const verification = await siwe.verify({
         signature: signature,
      });

      console.log('ENS Sign-in successful!', verification.ens);
   } catch (error) {
      console.error('Error during verification:', error);
      if (error instanceof InvalidENSException) {
         console.error('ENS Verification Failed:', error.message);
      } else {
         console.error('Error during verification:', error);
      }
   }
}

// Example usage
signInUser().then(async ({message, signature}) => {
   await verifyUserSignature(signature, message);
});

```

--------------------------------

### Request Sign-In Process

Source: https://github.com/justaname-id/justaname-sdk/blob/main/docs/sdk/JustaName Core SDK/classes/SignIn.md

Details the method for initiating a sign-in request. It accepts a RequestSignInParams object and returns a string, likely a redirect URL or token.

```typescript
requestSignIn(params: RequestSignInParams): string
```

--------------------------------

### Get Primary Name by Address - TypeScript

Source: https://github.com/justaname-id/justaname-sdk/blob/main/docs/sdk/JustaName Core SDK/classes/Subnames.md

Fetches the primary name associated with a given address. This function performs an asynchronous operation and returns a Promise.

```typescript
getPrimaryNameByAddress(params: Omit<MakeOptionalProps<PrimaryNameGetByAddressRequest, "chainId">, never>): Promise<PrimaryNameGetByAddressResponse>
```

--------------------------------

### useEnabledMApps Hook Example - React

Source: https://github.com/justaname-id/justaname-sdk/blob/main/docs/sdk/JustaName React SDK/functions/useEnabledMApps.md

Demonstrates how to use the useEnabledMApps hook in a React component. It fetches enabled mApps and displays them. Assumes necessary context providers are in place.

```typescript
import React from 'react';
import { useEnabledMApps, UseEnabledMAppsParams } from '@justaname.id/react';

const MyComponent: React.FC = () => {
  const params: UseEnabledMAppsParams = {
    // your params here
  };

  const { data, isLoading, error } = useEnabledMApps(params);

  if (isLoading) {
    return <div>Loading enabled mApps...</div>;
  }

  if (error) {
    return <div>Error loading mApps: {error.message}</div>;
  }

  return (
    <div>
      <h2>Enabled mApps:</h2>
      <ul>
        {data?.map((mApp) => (
          <li key={mApp.id}>{mApp.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default MyComponent;
```

--------------------------------

### Execute Single and Multiple Nx Tasks

Source: https://github.com/justaname-id/justaname-sdk/blob/main/README.md

This snippet illustrates the basic syntax for executing a specific task (target) for a given project in Nx. It also shows how to run multiple tasks concurrently and how to filter which projects are included in the execution.

```bash
npx nx <target> <project> <...options>

npx nx run-many -t <target1> <target2>

npx nx run-many -t <target1> <target2> -p <proj1> <proj2>
```

--------------------------------

### Dynamically change theme colors with useJustWeb3Theme

Source: https://github.com/justaname-id/justaname-sdk/blob/main/packages/@justweb3/ui/README.md

This React component example utilizes the `useJustWeb3Theme` hook to dynamically change the primary color of the theme based on user input from a color picker.

```tsx
import React, { useState } from 'react';
import { useJustWeb3Theme } from '@justweb3/ui';

const ThemeSwitcher = () => {
  const { changeTheme, color } = useJustWeb3Theme();
  const [newColor, setNewColor] = useState(color.primary);

  const handleThemeChange = () => {
    changeTheme('primary', newColor);
  };

  return (
    <div>
      <h1>Current Primary Color: {color.primary}</h1>
      <input
        type="color"
        value={newColor}
        onChange={(e) => setNewColor(e.target.value)}
      />
      <button onClick={handleThemeChange}>Change Primary Color</button>
    </div>
  );
};

export default ThemeSwitcher;

```

--------------------------------

### Explore Nx Project Graph

Source: https://github.com/justaname-id/justaname-sdk/blob/main/README.md

This command allows you to visualize the project graph of your Nx workspace. This graph displays dependencies between projects and the tasks that can be run, aiding in understanding the project structure and task execution.

```bash
npx nx graph
```

--------------------------------

### React Composition Event Handlers (TypeScript)

Source: https://github.com/justaname-id/justaname-sdk/blob/main/docs/sdk/JustWeb3 UI/interfaces/DialogContentProps.md

Handles events related to text composition, such as starting, updating, or ending a composition sequence. These handlers are typically used with input elements.

```typescript
onCompositionEnd?: CompositionEventHandler<HTMLDivElement>;

onCompositionEndCapture?: CompositionEventHandler<HTMLDivElement>;

onCompositionStart?: CompositionEventHandler<HTMLDivElement>;

onCompositionStartCapture?: CompositionEventHandler<HTMLDivElement>;

onCompositionUpdate?: CompositionEventHandler<HTMLDivElement>;

onCompositionUpdateCapture?: CompositionEventHandler<HTMLDivElement>;
```

--------------------------------

### createNetworks Utility

Source: https://github.com/justaname-id/justaname-sdk/blob/main/docs/sdk/JustaName Core SDK/classes/JustaName.md

A utility method to create a structured networks configuration with provider information.

```APIDOC
## `JustaName.createNetworks(networks)`

### Description
Creates a properly formatted networks configuration, potentially adding default provider information if not explicitly provided.

### Method
`static createNetworks`

### Parameters
#### Path Parameters
- **networks** (Networks) - Optional - An array of network configurations. Defaults to an empty array.

### Returns
- **NetworksWithProvider** - A formatted array of network configurations including provider details.

### Defined in
`packages/@justaname.id/sdk/src/lib/justaname/index.ts:160`
```

--------------------------------

### React Touch Events (onTouchCancel, onTouchEnd, onTouchMove, onTouchStart)

Source: https://github.com/justaname-id/justaname-sdk/blob/main/docs/sdk/JustWeb3 UI/interfaces/PopoverContentProps.md

Handles touch interaction events such as cancel, end, move, and start. These are React touch event handlers for HTMLDivElements.

```typescript
onTouchCancel?: TouchEventHandler<HTMLDivElement>;

```

```typescript
onTouchCancelCapture?: TouchEventHandler<HTMLDivElement>;

```

```typescript
onTouchEnd?: TouchEventHandler<HTMLDivElement>;

```

```typescript
onTouchEndCapture?: TouchEventHandler<HTMLDivElement>;

```

```typescript
onTouchMove?: TouchEventHandler<HTMLDivElement>;

```

```typescript
onTouchMoveCapture?: TouchEventHandler<HTMLDivElement>;

```

```typescript
onTouchStart?: TouchEventHandler<HTMLDivElement>;

```

```typescript
onTouchStartCapture?: TouchEventHandler<HTMLDivElement>;

```

--------------------------------

### Subnames Constructor API

Source: https://github.com/justaname-id/justaname-sdk/blob/main/docs/sdk/JustaName Core SDK/classes/Subnames.md

Initializes a new instance of the Subnames class with the provided configuration.

```APIDOC
## POST /api/subnames/constructor

### Description
Initializes a new instance of the Subnames class with the provided configuration.

### Method
POST

### Endpoint
/api/subnames/constructor

### Parameters
#### Request Body
- **params** (SubnamesConfig) - Required - The configuration object for Subnames.

### Request Example
```json
{
  "params": { ... } 
}
```

### Response
#### Success Response (200)
- **instance** (Subnames) - A new instance of the Subnames class.

#### Response Example
```json
{
  "instance": { ... } 
}
```
```

--------------------------------

### React Event Handler: onAnimationStartCapture

Source: https://github.com/justaname-id/justaname-sdk/blob/main/docs/sdk/JustWeb3 UI/interfaces/PopoverContentProps.md

Specifies the capture phase event handler for the 'animationstart' event on a div element. Enables handling of animation start events during the capture phase.

```typescript
onAnimationStartCapture?: AnimationEventHandler<HTMLDivElement>
```

--------------------------------

### Get Subname Signature - React

Source: https://github.com/justaname-id/justaname-sdk/blob/main/docs/sdk/JustaName React SDK/interfaces/UseSubnameSignatureResult.md

Retrieves the subname signature along with its associated data. This asynchronous function returns a Promise that resolves to an object containing the signature details.

```typescript
getSignature(): Promise<{
    address: string;
    expirationTime: Date;
    message: string;
    signature: string;
}>
```

--------------------------------

### Perform Sign-In Operation

Source: https://github.com/justaname-id/justaname-sdk/blob/main/docs/sdk/JustaName Core SDK/classes/SignIn.md

Illustrates the core sign-in method. It requires SignInFunctionParams and returns a Promise that resolves with a SignInResponse object.

```typescript
signIn(params: SignInFunctionParams): Promise<SignInResponse>
```