feature: Transactions signing permission support for Cere account (#206)

CHANGELOG.md

@@ -6,6 +6,8 @@
 - Make it possible to change permission title and description
 - Store wallet permission to connected application and don't ask on each login
 - Add `Magic Link` authentication support
+- Postpone GTM initialization to increase init speed
+- Add transaction signing permission
 
 ### v1.38.0
 

playground/Wallet.tsx

@@ -63,6 +63,7 @@ export const Wallet = () => {
           personal_sign: {},
           ed25519_signRaw: {},
           solana_signMessage: {},
+          ed25519_signPayload: {},
         },
       },
 
@@ -285,6 +286,7 @@ export const Wallet = () => {
       },
 
       solana_signMessage: {},
+      ed25519_signPayload: {},
     });
 
     console.log('Approved permissions', permissions);

src/components/Permissions/knownPermissions.ts

@@ -17,6 +17,11 @@ export const knownPermissions: Record<AllowedPermission, PermissionMeta> = {
     description: 'Allow the app to sign data on your behalf in background.',
   },
 
+  ed25519_signPayload: {
+    title: 'Sign transactions (Cere Network)',
+    description: 'Allow the app to sign transactions on your behalf in background.',
+  },
+
   solana_signMessage: {
     title: 'Sign message (Solana)',
     description: 'Allow the app to sign data on your behalf in background.',

src/constants.ts

@@ -42,4 +42,9 @@ export const RPC_POLLING_INTERVAL = 10000;
 export const AUTH_SESSION_TIMEOUT = 604800;
 export const AUTH_TOKEN_ISSUER = 'cere-wallet';
 
-export const ALLOWED_WALLET_PERMISSIONS = ['personal_sign', 'ed25519_signRaw', 'solana_signMessage'] as const;
+export const ALLOWED_WALLET_PERMISSIONS = [
+  'personal_sign',
+  'ed25519_signRaw',
+  'solana_signMessage',
+  'ed25519_signPayload', // TODO: Dangerous permission, try to narrow its scope in future
+] as const;

src/index.tsx

@@ -1,14 +1,9 @@
 import ReactDOM from 'react-dom/client';
-import TagManager from 'react-gtm-module';
 
 import Reporting from './reporting';
-import { GTM_ID, APP_VERSION } from './constants';
+import { APP_VERSION } from './constants';
 import App from './App';
 
-if (GTM_ID) {
-  TagManager.initialize({ gtmId: GTM_ID });
-}
-
 /**
  * Log the version of the wallet client
  */

src/routes/AppRouter.tsx

@@ -1,12 +1,16 @@
 import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+import TagManager from 'react-gtm-module';
 
+import { GTM_ID } from '~/constants';
 import { Redirect } from './Redirect';
 import { RedirectPopup } from './RedirectPopup';
 import { ConfirmPopup } from './ConfirmPopup';
 import { TransactionPopup } from './TransactionPopup';
 import { FramePopup } from './FramePopup';
 import { PermissionsPopup } from './PermissionsPopup';
 
+const initGtm = () => GTM_ID && TagManager.initialize({ gtmId: GTM_ID });
+
 const router = createBrowserRouter([
   {
     path: '/',
@@ -57,6 +61,8 @@ const router = createBrowserRouter([
         lazy: async () => {
           const { WalletRouter } = await import(/* webpackChunkName: "WalletRouter" */ './WalletRouter');
 
+          initGtm(); // Init GTM asynchronously on wallet load
+
           return {
             Component: WalletRouter,
           };
@@ -70,6 +76,8 @@ const router = createBrowserRouter([
             /* webpackChunkName: "AuthorizationRouter" */ './AuthorizationRouter'
           );
 
+          initGtm(); // Init GTM asynchronously on authorize UI
+
           return {
             Component: AuthorizationRouter,
           };