Merge pull request #5 from findtoni:dev

update prod

Author: findtoni

src/App.vue

@@ -4,19 +4,22 @@ import AWaveLogo from './components/AWaveLogo.vue';
 import AWaveIntro from './components/AWaveIntro.vue';
 import AWaveInfo from './components/AWaveInfo.vue';
 import AWaveRepo from './components/AWaveRepo.vue';
+import { useStore } from './store';
+const store = useStore();
+store.initialize();
 </script>
 
 <template>
   <div class="waveportal w-full h-full">
     <AWaveLogo />
     <AWaveIntro />
     <AWaveLog />
-    <!-- <div class="w-5/6 md:w-3/4 mx-auto py-10">
-      <div class="flex justify-between items-center mx-auto left-0 right-0 bottom-4 w-11/12 md:w-8/12">
-        <AWaveRepo />
-        <AWaveInfo />
-      </div>
-    </div> -->
+    <div class="fixed bottom-[25px] md:bottom-[40px] left-[110px] md:left-[180px] mx-auto">
+      <AWaveRepo />
+    </div>
+    <div class="fixed  bottom-[20px] md:bottom-[40px] right-[-80px] md:right-[10px] w-64 mx-auto">
+      <AWaveInfo />
+    </div>
   </div>
 </template>
 

src/components/AConnectWallet.vue

@@ -26,12 +26,6 @@ async function connectWallet(network) {
         <img src="/wallet.svg" width="20" height="auto" alt="wallet" class="inline-flex mr-1 pb-1">
         Connect Wallet
       </button>
-      <span v-if="store.isConnected && store.isWrongNetwork" class="w-auto inline-flex mx-auto items-center text-center px-2 py-0.5 rounded text-xs font-medium text-gray-300">
-        <svg class="mr-1.5 h-2 w-2 text-purple-300" fill="currentColor" viewBox="0 0 8 8">
-          <circle cx="4" cy="4" r="3" />
-        </svg>
-        Switch network to ropsten
-      </span>
     </div>
     <AModal title="Connect a wallet" :open="open" @close="open = false">
       <div class="flex flex-col space-y-3 pt-5">

src/components/ASendWave.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, computed } from 'vue';
 import { useStore } from '../store';
-import { CheckIcon, SelectorIcon, CheckCircleIcon, ExternalLinkIcon } from '@heroicons/vue/solid';
+import { CheckIcon, SelectorIcon, CheckCircleIcon, ExternalLinkIcon, RefreshIcon } from '@heroicons/vue/solid';
 import { Combobox, ComboboxButton, ComboboxInput, ComboboxLabel, ComboboxOption, ComboboxOptions } from '@headlessui/vue';
 import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions } from '@headlessui/vue';
 import AModal from './base/AModal.vue';
