Merge pull request #490 from telosnetwork/463-adding-oreid-authenticator

Login with Social Media

env.js

@@ -22,6 +22,7 @@ const TESTNET = {
     HYPERION_ENDPOINT: 'https://testnet.telos.net',
     NETWORK_EXPLORER: 'https://explorer-test.telos.net',
     CHAIN_NAME: 'telos-testnet',
+    APP_OREID_APP_ID: 't_75a4d9233ec441d18c4221e92b379197',
 };
 
 const MAINNET = {
@@ -35,6 +36,7 @@ const MAINNET = {
     HYPERION_ENDPOINT: 'https://mainnet.telos.net',
     NETWORK_EXPLORER: 'https://explorer.telos.net',
     CHAIN_NAME: 'telos',
+    APP_OREID_APP_ID: 'p_e5b81fcc20a04339993b0cc80df7e3fd',
 };
 
 const env = process.env.NETWORK === 'mainnet' ? MAINNET : TESTNET;

jest.config.js

@@ -90,6 +90,7 @@ module.exports = {
       'jest-transform-stub',
     },
     transformIgnorePatterns: [`node_modules/(?!(${esModules}))`],
+    testPathIgnorePatterns: ['balances'],
     setupFiles: ['<rootDir>/jest.init.js', '<rootDir>/test/jest/setEnvVars.ts'],
     globalSetup: './global-jest-setup.js',
     snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],

package.json

@@ -3,7 +3,6 @@
   "version": "2.1.0",
   "description": "A Web Wallet for Telos",
   "productName": "Telos Web Wallet",
