Code Examples from the Repository

Login via Telegram

The following code snippet demonstrates how to implement login via Telegram to create a Metapro ID:

export const useInitialFetch = () => {
  // Get user data from the Redux store
  const userData = useAppSelector((state) => state.user)

  // Initialize the Telegram login mutation
  const [telegramLogin] = useTelegramLoginMutation()

  // Get the router object for navigation
  const { push } = useRouter()

  // Function to check Telegram WebApp and perform login if necessary
  const checkTelegramWebApp = async () => {
    // Check if running in a browser environment and Telegram WebApp is available
    if (typeof window !== 'undefined' && Telegram?.WebApp) {
      const initDataUnsafe = Telegram.WebApp?.initDataUnsafe
      const telegramUser = initDataUnsafe?.user
      const refCode = initDataUnsafe?.start_param

      // If Telegram user exists and no user data in the store, perform login
      if (telegramUser && !userData?.user) {
        await telegramLogin({
          id: telegramUser.id,
          first_name: telegramUser.first_name,
          last_name: telegramUser.last_name,
          username: telegramUser.username,
          telegramSimpleString: Telegram.WebApp?.initData,
          ...(refCode && { referralCode: refCode })
        }).unwrap()

        push(AppPath.LOGIN)
      }
    } else {
      // Retry checking Telegram WebApp after 100ms if not available
      setTimeout(checkTelegramWebApp, 100)
    }
  }

  // useEffect to run the checkTelegramWebApp function on component mount
  useEffect(() => {
    checkTelegramWebApp()
  }, [])
}

Upon entering the mini-app, an account was automatically created in metaproID and a name downloaded from Telegram

Based on this example, the login via Telegram occurs in the background when the Mini App is launched. This code sends the user's Telegram data to the backend, which authenticates the user and creates a Metapro ID, returning an access token.

Adding a Wallet to Metapro ID

Once the user has logged in via Telegram, they can connect their Metapro Wallet to their Metapro ID:

const userData = useAppSelector((state) => state.user)

const web3 = useWeb3()
const { signMessage } = useSignMessage()

const handleAddWallet = async () => {
  const { walletAddress, signature, hash } = await getSignature(web3.account, signMessage)

  await addWallet({
    account: walletAddress,
    signature,
    hash,
    accessToken: userData?.accessToken,
    userId: userData?.user?.userId
  })
}

Using universal links, you can redirect to the Metapro Wallet app and do a signMessage

This snippet allows users to link their Metapro Wallet to their Metapro ID, enabling Web3 interactions such as transactions and asset management.

Opening in Wallet App using Universal Links

The Mini App can open the Metapro Wallet app using universal links to allow the user to perform actions directly in the wallet:

<Button
  onClick={() => {
      push(
          `https://wallet.metapro.one/app/inWalletApps?platformId=${process.env.NEXT_PUBLIC_METAPRO_PLATFORM_ID}`
      )
  }}
>
  {t('challenge.join')}
</Button>

Using universal links, the user can be redirected to the in-Wallet-App in Metapro Wallet

This code opens the Metapro Wallet using a universal link, directing the user to the specified action within the wallet application.