Telegram mini app support (#216)

Co-authored-by: upalinski <[email protected]>

.nvmrc

@@ -1 +1 @@
-v18.17.1
+v18.17.1

packages/communication/src/wallet/channels.ts

@@ -2,6 +2,7 @@ import type { Context, NetworkConfig } from '@cere/embed-wallet';
 import type { PermissionRequest, BiconomyOptions } from '@cere-wallet/wallet-engine';
 
 import { createChannel, CreateChannelOptions } from './createChannel';
+import { AuthMethod } from '@cere/torus-embed';
 
 export type UserInfo = {
   email: string;
@@ -42,6 +43,7 @@ export type InitChannelIn = {
     torusWidgetVisibility: boolean;
     network: NetworkInterface;
     biconomy?: BiconomyOptions;
+    authMethod?: AuthMethod;
   };
 };
 

packages/embed-wallet-inject/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cere/embed-wallet-inject",
-  "version": "0.21.0",
+  "version": "0.22.1",
   "sideEffects": false,
   "type": "module",
   "types": "./dist/types/index.d.ts",

packages/embed-wallet/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cere/embed-wallet",
-  "version": "0.21.0",
+  "version": "0.22.1",
   "description": "Cere Wallet SDK to integrate the wallet into a web application.",
   "sideEffects": false,
   "main": "dist/bundle.umd.js",
@@ -23,7 +23,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@cere/torus-embed": "0.2.8",
+    "@cere/torus-embed": "0.2.9",
     "@types/bn.js": "^5.1.1",
     "@types/readable-stream": "^2.3.15",
     "bn.js": "^5.2.1"

packages/embed-wallet/src/EmbedWallet.ts

@@ -154,6 +154,7 @@ export class EmbedWallet {
     network,
     context,
     biconomy,
+    authMethod,
     popupMode = 'modal',
     connectOptions = {},
     appId = this.options.appId,
@@ -175,6 +176,7 @@ export class EmbedWallet {
         sessionId,
         popupMode,
         biconomy,
+        authMethod,
         sessionNamespace,
         context: this.defaultContext,
         buildEnv: buildEnvMap[env],

packages/embed-wallet/src/types.ts

@@ -1,4 +1,4 @@
-import type { NetworkInterface } from '@cere/torus-embed';
+import type {AuthMethod, NetworkInterface} from '@cere/torus-embed';
 import BN from 'bn.js';
 
 // App context
@@ -102,6 +102,7 @@ export type WalletInitOptions = WalletOptions & {
   popupMode?: 'popup' | 'modal';
   connectOptions?: Partial<WalletConnectOptions>;
   biconomy?: BiconomyOptions;
+  authMethod?: AuthMethod;
 };
 
 export type WalletTransferOptions = {

packages/wallet-engine/src/engine/polkadot.ts

@@ -117,7 +117,7 @@ export const createPolkadotEngine = ({ getPrivateKey, polkadotRpc }: PolkadotEng
         const [from, to, value] = req.params as [string, string, string];
         const pair = getPair(from);
 
-        const hash = await api.tx.balances.transfer(to, value).signAndSend(pair);
+        const hash = await api.tx.balances.transferAllowDeath(to, value).signAndSend(pair);
 
         res.result = hash.toHex();
       }),

src/api/auth-api.service.ts

@@ -93,4 +93,25 @@ export class AuthApiService {
 
     return result?.data?.data || null;
   }
+
+  public static async getTokenByTelegramMiniAppInitDataLink(botId: string, initData: string): Promise<string | null> {
+    let result: AxiosResponse<ApiResponse<TokenData>> | null = null;
+    try {
+      result = await api.post<{ code: 'SUCCESS' | 'ERROR'; data: { token: string } }>(
+        '/auth/token-by-telegram-mini-app-init-data',
+        {
+          botId,
+          initData,
+        },
+      );
+    } catch (error) {
+      const isUserError = error instanceof AxiosError && error.code === 'ERR_BAD_REQUEST';
+
+      if (!isUserError) {
+        reportError(error);
+      }
+    }
+
+    return result?.data.code === 'SUCCESS' ? result?.data.data.token : null;
+  }
 }

src/components/AccountDropdown/AccountDropdown.tsx

@@ -34,7 +34,7 @@ const AccountDropdown = (props: AccountDropdownProps) => {
     <Dropdown
       open={open}
       onToggle={setOpen}
-      label={<Truncate text={user.email} variant="email" maxLength={20} />}
+      label={<Truncate text={user.email} variant="text" maxLength={20} />}
       leftElement={<Avatar src={user.avatar} />}
     >
       <Stack width={350} spacing={2}>

src/components/WalletWidget/WalletWidget.tsx

@@ -109,7 +109,7 @@ const WalletWidget = () => {
     <Widget>
       <Card>
         <Header
-          title={<Truncate variant="email" text={user.email} maxLength={maxLength} />}
+          title={<Truncate variant="text" text={user.email} maxLength={maxLength} />}
           subheader={<Address variant="text" address={selectedAccount.address} maxLength={maxLength} />}
           avatar={<Avatar src={user.avatar} />}
           action={<CopyButton value={selectedAccount.address} successMessage="Address copied" />}

src/routes/AuthorizationRouter.tsx

@@ -11,6 +11,7 @@ import {
   AuthorizePermissions,
   AuthorizeComplete,
   AuthorizeLink,
+  AuthorizeTelegramMiniApp,
 } from './Authorize';
 
 export const AuthorizationRouter = () => {
@@ -26,6 +27,8 @@ export const AuthorizationRouter = () => {
       <Route element={<Authorize />}>
         {email ? (
           <Route index element={<AuthorizeOtp sendOtp />} />
+        ) : store.isTelegramMiniApp ? (
+          <Route index element={<AuthorizeTelegramMiniApp />} />
         ) : (
           <>
             <Route index element={isGame || skipLoginIntro ? <AuthorizeLogin /> : <AuthorizeIntro />} />

src/routes/Authorize/AuthorizeTelegramMiniApp.tsx

@@ -0,0 +1,30 @@
+import { observer } from 'mobx-react-lite';
+import { useEffect } from 'react';
+
+import { useOutletContext } from 'react-router-dom';
+
+import { AuthorizePopupStore } from '~/stores';
+import { useAppContextStore } from '~/hooks';
+import { AuthApiService } from '~/api/auth-api.service';
+
+const AuthorizeTelegramMiniApp = () => {
+  const authStore = useOutletContext<AuthorizePopupStore>();
+  const appContext = useAppContextStore();
+
+  useEffect(() => {
+    if (!appContext.authMethod) {
+      throw new Error('telegram-mini-app requires authMethod to be passed');
+    }
+
+    const [botId, initData] = appContext.authMethod.token.split(':');
+    AuthApiService.getTokenByTelegramMiniAppInitDataLink(botId, initData).then((idToken) => {
+      authStore.login(idToken!!).then(() => {
+        authStore.acceptSession();
+      });
+    });
+  }, [authStore, appContext]);
+
+  return <div></div>;
+};
+
+export default observer(AuthorizeTelegramMiniApp);

src/routes/Authorize/index.ts

@@ -7,3 +7,4 @@ export { default as AuthorizeLogin } from './AuthorizeLogin';
 export { default as AuthorizeOtp } from './AuthorizeOtp';
 export { default as AuthorizeComplete } from './AuthorizeComplete';
 export { default as AuthorizeLink } from './AuthorizeLink';
+export { default as AuthorizeTelegramMiniApp } from './AuthorizeTelegramMiniApp';

src/routes/EmbeddedWallet/EmbeddedModal.tsx

@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import { Dialog, DialogContent } from '@cere-wallet/ui';
 import { observer } from 'mobx-react-lite';
 
-import { useFullScreen, usePopupManagerStore } from '~/hooks';
+import { useAppContextStore, useFullScreen, usePopupManagerStore } from '~/hooks';
 import { PopupManagerModal } from '~/stores';
 import { RouteElement } from '../RouteElement';
 
@@ -14,14 +14,17 @@ type EmbeddedModalProps = {
 const EmbeddedModal = ({ modal, showClose }: EmbeddedModalProps) => {
   const popupStore = usePopupManagerStore();
   const [isFullscreen, setFullscreen] = useFullScreen();
+  const appContextStore = useAppContextStore();
 
   useEffect(() => {
     setFullscreen(true);
 
     return () => setFullscreen(false);
   }, [modal, setFullscreen]);
 
-  return (
+  return appContextStore.isTelegramMiniApp ? (
+    <RouteElement path={modal.path} context={{ preopenInstanceId: modal.instanceId }} />
+  ) : (
     <Dialog
       showClose={showClose}
       origin="right"

src/routes/EmbeddedWallet/EmbeddedWallet.tsx

@@ -25,7 +25,7 @@ const EmbeddedWallet = () => {
   return (
     <UIProvider transparentBody isGame={isGame} whiteLabel={toJS(whiteLabel)}>
       <WalletContext.Provider value={store}>
-        <WalletWidget />
+        {store.appContextStore.isTelegramMiniApp ? <></> : <WalletWidget />}
         {modal && <EmbeddedModal showClose={!isGame} modal={modal} />}
       </WalletContext.Provider>
     </UIProvider>

src/routes/FramePopup/FramePopup.tsx

@@ -1,6 +1,6 @@
 import { styled, Loading, Logo } from '@cere-wallet/ui';
 import { useCallback, useEffect, useState } from 'react';
-import { usePopupStore } from '~/hooks';
+import { useAppContextStore, usePopupStore } from '~/hooks';
 import { RedirectPopupStore } from '~/stores';
 
 // @ts-ignore
@@ -26,7 +26,7 @@ export const FramePopup = () => {
   const [url, setUrl] = useState<string>();
   const [loaded, setLoaded] = useState(false);
   const hideLoader = useCallback(() => setLoaded(true), []);
-
+  const appContextStore = useAppContextStore();
   const store = usePopupStore((popupId) => new RedirectPopupStore(popupId, true));
 
   useEffect(() => {
@@ -39,7 +39,7 @@ export const FramePopup = () => {
 
   return (
     <>
-      {!loaded && (
+      {!loaded && !appContextStore.isTelegramMiniApp && (
         <Loading sx={{ position: 'absolute' }} fullScreen>
           <Logo />
         </Loading>

src/stores/AppContextStore/AppContextStore.tsx

@@ -3,6 +3,7 @@ import { makeAutoObservable } from 'mobx';
 
 import { Wallet } from '../types';
 import { createSharedState } from '../sharedState';
+import { AuthMethod } from '@cere/torus-embed';
 
 export type App = Omit<NonNullable<AppContext['app']>, 'name'> & {
   name: string;
@@ -14,6 +15,7 @@ export type ContextBanner = AppContext['banner'] & {
 
 type SharedState = {
   context?: AppContext;
+  authMethod?: AuthMethod;
 };
 
 export class AppContextStore {
@@ -35,6 +37,14 @@ export class AppContextStore {
     this.shared.state.context = context;
   }
 
+  set authMethod(authMethod: AuthMethod | undefined) {
+    this.shared.state.authMethod = authMethod;
+  }
+
+  get authMethod(): AuthMethod | undefined {
+    return this.shared.state.authMethod;
+  }
+
   get banner(): ContextBanner | undefined {
     if (this.context?.banner) {
       return { variant: 'banner', ...this.context.banner };
@@ -74,6 +84,10 @@ export class AppContextStore {
     return { ...this.context.app, name };
   }
 
+  get isTelegramMiniApp(): boolean {
+    return (this.app?.appId as string) === 'telegram-mini-app';
+  }
+
   async disconnect() {
     this.context = undefined;
   }

src/stores/EmbededWalletStore/EmbeddedWalletStore.ts

@@ -160,12 +160,15 @@ export class EmbeddedWalletStore implements Wallet {
     this.walletConnection = createWalletConnection({
       logger: console,
 
-      onInit: async ({ chainConfig, context, biconomy }) => {
+      onInit: async ({ chainConfig, context, biconomy, authMethod }) => {
         this.networkStore.network = chainConfig;
         this.appContextStore.context = context;
+        if (authMethod) {
+          this.appContextStore.authMethod = authMethod;
+        }
 
         /**
-         * Configure the wallet with the init optionss
+         * Configure the wallet with the init options
          */
         if (biconomy) {
           this.options.biconomy = biconomy;
@@ -185,7 +188,6 @@ export class EmbeddedWalletStore implements Wallet {
         if (loginOptions.uxMode === 'modal') {
           return this.authenticationStore.loginInModal(preopenInstanceId, loginOptions);
         }
-
         return this.authenticationStore.loginInPopup(preopenInstanceId, loginOptions);
       },