Skip to content

Latest commit

 

History

History
157 lines (111 loc) · 4.96 KB

README.md

File metadata and controls

157 lines (111 loc) · 4.96 KB
Raw

JoyID Passkey Wallet Telegram Mini App Demo

Please open telegram to find the JoyIDBot to experience the miniapp in Testnet

This Bot is designed for developers, showcasing how to integrate the JoyID Passkey Wallet into your telegram mini app. With our solution, users can seamlessly use decentralized wallets, accessing mini app services without any barriers.

We strongly recommend you to read the telegram bot documentation to know what is telegram bot and telegram mini app first.

Quick Start

  1. Installation
pnpm install
  1. Update CALLBACK_SERVER_URL and JOYID_APP_URL in env/index.ts

The CALLBACK_SERVER_URL is your own server url like the https://api.example.com/bot/api/v1/ and the more information is provided below.

The JOYID_APP_URL is the joyid wallet app url, please set to https://testnet.joyid.dev for staging env, or https://app.joy.id for product env.

  1. Build and Test
pnpm build
pnpm test

Build Your Own Telegram Mini App

Before starting the next tutorial, Telegram Apps Integration will help you become familiar with the telegram mini app development framework with JoyID Passkey Wallet.

Build JoyID URL

Telegram's internal bots and mini-apps restrict certain client side capabilities, such as WebSocket and Passkey, which are essential for comprehensive wallet functionality.

So we must use an external browser to implement WebAuthn registration and login, which are also the core functions of JoyID Passkey Wallet and @joyid/miniapp will help you to build URL to connect wallet, sign messages and send Ethereum transactions with JoyID Passkey Wallet.

You can find the functions as blow to build JoyID URL and the annotations will be helpful for you.

Build Your Own Server

JoyID Passkey Wallet can obtain the necessary information from the above JoyID connection, signing and sending URL, but the mini app CAN NOT get results from JoyID Passkey Wallet directly, so the server is necessary.

When the JoyID Passkey Wallet is connected, the message is signed and the Ethereum transaction is sent successfully, the JoyID Passkey Wallet will send the results to the server through an HTTP Post request, and the telegram mini app will get the results from the server through an HTTP Get request.

The server must provide two APIs to receive results from JoyID Passkey Wallet and send results to the telegram mini app.

You can find this mini app demo APIs here

1. Receive message from JoyID Passkey Wallet

  • Route: "/messages"
  • Url: your own server callback url like the above CALLBACK_SERVER_URL
  • Method: POST
  • Request:
{
  token: string
  message: json string
}
  • Response: None

For example:

  • The request of the connection with JoyID Passkey Wallet
{
  "token":"conncd6f828cfb86eba318e4f85733c9178fd6c7c45256034604f67463c36282d2cc9e4ab642",
  "message":"{\"address\":\"0x8ac36d0e764FF17dcF13b2465e77b4fe125EC2bC\"}"
}

2. Telegram mini app get message from server

  • Route: "/messages/:token"
  • Url: your own server callback url like the above CALLBACK_SERVER_URL
  • Method: GET
  • Response:
{
  message: json string
}

For example:

  • GET URL: {your_server_url}/messages/conncd6f828cfb86eba318e4f85733c9178fd6c7c45256034604f67463c36282d2ccc7dfd7f9

  • The response of the connection with JoyID Passkey Wallet

{
  "message":"{\"address\":\"0x8ac36d0e764FF17dcF13b2465e77b4fe125EC2bC\"}"
}

Message Format

The message format is JSON string and this mini app demo message is defined as follows:

You can find this mini app demo message definition here

Connection

  • Approve
"message":"{\"address\":\"0x8ac36d0e764FF17dcF13b2465e77b4fe125EC2bC\"}"
  • Reject
"message": "{\"address\":\"rejected\"}"

Sign message

  • Approve
"message":"{\"signature\":\"0xacf1fadf82f619fc5adc8bf956d0312a99f9915bf5b19e5c5e952485308d741347075a4a5d0c4fa8a8784b8ce79d6d68040e028aa1e7e7c5ee82c52bd1982e831b\"}"
  • Reject
"message": "{\"signature\":\"rejected\"}"

Sign transaction

  • Approve
"message":"{\"signature\":\"0x02f87083aa36a7050b840e4d274a825208948ac36d0e764ff17dcf13b2465e77b4fe125ec2bc87038d7ea4c6800080c080a069d6956ba2d379cbefd02604f0f48628367cd1cf4a7a0408ac58309082d98faea065299a965bb80e8a18a678d83da1f2914aaa43ef235cb331d52c02b94860a54c\"}"
  • Reject
"message": "{\"signature\":\"rejected\"}"

Send transaction

  • Approve
"message":"{\"txHash\":\"0x287ac8d53570799d102791781142539613d1468a08c4cdf33b264554ba8b3069\"}"
  • Reject
"message": "{\"txHash\":\"rejected\"}"