implement firebase for clap feature

liquality · Oct 17, 2022 · 07ad231 · 07ad231
1 parent 87a5747
commit 07ad231
Show file tree

Hide file tree

Showing 6 changed files with 376 additions and 490 deletions.
diff --git a/.env b/.env
@@ -11,4 +11,11 @@ VUE_APP_ONRAMPER_WIDGET_URL=https://widget.onramper.com/
 VUE_APP_ONRAMPER_API_KEY=
 VUE_APP_SUPPORTED_LOCALES=en,es,zh,pt,ph,cb
 VUE_APP_DEFAULT_LOCALE=en
-
+VUE_APP_FIREBASE_API_KEY=
+VUE_APP_FIREBASE_AUTH_DOMAIN=
+VUE_APP_FIREBASE_PROJECT_ID=
+VUE_APP_FIREBASE_STORAGE_BUCKET=
+VUE_APP_FIREBASE_MESSAGING_SENDER_ID=
+VUE_APP_FIREBASE_APP_ID=
+VUE_APP_FIREBASE_MEASUREMENT_ID=
+VUE_APP_FIREBASE_DATABASE_URL=
diff --git a/package.json b/package.json
@@ -41,7 +41,7 @@
     "date-fns": "2.28.0",
     "ethers": "5.5.4",
     "extension-port-stream": "^2.0.1",
-    "firebase": "^9.12.1",
+    "firebase": "8.3.2",
     "human-standard-token-abi": "^2.0.0",
     "i18n-js": "^4.1.1",
     "lodash-es": "^4.17.15",

diff --git a/src/components/WhatsNewModal.vue b/src/components/WhatsNewModal.vue
@@ -17,6 +17,15 @@
           </ul>
         </div>
       </div>
+      <span>
+        <Clap :fill="hasClapped ? '#9d4dfa' : '#3D4767'" class="cursor-pointer" @click="clap()" />
+        <span class="ml-2">
+          <template v-if="loading">
+            <SpinnerIcon class="btn-loading" />
+          </template>
+          <span v-else>{{ clapCount }}</span>
+        </span>
+      </span>
     </template>
     <template #footer v-if="whatsNewModalContent.length > 1">
       <div class="footer">
@@ -59,21 +68,40 @@ import { version } from '/package.json'
 import { mapActions, mapState } from 'vuex'
 import ArrowLeftIcon from '@/assets/icons/arrow_left.svg'
 import ArrowRightIcon from '@/assets/icons/arrow_right.svg'
