[TAS-345] ⚗️ Test recommended connection method

functions/package.json

@@ -20,7 +20,7 @@
     "@likecoin/iscn-js": "^0.6.2",
     "@likecoin/nuxt-google-optimize": "^0.5.3-like.11",
     "@likecoin/ui-vue": "^0.7.1",
-    "@likecoin/wallet-connector": "^0.22.0-beta.1",
+    "@likecoin/wallet-connector": "^0.23.0-beta.1",
     "@nuxt/postcss8": "^1.1.3",
     "@nuxt/typescript-build": "^2.1.0",
     "@nuxtjs/axios": "^5.12.2",

src/experiments/index.js

@@ -1 +1,3 @@
-export default [];
+import exp from './recommend-connection-method';
+
+export default [exp];

src/experiments/recommend-connection-method.js

@@ -0,0 +1,6 @@
+export default {
+  name: 'recommend-connection-method',
+  experimentID: 'O45U7CF8TSqn97ASkFalgg',
+  isEligible: ({ route }) => !process.server && !!route.name,
+  variants: [{ name: 'origin', weight: 1 }, { name: 'variant', weight: 1 }],
+};

src/mixins/wallet-login.js

@@ -1,8 +1,17 @@
 import { mapActions } from 'vuex';
 
+import experimentMixin from '~/mixins/experiment';
+
 import { logTrackerEvent } from '~/util/EventLogger';
 
 export default {
+  mixins: [
+    experimentMixin(
+      'shouldRecommendConnectionMethod',
+      'recommend-connection-method',
+      'variant'
+    ),
+  ],
   methods: {
     ...mapActions([
       'openConnectWalletModal',
@@ -19,6 +28,8 @@ export default {
           language: this.$i18n.locale.split('-')[0],
           connectWalletTitle: this.$t('connect_wallet_title'),
           connectWalletMobileWarning: this.$t('connect_wallet_mobile_warning'),
+          shouldRecommendConnectionMethod: this.shouldRecommendConnectionMethod,
+          onEvent: this.handleConnectWalletEvent,
         });
         if (!connection) return false;
         const { method } = connection;
@@ -38,5 +49,33 @@ export default {
         return false;
       }
     },
+    handleConnectWalletEvent({ type, ...payload }) {
+      switch (type) {
+        case 'toggle_collapsible_connection_method_list':
+          logTrackerEvent(
+            this,
+            'user',
+            `ConnectWalletMethodList${
+              payload.isCollapsed ? 'Collapsed' : 'Expanded'
+            }`,
+            `ConnectWalletMethodListToggle`,
+            1
+          );
+          break;
+
+        case 'select_connection_method':
+          logTrackerEvent(
+            this,
+            'user',
+            `ConnectWalletSelected_${payload.method}`,
+            `ConnectWalletSelected`,
+            1
+          );
+          break;
+
+        default:
+          break;
+      }
+    },
   },
 };

src/nuxt.config.js

@@ -274,12 +274,12 @@ const nuxtConfig = {
     '@nuxtjs/sitemap',
     ['@nuxtjs/pwa', { icon: false }],
     'portal-vue/nuxt',
-    // [
-    //   '@likecoin/nuxt-google-optimize',
-    //   {
-    //     plugins: [{ src: '~/plugins/experiment.client.js', mode: 'client' }],
-    //   },
-    // ],
+    [
+      '@likecoin/nuxt-google-optimize',
+      {
+        plugins: [{ src: '~/plugins/experiment.client.js', mode: 'client' }],
+      },
+    ],
   ],
 
   // Auto import components: https://go.nuxtjs.dev/config-components
@@ -389,10 +389,10 @@ const nuxtConfig = {
     hostname: EXTERNAL_URL,
     routes: getSitemapRoutes,
   },
-  // googleOptimize: {
-  //   useFetch: false,
-  //   maxAge: 86400, // 1 day
-  // },
+  googleOptimize: {
+    useFetch: false,
+    maxAge: 86400, // 1 day
+  },
   router: {
     extendRoutes(routes, resolve) {
       const route = routes.find(r => r.name === 'id');

src/package.json

@@ -34,7 +34,7 @@
     "@likecoin/iscn-js": "^0.6.2",
     "@likecoin/nuxt-google-optimize": "^0.5.3-like.11",
     "@likecoin/ui-vue": "^0.7.1",
-    "@likecoin/wallet-connector": "^0.22.0-beta.1",
+    "@likecoin/wallet-connector": "^0.23.0-beta.1",
     "@nuxtjs/axios": "^5.12.2",
     "@nuxtjs/i18n": "^7.3.1",
     "@nuxtjs/pwa": "^3.3.4",

src/store/modules/wallet.js

@@ -378,14 +378,32 @@
 
   async openConnectWalletModal(
     { commit, dispatch },
-    { language, connectWalletTitle, connectWalletMobileWarning } = {}
+    {
+      language,
+      connectWalletTitle,
+      connectWalletMobileWarning,
+      shouldRecommendConnectionMethod = false,
+      onEvent,
+    } = {}
   ) {
     commit(WALLET_SET_IS_CONNECTING_WALLET, true);
     const connector = await dispatch('getConnector');
+    if (shouldRecommendConnectionMethod) {
+      connector.options.availableMethods = [
+        'keplr',
+        ['keplr-mobile', { tier: 1, isRecommended: true }],
+        'cosmostation',
+        'cosmostation-mobile',
+        'liker-id',
+        'leap',
+        'walletconnect-v2',
+      ];
+    }
     const connection = await connector.openConnectionMethodSelectionDialog({
       language,
       connectWalletTitle,
       connectWalletMobileWarning,
+      onEvent,
     });
     commit(WALLET_SET_IS_CONNECTING_WALLET, false);
     return connection;
@@ -463,7 +481,7 @@
         })
       )
       .catch(error => {
         console.error(error);
       });
 
     // Get followees events