The SDK for CARV ID ecosystem. (Only Telegram is supported.)

• CARV ID SDK
• CARV ID SDK Widget

🎾 Demo

• CARV ID SDK Demo

📒 Memo

• carv-id-demo（Telegram demo）: https://t.me/BabyChinBot/carv_id_demo
• carv-id-dev (carv-id-app@dev): https://t.me/carv_identity_dev_bot/carv_id
• carv-id（carv-id-app@prod）: https://t.me/carv_identity_bot/carv_id

💊 Usage

1、UMD

<script src="https://cdn.jsdelivr.net/npm/@carv_admin/carv-id-tg-sdk@latest/dist/carv-id-tg-sdk.umd.js" defer></script>

<script>
 window.onload = function () {
  const CarvIdInstance = new CarvIdSDK.CarvId({
    showWidget: true,
    authorizeConfig: {
      client_id: "0a17299349c4b3e57bc8c25581b01bd0ec80c279",
      client_secret:
        "871cc95ca5a54866492bb052e0d487799e21a5c5896b7cd2ecbe813876a4b286",
      response_type: "code",
      state: "test app state",
      scope: "carv_id_basic_read email_basic_read evm_address_basic_read",
      redirect_uri: "https://t.me/BabyChinBot/carv_id_demo"
    }
  });
  console.log(CarvIdInstance, "CARV ID SDK initialized");
}
</script>

2、ES Module

pnpm add @carv_admin/carv-id-tg-sdk

import {
  CarvId,
  Enum_Env,
  Enum_CarvIdTheme,
  Enum_CarvIdIconPlacement,
} from "@carv_admin/carv-id-tg-sdk";

window.onload = function() => {
  const CarvIdInstance = new CarvId({
    env: Enum_Env.DEV,
    theme: Enum_CarvIdTheme.LIGHT,
    showWidget: true,
    widgetOptions: {
      size: "60px",
      placement: Enum_CarvIdIconPlacement.BOTTOM_RIGHT
    },
    onLoad: (data) => {
      console.log("onLoad", data);
    },
    onAuthSuccess: (data) => {
      console.log("onAuthSuccess", data);
    },
    onAuthFailed: (data) => {
      console.log("onAuthFailed", data);
    }
  });
  console.log(CarvIdInstance, "CARV ID SDK initialized");
}

🧩 Methods

// Initialize
const carvIdInstance = new CarvId(Options: I_CarvIdOptions)

🔹 authenticateUser: () => void

// Start authorization process
carvIdInstance.authenticateUser();

🔹 openIdentityPage: () => void

// Open CARV ID identity page
carvIdInstance.openIdentityPage();

🔹 handleAuthCallback: Promise<I_AuthenticateResponse>

// Callback triggered after authorization
CarvIdInstance.handleAuthCallback().then((res: I_AuthenticateResponse) => {
  // {code: string, state: string}
  console.log(res, "handleAuthCallback");
  if (res.code) {
    console.log("Authorize success", res.code);
  }
});

🛠️ Options

🔸 I_CarvIdOptions

interface I_CarvIdOptions {
  env?: Enum_Env;
  theme?: Enum_CarvIdTheme;
  showWidget?: boolean;
  widgetOptions?: I_CarvIdWidgetOptions;
  authorizeConfig: I_CarvIdAuthorizeConfig;
  onLoad?: (data: CarvId) => void;
  onAuthSuccess?: (data: I_AuthenticateResponse) => void;
  onAuthFailed?: (data: I_AuthenticateResponse) => void;
}

| Field | Description | Type | Default | | ---------------- | ------------------------------------------------------ | -------------------------------------- | ---------------------- | | env | Environment | Enum_Env | Enum_Env.PROD | | theme | Theme mode | Enum_CarvIdTheme | Enum_CarvIdTheme.LIGHT | | showWidget | Show widget icon | Boolean | false | | widgetOptions | Widget options | I_CarvIdWidgetOptions | undefined | | authorizeConfig | Configuration for authorization | I_CarvIdAuthorizeConfig | undefined | | onLoad | Callback that triggered after SDK initialized | (data: CarvId) => void | undefined | | onAuthSuccess | Callback that triggered after authorization successful | (data: I_AuthenticateResponse) => void | undefined | | onAuthFailed | Callback that triggered after authorization failed | (data: I_AuthenticateResponse) => void | undefined |

🔸 I_CarvIdWidgetOptions

interface I_CarvIdWidgetOptions {
  theme?: Enum_CarvIdTheme;
  size?: string;
  className?: string;
  draggable?: boolean;
  watchResize?: boolean;
  rememberPosition?: boolean;
  placement?: Enum_CarvIdIconPlacement;
  offset?: I_CarvIdIconPlacementOffset;
}

| Field | Description | Type | Default | | ---------------- | ------------------------------- | --------------------------- | -------------------------------------------- | | theme | Theme mode | Enum_CarvIdTheme | Enum_CarvIdTheme.LIGHT | | size | Icon size | String | "48px" | | placement | Icon placement | Enum_CarvIdIconPlacement | Enum_CarvIdIconPlacement.BOTTOM_RIGHT | | offset | The offset config for placement | I_CarvIdIconPlacementOffset | { left: 20, right: 20, top: 40, bottom: 60 } | | className | The class name of widget | String | "" | | draggable | Enable drag interaction | Boolean | true | | watchResize | Watch the resize event | Boolean | true | | rememberPosition | Remember icon position | Boolean | true |

🧿 Turborepo

This project generated from a Turborepo starter. Run the following command to init a new project:

npx create-turbo@latest -e with-vite

And this project includes the following packages and apps:

- Apps

• carv-id-sdk-demo: used for testing SDK

- Packages

• docs: a vanilla vite ts app
• web: another vanilla vite ts app
• @carvid/carv-id-tg-sdk: a CARV ID core component
• @carvid/utils: a stub utility library shared by all applications
• @carvid/eslint-config: shared eslint configurations
• @carvid/typescript-config: tsconfig.jsons used throughout the monorepo

🦴 Utils

This Turborepo has some additional tools already setup for you:

• TypeScript for static type checking
• ESLint for code linting
• Prettier for code formatting