-// import {getDatabase} from 'firebase/database'
+import Clap from './icons/Clap.vue'
+import firebase from 'firebase'
+import SpinnerIcon from '@/assets/icons/spinner.svg'
 
 export default {
   components: {
     Modal,
     ArrowRightIcon,
     ArrowLeftIcon,
-    Logo
+    Logo,
+    Clap,
+    SpinnerIcon
   },
   data: function () {
     return {
-      open: false,
-      currentView: 1
+      open: true,
+      currentView: 1,
+      hasClapped: false,
+      loading: false,
+      clapCount: 0
     }
   },
+  mounted() {
+    firebase
+      .auth()
+      .signInAnonymously()
+      .then(() => {
+        console.log('signed in anonymously')
+      })
+      .catch((error) => {
+        console.error(error)
+      })
+    this.getClapCount()
+  },
   computed: {
     ...mapState(['whatsNewModalVersion', 'termsAcceptedAt', 'unlockedAt']),
     appVersion() {
@@ -90,6 +118,41 @@ export default {
     ...mapActions(['setWhatsNewModalVersion']),
     close() {
       this.open = false
+    },
+    getClapCount() {
+      this.loading = true
+      const db = firebase.firestore()
+      db.collection('claps')
+        .doc(this.appVersion)
+        .get()
+        .then((doc) => {
+          if (doc.exists) {
+            this.clapCount = doc.data().count
+          } else {
+            db.collection('claps').doc(this.appVersion).set({ count: 0 })
+          }
+        })
+        .catch((error) => {
+          console.error(error)
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    },
+    clap() {
+      if (this.hasClapped) {
+        this.hasClapped = false
+        this.clapCount > 0 ? this.clapCount-- : this.clapCount
+        firebase.firestore().collection('claps').doc(this.appVersion).update({
+          count: this.clapCount
+        })
+      } else {
+        this.hasClapped = true
+        this.clapCount++
+        firebase.firestore().collection('claps').doc(this.appVersion).update({
+          count: this.clapCount
+        })
+      }
     }
   },
   created() {

diff --git a/src/components/icons/Clap.vue b/src/components/icons/Clap.vue
@@ -0,0 +1,26 @@
+<template>
+  <svg
+    width="22"
+    height="20"
+    viewBox="0 0 22 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    @click="$emit('click')"
+  >
+    <path
+      d="M3.0625 7C3.19271 7.02604 3.3151 7.0026 3.42969 6.92969C3.54427 6.85677 3.61458 6.7526 3.64062 6.61719C3.66667 6.48698 3.64323 6.36719 3.57031 6.25781C3.4974 6.14323 3.39323 6.07031 3.25781 6.03906L1 5.55469C0.854167 5.52344 0.721354 5.54948 0.601562 5.63281C0.486979 5.71094 0.421875 5.82031 0.40625 5.96094C0.385417 6.09115 0.411458 6.21094 0.484375 6.32031C0.5625 6.42969 0.666667 6.4974 0.796875 6.52344L3.0625 7ZM3.85156 4.39844C3.95052 4.4974 4.06771 4.54688 4.20312 4.54688C4.34375 4.54688 4.46094 4.4974 4.55469 4.39844C4.64844 4.30469 4.69531 4.1901 4.69531 4.05469C4.69531 3.91927 4.64844 3.80208 4.55469 3.70312L2.91406 2.07031C2.8151 1.96615 2.69792 1.91667 2.5625 1.92188C2.43229 1.92188 2.31771 1.97135 2.21875 2.07031C2.11979 2.16927 2.06771 2.28385 2.0625 2.41406C2.0625 2.54427 2.11458 2.66146 2.21875 2.76562L3.85156 4.39844ZM6.76562 3.625C6.90104 3.59896 7.00781 3.52865 7.08594 3.41406C7.16406 3.29427 7.1875 3.17188 7.15625 3.04688L6.67188 0.789062C6.64062 0.653646 6.56771 0.549479 6.45312 0.476562C6.33854 0.403646 6.21615 0.380208 6.08594 0.40625C5.95052 0.432292 5.84375 0.502604 5.76562 0.617188C5.6875 0.731771 5.66406 0.856771 5.69531 0.992188L6.17969 3.24219C6.21094 3.3724 6.28125 3.47656 6.39062 3.55469C6.50521 3.63281 6.63021 3.65625 6.76562 3.625ZM17.7344 17.8672C18.7083 16.8984 19.2708 15.8125 19.4219 14.6094C19.5781 13.4062 19.3229 12.1042 18.6562 10.7031L16.8984 6.99219C16.7734 6.73698 16.6276 6.52604 16.4609 6.35938C16.1693 6.06771 15.8333 5.92708 15.4531 5.9375C15.0729 5.94271 14.7422 6.08854 14.4609 6.375C14.2682 6.5625 14.1458 6.79427 14.0938 7.07031C14.0469 7.34115 14.0885 7.63281 14.2188 7.94531L14.7344 9.1875C14.75 9.22396 14.7474 9.2526 14.7266 9.27344C14.7005 9.29948 14.6693 9.29688 14.6328 9.26562L10.2031 4.83594C9.88021 4.51302 9.53125 4.35156 9.15625 4.35156C8.78125 4.34635 8.4401 4.4974 8.13281 4.80469C8.01823 4.91927 7.92969 5.04688 7.86719 5.1875C7.8099 5.32292 7.77865 5.46354 7.77344 5.60938C7.45052 5.36458 7.11979 5.2474 6.78125 5.25781C6.44792 5.26823 6.14583 5.41146 5.875 5.6875C5.60417 5.95312 5.46354 6.25781 5.45312 6.60156C5.44271 6.9401 5.55208 7.26562 5.78125 7.57812C5.49479 7.58333 5.24479 7.69271 5.03125 7.90625C4.74479 8.19271 4.60677 8.51562 4.61719 8.875C4.6276 9.23438 4.78385 9.56771 5.08594 9.875L5.70312 10.4844C5.55208 10.4844 5.40104 10.5182 5.25 10.5859C5.10417 10.6484 4.97396 10.7396 4.85938 10.8594C4.57292 11.1458 4.4349 11.4766 4.44531 11.8516C4.46094 12.2214 4.6224 12.5599 4.92969 12.8672L9.67969 17.6172C10.5391 18.4766 11.4427 19.0547 12.3906 19.3516C13.3385 19.6484 14.2708 19.6693 15.1875 19.4141C16.1094 19.1641 16.9583 18.6484 17.7344 17.8672ZM16.9453 17.1328C16.2943 17.7839 15.5964 18.2083 14.8516 18.4062C14.112 18.6042 13.3568 18.5703 12.5859 18.3047C11.8151 18.0443 11.0599 17.5417 10.3203 16.7969L5.74219 12.2188C5.6224 12.099 5.5599 11.9688 5.55469 11.8281C5.54948 11.6823 5.60417 11.5521 5.71875 11.4375C5.83333 11.3281 5.96354 11.2734 6.10938 11.2734C6.26042 11.2734 6.39323 11.3307 6.50781 11.4453L9.33594 14.2734C9.4349 14.3724 9.54948 14.4193 9.67969 14.4141C9.8151 14.4036 9.92969 14.3542 10.0234 14.2656C10.1172 14.1719 10.1667 14.0573 10.1719 13.9219C10.1823 13.7865 10.138 13.6693 10.0391 13.5703L5.8125 9.34375C5.69271 9.22917 5.63021 9.10156 5.625 8.96094C5.61979 8.8151 5.67448 8.6849 5.78906 8.57031C5.90365 8.45573 6.03385 8.39844 6.17969 8.39844C6.33073 8.39844 6.46615 8.45833 6.58594 8.57812L10.5234 12.5156C10.6276 12.6198 10.7448 12.6693 10.875 12.6641C11.0104 12.6536 11.1224 12.6016 11.2109 12.5078C11.3047 12.4141 11.3542 12.3021 11.3594 12.1719C11.3698 12.0365 11.3255 11.9167 11.2266 11.8125L6.60156 7.1875C6.48177 7.07292 6.41927 6.94271 6.41406 6.79688C6.41406 6.64583 6.47135 6.51302 6.58594 6.39844C6.69531 6.28385 6.82292 6.22917 6.96875 6.23438C7.11979 6.23958 7.25521 6.30208 7.375 6.42188L12 11.0469C12.0938 11.1406 12.2057 11.1875 12.3359 11.1875C12.4714 11.1823 12.5859 11.1328 12.6797 11.0391C12.7786 10.9401 12.8307 10.8229 12.8359 10.6875C12.8411 10.5521 12.7969 10.4375 12.7031 10.3438L8.75781 6.39844C8.63802 6.28385 8.57812 6.15365 8.57812 6.00781C8.57812 5.86198 8.63542 5.73177 8.75 5.61719C8.85938 5.5026 8.98698 5.44792 9.13281 5.45312C9.27865 5.45312 9.41146 5.51302 9.53125 5.63281L14.9688 11.0703C15.1042 11.2057 15.2474 11.276 15.3984 11.2812C15.5495 11.2812 15.6823 11.224 15.7969 11.1094C15.8958 11.0104 15.9609 10.8932 15.9922 10.7578C16.0234 10.6224 16 10.4557 15.9219 10.2578L14.9453 7.6875C14.8776 7.51562 14.8698 7.36198 14.9219 7.22656C14.974 7.09115 15.0677 6.99219 15.2031 6.92969C15.349 6.86198 15.4844 6.86198 15.6094 6.92969C15.7344 6.99219 15.8438 7.11719 15.9375 7.30469L17.75 11.1406C18.3542 12.4219 18.5625 13.5495 18.375 14.5234C18.1927 15.4922 17.7161 16.362 16.9453 17.1328ZM10.1328 4.10156C10.0182 4.21094 9.92969 4.33594 9.86719 4.47656C9.8099 4.61719 9.77604 4.76042 9.76562 4.90625L10.75 5.69531C10.6354 5.58073 10.5755 5.45052 10.5703 5.30469C10.5703 5.15365 10.6276 5.02083 10.7422 4.90625C10.8568 4.79167 10.987 4.73698 11.1328 4.74219C11.2786 4.7474 11.4115 4.8099 11.5312 4.92969L14.1797 7.58594L14.8125 6.74219L12.2031 4.13281C11.875 3.8099 11.5234 3.64844 11.1484 3.64844C10.7786 3.64323 10.4401 3.79427 10.1328 4.10156ZM19.7344 17.1719C20.7031 16.1979 21.2656 15.112 21.4219 13.9141C21.5781 12.7109 21.3229 11.4062 20.6562 10L18.8906 6.28125C18.7292 5.9375 18.5182 5.67708 18.2578 5.5C17.9974 5.32292 17.7083 5.23438 17.3906 5.23438C17.2656 5.23438 17.125 5.25781 16.9688 5.30469C16.8125 5.35156 16.6615 5.42969 16.5156 5.53906C16.3698 5.64323 16.25 5.78385 16.1562 5.96094C16.0625 6.13802 16.0156 6.35417 16.0156 6.60938C16.0156 6.70312 16.0208 6.79167 16.0312 6.875L16.9609 7.13281C16.9089 7.01823 16.8828 6.90625 16.8828 6.79688C16.8828 6.67188 16.9297 6.55729 17.0234 6.45312C17.1224 6.34896 17.2552 6.29688 17.4219 6.29688C17.6667 6.29688 17.849 6.42969 17.9688 6.69531L19.7422 10.4375C20.3464 11.7135 20.5573 12.8385 20.375 13.8125C20.1927 14.7865 19.7135 15.6562 18.9375 16.4219C18.3073 17.0521 17.6406 17.4688 16.9375 17.6719L15.7969 18.875C16.4948 18.8958 17.1771 18.763 17.8438 18.4766C18.5156 18.1901 19.1458 17.7552 19.7344 17.1719Z"
+      :fill="fill"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  props: {
+    fill: {
+      type: String,
+      default: '#3D4767'
+    }
+  }
+}
+</script>
diff --git a/src/main.js b/src/main.js
@@ -10,14 +10,14 @@ import firebase from 'firebase'
 import '@/assets/scss/style.scss'
 
 const firebaseConfig = {
-  apiKey: 'AIzaSyB7ToaHRn-eoi1xokl5cJItApkY-uIemO4',
-  authDomain: 'wallet-extension-b4cb6.firebaseapp.com',
-  databaseURL: 'https://wallet-extension-b4cb6-default-rtdb.firebaseio.com',
-  projectId: 'wallet-extension-b4cb6',
-  storageBucket: 'wallet-extension-b4cb6.appspot.com',
-  messagingSenderId: '1029144929192',
-  appId: '1:1029144929192:web:a6228a9cf987a6ca9b739d',
-  measurementId: 'G-YV65VT0L08'
+  apiKey: process.env.VUE_APP_FIREBASE_API_KEY,
+  authDomain: process.env.VUE_APP_FIREBASE_AUTH_DOMAIN,
+  databaseURL: process.env.VUE_APP_FIREBASE_DATABASE_URL,
+  projectId: process.env.VUE_APP_FIREBASE_PROJECT_ID,
+  storageBucket: process.env.VUE_APP_FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: process.env.VUE_APP_FIREBASE_MESSAGING_SENDER_ID,
+  appId: process.env.VUE_APP_FIREBASE_APP_ID,
+  measurementId: process.env.VUE_APP_FIREBASE_MEASUREMENT_ID
 }
 
 firebase.initializeApp(firebaseConfig)