@@ -31,6 +31,7 @@ const emojis = [
 const open = ref(false);
 const loading = ref(false);
 const hash = ref(null);
+const bePatient = ref(false);
 const wave = ref({ message: 'Hello!', emoji: '👋' });
 const query = ref('');
 const filtered = computed(() =>
@@ -43,6 +44,7 @@ const filtered = computed(() =>
 
 async function sendWave() {
   loading.value = true;
+  setTimeout(() => bePatient.value = true, 10000);
   hash.value = await store.sendWave(wave.value);
   loading.value = false;
 }
@@ -52,12 +54,6 @@ async function sendWave() {
   <div class="w-full">
     <button v-if="store.isWrongNetwork" class="w-full wave-button cursor-not-allowed bg-gray-300 rounded font-semibold h-10 mb-2">Wave at me!</button>
     <button v-else @click="open = true" class="w-full wave-button bg-white rounded font-semibold h-10 mb-2 transition ease-in-out delay-150 hover:scale-105">Wave at me!</button>
-    <span v-if="store.isWrongNetwork" class="flex justify-center items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-800">
-      <svg class="mr-1.5 h-2 w-2 text-purple-400" fill="currentColor" viewBox="0 0 8 8">
-        <circle cx="4" cy="4" r="3" />
-      </svg>
-      <span>Switch network to goerli</span>
-    </span>
     <AModal title="Wave at me" :open="open" @close="open = false" :hide="loading || hash">
       <div v-if="!loading && !hash" class="w-full flex flex-col space-y-4 pt-4">
         <Listbox as="div" v-model="wave.emoji">
@@ -116,13 +112,17 @@ async function sendWave() {
         <div v-if="!hash" class="flex flex-col items-center space-y-3">
           <ALoading is-large />
           <p class="text-white text-lg">Mining transaction...</p>
+          <p v-if="bePatient" class="text-gray-300">Hang in there, almost done</p>
         </div>
         <div v-else class="flex flex-col items-center space-y-3">
           <CheckCircleIcon class="h-12 w-12 text-green-600" />
           <p class="text-white text-lg">Transaction successful!</p>
           <a :href="`https://goerli.etherscan.io/tx/${hash}`" target="_blank">
             <p class="text-white underline inline-flex">View Transaction<ExternalLinkIcon class="w-4 h-4 mr-2 mt-1" /></p>
           </a>
+          <p @click="window.location.reload()" class="inline-flex text-gray-300 text-xs cursor-pointer">
+            <RefreshIcon class="w-3 h-3 mt-0.5 mr-1" />Reload to view wave
+          </p>
         </div>
       </div>
     </AModal>

src/components/AWaveInfo.vue

@@ -11,9 +11,10 @@ const open = ref(false);
         <a href="https://findtoni.dev/blog/ethereum-dev-overview" target="_blank" class="underline">Here's</a>
         a quick overview of building on Ethereum</p>
       <p class="leading-snug text-sm pt-1">
-        <a href="https://buildspace.so/p/build-solidity-web3-app" target="_blank" class="underline">Buildspace</a>
-        created this tutorial and <a href="https://buildspace.so/projects" target="_blank" class="underline">many more</a> awesome web3 dApp tutorials</p>
+        <a href="https://findtoni.dev/blog/build-solidity-vue-web3-app" target="_blank" class="underline">
+        Learn how to build this app</a>
+      </p>
     </div>
-    <QuestionMarkCircleIcon @click="open = !open" class="h-10 w-10 text-gray-300 hover:text-white cursor-pointer" />
+    <QuestionMarkCircleIcon @click="open = !open" class="h-8 w-8 md:h-10 md:w-10 text-gray-300 hover:text-white cursor-pointer" />
   </div>
 </template>

src/components/AWaveLog.vue

@@ -9,7 +9,15 @@ store.fetchWaves();
     <h3 class="font-sans text-md md:text-xl font-bold text-white text-center pt-20 pb-4 md:pb-5">
       See who else waved at me
     </h3>
-    <div class="flex justify-center items-center">
+    <div v-if="store.isWrongNetwork" class="flex justify-center">
+      <span @click="store.switchNetwork()" class="flex justify-center items-center px-2 py-0.5 rounded text-sm font-medium text-gray-300 cursor-pointer">
+        <svg class="mr-1.5 h-2 w-2 text-pink-400" fill="currentColor" viewBox="0 0 8 8">
+          <circle cx="4" cy="4" r="3" />
+        </svg>
+        Switch network to Goerli to view
+      </span>
+    </div>
+    <div v-else class="flex justify-center items-center pb-20 md:pb-10">
       <div class="w-full md:w-3/5 lg:w-1/2 flex flex-col space-y-3">
         <div v-for="({ waver, message, emoji, timestamp }, index) in store.waves" :key="index" class="flex justify-between items-center border rounded-md p-3 focus-within:md:p-5 border-[#2a2a2a]">
           <div class="w-auto">
@@ -20,7 +28,7 @@ store.fetchWaves();
             <p class="font-semibold text-sm md:text-lg inline-flex">Waver<span class="ml-2 font-medium text-white">{{ waver.substring(0, 20) + '...' }}</span></p>
             <p class="md:hidden font-semibold text-gray-300 text-sm">Waved on<span class="ml-2 font-medium text-white">{{ timestamp }}</span></p>
           </div>
-          <p class="hidden md:inline-flex text-center font-semibold w-1/5 text-gray-300 text-md">{{ timestamp }}</p>
+          <p class="hidden md:inline-flex text-center font-semibold w-1/5 text-gray-300 text-base">{{ timestamp }}</p>
         </div>
       </div>
     </div>

src/components/AWaveRepo.vue

@@ -3,6 +3,8 @@
 
 <template>
   <div class="w-auto">
-    <img width="120" height="auto" alt="GitHub forks" src="https://img.shields.io/github/forks/findtoni/waveportal?style=social">
+    <a href="https://github.com/findtoni/waveportal" target="_blank">
+      <img class="w-20 md:w-22" width="auto" height="auto" alt="GitHub stars" src="https://img.shields.io/github/stars/findtoni/waveportal?style=social">
+    </a>
   </div>
 </template>

src/store/index.js

@@ -36,6 +36,13 @@ export const useStore = defineStore('waveportal', {
     isWrongNetwork: state => state.network.chainId ? state.network.chainId !== '0x5' : true,
   },
   actions: {
+    async initialize() {
+      const chainId = await this.ethereum.request({ method: 'eth_chainId' });
+      this.network.chainId = chainId;
+      this.ethereum.on('chainChanged', () => {
+        window.location.reload();
+      });
+    },
     async connectWallet(network) {
       if (network == 'metamask') {
         await this.useMetamask();
@@ -51,6 +58,7 @@ export const useStore = defineStore('waveportal', {
         const signature = await signer.signMessage(accounts[0]);
         this.account = accounts[0];
         this.network.chainId = chainId;
+        if (this.isWrongNetwork) await this.switchNetwork();
       } else this.error = 'Install Metamask';
     },
     async useWalletConnect() {
@@ -61,6 +69,14 @@ export const useStore = defineStore('waveportal', {
       const chainId = await web3.eth.getChainId();
       this.account = accounts[0];
       this.network.chainId = chainId;
+      if (this.isWrongNetwork) await this.switchNetwork();
+    },
+    async switchNetwork() {
+      await this.ethereum.request({
+        method: 'wallet_switchEthereumChain',
+        params: [{ chainId: '0x5' }],
+      });
+      window.location.reload();
     },
     async fetchWaves() {
       const waves = await this.wavePortalContract.getAllWaves();
@@ -70,10 +86,12 @@ export const useStore = defineStore('waveportal', {
           waver: wave.waver,
           message: wave.message,
           emoji: wave.emoji,
-          timestamp: dateFormat(new Date(wave.timestamp * 1000), 'mmmm dS, yyyy'),
+          timestamp: dateFormat(new Date(wave.timestamp * 1000), 'mmm dS, yyyy'),
+          rawDate: new Date(wave.timestamp * 1000),
           transaction: wave[0]
         })
       });
+      this.waves = this.waves.sort((a, b) => b.rawDate - a.rawDate);
     },
     async sendWave(wave) {
       const waveTransaction = await this.wavePortalContract.wave(wave.message, wave.emoji, { gasLimit: this.contract.gasLimit });