Pushing FCM token up to a firestore

.gitignore

@@ -1,3 +1,6 @@
+# General
+src/_config/
+
 .DS_Store
 node_modules
 /dist

package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "core-js": "^3.3.2",
+    "ethers": "^4.0.39",
     "firebase": "^7.5.0",
     "vue": "^2.6.10",
     "vue-router": "^3.1.3",

src/Firebase/Accounts.js

@@ -0,0 +1,45 @@
+import {db} from './index';
+
+// todo: check that address is valid before firing any query
+export default new class Accounts {
+    async upsertAccount(account) {
+        return db
+            .collection('accounts')
+            .doc(account.address)
+            .set(account, {
+                merge: true
+            });
+    }
+
+    async getAccount(address) {
+        return db
+            .collection('accounts')
+            .doc(address)
+            .get()
+            .then(snapshot => {
+                if(snapshot.exists) {
+                    return snapshot.data();
+                }
+                return null;
+            });
+    }
+
+    async upsertFirebaseMessagingTokenForAccount(address, firebaseMessagingToken) {
+        return db
+            .collection('accounts')
+            .doc(address)
+            .set({firebaseMessagingToken}, {
+                merge: true
+            });
+    }
+
+    async getFirebaseMessagingTokenForAccount(address) {
+        return this.getAccount(address)
+            .then(account => {
+                if(account && account.firebaseMessagingToken) {
+                    return account.firebaseMessagingToken;
+                }
+                return null;
+            });
+    }
+}

src/Firebase/index.js

@@ -0,0 +1,12 @@
+const firebase = require('firebase');
+require("firebase/firestore");
+require("firebase/messaging");
+
+const {firebaseConfig} = require('../_config/env');
+
+firebase.initializeApp(firebaseConfig);
+
+module.exports = {
+    db: firebase.firestore(),
+    messaging: firebase.messaging()
+};

src/components/Chat.vue

@@ -1,35 +1,41 @@
 <template>
     <div class="hello">
-        <h1>Chat</h1>
+        <h1>Wizards Poke</h1>
+        <small v-if="accounts.user">Your account: {{accounts.user}}</small>
+        <hr/>
+        <label for="other">View Wizards of: </label>
+        <input id="other" type="text"/>
+        <button>View</button>
     </div>
 </template>
 
 <script>
-    import firebase from 'firebase';
-    import "firebase/messaging";
-
-    firebase.initializeApp();
-
-    const messaging = firebase.messaging();
-    messaging.usePublicVapidKey();
+    import {ethers} from "ethers";
+    import Accounts from '@/Firebase/Accounts';
+    import {messaging} from '@/Firebase/index';
+    import env from '@/_config/env';
+    messaging.usePublicVapidKey(env.messaging.publicVapidKey);
 
     export default {
         name: 'Chat',
         props: {
             msg: String
         },
+        data: function() {
+          return {
+              accounts: {
+                  user: null,
+                  other: null
+              }
+          };
+        },
       methods: {
-          onFCMTokenReceived: function(token) {
+          onFCMTokenReceived: async function(token) {
             if (token) {
-              //sendTokenToServer(currentToken);
-              //updateUIForPushEnabled(currentToken);
               console.log('token', token);
+              await Accounts.upsertFirebaseMessagingTokenForAccount(this.accounts.user, token);
             } else {
-              // Show permission request.
               console.log('Unable to retrieve token - check permissions');
-              // Show permission UI.
-              //updateUIForPushPermissionRequired();
-              //setTokenSentToServer(false);
             }
           },
         getFCMToken: function() {
@@ -38,19 +44,30 @@
                   .catch((err) => console.log('An error occurred while retrieving token. ', err));
         }
       },
-        mounted() {
-          Notification.requestPermission().then(permission => {
-            if (permission === 'granted') {
-              console.log('Notification permission granted.');
+        async mounted() {
+            await window.ethereum.enable();
+            const provider = new ethers.providers.Web3Provider(web3.currentProvider);
+            const signer = provider.getSigner();
 
-              this.getFCMToken();
+            const {chainId} = await provider.getNetwork();
 
-              messaging.onTokenRefresh(() => this.getFCMToken());
-            } else {
-              console.log('Unable to get permission to notify.');
+            const accounts = await provider.listAccounts();
+            if (accounts && accounts.length) {
+                this.accounts.user = accounts[0];
+
+                Notification.requestPermission().then(permission => {
+                    if (permission === 'granted') {
+                        console.log('Notification permission granted.');
+
+                        this.getFCMToken();
+
+                        messaging.onTokenRefresh(() => this.getFCMToken());
+                    } else {
+                        console.log('Unable to get permission to notify.');
+                    }
+                });
             }
-          });
-        }
+        },
     }
 </script>