Merge pull request #195 from effectai/redesign

Redesign
effectai · Aug 15, 2023 · 2076621 · 2076621
2 parents 82b8285 + 720f2f4
commit 2076621
Show file tree

Hide file tree

Showing 23 changed files with 1,232 additions and 19,642 deletions.
diff --git a/.gitignore b/.gitignore
@@ -90,3 +90,6 @@ sw.*
 
 # Vim swap files
 *.swp
+
+#
+.labs/
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1 @@
+npm config set python $(which python)
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+v14.21.3
diff --git a/Dockerfile b/Dockerfile
@@ -0,0 +1,15 @@
+FROM node:14-alpine
+
+WORKDIR /app
+
+RUN apk update && apk upgrade
+RUN apk add git
+
+COPY ./package.json /app/
+
+RUN npm install && npm cache clean --force
+
+COPY . .
+
+EXPOSE 3000
+ENV PATH ./node_modules/.bin/:$PATH
diff --git a/README.md b/README.md
@@ -5,22 +5,47 @@
 ## Build Setup
 
 ```bash
-# install dependencies
-$ npm install
+# install dependenciese
+npm install
 
 # serve with hot reload at localhost:3000
-$ npm run dev
+npm run dev
 
 # build for production and launch server
-$ npm run build
-$ npm run start
+npm run build
+npm run start
 
 # generate static project
-$ npm run generate
+npm run generate
 ```
 
 For a detailed explanation of how things work, check out [Nuxt.js docs](https://nuxtjs.org).
 
+## Docker
+
+If you have docker installed you can run the following command to start a development container:
+
+```bash
+docker compose up
+```
+
 ## Node Version
 
 To run this codebase you will need to use `v14` of Node.
+
+```bash
+# Install nvm (if you don't have it already)
+curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
+
+# Install node v14 (if you don't have it already)
+nvm install v14
+
+# Use node v14
+nvm use v14
+```
+
+Alternatively, there is a [`.nvmrc`](https://github.com/nvm-sh/nvm#nvmrc) file in the root of the project that you can use with `nvm` to automatically switch to the correct version of Node.
+
+```bash
+nvm use
+```
diff --git a/assets/css/global.scss b/assets/css/global.scss
@@ -68,6 +68,34 @@ a {
   }
 }
 
+.table {
+  box-shadow: $box-shadow;
+  border-radius: 0.55rem;
+  box-sizing: border-box;
+  overflow: hidden;
+  &.has-shadow-outside {
+     box-shadow: $box-shadow-outside;
+  }
+  .cell {
+    padding: 1rem;
+    border-bottom: 1px solid #CDD4E6;
+    &.head {
+      background-color: rgba(38,40,51,.05);
+    }
+  }
+  .cell:last-child {
+    border-bottom: 0;
+  }
+}
+
+.is-flex-direction-row {
+  display: flex;
+  flex-direction: row;
+}
+.is-flex-grow-1 {
+  flex-grow: 1;
+}
+
 .box {
   position: relative;
   &.has-shadow-outside {
@@ -91,6 +119,10 @@ a {
   margin-top: 10px;
 }
 
+.subtitle {
+  color: #101D56;
+}
+
 .collapsible {
   overflow: hidden;
   height: 28px;
@@ -121,6 +153,9 @@ a {
 }
 
 .button {
+  &.has-shadow-outside {
+     box-shadow: $box-shadow-outside;
+  }
   &.is-wide {
     min-width: 200px;
   }

diff --git a/components/Avatar.vue b/components/Avatar.vue
@@ -1,8 +1,9 @@
 <template>
-  <img :src="`https://avatar.pixeos.art/avatar/${this.accountName}`" @error="((evt) => fallbackAvatar(evt))">
+  <img :src="avatar_src" alt="Atomic Asset NFT">
 </template>
 
 <script>
+
 export default {
   props: {
     accountName: {
@@ -11,10 +12,70 @@ export default {
     }
   },
 
+  data () {
+    return {
+      imgsrc: null,
+      isLoading: false
+    }
+  },
+
+  computed: {
+    avatar_src () {
+      return this.imgsrc || `https://ui-avatars.com/api/?name=${this.accountName}&size=100`
+    }
+  },
+
+  created () {
+    // this.getAtomicAssets()
+    // this.getAvatar()
+    this.getCurrentAvatar()
+  },
+
   methods: {
-    // TODO add identicon here.
     fallbackAvatar (event) {
       event.target.src = `https://ui-avatars.com/api/?name=${this.accountName}&size=100`
+    },
+    async getCurrentAvatar () {
+      this.loading = true
+
+      try {
+        const config = {
+          json: true,
+          code: process.env.daoContract,
+          scope: this.accountName,
+          table: 'avatar',
+          limit: 1
+        }
+        const current = await this.$eos.rpc.get_table_rows(config)
+        // console.log('current', current)
+
+        if (current.rows && current.rows.length > 0) {
+          const [currentData] = current.rows
+          // eslint-disable-next-line camelcase
+          const { asset_id } = currentData
+
+          const asset = await this.$atomic.getAsset(this.accountName, asset_id)
+          // console.log('asset', asset)
+          const assetData = await asset.data()
+          // console.log('assetData', assetData)
+
+          if (assetData) {
+            if (assetData.img) {
+              this.imgsrc = `https://atomichub-ipfs.com/ipfs/${assetData.img}`
+            } else if (assetData.video) {
+              this.imgsrc = `https://atomichub-ipfs.com/ipfs/${assetData.video}`
+            } else {
+              throw new Error('Asset has no image or video')
+            }
+          } else {
+            throw new Error('Error retrieving asset')
+          }
+        }
+      } catch (error) {
+        console.error(error)
+      }
+
+      this.loading = false
     }
   }
 }

diff --git a/components/NavBar.vue b/components/NavBar.vue
@@ -24,22 +24,17 @@
           <div class="navbar-start is-justify-content-center" style="width: 100%">
             <div @click="mobileMenu = false">
               <nuxt-link class="navbar-item" to="/stake" exact-active-class="is-active">
-                Stake
+                Staking
               </nuxt-link>
             </div>
-            <div @click="mobileMenu = false">
-              <a class="navbar-item" href="https://bridge.effect.network/" target="_blank">
-                BSC Bridge
-              </a>
-            </div>
             <div @click="mobileMenu = false">
               <nuxt-link class="navbar-item" to="/proposals" exact-active-class="is-active">
                 Proposals
               </nuxt-link>
             </div>
             <div @click="mobileMenu = false">
               <nuxt-link class="navbar-item" to="/dao" exact-active-class="is-active">
-                DAO
+                Members
               </nuxt-link>
             </div>
             <div @click="mobileMenu = false">
@@ -52,21 +47,16 @@
                 Rewards
               </nuxt-link>
             </div>
-            <div @click="mobileMenu = false">
-              <nuxt-link class="navbar-item" to="/socials" exact-active-class="is-active">
-                Socials
-              </nuxt-link>
-            </div>
-            <div @click="mobileMenu = false">
+            <!-- <div @click="mobileMenu = false">
               <div class="pt-2">
                 <a href="https://t.me/EffectNetworkDAO" target="_blank" class="has-text-grey"><font-awesome-icon :icon="['fab', 'telegram']" class="icon fa-lg mx-3"/></a>
               </div>
-            </div>
-            <div @click="mobileMenu = false">
+            </div> -->
+            <!-- <div @click="mobileMenu = false">
               <div class="pt-2">
                 <a href="https://discord.gg/effectnetwork" target="_blank" class="has-text-grey"><font-awesome-icon :icon="['fab', 'discord']" class="icon fa-lg mx-3"/></a>
               </div>
-            </div>
+            </div> -->
           </div>
           <div class="navbar-end">
             <div class="pt-0 navbar-item">

diff --git a/components/Proposals.vue b/components/Proposals.vue
@@ -40,14 +40,14 @@
           </div>
           <div class="column is-3 has-text-right">
             <div
-            class="tag"
-            :class="{'is-success': proposal.status == 'ACTIVE',
-                     'is-warning': proposal.status == 'DRAFT',
-                     'is-link': proposal.status == 'PENDING',
-                     'is-dark': proposal.status == 'CLOSED'}">
+              class="tag"
+              :class="{'is-success': proposal.status == 'ACTIVE',
+                       'is-warning': proposal.status == 'DRAFT',
+                       'is-link': proposal.status == 'PENDING',
+                       'is-dark': proposal.status == 'CLOSED'}">
               {{ proposal.status }}
             </div>
-            <span class="tag is-info" v-if="proposal.msig">⚡ ATP</span>
+            <span v-if="proposal.msig" class="tag is-info">⚡ ATP</span>
           </div>
         </div>
       </nuxt-link>

diff --git a/docker-compose.yml b/docker-compose.yml
@@ -0,0 +1,12 @@
+version: '3.3'
+
+services:
+  nuxt:
+    build:
+      context: .
+    command: npm run dev
+    volumes:
+    - .:/app
+    - /app/node_modules
+    ports:
+      - "3000:3000"
diff --git a/jsconfig.json b/jsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extensions": [
+    ".vue"
+  ],
+  "vueCompilerOptions": {
+    "target": 2
+  }
+}
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -3,40 +3,28 @@
     <div v-if="isTestnet" class="testnet">
       Connected to Kylin testnet ({{ node }})
     </div>
-    <!-- <div class="discord">
-      <div class="container is-max-widescreen">
-        <img src="@/assets/img/discord.png" alt="Discord logo">
-        <p class="is-hidden-mobile">
-          The DAO Discord is now open with
-          <b>
-            <span v-if="discordMembersOnline">{{ discordMembersOnline }}</span><span v-else>..</span> members
-          </b> online!
-        </p>
-        <p class="is-hidden-tablet">
-          The DAO Discord is now open!
-        </p>
-        <a :href="discordUrl" target="_blank">
-          <button class="discord-btn">
-            Join
-          </button>
-        </a>
-      </div>
-    </div> -->
-    <div class="discord is-hidden">
-      <div class="container is-max-widescreen">
-        <p class="is-hidden-mobile">
-          🚀 The Launch-a-thon Vote is now open!
-        </p>
-        <p class="is-hidden-tablet">
-          🚀 The Launch-a-thon Vote is now open!
-        </p>
-        <nuxt-link to="/launchathon">
-          <button class="discord-btn">
-            Vote
-          </button>
-        </nuxt-link>
-      </div>
-    </div>
+    <!-- <div class="discord"> -->
+    <!-- <div class="container is-max-widescreen has-text-centered"> -->
+    <!-- <p class="is-hidden-mobile has-text-centered"> -->
+    <!-- You can now add change your profile picture! Get started by connecting your wallet. -->
+    <!-- </p> -->
+    <!-- </div> -->
+    <!-- </div> -->
+    <!-- <div class="discord is-hidden"> -->
+    <!-- <div class="container is-max-widescreen"> -->
+    <!-- <p class="is-hidden-mobile"> -->
+    <!-- 🚀 The Launch-a-thon Vote is now open! -->
+    <!-- </p> -->
+    <!-- <p class="is-hidden-tablet"> -->
+    <!-- 🚀 The Launch-a-thon Vote is now open! -->
+    <!-- </p> -->
+    <!-- <nuxt-link to="/launchathon"> -->
+    <!-- <button class="discord-btn"> -->
+    <!-- Vote -->
+    <!-- </button> -->
+    <!-- </nuxt-link> -->
+    <!-- </div> -->
+    <!-- </div> -->
     <modal />
     <connect-wallet />
 
@@ -85,6 +73,12 @@ export default {
   },
 
   computed: {
+    wallet () {
+      return (this.$wallet) ? this.$wallet.wallet : null
+    },
+    myAccount () {
+      return this.wallet && this.wallet.auth && this.wallet.auth.accountName
+    },
     transaction () {
       return this.$wallet.transaction
     },