Merge pull request #6 from funfair-tech/feature/lazy-loading+promise-…

…login-updates use the new lazy loading approach in samples
funfair-tech · May 26, 2021 · 53d5a2f · 53d5a2f
2 parents 7fbc929 + 7d9d5c0
commit 53d5a2f
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 35 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@funfair-tech/wallet-sdk": "^3.0.3",
+    "@funfair-tech/wallet-sdk": "^3.4.0",
     "@funfair-tech/wallet-vue": "^1.1.0",
     "core-js": "^3.6.5",
     "rxjs": "^6.6.3",

diff --git a/public/index.html b/public/index.html
@@ -6,10 +6,6 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
     <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
     <title><%= htmlWebpackPlugin.options.title %></title>
-    <script
-      src="https://wallet.funfair.io/assets/sdk/fun-wallet-sdk.js?appId=0x1b084986077d1aedfa1d92318fdcc7d1621fbc92deb390269b94226fd79c0ce6"
-      type="text/JavaScript"
-    ></script>
   </head>
   <body>
     <noscript>

diff --git a/src/App.vue b/src/App.vue
@@ -1,6 +1,5 @@
 <template>
   <div id="app">
-    <WalletLeader :registerEventListeners="this.registerEventListeners" />
     <div class="App">
       <div class="App-container">
         <img class="App-logo" src="./assets/logo.svg" />
@@ -22,7 +21,7 @@
 </template>
 
 <script>
-import { WalletLeader, WalletFollower } from '@funfair-tech/wallet-vue';
+import { WalletFollower } from '@funfair-tech/wallet-vue';
 import { login, logout } from './services/wallet-service';
 import { registerEventListeners } from './services/wallet-service';
 import LoggedInActions from './components/Logged-In-Actions.vue';
@@ -31,11 +30,11 @@ import {
   isAuthenticated$,
   restoreAuthenticationTaskCompleted$,
 } from './services/store';
+import { FunWalletEmbed } from '@funfair-tech/wallet-sdk';
 
 export default {
   name: 'App',
   components: {
-    WalletLeader,
     LoggedInActions,
     LoggedOutActions,
     WalletFollower,
@@ -47,15 +46,33 @@ export default {
     registerEventListeners: function() {
       registerEventListeners();
     },
-    login: function() {
-      login();
+    login: async function() {
+      await login();
     },
-    logout: function() {
-      logout();
+    logout: async function() {
+      await logout();
     },
   },
-  created: function() {
+  created: async function() {
     const _this = this;
+
+    // you call this method when you want to load the wallet
+    // this can be on a button click or page load up to how
+    // your dApp needs it to act
+
+    // it returns the fun wallet sdk but this
+    // is always exposed in `window.funwallet.sdk`
+    await FunWalletEmbed.load({
+      appId:
+        '0x1b084986077d1aedfa1d92318fdcc7d1621fbc92deb390269b94226fd79c0ce6',
+      // make sure its in a arrow expression
+      // functions so it can get context to `this`
+      // when executing your wallet event listener method
+      eventListenerCallback: () => {
+        this.registerEventListeners();
+      },
+    });
+
     isAuthenticated$.subscribe((value) => {
       _this.$data.isLoggedIn = value;
     });

diff --git a/src/services/wallet-service.js b/src/services/wallet-service.js
@@ -3,20 +3,18 @@ import Web3 from 'web3';
 import { isAuthenticated$, restoreAuthenticationTaskCompleted$ } from './store';
 
 export function registerEventListeners() {
-  window.funwallet.sdk.on(
-    MessageListeners.authenticationCompleted,
-    (result) => {
-      if (result.origin === 'https://wallet.funfair.io') {
-        isAuthenticated$.next(true);
-      }
-    }
-  );
-
   window.funwallet.sdk.on(
     MessageListeners.restoreAuthenticationCompleted,
     (result) => {
       if (result.origin === 'https://wallet.funfair.io') {
         restoreAuthenticationTaskCompleted$.next(true);
+
+        // if the user has been restored authentication then your all good
+        // to go again
+        if (result.data.isAuthenticated) {
+          // result.data.result holds `AuthenticationCompletedResponeData` in for you.
+          isAuthenticated$.next(true);
+        }
       }
     }
   );
@@ -68,11 +66,19 @@ export function registerEventListeners() {
   // register all the other events your interested in here...
 }
 
-export function login() {
-  window.funwallet.sdk.openWalletAuthenticationPopUp();
+export async function login() {
+  try {
+    const result = await window.funwallet.sdk.auth.login();
+    console.log('Authentication result', result);
+
+    isAuthenticated$.next(true);
+  } catch (error) {
+    console.error('User did not sign in');
+    return;
+  }
 }
 
-export function logout() {
+export async function logout() {
   window.funwallet.sdk.auth.logout();
   isAuthenticated$.next(false);
 }