Merge pull request #372 from w3champions/crypto-moguls

Crypto moguls

src/components/common/CryptoDialog.vue

@@ -0,0 +1,71 @@
+<template>
+    <v-dialog v-model="show" max-width="500">
+        <v-card>
+            <v-card-title class="justify-center">
+                {{ this.cryptoName }}
+            </v-card-title>
+                <v-container>
+
+                    <v-row>
+                        <v-img :src="require(`@/assets/socials/QR/${crypto}_QR.png`)"></v-img>
+                    </v-row>
+
+                    <v-row class="mt-2">
+                        <v-spacer></v-spacer>
+                        <v-btn
+                            small 
+                            @click="copyAddress">
+                            <v-icon>
+                                mdi-content-copy
+                            </v-icon>
+                        </v-btn>
+                        <v-spacer></v-spacer>
+                    </v-row>
+
+                    <v-row class="mt-2">
+                        <v-spacer></v-spacer>
+                        <v-card elevation="0" max-width="500">
+                            <v-spacer></v-spacer>
+                                <v-card-text>
+                                    {{ cryptoAddress }}
+                                </v-card-text>
+                            <v-spacer></v-spacer>
+                        </v-card>
+                        <v-spacer></v-spacer>
+                    </v-row>
+
+                    <v-row class="mt-2">
+                        <v-spacer></v-spacer>
+                        <v-btn @click.stop="show=false">Close</v-btn>    
+                        <v-spacer></v-spacer>
+                    </v-row>
+                </v-container>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import { Component, Prop } from "vue-property-decorator";
+
+@Component({})
+export default class CryptoDialog extends Vue {
+    @Prop() crypto! : string;
+    @Prop() cryptoName! : string;
+    @Prop() cryptoAddress! : string;
+    @Prop() value! : boolean;
+
+    private copyAddress() {
+        navigator.clipboard.writeText(this.cryptoAddress);
+    }
+
+    get show() : boolean {
+        return this.value;
+    }
+
+    set show(value : boolean) {
+        this.$emit('input', value);
+    }
+
+}
+</script>

src/components/common/SupportBox.vue

@@ -1,41 +1,90 @@
 <template>
   <v-card class="support-card" tile>
     <v-card-text class="text-center text-primary" style="opacity: 0.87">
-      Support us at:
+      Support us:
     </v-card-text>
 
     <!-- PATREON -->
     <v-card class="support-subcard" href="https://www.patreon.com/w3champions" tile outlined style="padding-bottom: 0px">
-        <v-img src="../../../src/assets/socials/Patreon_button.png" />
+        <v-img src="@/assets/socials/Patreon_button.png" />
     </v-card>
 
     <!-- PAYPAL -->
     <v-card class="support-subcard" href="https://www.paypal.me/w3champions" tile outlined>
-        <v-img src="../../../src/assets/socials/PayPal_button.png" />
+        <v-img src="@/assets/socials/PayPal_button.png" />
+    </v-card>
+
+    <!-- CRYPTOCURRENCIES -->
+
+    <v-card 
+      v-for="(crypto, index) in cryptos"
+      v-bind:key="crypto.coin" 
+      class="support-subcard" 
+      tile 
+      outlined
+      @click.stop="updateTracker(index)">
+        <v-img
+          :src="button(crypto.coin)">
+        </v-img>
+        <crypto-dialog
+          v-model="dialogTracker[index]" 
+          :crypto="crypto.coin" 
+          :cryptoName="crypto.name"
+          :cryptoAddress="crypto.address"></crypto-dialog>
     </v-card>
 
-    <!-- MATCHERINO - TBD -->
   </v-card>
 </template>
 
 <script lang="ts">
 import Vue from "vue";
 import { Component, Prop } from "vue-property-decorator";
+import CryptoDialog from "@/components/common/CryptoDialog.vue";
 
-// In the long term, I want the current matcherino link for the
-// latest end-of-season tournament to be auto-updated here.
-
-// this would require adding the link to the state management
-// then checking the latest season.
-
-@Component({})
+@Component({ components: { CryptoDialog } })
 export default class SupportBox extends Vue {
   @Prop() title!: string;
   @Prop() text!: string;
 
+  openCryptoDialog = false;
+
+  dialogTracker : Array<boolean> = [false, false, false];
+
+  private updateTracker(index : number) : void {
+    for (let i=0; i<this.dialogTracker.length; i++) {
+      Vue.set(this.dialogTracker, i , false)
+    }
+    Vue.set(this.dialogTracker, index, true)
+  }
+
+  private button(coin : string) : NodeRequire {
+    return require(`@/assets/socials/${coin}_button.png`);
+  }
+
+  get cryptos() : unknown {
+        return [
+            {
+                coin: `BTC`,
+                name: "Bitcoin",
+                address: `bc1qcm77d3hur2n83utam3h6e479cg6qrnwy8dlv80`,
+            },
+            {
+                coin: `ETH`,
+                name: "Ethereum",
+                address: `0x284a0e918e126dF38cFc0207c00D5564CAFbe658`,
+            },
+            {
+                coin: `LTC`,
+                name: "Litecoin",
+                address: `ltc1q4aq488zph7327nczu3vl3930xu9jke0jr2svh0`,
+            }
+        ];
+    } 
+
   get patreon(): string {
     return "https://www.patreon.com/w3champions";
   }
+
 }
 </script>