updated conenect wallet component and added 404 error

Author: antonkravchenko2001

cloud/queries.js

@@ -242,6 +242,14 @@ Moralis.Cloud.define(
                 }
             }
         ];
+        let m  = {};
+        if(request.params.player){
+            m.player = {
+                $eq: request.params.player
+            }
+            pipeline.push(m);
+        }
+
         const results = await query.aggregate(pipeline, { useMasterKey: true });
         return results;
     }

pythia-frontend/src/components/Market/MarketDisplay.vue

@@ -11,6 +11,10 @@
     <div v-if="!$store.state.chainCorrect">
         <Alert background='#ff000080' color='white' message='Error:' text='Incorrect network, please switch to Kovan'/>
     </div>
+    <div v-if="!marketExists">
+        <PageNotFound/>
+    </div>
+
 </template>
 
 <script>
@@ -28,10 +32,13 @@ export default {
         Alert: defineAsyncComponent(() =>
             import('../subcomponents/AlertWindow.vue')
         ),
+        PageNotFound: defineAsyncComponent(() => 
+            import('../subcomponents/PageNotFound.vue')
+        )
     },
     data(){
         return {
-            marketExists: false,
+            marketExists: true,
             marketData: {
                 marketInfo: null,
                 playerInfo: {

pythia-frontend/src/components/subcomponents/LoginUi.vue

@@ -1,30 +1,45 @@
 <template>
-    <button v-if="!isLoggedIn" @click="logIn" class="login-button">
+    <button v-if="!isLoggedIn" @click="logIn" class="login-button" style="height:35px">
       <img src = "https://raw.githubusercontent.com/blakewood84/react-metamask/main/public/images/metamask.svg" alt="My Happy SVG" width='12' height='12'/>
       Connect Wallet
     </button>
-    <button 
-      v-if="isLoggedIn"
-      @click="logOut"
-       class="login-button">
-      <img src = "https://raw.githubusercontent.com/blakewood84/react-metamask/main/public/images/metamask.svg" alt="My Happy SVG" width='12' height='12'/>
-      Disconnect
-    </button>
+    <div v-if="isLoggedIn" class="login-container">
+       <span class="expert-score-display">
+        {{expertLevel}}
+       </span>
+       <button 
+        style="position: relative;right: 0px;top: 0px;height: 100%;"
+        @click="logOut"
+        class="login-button">
+        <img src = "https://raw.githubusercontent.com/blakewood84/react-metamask/main/public/images/metamask.svg" alt="My Happy SVG" width='12' height='12'/>
+        Disconnect
+      </button>
+    </div>
 </template>
 
 <script>
+import {determineExpertise} from '../../utils.js'
+import Moralis from '../../main.js'
 
 export default {
+  data(){
+    return {
+      expertLevel: 'Novice'
+    }
+  },
   methods: {
     async logIn(){
-      await this.$store.commit('logIn')
-      console.log('logged in')
+      await Moralis.authenticate();
+      await this.$store.commit('logIn');
+      let player = this.$store.state.user.get('ethAddress');
+      this.expertLevel = await determineExpertise(player);
     },
     async logOut(){
+      await Moralis.User.logOut();
       await this.$store.commit('logOut')
-      console.log('logged out');
 
-    }
+
+    },
   },
   computed: {
     isLoggedIn(){
@@ -40,24 +55,38 @@ export default {
 
 <style scoped>
 
+ .login-container {
+    display:flex;
+    justify-content: space-between;
+    position: relative;
+    background-color: #183362;
+    gap: 10px;
+    height: 35px;
+    border-radius: 15px;
+ }
+
  .login-button {
     background: #3a46c4;
     box-shadow: 1px 1px 8px #121212;
     color: #ffffff;
     border: none;
     border-radius: 15px;
     font-size: 12px;
-    padding-left: 12px;
-    padding-right: 12px;
-    padding-top: 8px;
-    padding-bottom: 8px;
-    font-family: 'MontSerrat';
-    font-weight: 450;
-    z-index: 5;
-    margin-left: 5px;
+    min-width:120px;
 }
 
  .login-button:hover{
    background-color: #3a46c4;
  }
+
+ .expert-score-display{
+    color: #4cd9b2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    font-size: 13px;
+    padding-left: 10px;
+    font-family: system-ui;
+    font-weight: 650;
+ }
 </style>

pythia-frontend/src/components/subcomponents/PageNotFound.vue

@@ -0,0 +1,5 @@
+<template>
+    <div style="display: flex;align-items: center;justify-content: center;height: 70vh;font-family: system-ui;">
+        <h1 style="color:white">404 error: Page not found</h1>
+    </div>
+</template>

pythia-frontend/src/main.js

@@ -25,11 +25,9 @@ const store = createStore({
   },
   mutations: {
     async logIn(state) {
-      await Moralis.authenticate();
       state.user = Moralis.User.current();
     },
     async logOut(state) {
-        await Moralis.User.logOut();
         state.user = null;
     },
 

pythia-frontend/src/utils.js

@@ -67,4 +67,23 @@ export const roundNum = (num) => {
     } else {
         return Math.round(num * 1000) / 1000
     }
+}
+
+export const determineExpertise = async (player) => {
+    const results = await Moralis.Cloud.run(
+        'getTopPerformers',
+        player
+    )
+    const expertScore = results[0].expertScore;
+    if(expertScore < 100){
+        return 'Novice';
+    }else if(expertScore < 1000){
+        return 'Investor'
+    }else if(expertScore < 10000){
+        return 'Expert'
+    }else{
+        return 'Crypto grandmaster'
+    }
+
+
 }