-  "author": "Ryuhei Matsuda <[email protected]>",
   "private": true,
   "scripts": {
     "dev": "quasar dev",
@@ -38,6 +37,8 @@
     "mitt": "^3.0.0",
     "node-polyfill-webpack-plugin": "^2.0.1",
     "numeral": "^2.0.6",
+    "oreid-js": "^4.7.1",
+    "oreid-webpopup": "^2.3.0",
     "pinia": "^2.0.33",
     "ptokens": "^0.14.0",
     "qrcanvas-vue": "^3.0.0",

src/App.vue

@@ -1,7 +1,22 @@
-<script>
+<script lang="ts">
+import { useChainStore } from 'src/antelope';
+import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
+import { TELOS_CHAIN_IDS } from 'src/antelope/chains/chain-constants';
 
 export default {
     name: 'App',
+    mounted() {
+        const chainSettings = useChainStore().currentChain.settings as EVMChainSettings;
+
+        // if the organization using this application is Telos, import Fathom analytics
+        if (TELOS_CHAIN_IDS.includes(chainSettings.getChainId())) {
+            const script = document.createElement('script');
+            script.src = 'https://cdn.usefathom.com/script.js';
+            script.dataset.site = 'ISPYEAKT';
+            script.defer = true;
+            document.body.appendChild(script);
+        }
+    },
 };
 </script>
 

src/antelope/chains/EVMChainSettings.ts

@@ -219,6 +219,7 @@ export default abstract class EVMChainSettings implements ChainSettings {
     abstract getSystemTokens(): TokenClass[];
     abstract getIndexerApiEndpoint(): string;
     abstract hasIndexerSupport(): boolean;
+    abstract trackAnalyticsEvent(params: Record<string, unknown>): void;
 
     async getBalances(account: string): Promise<TokenBalance[]> {
         if (!this.hasIndexerSupport()) {

src/antelope/chains/NativeChainSettings.ts

@@ -142,6 +142,7 @@ export default abstract class NativeChainSettings implements ChainSettings {
     abstract getMapDisplay(): boolean;
     abstract getTheme(): Theme;
     abstract getFiltersSupported(prop: string): boolean;
+    abstract trackAnalyticsEvent(params: Record<string, unknown>): void;
 
     /**
      * Retrieves the list of IDs for the important tokens.

src/antelope/chains/chain-constants.ts

@@ -0,0 +1,17 @@
+import { NETWORK as telosEvmNetwork } from 'src/antelope/chains/evm/telos-evm';
+import { NETWORK as telosTestnetEvmNetwork } from 'src/antelope/chains/evm/telos-evm-testnet';
+
+export const TELOS_CHAIN_IDS = ['40', '41'];
+export const TELOS_NETWORK_NAMES = [telosEvmNetwork, telosTestnetEvmNetwork];
+export const TELOS_ANALYTICS_EVENT_IDS = {
+    loginStarted: 'JXIYBP1S',
+    loginSuccessful: 'HIP11SFR',
+    loginSuccessfulMetamask: 'ABGMND23',
+    loginFailedMetamask: 'ZFGE6TFS',
+    loginSuccessfulSafepal: 'LKCBKDU2',
+    loginFailedSafepal: '6PSIWGNV',
+    loginSuccessfulOreId: 'MSXMDDNK',
+    loginFailedOreId: 'UFX3JYRJ',
+    loginFailedWalletConnect: '9V4IV1BV',
+    loginSuccessfulWalletConnect: '2EG2OR3H',
+};

src/antelope/chains/evm/telos-evm-testnet/index.ts

@@ -8,7 +8,7 @@ import { getFiatPriceFromIndexer } from 'src/api/price';
 
 const LOGO = 'https://raw.githubusercontent.com/telosnetwork/images/master/logos_2021/Symbol%202.svg';
 const CHAIN_ID = '41';
-const NETWORK = 'telos-evm-testnet';
+export const NETWORK = 'telos-evm-testnet';
 const DISPLAY = 'Telos EVM Testnet';
 const TOKEN = new TokenClass({
     name: 'Telos',
@@ -58,6 +58,8 @@ const NETWORK_EVM_ENDPOINT = 'https://testnet.telos.net';
 const INDEXER_ENDPOINT = 'https://api.testnet.teloscan.io';
 const CONTRACTS_BUCKET = 'https://verified-evm-contracts-testnet.s3.amazonaws.com';
 
+declare const fathom: { trackGoal: (eventId: string, value: 0) => void };
+
 export default class TelosEVMTestnet extends EVMChainSettings {
     getNetwork(): string {
         return NETWORK;
@@ -149,4 +151,13 @@ export default class TelosEVMTestnet extends EVMChainSettings {
         return true;
     }
 
+    trackAnalyticsEvent(params: Record<string, unknown>): void {
+        if (typeof fathom === 'undefined') {
+            console.warn(`Failed to track event with ID ${params.id}: Fathom Analytics not loaded`);
+            return;
+        }
+
+        const id = params.id as string;
+        fathom.trackGoal(id, 0);
+    }
 }

src/antelope/chains/evm/telos-evm/index.ts

@@ -8,7 +8,7 @@ import { getFiatPriceFromIndexer } from 'src/api/price';
 
 const LOGO = 'https://raw.githubusercontent.com/telosnetwork/images/master/logos_2021/Symbol%202.svg';
 const CHAIN_ID = '40';
-const NETWORK = 'telos-evm';
+export const NETWORK = 'telos-evm';
 const DISPLAY = 'Telos EVM Mainnet';
 const TOKEN = new TokenClass({
     name: 'Telos',
@@ -58,6 +58,8 @@ const NETWORK_EVM_ENDPOINT = 'https://mainnet.telos.net';
 const INDEXER_ENDPOINT = 'https://api.teloscan.io';
 const CONTRACTS_BUCKET = 'https://verified-evm-contracts.s3.amazonaws.com';
 
+declare const fathom: { trackGoal: (eventId: string, value: 0) => void };
+
 export default class TelosEVMTestnet extends EVMChainSettings {
     getNetwork(): string {
         return NETWORK;
@@ -148,4 +150,14 @@ export default class TelosEVMTestnet extends EVMChainSettings {
     hasIndexerSupport(): boolean {
         return true;
     }
+
+    trackAnalyticsEvent(params: Record<string, unknown>): void {
+        if (typeof fathom === 'undefined') {
+            console.warn(`Failed to track event with ID ${params.id}: Fathom Analytics not loaded`);
+            return;
+        }
+
+        const id = params.id as string;
+        fathom.trackGoal(id, 0);
+    }
 }

src/antelope/chains/native/eos/index.ts

@@ -102,4 +102,8 @@ export default class EOS extends NativeChainSettings {
     getSystemTokens(): TokenClass[] {
         return [TOKEN];
     }
+
+    trackAnalyticsEvent(): void {
+        console.warn(`trackAnalyticsEvent not implemented for ${NETWORK}`);
+    }
 }

src/antelope/chains/native/jungle/index.ts

@@ -97,4 +97,8 @@ export default class TelosTestnet extends NativeChainSettings {
     getSystemTokens(): TokenClass[] {
         return [TOKEN];
     }
+
+    trackAnalyticsEvent(): void {
+        console.warn(`trackAnalyticsEvent not implemented for ${NETWORK}`);
+    }
 }

src/antelope/chains/native/telos-testnet/index.ts

@@ -116,4 +116,8 @@ export default class TelosTestnet extends NativeChainSettings {
     getSystemTokens(): TokenClass[] {
         return [TOKEN];
     }
+
+    trackAnalyticsEvent(): void {
+        console.warn(`trackAnalyticsEvent not implemented for ${NETWORK}`);
+    }
 }

src/antelope/chains/native/telos/index.ts

@@ -123,4 +123,8 @@ export default class Telos extends NativeChainSettings {
     getSystemTokens(): TokenClass[] {
         return [TOKEN];
     }
+
+    trackAnalyticsEvent(): void {
+        console.warn(`trackAnalyticsEvent not implemented for ${NETWORK}`);
+    }
 }

src/antelope/chains/native/ux/index.ts

@@ -97,4 +97,8 @@ export default class UX extends NativeChainSettings {
     getSystemTokens(): TokenClass[] {
         return [TOKEN];
     }
+
+    trackAnalyticsEvent(): void {
+        console.warn(`trackAnalyticsEvent not implemented for ${NETWORK}`);
+    }
 }

src/antelope/chains/native/wax/index.ts

@@ -97,4 +97,8 @@ export default class EOS extends NativeChainSettings {
     getSystemTokens(): TokenClass[] {
         return [TOKEN];
     }
+
+    trackAnalyticsEvent(): void {
+        console.warn(`trackAnalyticsEvent not implemented for ${NETWORK}`);
+    }
 }

src/antelope/types/ChainSettings.ts

@@ -16,5 +16,6 @@ export interface ChainSettings {
     getUsdPrice(): Promise<number>;
     getSystemTokens(): TokenClass[];
     getNFTsInventory(address: string, filter: IndexerTransactionsFilter): Promise<NFTClass[]>;
-    getNFTsCollection(contract: string, filter: IndexerTransactionsFilter): Promise<NFTClass[]>
+    getNFTsCollection(contract: string, filter: IndexerTransactionsFilter): Promise<NFTClass[]>;
+    trackAnalyticsEvent(params: Record<string, unknown>): void;
 }

src/antelope/wallets/authenticators/InjectedProviderAuth.ts

@@ -2,11 +2,14 @@
 
 import { ethers } from 'ethers';
 import { BehaviorSubject, filter, map } from 'rxjs';
-import { useEVMStore, useFeedbackStore } from 'src/antelope';
+import { useChainStore, useEVMStore, useFeedbackStore } from 'src/antelope';
 import { AntelopeError, ERC20_TYPE, EthereumProvider, EvmTransactionResponse, TokenClass, addressString } from 'src/antelope/types';
 import { EVMAuthenticator } from 'src/antelope/wallets';
 import { AbiItem } from 'web3-utils';
 import Web3 from 'web3';
+import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
+import { TELOS_NETWORK_NAMES, TELOS_ANALYTICS_EVENT_IDS } from 'src/antelope/chains/chain-constants';
+import { MetamaskAuthName, SafePalAuthName } from 'src/antelope/wallets';
 
 export abstract class InjectedProviderAuth extends EVMAuthenticator {
     onReady = new BehaviorSubject<boolean>(false);
@@ -62,11 +65,67 @@ export abstract class InjectedProviderAuth extends EVMAuthenticator {
     // EVMAuthenticator API ----------------------------------------------------------
 
     async login(network: string): Promise<addressString | null> {
+        const chainSettings = useChainStore().currentChain.settings as EVMChainSettings;
+        const authName = this.getName();
+
         this.trace('login', network);
         useFeedbackStore().setLoading(`${this.getName()}.login`);
-        const response = await super.login(network);
-        useFeedbackStore().unsetLoading(`${this.getName()}.login`);
-        return response;
+
+        this.trace('login', 'trackAnalyticsEvent -> login started');
+        chainSettings.trackAnalyticsEvent(
+            { id: TELOS_ANALYTICS_EVENT_IDS.loginStarted },
+        );
+
+        const response = await super.login(network).then((res) => {
+            if (TELOS_NETWORK_NAMES.includes(network)) {
+                let successfulLoginEventId = '';
+
+                if (authName === MetamaskAuthName) {
+                    successfulLoginEventId = TELOS_ANALYTICS_EVENT_IDS.loginSuccessfulMetamask;
+                } else if (authName === SafePalAuthName) {
+                    successfulLoginEventId = TELOS_ANALYTICS_EVENT_IDS.loginSuccessfulSafepal;
+                }
+
+                if (successfulLoginEventId) {
+                    this.trace('login', 'trackAnalyticsEvent -> login succeeded', authName, successfulLoginEventId);
+                    chainSettings.trackAnalyticsEvent(
+                        { id: successfulLoginEventId },
+                    );
+                }
+
+                this.trace('login', 'trackAnalyticsEvent -> generic login succeeded', TELOS_ANALYTICS_EVENT_IDS.loginSuccessful);
+                chainSettings.trackAnalyticsEvent(
+                    { id: TELOS_ANALYTICS_EVENT_IDS.loginSuccessful },
+                );
+            }
+
+            return res;
+        }).catch((error) => {
+            // if the user rejects the connection, we don't want to track it as an error
+            if (
+                TELOS_NETWORK_NAMES.includes(network) &&
+                error.message !== 'antelope.evm.error_connect_rejected'
+            ) {
+                let failedLoginEventId = '';
+
+                if (authName === MetamaskAuthName) {
+                    failedLoginEventId = TELOS_ANALYTICS_EVENT_IDS.loginFailedMetamask;
+                } else if (authName === SafePalAuthName) {
+                    failedLoginEventId = TELOS_ANALYTICS_EVENT_IDS.loginFailedSafepal;
+                }
+
+                if (failedLoginEventId) {
+                    this.trace('login', 'trackAnalyticsEvent -> login failed', authName, failedLoginEventId);
+                    chainSettings.trackAnalyticsEvent(
+                        { id: failedLoginEventId },
+                    );
+                }
+            }
+        }).finally(() => {
+            useFeedbackStore().unsetLoading(`${this.getName()}.login`);
+        });
+
+        return response ?? null;
     }
 
     async logout(): Promise<void> {

src/antelope/wallets/authenticators/MetamaskAuth.ts

@@ -2,6 +2,7 @@ import { EthereumProvider } from 'src/antelope/types';
 import { EVMAuthenticator, InjectedProviderAuth } from 'src/antelope/wallets';
 
 const name = 'Metamask';
+export const MetamaskAuthName = name;
 export class MetamaskAuth extends InjectedProviderAuth {
 
     // this is just a dummy label to identify the authenticator base class