Touch ups

README.md

@@ -1 +1,20 @@
-[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/camronh/DecentRaffle)
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/camronh/DecentRaffle)
+
+## Instructions
+
+```
+cd frontend
+npm install
+npm run serve
+```
+
+### To deploy on a local blockchain
+
+> Be sure to create a `.env` file in the hardhat dir that matches the `.env.example` template
+
+```
+cd hardhat
+npm install
+npm run local-node
+npm run deploy-local
+```

frontend/src/App.vue

@@ -5,6 +5,7 @@
         <v-icon>mdi-home</v-icon>
       </v-btn>
       <v-spacer></v-spacer>
+      <!-- TODO: #4 Info Dialog -->
     </v-app-bar>
 
     <v-main>
@@ -14,6 +15,7 @@
         v-if="!$store.state.ethers.connected"
       >
         <br />
+        <!-- TODO: #2 Center this -->
         <v-btn outlined @click="init()"> Connect Wallet </v-btn>
       </v-container>
 

frontend/src/components/CreateRaffleDialog.vue

@@ -3,6 +3,7 @@
     <v-icon>mdi-plus</v-icon>
     <v-dialog v-model="dialogOpen" max-width="50%">
       <v-card>
+        <!-- TODO: #3 Validation -->
         <v-card-title>
           <span class="headline">Create Raffle </span>
         </v-card-title>

frontend/src/views/Home.vue

@@ -1,43 +1,119 @@
 <template>
   <v-container class="home">
     <v-card>
-      <UserRaffles />
+      <v-data-table
+        :headers="headers"
+        :items="raffles"
+        item-key="raffleId"
+        dense
+        @click:row="goToRaffle"
+      >
+        <template v-slot:top>
+          <v-toolbar flat>
+            <v-toolbar-title @click="getRaffles">Raffles</v-toolbar-title>
+            <v-spacer></v-spacer>
+            <!-- TODO: #1 Create a search bar -->
+            <CreateRaffle @success="getRaffles" />
+          </v-toolbar>
+        </template>
+        <template v-slot:item.endTime="{ item }">
+          <v-chip v-if="!item.open" x-small outlined color="grey"
+            >Closed</v-chip
+          >
+          <v-chip
+            v-else-if="item.open && timeUntil(item.endTime) == 0"
+            x-small
+            outlined
+            color="primary"
+            >Closable!</v-chip
+          >
+          <template v-else> {{ timeUntil(item.endTime) }} m </template>
+        </template>
+
+        <template v-slot:item.price="{ item }">
+          {{ $ethers.utils.formatEther(item.price) }}
+        </template>
+        <template v-slot:item.title="{ item }">
+          {{ item.title }}
+          <v-icon v-if="owner(item.owner)" color="primary" x-small
+            >mdi-check</v-icon
+          >
+        </template>
+      </v-data-table>
     </v-card>
   </v-container>
 </template>
 
 <script>
-// @ is an alias to /src
-import { mapActions } from "vuex";
-// import { ethers } from "ethers";
-// import airnodeProtocol from "@api3/airnode-protocol";
-import UserRaffles from "../components/UserRaffles.vue";
-// import UserEntries from "../components/UserEntries.vue";
+import CreateRaffle from "../components/CreateRaffleDialog.vue";
 
 export default {
-  name: "Home",
   components: {
-    UserRaffles,
+    CreateRaffle,
   },
-  computed: {
-    connected() {
-      return this.$store.state.ethers.connected;
+  data() {
+    return {
+      expanded: [],
+      headers: [
+        { text: "ID", value: "raffleId", align: "start" },
+        {
+          text: "Title",
+          sortable: true,
+          value: "title",
+        },
+        { text: "Price", value: "price" },
+        { text: "# Winners", value: "winnerCount" },
+        { text: "Ends", value: "endTime" },
+      ],
+      raffles: [],
+    };
+  },
+  created() {
+    this.getRaffles();
+  },
+  methods: {
+    timeUntil(endTime) {
+      const now = Date.now() / 1000;
+      const secondsLeft = endTime - now;
+      const minutes = Math.round((secondsLeft / 60) * 10) / 10;
+      return minutes > 0 ? minutes : 0;
+    },
+    owner(address) {
+      return this.ethers.address == address;
     },
-    wallet() {
-      return this.$store.state.ethers.wallet;
+    async getRaffles() {
+      let raffleIds = await this.ethers.raffleContract.getEnteredRaffles(
+        this.ethers.address
+      );
+      raffleIds = raffleIds.map((raffleId) => raffleId.toString());
+      raffleIds = [...new Set(raffleIds)];
+
+      let ownedRaffles = await this.ethers.raffleContract.getAccountRaffles(
+        this.ethers.address
+      );
+      let raffles = [...ownedRaffles];
+
+      const ownedRaffleIds = ownedRaffles.map((raffle) =>
+        raffle.raffleId.toString()
+      );
+
+      for (let raffleId of raffleIds) {
+        console.log({ raffleId });
+        if (!ownedRaffleIds.includes(raffleId)) {
+          const raffle = await this.ethers.raffleContract.raffles(raffleId);
+          console.log({ raffle });
+          raffles.push(raffle);
+        }
+      }
+      this.raffles = raffles;
+    },
+    goToRaffle(item) {
+      this.$router.push(`/raffle/${item.raffleId}`);
     },
   },
-  methods: {
-    ...mapActions({ init: "ethers/init" }),
-    async log() {
-      // const airnodeProtocol = require("@api3/airnode-protocol");
-      console.log("Ready:", await this.init());
-      console.log(this.$store.state.ethers);
-      // const address = airnodeProtocol.AirnodeRrpAddresses["3"];
-      // console.log({ address });
-      // console.log(
-      //   airnodeProtocol.AirnodeRrpV0Factory.connect(address, this.wallet)
-      // );
+  computed: {
+    ethers() {
+      return this.$store.state.ethers;
     },
   },
 };

hardhat/.env.example

@@ -1,3 +1,5 @@
 ETHERSCAN_API_KEY=ABC123ABC123ABC123ABC123ABC123ABC1
-ROPSTEN_URL=https://eth-ropsten.alchemyapi.io/v2/<YOUR ALCHEMY KEY>
+RPC_ROPSTEN="https://ropsten.infura.io/v3/<KEY>"
+RPC_RINKEBY="https://rinkeby.infura.io/v3/<KEY>"
+RPC_MUMBAI="https://polygon-mumbai.g.alchemy.com/v2/<KEY>"
 PRIVATE_KEY=0xabc123abc123abc123abc123abc123abc123abc123abc123abc123abc123abc1

hardhat/package.json

@@ -4,7 +4,9 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "npx hardhat test",
+    "local-node": "npx hardhat node",
+    "deploy-local": "npx hardhat run ./scripts/deploy-raffler.ts --network localhost"
   },
   "repository": {
     "type": "git",