From 36377c9484e74e6271c074ddda713e9f66ccca6a Mon Sep 17 00:00:00 2001
From: CoolDevFor <coolfor42@gmail.com>
Date: Wed, 24 Nov 2021 09:32:55 +0900
Subject: [PATCH 1/2] connect wallet

---
 package.json                                  |  15 +-
 src/App.vue                                   |   6 +-
 src/assets/icons/metamask.png                 | Bin 0 -> 27516 bytes
 src/components/global/Card.vue                |   2 +-
 src/components/global/ConnectButton.vue       |  40 ++-
 src/components/global/WalletBanance.vue       |  37 +++
 src/components/section/EthereumSource.vue     |  87 ++++--
 src/components/section/Navbar.vue             | 115 ++++++-
 src/components/section/Swap.vue               |  20 +-
 src/components/section/WalletState.vue        |  14 +-
 src/config/mixins.js                          |  54 ++++
 src/data/mock/mockDataProvider.js             | 143 +++++++++
 .../storage/ipfs/IPFSStorageNetwork.js        |  83 +++++
 src/data/network/storage/storageNetwork.js    |   9 +
 .../network/web3/contracts/abi/Asset.json     |   3 +
 .../network/web3/contracts/assetContract.js   | 123 ++++++++
 .../web3/contracts/platformContract.js        |  22 ++
 .../network/web3/ethereum/ethereumClient.js   |  96 ++++++
 src/data/schemas/assetSchema.json             | 132 ++++++++
 src/data/schemas/index.js                     |  48 +++
 src/data/schemas/proposalSchema.json          |  29 ++
 src/main.js                                   |  10 +-
 src/models/asset.js                           |  64 ++++
 src/models/marketOrder.js                     |  29 ++
 src/models/proposal.js                        |  34 +++
 src/models/vote.js                            |  28 ++
 src/models/walletState.js                     |  16 +
 src/services/constants.js                     |   0
 src/services/dao/index.js                     | 146 +++++++++
 src/services/provider.js                      |  28 ++
 src/services/wallet/index.js                  |  44 +++
 src/store/index.js                            |  12 +
 src/store/state.js                            | 284 ++++++++++++++++++
 src/store/web3ModalStore.js                   |  81 +++++
 src/utils/bignumber.js                        |   6 +
 src/utils/common.js                           |  40 +++
 src/utils/helpers.js                          |  45 +++
 src/utils/network.js                          |  71 +++++
 src/utils/promiseRace.js                      |  26 ++
 src/utils/web3.js                             |  14 +
 src/views/Bridge.vue                          |   9 +-
 41 files changed, 2007 insertions(+), 58 deletions(-)
 create mode 100644 src/assets/icons/metamask.png
 create mode 100644 src/components/global/WalletBanance.vue
 create mode 100644 src/config/mixins.js
 create mode 100644 src/data/mock/mockDataProvider.js
 create mode 100644 src/data/network/storage/ipfs/IPFSStorageNetwork.js
 create mode 100644 src/data/network/storage/storageNetwork.js
 create mode 100644 src/data/network/web3/contracts/abi/Asset.json
 create mode 100644 src/data/network/web3/contracts/assetContract.js
 create mode 100644 src/data/network/web3/contracts/platformContract.js
 create mode 100644 src/data/network/web3/ethereum/ethereumClient.js
 create mode 100644 src/data/schemas/assetSchema.json
 create mode 100644 src/data/schemas/index.js
 create mode 100644 src/data/schemas/proposalSchema.json
 create mode 100644 src/models/asset.js
 create mode 100644 src/models/marketOrder.js
 create mode 100644 src/models/proposal.js
 create mode 100644 src/models/vote.js
 create mode 100644 src/models/walletState.js
 create mode 100644 src/services/constants.js
 create mode 100644 src/services/dao/index.js
 create mode 100644 src/services/provider.js
 create mode 100644 src/services/wallet/index.js
 create mode 100644 src/store/index.js
 create mode 100644 src/store/state.js
 create mode 100644 src/store/web3ModalStore.js
 create mode 100644 src/utils/bignumber.js
 create mode 100644 src/utils/common.js
 create mode 100644 src/utils/helpers.js
 create mode 100644 src/utils/network.js
 create mode 100644 src/utils/promiseRace.js
 create mode 100644 src/utils/web3.js

diff --git a/package.json b/package.json
index dc9d474..0b71d6e 100644
--- a/package.json
+++ b/package.json
@@ -8,10 +8,21 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@ocrv/vue-tailwind-modal": "^1.0.0",
+    "@walletconnect/web3-provider": "^1.6.6",
+    "audit": "^0.0.6",
     "core-js": "^3.6.5",
+    "ethers": "^5.5.1",
+    "iam-client-lib": "^3.2.0",
     "vue": "^3.0.0",
-    "vue-router": "^4.0.0-0",
-    "vuex": "^3.6.2"
+    "vue-router": "^4.0.12",
+    "vue-spinner": "^1.0.4",
+    "vuex": "^4.0.2",
+    "web3": "^1.6.1",
+    "web3-utils": "^1.6.1",
+    "web3connect": "^1.0.0-beta.33",
+    "web3modal": "^1.9.4",
+    "web3modal-vue": "^1.0.5"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
diff --git a/src/App.vue b/src/App.vue
index bbd03a8..138eed3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,8 @@
 <template>
-  <navbar></navbar>
-  <router-view/>
+  <div>
+    <navbar></navbar>
+    <router-view/>
+  </div>
 </template>
 
 <script>
diff --git a/src/assets/icons/metamask.png b/src/assets/icons/metamask.png
new file mode 100644
index 0000000000000000000000000000000000000000..968ff20eaa3e610f960600dd4211faa65fd61a90
GIT binary patch
literal 27516
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
JcRBOm{{vcGJ$nEE

literal 0
HcmV?d00001

diff --git a/src/components/global/Card.vue b/src/components/global/Card.vue
index 38154ac..d45fddf 100644
--- a/src/components/global/Card.vue
+++ b/src/components/global/Card.vue
@@ -6,7 +6,7 @@
 
 <script>
 export default {
-  name: 'InputBox',
+  name: 'Card',
   props: {
     msg: String
   }
diff --git a/src/components/global/ConnectButton.vue b/src/components/global/ConnectButton.vue
index 858038c..1638bcd 100644
--- a/src/components/global/ConnectButton.vue
+++ b/src/components/global/ConnectButton.vue
@@ -1,21 +1,47 @@
 <template>
-  <button class="text-black bg-gradient-to-tr from-yellow-200 to-yellow-500 to-yellow-400 px-4 py-2 rounded shadow-md m-2">
-    ConnectWallet
-  </button>
+  <div
+    class="flex flex-col w-full h-full items-center cursor-pointer justify-center rounded-xl p-2 text-center bg-gray-100 hover:bg-gray-200"
+    @click="onClick"
+  >
+    <img class="w-12 h-12" src="@/assets/icons/metamask.png" />
+    <div class="text-2xl font-semibold text-center text-black">
+      MetaMask
+    </div>
+    <div class="text-lg text-gray-500">
+      Connect to your MetaMask Wallet
+    </div>
+  </div>
 </template>
 
 <script>
+import { mapGetters, mapActions } from "vuex"
+
 export default {
-  name: 'ConnectButton',
+  name: "ConnectButton",
   props: {
-    msg: String
-  }
+  },
+  computed: {
+    ...mapGetters({
+      address: "userWalletAddress",
+    }),
+  },
+  methods: {
+    ...mapActions({
+      sync: "syncWallet",
+    }),
+    onClick() {
+      this.sync()
+      this.$emit('click')
+    },
+  },
+  mounted() {
+  },
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 button:hover {
-  box-shadow: 4px 4px 0 #a34ffe;
+  box-shadow: 0px 0px 0 #a34ffe
 }
 </style>
diff --git a/src/components/global/WalletBanance.vue b/src/components/global/WalletBanance.vue
new file mode 100644
index 0000000..dbec2d2
--- /dev/null
+++ b/src/components/global/WalletBanance.vue
@@ -0,0 +1,37 @@
+<template>
+  <div v-if="address != null" class="hidden md:flex items-center">
+    <div class="flex items-center rounded bg-gray-100 px-3 py-1">
+      <img class="w-3" v-if="imageUrl !== ''" src="@/assets/icons/eth.svg"/>
+      <div class="pl-2 text-base text-yellow-500">
+        {{ balance + ' $FLNU' }}
+      </div>
+    </div>
+    <div class="flex items-center rounded bg-gray-100 ml-6">
+      <div class="bg-green-400 px-3 py-1 rounded-l">
+        Connected
+      </div>
+      <div class="pl-2 text-base text-yellow-500 pr-3">
+        {{ address.substring(0, 6) + '...' + address.substring(address.length - 4) }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+
+export default {
+  name: "WalletBalance",
+  props: {},
+  computed: {
+    ...mapGetters({ address: "userWalletAddress", balance: "userEthBalance" }),
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+button:hover {
+  box-shadow: 4px 4px 0 #a34ffe;
+}
+</style>
diff --git a/src/components/section/EthereumSource.vue b/src/components/section/EthereumSource.vue
index 6d4dae5..3abdc4f 100644
--- a/src/components/section/EthereumSource.vue
+++ b/src/components/section/EthereumSource.vue
@@ -1,41 +1,88 @@
 <template>
   <card class="text-left">
     <div class="flex items-center">
-      <img class="w-3" v-if="imageUrl !== ''" src="@/assets/icons/eth.svg"/>
-      <div class="pl-2 text-base text-purple-700">
-        Ethereum Mainnet
-      </div>
+      <img class="w-3" src="@/assets/icons/eth.svg" />
+      <div class="pl-2 text-base text-purple-700">Ethereum Mainnet</div>
     </div>
     <div>
-      <h3 class="my-6 text-left font-bold text-gray-800">
-        Amount
-      </h3>
-      <input type="number" class="w-full text-yellow-500 text-xl px-6 py-4 bg-gray-100 rounded hover:border-0"/>
+      <h3 class="my-6 text-left font-bold text-gray-800">Amount</h3>
+      <input
+        type="number"
+        v-model="amount_swap"
+        class="
+          w-full
+          text-yellow-500 text-xl
+          px-6
+          py-4
+          bg-gray-100
+          rounded
+          hover:border-0
+          disabled:opacity-75
+        "
+        :disabled="isBalance()"
+      />
     </div>
     <div>
       <div class="mt-5 mb-2 text-yellow-500 text-2xl">
-        You will send: 0 $FLOKI
-      </div>
-      <div>
-        $FLOKI Current Balance (ERC20):
+        {{ "You will send: " + amount_swap + " $FLNU" }}
       </div>
+      <div>$FLNU Current Balance (ERC20):</div>
+    </div>
+    <div class="flex flex-col items-center">
+      <button
+        class="
+          mt-14
+          w-full
+          bg-gray-300
+          rounded
+          px-4
+          py-4
+          font-bold
+          text-xl text-white
+        "
+        :disabled="isBalance()"
+        :title="amount_swap ? 'Tansfer token' : 'please input amount'"
+        :class="amount_swap ? '' : 'cursor-not-allowed'"
+      >
+        Send Tokens
+      </button>
+      <a class="hover:text-yellow-500 text-gray-300 pt-6" target="_blank" href="https://app.moontography.com/">
+        Powered by Moontography
+      </a>
     </div>
-    <button class="mt-14 w-full bg-gray-400 rounded px-4 py-4">
-      Send Tokens
-    </button>
   </card>
 </template>
 
 <script>
-import Card from "../global/Card.vue"
+import Card from "../global/Card.vue";
+import { mapGetters } from "vuex";
 
 export default {
   components: { Card },
-  name: 'EthereumSource',
+  name: "EthereumSource",
   props: {
-    msg: String
-  }
-}
+    msg: String,
+  },
+  computed: {
+    ...mapGetters({
+      balance: "userEthBalance",
+    }),
+  },
+  watch: {
+    amount_swap(newValue) {
+      if (newValue < 0) this.amount_swap = 0;
+      if (newValue > this.balance) this.amount_swap = this.balance;
+    },
+  },
+  data() {
+    return { amount_swap: 0 };
+  },
+  methods: {
+    isBalance() {
+      return !this.balance || this.balance > 0;
+    },
+  },
+};
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
diff --git a/src/components/section/Navbar.vue b/src/components/section/Navbar.vue
index cc03c70..38a80f8 100644
--- a/src/components/section/Navbar.vue
+++ b/src/components/section/Navbar.vue
@@ -1,26 +1,121 @@
 <template>
-  <nav class="flex items-center justify-center">
+  <nav class="sticky top-0 flex items-center justify-center bg-white">
     <div class="container flex items-cneter justify-between p-2">
       <logo></logo>
       <div class="flex items-cneter m-4">
-        <connect-button></connect-button>
+        <wallet-banance></wallet-banance>
+        <div class="relative">
+          <div v-if="isLoading" class="absolute w-full h-full">
+            <clip-loader class="flex justify-center items-center h-full" :loading="isLoading"></clip-loader>
+          </div>
+          <button
+            class="
+              text-black
+              bg-gradient-to-tr
+              from-yellow-200
+              to-yellow-500 to-yellow-400
+              px-4
+              py-2
+              rounded
+              shadow-md
+              m-2
+            "
+            @click="showModal()"
+          >
+            {{ address ? "Disconnect Wallet" : "Connect Wallet" }}
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      v-if="modalShowed"
+      class="flex items-center text-center fixed w-full z-20 text-red-300 mt-40"
+    >
+      <div
+        class="fixed inset-0 transition-opacity"
+        aria-hidden="true"
+        @click="modalShowed = false"
+      >
+        <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
+      </div>
+      <div
+        class="
+          flex flex-col
+          items-center
+          Modal-Size
+          rounded-xl
+          shadow-lg
+          overflow-hidden
+          bg-white
+          z-30
+          mx-4
+          sm:mx-auto
+          mt-40
+          p-2
+        "
+      >
+        <connect-button @click="modalShowed = false"></connect-button>
       </div>
     </div>
   </nav>
 </template>
 
 <script>
-import ConnectButton from '../global/ConnectButton.vue'
-import Logo from '../global/Logo.vue'
+import ConnectButton from "../global/ConnectButton.vue";
+import Logo from "../global/Logo.vue";
+import WalletBanance from "../global/WalletBanance.vue";
+import ClipLoader from "vue-spinner/src/ClipLoader.vue";
+
+import { mapGetters, mapActions } from "vuex";
+
 export default {
-  components: { Logo, ConnectButton },
-  name: 'Navbar',
-  props: {
-    msg: String
-  }
-}
+  name: "Navbar",
+  props: {},
+  data() {
+    return {
+      modalShowed: false,
+      isLoading: false,
+    };
+  },
+  components: { Logo, WalletBanance, ConnectButton, ClipLoader },
+  computed: {
+    ...mapGetters({ address: "userWalletAddress", balance: "userEthBalance" }),
+  },
+  mounted() {
+    this.modalShowed = false;
+  },
+  methods: {
+    async showModal() {
+      if (this.address) {
+        this.nonsync();
+      } else {
+        if (!this.isLoading) {
+          this.isLoading = true;
+          await this.sync();
+          this.isLoading = false;
+        }
+      }
+    },
+    ...mapActions({
+      nonsync: "nonsyncWallet",
+      sync: "syncWallet",
+    }),
+  },
+  watch: {
+    address(newValue) {
+      if (newValue) this.modalShowed = false;
+    },
+  },
+};
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
+button:hover {
+  box-shadow: 4px 4px 0 #a34ffe;
+}
+.Modal-Size {
+  width: 500px;
+  height: 200px;
+}
 </style>
diff --git a/src/components/section/Swap.vue b/src/components/section/Swap.vue
index f3eb149..f6b5a41 100644
--- a/src/components/section/Swap.vue
+++ b/src/components/section/Swap.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="flex flex-col justify-center text-center px-6">
-    <div>
+  <div class="flex-1 flex flex-col justify-center text-center px-6">
+    <div class="lg:min-w-full">
       <h3 class="font-bold text-yellow-400 text-base">BRIDGE</h3>
       <h1
         class="font-bold text-4xl text-gray-600"
@@ -8,24 +8,24 @@
       ></h1>
     </div>
 
-    <article class="text-left mt-10">
+    <article v-if="address != null" class="text-left mt-10">
       <message> </message>
     </article>
 
-    <ethereum-source class="mt-4"></ethereum-source>
+    <ethereum-source class="mt-8"></ethereum-source>
 
     <wallet-state></wallet-state>
 
-    <card class="text-left mt-0 z-20 bg-white">
+    <card class="text-left mt-0 bg-white">
       <div class="flex items-center">
-        <img class="w-3" v-if="imageUrl !== ''" src="@/assets/icons/bnb.svg"/>
+        <img class="w-3" src="@/assets/icons/bnb.svg"/>
         <div class="pl-2 text-base text-yellow-500">
           Binance Smart Chain
         </div>
       </div>
     </card>
 
-    <card class="text-left mt-12 z-20 bg-white mb-32">
+    <card class="text-left mt-12 bg-white mb-32">
       <div class="pl-2 text-base text-purple-700">
         Ethereum Mainnet
       </div>
@@ -41,13 +41,17 @@ import Message from '../global/Message.vue';
 import EthereumSource from './EthereumSource.vue';
 import WalletState from './WalletState.vue';
 import Card from '@/components/global/Card'
+import { mapGetters } from "vuex"
 
 export default {
   components: { Message, EthereumSource, WalletState, Card },
-  name: "InputBox",
+  name: "Swap",
   props: {
     msg: String,
   },
+  computed: {
+    ...mapGetters({ address: 'userWalletAddress' })
+  }
 };
 </script>
 
diff --git a/src/components/section/WalletState.vue b/src/components/section/WalletState.vue
index f1fa868..dc85542 100644
--- a/src/components/section/WalletState.vue
+++ b/src/components/section/WalletState.vue
@@ -1,13 +1,13 @@
 <template>
   <div>
     <div class="flex w-full justify-center">
-      <div class="w-1 h-16 Card-Color z-0">
+      <div class="w-1 h-16 Card-Color">
       </div>
     </div>
     <div class="flex w-full justify-center">
-      <div class="rounded-3xl Card-Color px-4 py-2 z-10">
+      <div class="rounded-3xl Card-Color px-4 py-2">
         <div v-if="true">
-          connect your wallet
+          {{ address ? 'Transfer To' : 'connect your wallet' }}
         </div>
         <div v-else>
           Swap token
@@ -15,14 +15,20 @@
       </div>
     </div>
     <div class="flex w-full justify-center">
-      <div class="w-1 h-16 Card-Color z-0">
+      <div class="w-1 h-16 Card-Color">
       </div>
     </div>
   </div>
 </template>
 
 <script>
+
+import { mapGetters } from "vuex"
+
 export default {
   name: 'WalletState',
+  computed: {
+    ...mapGetters({ address: 'userWalletAddress' })
+  }
 }
 </script>
diff --git a/src/config/mixins.js b/src/config/mixins.js
new file mode 100644
index 0000000..3b7c39f
--- /dev/null
+++ b/src/config/mixins.js
@@ -0,0 +1,54 @@
+import {mapGetters, mapState} from "vuex";
+import {getMultiplier} from "@/utils/helpers";
+
+const web3Modal = {
+    computed: {
+        ...mapState(['web3Modal']),
+        ...mapGetters(['predictionsContract'])
+    },
+    active() {
+        return this.web3Modal.active
+    }
+}
+
+const predictionMixin = {
+    computed: {
+        ...mapState(['prediction']),
+        currentEpoch() {
+            return this.prediction.market.epoch
+        },
+        bullMultiplier() {
+            return getMultiplier(this.round.totalAmount, this.round.bullAmount)
+        },
+        bearMultiplier() {
+            return getMultiplier(this.round.totalAmount, this.round.bearAmount)
+        },
+        bet() {
+            const {account} = this.$store.state.web3Modal
+            const {bets} = this.prediction
+            const roundId = this.round.id
+
+            if (!bets[account]) {
+                return null
+            }
+            if (!bets[account][roundId]) {
+                return null
+            }
+            return this.prediction.bets[account][roundId]
+        },
+        hasEntered() {
+            return this.bet !== null
+        },
+        hasEnteredUp() {
+            return this.hasEntered && this.bet.position === "Bull"
+        },
+        hasEnteredDown() {
+            return this.hasEntered && this.bet.position === "Bear"
+        }
+    }
+}
+
+export {
+    web3Modal,
+    predictionMixin
+}
diff --git a/src/data/mock/mockDataProvider.js b/src/data/mock/mockDataProvider.js
new file mode 100644
index 0000000..cbc7b3f
--- /dev/null
+++ b/src/data/mock/mockDataProvider.js
@@ -0,0 +1,143 @@
+const faker = require('faker/locale/en')
+
+export const proposals = [
+  {
+    id: '0x109b588a4f2a234e302c722f91fe42c5ab828a32',
+    org: {
+      title: "2214 N 7th St, Saint Joseph, MO 64505, United States"
+    },
+    createdBy: '0x220866b1a2219f40e72f5c628b65d54268ca3a9d',
+    title: faker.commerce.productName(),
+    description: faker.lorem.paragraphs(6),
+    startTimestamp: 1626796800,
+    endTimestamp: 1627228800,
+    options: [
+      {
+        id: "0x04816db5c52241596376a07b0ed6306c8eef74ac7f9c3767ca11e2088c3a8f52",
+        title: "Option A"
+      },
+      {
+        id: "0x3d028447bfe1dcc2c859f717b9d62b86e956e0df786c46818f8bb8479ba4a710",
+        title: "Option B"
+      },
+      {
+        id: "0x0b0a497079ec1c7246ec20851a38df9f87eed1d94ffe497288f48166d01e7762",
+        title: "Option C"
+      }
+    ]
+  },
+]
+
+export const marketOffers = () => {
+  var offers = []
+
+  for (var i = 0; i < faker.datatype.number(10) + 2; i++) {
+    let offer = {
+      id: faker.datatype.hexaDecimal(40),
+      world: {
+        env: {
+          currency: {
+            code: "USD",
+            symbol: "$",
+            rate: {
+              eth: 0.00046,
+            },
+          },
+          measurements: {
+            area: {
+              system: 'imperial',
+              unit: 'sqft',
+            },
+          }
+        },
+        property: {
+          address: `${ faker.address.streetAddress(true) }, ${ faker.address.cityName() }, ${ faker.address.stateAbbr() }, ${ faker.address.zipCode() }, ${ faker.address.country() }`,
+          currentRent: faker.datatype.number(8000) + 800,
+          marketValue: faker.datatype.number(90000000) + 200000,
+          area: faker.datatype.number(3000) + 1000,
+          rooms: {
+            bd: faker.datatype.number(6),
+            ba: faker.datatype.number(6),
+          },
+          grossYieldPct: faker.datatype.number(12),
+          yearBuilt: faker.datatype.number(20) + 1990,
+          coverImageUrl: faker.image.imageUrl(),
+        },
+      },
+      chain: {
+        holderCount: faker.datatype.number(30000),
+        erc20: {
+          address: "0xfdf21d1cd5d3f0edbaed7cd1172ab3e49882d056",
+          code: "FRBA-" + faker.datatype.hexaDecimal(40),
+          marketCap: faker.datatype.number(90000000) + 200000,
+          price: 0.00028,
+        },
+      },
+    }
+
+    offers.push(offer)
+  }
+
+  return offers
+}
+
+export const myAssets = () => {
+  var assets = []
+
+  for (var i = 0; i < faker.datatype.number(0) + 1; i++) {
+    let asset = {
+      id: faker.datatype.hexaDecimal(40),
+      world: {
+        env: {
+          currency: {
+            code: "USD",
+            symbol: "$",
+            rate: {
+              eth: 0.00046,
+            },
+          },
+          measurements: {
+            area: {
+              system: 'imperial',
+              unit: 'sqft',
+            },
+          }
+        },
+        property: {
+          address: `${ faker.address.streetAddress(true) }, ${ faker.address.cityName() }, ${ faker.address.stateAbbr() }, ${ faker.address.zipCode() }, ${ faker.address.country() }`,
+          currentRent: faker.datatype.number(8000) + 800,
+          marketValue: faker.datatype.number(90000000) + 200000,
+          area: faker.datatype.number(3000) + 1000,
+          rooms: {
+            bd: faker.datatype.number(6),
+            ba: faker.datatype.number(6),
+          },
+          grossYieldPct: faker.datatype.number(12),
+          yearBuilt: faker.datatype.number(20) + 1990,
+          coverImageUrl: faker.image.imageUrl(),
+        },
+      },
+      chain: {
+        holderCount: faker.datatype.number(30000),
+        erc20: {
+          address: "0xfdf21d1cd5d3f0edbaed7cd1172ab3e49882d056",
+          code: "FRBA-" + faker.datatype.hexaDecimal(40),
+          marketCap: faker.datatype.number(90000000) + 200000,
+          price: 0.00028,
+          balance: 44772.22,
+        },
+        dao: {
+          proposals: [
+            proposals[0],
+          ],
+          proposalsOpen: 1,
+          votingStrengthFactor: 2,
+        },
+      },
+    }
+
+    assets.push(asset)
+  }
+
+  return assets
+}
\ No newline at end of file
diff --git a/src/data/network/storage/ipfs/IPFSStorageNetwork.js b/src/data/network/storage/ipfs/IPFSStorageNetwork.js
new file mode 100644
index 0000000..2b688f4
--- /dev/null
+++ b/src/data/network/storage/ipfs/IPFSStorageNetwork.js
@@ -0,0 +1,83 @@
+const network = require('../../../../utils/network')
+const { create } = require('ipfs-http-client')
+import StorageNetwork from '../storageNetwork'
+
+const ipfsAPIClient = create('https://ipfs.infura.io:5001/api/v0')
+
+class IPFSStorageNetwork extends StorageNetwork {
+  constructor() {
+    super()
+  }
+
+  async addFile(file) { 
+    let jsonString = JSON.stringify(file, null, 2)
+    return await ipfsAPIClient.add(jsonString, { pin: true })
+  }
+  
+  getFile = (
+    name
+  ) => new Promise((resolve, reject) => {
+    const url = `https://ipfs.infura.io:5001/api/v0/cat`
+  
+    let params = { 
+      arg: name
+    }
+  
+    let headers = { }
+    //headers['Authorization'] = `Basic ${auth}`
+  
+    let data =  { }
+    network
+      .postRequest(
+        url, 
+        params, 
+        headers, 
+        data
+      )
+      .then((res) => {
+        resolve(res)
+      })
+      .catch((err) => {
+        reject(err)
+      })
+  })
+
+  async getFiles(names) {
+    console.log('Requesting files from IPFS')
+
+    const url = `https://ipfs.infura.io:5001/api/v0/cat`
+    
+    let headers = { }
+    //headers['Authorization'] = `Basic ${auth}`
+  
+    let data =  { }
+
+    const requests = names.map(async name => {
+      let params = { 
+        arg: name
+      }
+
+      return new Promise((resolve) => {
+        network
+          .postRequest(
+            url, 
+            params, 
+            headers, 
+            data
+          )
+          .then(response => {
+            resolve(response)
+          })
+          .catch((thrown) => {
+            resolve(null)
+          })
+      })
+    })
+    
+    const responses = (await Promise.all(requests)).filter(Boolean)
+    
+    return responses
+  }
+}
+
+export default IPFSStorageNetwork
\ No newline at end of file
diff --git a/src/data/network/storage/storageNetwork.js b/src/data/network/storage/storageNetwork.js
new file mode 100644
index 0000000..8a6c7ca
--- /dev/null
+++ b/src/data/network/storage/storageNetwork.js
@@ -0,0 +1,9 @@
+class StorageNetwork {
+  constructor() { }
+
+  async addFile(file) { }
+  getFile = (name) => new Promise((resolve, reject) => { })
+  async getFiles(names) { }
+}
+
+export default StorageNetwork
\ No newline at end of file
diff --git a/src/data/network/web3/contracts/abi/Asset.json b/src/data/network/web3/contracts/abi/Asset.json
new file mode 100644
index 0000000..c49478e
--- /dev/null
+++ b/src/data/network/web3/contracts/abi/Asset.json
@@ -0,0 +1,3 @@
+{
+  "todo": "add a real contract ABI"
+}
\ No newline at end of file
diff --git a/src/data/network/web3/contracts/assetContract.js b/src/data/network/web3/contracts/assetContract.js
new file mode 100644
index 0000000..67909a2
--- /dev/null
+++ b/src/data/network/web3/contracts/assetContract.js
@@ -0,0 +1,123 @@
+/* global BigInt */
+const { ethers } = require("ethers")
+
+import EthereumClient from '../ethereum/ethereumClient'
+
+const contractAbi = [
+  // Make a buy order
+  "function buy(uint256 amount, uint256 price) payable",
+
+  // Create a standard proposal
+  "function proposePaper(string info) returns (uint256)",
+
+  // Vote Yes on a certain proposal
+  "function voteYes(uint256 id)",
+
+  // Vote No on a certain proposal
+  "function voteNo(uint256 id)",
+
+  // Event that is triggered every time an order is filled on the market
+  "event Filled(address indexed sender, address indexed recipient, uint256 indexed price, uint256 amount)"
+]
+const startBlock = 0 // TODO: Inject the actual contract deployment block instead
+
+/**
+ * Asset contract
+ * @param {EthereumClient} ethereumClient Ethereum client
+ */
+class AssetContract {
+  constructor(
+    ethereumClient,
+    contractAddress
+  ) {
+    this.contract = ethereumClient.getContract(contractAddress, contractAbi)
+    this.mutableContract = ethereumClient.getMutableContract(this.contract)
+  }
+
+  /**
+   * Create a standard proposal
+   * @param {string} info Proposal info
+   */
+   async proposePaper(
+    info
+  ) {
+    console.log('Creating a proposal..')
+
+    let tx = await this.mutableContract
+      .proposePaper(
+        info, 
+        {
+          gasLimit: 5000000
+        }
+      )
+
+    return (await tx.wait()).status
+  }
+
+  /**
+   * Make a buy order
+   * @param {number} amount Amount of shares to buy
+   * @param {BigInt} price Price to buy at
+   */
+   async buy(
+    amount,
+    price
+  ) {
+    console.log('Amount ' + amount)
+    console.log('Price ' + price)
+
+    let tx = await this.mutableContract
+      .buy(
+        amount, 
+        price,
+        {
+          value: BigInt(amount) * BigInt(price),
+          gasLimit: 5000000
+        }
+      )
+
+    return (await tx.wait()).status
+  }
+
+  /**
+   * Vote Yes on a certain proposal
+   * @param {string} proposalId ID of the proposal
+   */
+  async voteYes(
+    proposalId
+  ) {
+    console.log('Voting Yes on the proposal ' + proposalId)
+
+    let tx = await this.mutableContract
+      .voteYes(
+        proposalId, 
+        {
+          gasLimit: 5000000
+        }
+      )
+
+    return (await tx.wait()).status
+  }
+
+  /**
+   * Vote No on a certain proposal
+   * @param {string} proposalId ID of the proposal
+   */
+  async voteNo(
+    proposalId
+  ) {
+    console.log('Voting No on the proposal ' + proposalId)
+
+    let tx = await this.mutableContract
+      .voteNo(
+        proposalId, 
+        {
+          gasLimit: 5000000
+        }
+      )
+
+    return (await tx.wait()).status
+  }
+}
+
+export default AssetContract
diff --git a/src/data/network/web3/contracts/platformContract.js b/src/data/network/web3/contracts/platformContract.js
new file mode 100644
index 0000000..9b39db8
--- /dev/null
+++ b/src/data/network/web3/contracts/platformContract.js
@@ -0,0 +1,22 @@
+import EthereumClient from '../ethereum/ethereumClient'
+
+const contractAddress = "0x0" // TODO: ADD CONTRACT ADDRESS
+const contractAbi = [
+  
+]
+const startBlock = 0 // TODO: ADD CONTRACT DEPLOYMENT BLOCK TO AVOID QUERYING EXTRA HISTORY
+
+/**
+ * Platform contract
+ * @param {EthereumClient} ethereumClient Ethereum client
+ */
+class PlatformContract {
+  constructor(
+    ethereumClient
+  ) {
+    this.contract = ethereumClient.getContract(contractAddress, contractAbi)
+    this.mutableContract = ethereumClient.getMutableContract(this.contract)
+  }
+}
+
+export default PlatformContract
diff --git a/src/data/network/web3/ethereum/ethereumClient.js b/src/data/network/web3/ethereum/ethereumClient.js
new file mode 100644
index 0000000..597172f
--- /dev/null
+++ b/src/data/network/web3/ethereum/ethereumClient.js
@@ -0,0 +1,96 @@
+require('dotenv').config()
+const { ethers } = require("ethers")
+import Web3Modal from "web3modal"
+import WalletConnectProvider from "@walletconnect/web3-provider"
+/**
+ * @property {ethers.JsonRpcSigner} walletProvider
+ * @property {ethers.JsonRpcSigner} walletSigner
+ * @property {Web3Modal} web3Modal
+ * @property provider
+ */
+class EthereumClient {
+  constructor() {
+    const providerOptions = {
+      walletconnect: {
+        package: WalletConnectProvider,
+        options: {
+          infuraId: "8043bb2cf99347b1bfadfb233c5325c0"
+        }
+      }
+    }
+    this.web3Modal = new Web3Modal({
+      cacheProvider: false,
+      providerOptions
+    })
+  }
+
+  /* --- Blockchain state --- */
+
+  /**
+   * Get current block number.
+   */
+  async getBlockNumber() {
+    const number = await this.readProvider.getBlockNumber()
+    console.log(number)
+  }
+
+  /* --- Wallet access --- */
+
+  async syncWallet() {
+    if (this.walletProvider != null && this.walletSigner != null) { return }
+    // Using in-browser wallet to access wallet state and sign transactions
+    if (window.ethereum) {
+      try {
+        this.provider = await this.web3Modal.connect()
+        // await window.ethereum.request({ method: 'eth_requestAccounts' });
+      } catch(error) {
+        console.log(error)
+        return
+      }
+    }
+
+    this.walletProvider = new ethers.providers.Web3Provider(this.provider)
+    this.walletSigner = this.walletProvider.getSigner()
+
+    return true
+  }
+
+  async nonsyncWallet() {
+    // await this.provider.close()
+    await this.web3Modal.clearCachedProvider();
+    this.walletProvider = null
+    this.walletSigner = null
+    this.provider = null
+  }
+
+  async getWalletAddress() {
+    return this.walletSigner ? this.walletSigner.getAddress() : ''
+  }
+
+  async getWalletEthBalance() {
+    return (await this.walletSigner.getBalance()).toString()
+  }
+
+  /* --- Contract access --- */
+
+  /**
+   * Initialize contract.
+   * @param {string} address Contract address
+   * @param {string} abi Contract ABI
+   * @returns Read-only contract instance
+   */
+  getContract(address, abi) {
+    return new ethers.Contract(address, abi, this.walletSigner)
+  }
+
+  /**
+   * Get a copy of the contract where signable transactions can be executed.
+   * @param {ethers.Contract} contract Contract
+   * @returns {ethers.Contract} Contract instance with signer (wallet) connected to it
+   */
+  getMutableContract(contract) {
+    return contract.connect(this.walletSigner)
+  }
+}
+
+export default EthereumClient
diff --git a/src/data/schemas/assetSchema.json b/src/data/schemas/assetSchema.json
new file mode 100644
index 0000000..4be415f
--- /dev/null
+++ b/src/data/schemas/assetSchema.json
@@ -0,0 +1,132 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "description": "The root schema comprises the entire JSON document.",
+  "examples": [
+      {
+          "world": {
+              "property": {
+                  "address": "Test address 1",
+                  "currentRent": 1234,
+                  "marketValue": 1234,
+                  "area": 1234,
+                  "rooms": {
+                      "bdCount": 1,
+                      "baCount": 2
+                  },
+                  "grossYieldPct": 10,
+                  "yearBuilt": 2000,
+                  "coverImage": "Qmqwerty",
+                  "description": "Lorem ipsum.",
+                  "doc": "Qmqwerty"
+              }
+          }
+      }
+  ],
+  "required": [
+      "world"
+  ],
+  "title": "The root schema",
+  "type": "object",
+  "properties": {
+      "assetId": {
+          "default": 0,
+          "type": "integer"
+      },
+      "world": {
+          "$id": "#/properties/world",
+          "required": [
+              "property"
+          ],
+          "title": "The world schema",
+          "type": "object",
+          "properties": {
+              "property": {
+                  "$id": "#/properties/world/properties/property",
+                  "required": [
+                      "address",
+                      "currentRent",
+                      "marketValue",
+                      "area",
+                      "rooms",
+                      "grossYieldPct",
+                      "yearBuilt",
+                      "coverImage",
+                      "doc"
+                  ],
+                  "title": "The property schema",
+                  "type": "object",
+                  "properties": {
+                      "address": {
+                          "type": "string"
+                      },
+                      "currentRent": {
+                          "type": "integer"
+                      },
+                      "marketValue": {
+                          "type": "integer"
+                      },
+                      "area": {
+                          "type": "integer"
+                      },
+                      "rooms": {
+                          "$id": "#/properties/world/properties/property/properties/rooms",
+                          "required": [
+                              "bdCount",
+                              "baCount"
+                          ],
+                          "title": "The rooms schema",
+                          "type": "object",
+                          "properties": {
+                              "bdCount": {
+                                  "type": "integer"
+                              },
+                              "baCount": {
+                                  "type": "integer"
+                              }
+                          },
+                          "additionalProperties": true
+                      },
+                      "grossYieldPct": {
+                          "maximum": 100,
+                          "minimum": 0,
+                          "type": "integer"
+                      },
+                      "yearBuilt": {
+                          "type": "integer"
+                      },
+                      "coverImage": {
+                          "maxLength": 46,
+                          "minLength": 46,
+                          "pattern": "^Qm[a-zA-Z0-9]{44}$",
+                          "type": "string"
+                      },
+                      "description": {
+                          "type": "string"
+                      },
+                      "doc": {
+                        "maxLength": 46,
+                        "minLength": 46,
+                        "pattern": "^Qm[a-zA-Z0-9]{44}$",
+                        "type": "string"
+                    }
+                  },
+                  "additionalProperties": true
+              }
+          },
+          "additionalProperties": true
+      },
+      "market": {
+          "$id": "#/properties/market",
+          "title": "The market schema",
+          "type": "object",
+          "additionalProperties": true
+      },
+      "dao": {
+          "$id": "#/properties/dao",
+          "title": "The dao schema",
+          "type": "object",
+          "additionalProperties": true
+      }
+  },
+  "additionalProperties": true
+}
\ No newline at end of file
diff --git a/src/data/schemas/index.js b/src/data/schemas/index.js
new file mode 100644
index 0000000..991b960
--- /dev/null
+++ b/src/data/schemas/index.js
@@ -0,0 +1,48 @@
+import { pick } from 'lodash'
+
+const assetDataSchema = {
+  world: {
+      property: {
+          address: null,
+          currentRent: 0,
+          marketValue: 0,
+          area: 0,
+          rooms: {
+              bdCount: 0,
+              baCount: 0
+          },
+          grossYieldPct: 0,
+          yearBuilt: 0,
+          coverImage: null,
+          description: null,
+          doc: null
+      }
+  }
+}
+
+const proposalDataSchema = {
+  title: null,
+  description: null
+}
+
+export const newAssetData = (fields, validate = false) => {
+  const validFields = validate
+    ? pick(fields, Object.keys(assetDataSchema))
+    : fields
+  
+  return {
+    ...assetDataSchema,
+    ...validFields
+  }
+}
+
+export const newProposalData = (fields, validate = false) => {
+  const validFields = validate
+    ? pick(fields, Object.keys(proposalDataSchema))
+    : fields
+  
+  return {
+    ...proposalDataSchema,
+    ...validFields
+  }
+}
\ No newline at end of file
diff --git a/src/data/schemas/proposalSchema.json b/src/data/schemas/proposalSchema.json
new file mode 100644
index 0000000..f27f054
--- /dev/null
+++ b/src/data/schemas/proposalSchema.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "examples": [
+      {
+          "title": "Lorem ipsum",
+          "description": "Lorem ipsum",
+          "startTimestamp": 1627797600,
+          "endTimestamp": 1628143200
+      }
+  ],
+  "required": [
+      "title",
+      "description"
+  ],
+  "title": "The root schema",
+  "type": "object",
+  "properties": {
+      "proposalId": {
+          "type": "integer"
+      },
+      "title": {
+          "type": "string"
+      },
+      "description": {
+          "type": "string"
+      }
+  },
+  "additionalProperties": true
+}
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 744b3f4..3bca3ea 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,5 +3,13 @@ import App from './App.vue'
 import './index.css'
 import './App.css'
 import router from './router'
+import store from "@/store";
+import VueTailwindModal from "@ocrv/vue-tailwind-modal"
+import  '@ocrv/vue-tailwind-modal/dist/style.css'
 
-createApp(App).use(router).mount('#app')
+const app = createApp(App)
+app.use(router)
+app.use(store)
+app.use(VueTailwindModal)
+
+app.mount('#app')
diff --git a/src/models/asset.js b/src/models/asset.js
new file mode 100644
index 0000000..1b2a842
--- /dev/null
+++ b/src/models/asset.js
@@ -0,0 +1,64 @@
+/**
+ * Asset model.
+ * @property {string} id ID of the asset
+ * @property {string} dataURI Location of the off-chain data of the asset
+ * @property {string} contractAddress Address of the asset contract
+ * @property {string} symbol ERC-20 Symbol of the asset
+ * @property {number} numOfShares Total supply of the asset shares
+ * @property {Map<string, number>} owners The amount of shares held by all the owners
+ * @property {MarketOrder[]} marketOrders The most recent state of the asset's order book
+ * @property {Proposal[]} proposals Proposals made in the asset's DAO
+ * @property {string} address Address of the property
+ * @property {number} area Area of the property
+ * @property {string} coverPictureURI Location of the cover picture data
+ * @property {number} currentRent Current rent the property is making
+ * @property {string} description Free-format desctiption attached to the property
+ * @property {number} grossYieldPct Gross yield % of the property
+ * @property {number} marketValue Market value of the property
+ * @property {number} bedroomCount Number of bedrooms in the property
+ * @property {number} bathroomCount Number of bathrooms in the property  
+ * @property {number} yearBuilt The year property was built
+ */
+class Asset {
+  constructor(
+    id,
+    dataURI,
+    contractAddress,
+    symbol,
+    numOfShares,
+    owners,
+    marketOrders,
+    proposals,
+    address = null,
+    area = null,
+    coverPictureURI = null,
+    currentRent = null,
+    description = null,
+    grossYieldPct = null,
+    marketValue = null,
+    bedroomCount = null,
+    bathroomCount = null,
+    yearBuilt = null
+  ) {
+    this.id = id
+    this.dataURI = dataURI
+    this.contractAddress = contractAddress
+    this.symbol = symbol
+    this.numOfShares = numOfShares
+    this.owners = owners
+    this.marketOrders = marketOrders
+    this.proposals = proposals
+    this.address = address
+    this.area = area
+    this.coverPictureURI = coverPictureURI
+    this.currentRent = currentRent
+    this.description = description
+    this.grossYieldPct = grossYieldPct
+    this.marketValue = marketValue
+    this.bedroomCount = bedroomCount
+    this.bathroomCount = bathroomCount
+    this.yearBuilt = yearBuilt
+  }
+}
+
+export default Asset
\ No newline at end of file
diff --git a/src/models/marketOrder.js b/src/models/marketOrder.js
new file mode 100644
index 0000000..bb7c48e
--- /dev/null
+++ b/src/models/marketOrder.js
@@ -0,0 +1,29 @@
+/* global BigInt */
+
+/**
+ * MarketOrder model. Aggregates multiple orders at the same price level.
+ * @property {string} id ID of the order
+ * @property {MarketOrderType} orderType Type of the order (e.g. Buy or Sell)
+ * @property {BigInt} price Price stored as BigInt
+ * @property {number} amount Amount of tokens in the aggregated order
+ */
+ class MarketOrder {
+  constructor(
+    id,
+    orderType,
+    priceString,
+    amount
+  ) {
+    this.id = id
+    this.orderType = orderType
+    this.price = BigInt(priceString)
+    this.amount = amount
+  }
+}
+
+const MarketOrderType = {
+  Buy: 'Buy',
+  Sell: 'Sell'
+}
+
+export { MarketOrder, MarketOrderType }
\ No newline at end of file
diff --git a/src/models/proposal.js b/src/models/proposal.js
new file mode 100644
index 0000000..930b396
--- /dev/null
+++ b/src/models/proposal.js
@@ -0,0 +1,34 @@
+/**
+ * Proposal model.
+ * @property {string} id ID of the proposal
+ * @property {string} creatorAddress Address of the proposal creator
+ * @property {string} dataURI Location of the off-chain data of the proposal
+ * @property {number} startTimestamp Unix timestamp marking the start of the voting window
+ * @property {number} endTimestamp Unix timestamp marking the end of the voting window
+ * @property {Vote[]} votes Votes posted on the proposal
+ * @property {string} title Title of the proposal
+ * @property {string} description Body of the proposal
+ */
+ class Proposal {
+  constructor(
+    id,
+    creatorAddress,
+    dataURI,
+    startTimestamp,
+    endTimestamp,
+    votes,
+    title = null,
+    description = null
+  ) {
+    this.id = id
+    this.creatorAddress = creatorAddress
+    this.dataURI = dataURI
+    this.startTimestamp = startTimestamp
+    this.endTimestamp = endTimestamp
+    this.votes = votes
+    this.title = title
+    this.description = description
+  }
+}
+
+export default Proposal
\ No newline at end of file
diff --git a/src/models/vote.js b/src/models/vote.js
new file mode 100644
index 0000000..8ec31c3
--- /dev/null
+++ b/src/models/vote.js
@@ -0,0 +1,28 @@
+/**
+ * Vote model.
+ * @property {string} proposalID ID of the proposal this vote belongs to
+ * @property {string} voterAddress Address of the voter
+ * @property {VoteType} type Type of the vote posted
+ * @property {number} count Voting power of the voter
+ */
+ class Vote {
+  constructor(
+    proposalID,
+    voterAddress,
+    type,
+    count
+  ) {
+    this.proposalID = proposalID
+    this.voterAddress = voterAddress
+    this.type = type
+    this.count = count
+  }
+}
+
+const VoteType = {
+  Yes: 'Yes',
+  No: 'No',
+  Abstain: 'Abstain'
+}
+
+export {Vote, VoteType }
\ No newline at end of file
diff --git a/src/models/walletState.js b/src/models/walletState.js
new file mode 100644
index 0000000..c9d2213
--- /dev/null
+++ b/src/models/walletState.js
@@ -0,0 +1,16 @@
+/**
+ * Wallet state model.
+ * @property {string} address Address of the wallet
+ * @property {number} ethBalance Balance of the wallet in ETH
+ */
+ class WalletState {
+  constructor(
+    address,
+    ethBalance
+  ) {
+    this.address = address
+    this.ethBalance = ethBalance
+  }
+}
+
+export default WalletState
\ No newline at end of file
diff --git a/src/services/constants.js b/src/services/constants.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/services/dao/index.js b/src/services/dao/index.js
new file mode 100644
index 0000000..8287a74
--- /dev/null
+++ b/src/services/dao/index.js
@@ -0,0 +1,146 @@
+import * as CommonUtils from '../../utils/common'
+import Proposal from '../../models/proposal'
+import { VoteType } from '../../models/vote'
+import EthereumClient from '../../data/network/web3/ethereum/ethereumClient'
+import AssetContract from '../../data/network/web3/contracts/assetContract'
+
+// TODO: Should there be a single service instance per proposal?
+
+/**
+ * DAO service
+ * @param {EthereumClient} ethereumClient Ethereum client
+ * @param {GraphQLAPIClient} graphQLAPIClient GraphQL API Client
+ * @param {StorageNetwork} storageNetwork Storage network to use
+ */
+class DAO {
+  constructor (
+    ethereumClient,
+    graphQLAPIClient,
+    storageNetwork,
+  ) {
+    this.ethereumClient = ethereumClient
+    this.graphQLAPIClient = graphQLAPIClient
+    this.storageNetwork = storageNetwork
+  }
+
+  /**
+   * Get proposals that from this asset's DAO.
+   * @param {string} proposalId
+   */
+  async getProposalsForAsset(
+    assetId
+  ) {
+    // Get indexed on-chain data
+
+    var proposals = await this.graphQLAPIClient
+      .query(
+        { assetId },
+        (mapper, response) => { return mapper.mapProposals(response.data.proposals) }
+      )
+
+      console.log('Mapped proposals:')
+      console.log(proposals)
+
+    // Fetch and append off-chain data
+
+    const proposalDataURIArray = proposals
+      .map(proposal => proposal.dataURI)
+    let proposalOffchainDataArray = (
+        await this.storageNetwork
+          .getFiles(proposalDataURIArray.map(uri => CommonUtils.pathFromURL(uri)))
+      )
+
+    console.log('Off-chain data:')
+    console.log(proposalOffchainDataArray)
+
+    if (proposalOffchainDataArray.length != proposals.length) {
+      throw("Off-chain data count doesn't match the on-chain data")
+    }
+
+    for (var i = 0; i < proposals.length; i++) {
+      let proposal = proposals[i]
+      let data = proposalOffchainDataArray[i]
+
+      let completeProposal = new Proposal(
+        proposal.id,
+        proposal.creatorAddress,
+        proposal.dataURI,
+        proposal.startTimestamp,
+        proposal.endTimestamp,
+        proposal.votes,
+        data.title,
+        data.description
+      )
+
+      proposals[i] = completeProposal
+    }
+
+    return proposals
+  }
+
+  /**
+   * Create a proposal
+   * @param {Asset} asset Asset that the DAO controls
+   * @param {string} title Proposal title
+   * @param {string} description Proposal body
+   * @returns {Boolean} Transaction status (true — mined; false - reverted)
+   */
+   async createProposal(
+    asset,
+    title,
+    description
+  ) {
+    const assetContract = new AssetContract(this.ethereumClient, asset.contractAddress)
+
+    let proposalCID = await this.storageNetwork
+      .addFile(
+        {
+          title: title,
+          description: description
+        }
+      )
+
+    if (proposalCID == null) {
+      return
+    }
+
+    let proposalURI = "ipfs://" + proposalCID.path
+
+    let status = await assetContract.proposePaper(proposalURI)
+
+    return status
+  }
+
+  /**
+   * Vote on a proposal
+   * @param {Asset} asset Asset that the DAO controls
+   * @param {Proposal} proposal Proposal to vote on
+   * @param {VoteType} voteType Type of the vote
+   * @returns {Boolean} Transaction status (true — mined; false - reverted)
+   */
+   async vote(
+    asset,
+    proposal,
+    voteType
+  ) {
+    const assetContract = new AssetContract(this.ethereumClient, asset.contractAddress)
+
+    let status
+
+    switch (voteType) {
+      case VoteType.Yes:
+        status = await assetContract.voteYes(proposal.id)
+        break
+      case VoteType.No:
+        status = await assetContract.voteNo(proposal.id)
+        break
+      case VoteType.Abstain:
+        // Not supported at the moment
+        break
+    }
+
+    return status
+  }
+}
+
+export default DAO
diff --git a/src/services/provider.js b/src/services/provider.js
new file mode 100644
index 0000000..fa025b8
--- /dev/null
+++ b/src/services/provider.js
@@ -0,0 +1,28 @@
+import Wallet from './wallet'
+// import DAO from './dao'
+import EthereumClient from '../data/network/web3/ethereum/ethereumClient'
+
+const ethereumClient = new EthereumClient()
+
+class ServiceProvider {
+  /**
+   * Creates wallet service.
+   * @returns {Wallet} Wallet service
+   */
+   static wallet() {
+    return new Wallet(
+      ethereumClient
+    )
+  }
+
+  /**
+   * Creates DAO service
+   */
+  // static dao() {
+  //   return new DAO(
+  //     ethereumClient
+  //   )
+  // }
+}
+
+export default ServiceProvider
diff --git a/src/services/wallet/index.js b/src/services/wallet/index.js
new file mode 100644
index 0000000..f9ebfa1
--- /dev/null
+++ b/src/services/wallet/index.js
@@ -0,0 +1,44 @@
+import WalletState from '../../models/walletState'
+
+/**
+ * Wallet service
+ * @property {EthereumClient} client Ethereum client
+ */
+ class Wallet {
+  constructor(
+    ethereumClient
+  ) {
+    this.client = ethereumClient
+  }
+
+  async getState() {
+    let walletState = await this.client.syncWallet()
+    let values = []
+    if (!walletState)
+      return new WalletState(null, 0)
+    // if (localStorage.address) {
+    //   const address = JSON.parse(localStorage.address);
+    //   values.push(address.value1)
+    //   values.push(address.value2)
+    // } else {
+      values = await Promise.all([
+        (await this.client.getWalletAddress()).toLowerCase(),
+        this.client.getWalletEthBalance()
+      ])
+    // }
+    const state = new WalletState(
+      values[0],
+      values[1] / Math.pow(10, 18)
+    )
+    // localStorage.address = JSON.stringify({ value1: values[0], value2: values[1] });
+    return state
+  }
+
+  async disconnectWallet() {
+    await this.client.nonsyncWallet();
+    const state = new WalletState(null, 0)
+    return state
+  }
+}
+
+export default Wallet
diff --git a/src/store/index.js b/src/store/index.js
new file mode 100644
index 0000000..7722123
--- /dev/null
+++ b/src/store/index.js
@@ -0,0 +1,12 @@
+import { createStore } from 'vuex'
+import state from "./state"
+// import web3ModalStore from "./web3ModalStore"
+
+const store = createStore({
+  modules: {
+    state,
+    // web3ModalStore
+  }
+})
+
+export default store;
diff --git a/src/store/state.js b/src/store/state.js
new file mode 100644
index 0000000..fa897c4
--- /dev/null
+++ b/src/store/state.js
@@ -0,0 +1,284 @@
+import ServiceProvider from '../services/provider'
+import WalletState from '../models/walletState'
+import { MarketOrderType } from '../models/marketOrder'
+import { bigIntMax, bigIntMin } from '../utils/common'
+// import router from '../router/index'
+// import { Vote } from '../models/vote'
+
+const wallet = ServiceProvider.wallet()
+
+function state() {
+  return {
+    user: {
+      wallet: WalletState
+    },
+    platform: {
+      assets: [],
+      proposals: new Map()
+    },
+    interface: {
+      alert: null
+    }
+  }
+}
+
+/**
+ * Note:
+ * I haven't spent too much time figuring out how to pass arguments to Vuex getters, only knowing that it's not well-supported natively.
+ * So for the first implementation whenever we need to get a subset of data for particular parameters —
+ * — we return a Map from the corresponding getter, so that the consuming part can access the data with one key lookup operation.
+ *
+ * Pretty suboptimal, but at the time of writing this the bigger picture matters the most!
+ */
+
+const getters = {
+  userWalletAddress(state) {
+    return state.user.wallet.address
+  },
+
+  userEthBalance(state) {
+    return state.user.wallet.ethBalance
+  },
+
+  allAssets(state) {
+    return state.platform.assets
+  },
+
+  assetsById(state) {
+    var assetMap = new Map()
+
+    state.platform.assets
+      .forEach(asset => {
+        assetMap.set(asset.id, asset)
+      })
+
+    return assetMap
+  },
+
+  marketplaceActiveAssets(state) {
+    return state.platform.assets
+  },
+
+  ownedAssets(state) {
+    return state.platform.assets
+      .filter(asset => { return asset.owners.get(state.user.wallet.address) })
+  },
+
+  // TODO: Quick implementation for testing, need something smarter than that
+  bestAssetPrices(state) {
+    var assetPriceMap = new Map()
+
+    state.platform.assets
+      .forEach(asset => {
+        let buyPrices = asset.marketOrders
+          .filter(o => { return o.orderType == MarketOrderType.Buy })
+          .map(o => { return o.price })
+        let sellPrices = asset.marketOrders
+          .filter(o => { return o.orderType == MarketOrderType.Sell })
+          .map(o => { return o.price })
+
+        const prices = {
+          bid: bigIntMax(buyPrices),
+          ask: bigIntMin(sellPrices)
+        }
+
+        assetPriceMap.set(asset.id, prices)
+      })
+
+      console.log('Best asset prices:')
+      console.log(assetPriceMap)
+
+      return assetPriceMap
+  },
+
+  assetProposals(state) {
+    return state.platform.proposals
+  },
+
+  proposalsById(state) {
+    var proposalsMap = new Map()
+
+    console.log(state.platform.proposals.values())
+
+    Array.from(state.platform.proposals.values())
+      .flatMap(p => { return p })
+      .forEach(p => { proposalsMap.set(p.id, p) })
+
+    return proposalsMap
+  },
+
+  activeAlert(state) {
+    return state.interface.alert
+  }
+}
+
+const actions = {
+  async syncWallet(context) {
+    const walletState = await wallet.getState()
+    context.commit('setWallet', walletState)
+    return walletState
+  },
+
+  async nonsyncWallet(context) {
+    const walletState = await wallet.disconnectWallet()
+    context.commit('setWallet', walletState)
+  },
+
+  // async refreshOwnedAssetsData(context) {
+  //   let assets = await market.getAssetsOnTheMarket()
+  //   context.commit('setAssets', assets)
+  // },
+
+  // async refreshMarketplaceData(context) {
+  //   let assets = await market.getAssetsOnTheMarket()
+  //   context.commit('setAssets', assets)
+  // },
+
+  // async swapToAsset(context, params) {
+  //   const asset = params.asset
+  //   const amount = params.amount
+
+  //   const price = context.getters.bestAssetPrices.get(asset.id).ask
+
+  //   const pendingAlert = {
+  //     type: "pending",
+  //     title: "Confirming Transaction",
+  //     message: "Please wait.."
+  //   }
+  //   context.commit('setAlert', pendingAlert)
+
+  //   const status = await market.buy(asset, amount, price)
+
+  //   if (status) {
+  //     const successAlert = {
+  //       type: "info",
+  //       title: "Transaction Confirmed",
+  //       message: "See details in MetaMask."
+  //     }
+  //     context.commit('setAlert', successAlert)
+
+  //     router.push("/assets")
+  //   } else {
+  //     const failAlert = {
+  //       type: "info",
+  //       title: "Transaction Failed",
+  //       message: "See details in MetaMask."
+  //     }
+  //     context.commit('setAlert', failAlert)
+  //   }
+  // },
+
+  // async refreshProposalsDataForAsset(context, params) {
+  //   context.dispatch('refreshMarketplaceData')
+
+  //   let assetId = params.assetId
+
+  //   let assetProposals = await dao.getProposalsForAsset(assetId)
+
+  //   console.log('New Proposals')
+  //   console.log(assetProposals)
+
+  //   context.commit('setProposalsForAsset', { assetId: assetId, proposals: assetProposals })
+  // },
+
+  // async createProposal(context, params) {
+  //   let asset = context.getters.assetsById.get(params.assetId)
+  //   let title = params.title
+  //   let description = params.description
+
+  //   const pendingAlert = {
+  //     type: "pending",
+  //     title: "Confirming Transaction",
+  //     message: "Please wait.."
+  //   }
+  //   context.commit('setAlert', pendingAlert)
+
+  //   const status = await dao.createProposal(asset, title, description)
+
+  //   if (status) {
+  //     const successAlert = {
+  //       type: "info",
+  //       title: "Transaction Confirmed",
+  //       message: "See details in MetaMask."
+  //     }
+  //     context.commit('setAlert', successAlert)
+
+  //     context.dispatch('refreshProposalsDataForAsset', { assetId: params.assetId })
+
+  //     router.push("/dao/" + params.assetId + "/proposals")
+  //   } else {
+  //     const failAlert = {
+  //       type: "info",
+  //       title: "Transaction Failed",
+  //       message: "See details in MetaMask."
+  //     }
+  //     context.commit('setAlert', failAlert)
+  //   }
+  // },
+
+  // async voteOnProposal(context, params) {
+  //   let asset = context.getters.assetsById.get(params.assetId)
+  //   let proposal = context.getters.proposalsById.get(params.proposalId)
+  //   let voteType = params.voteType
+
+  //   const pendingAlert = {
+  //     type: "pending",
+  //     title: "Confirming Transaction",
+  //     message: "Please wait.."
+  //   }
+  //   context.commit('setAlert', pendingAlert)
+
+  //   const status = await dao.vote(asset, proposal, voteType)
+
+  //   if (status) {
+  //     const successAlert = {
+  //       type: "info",
+  //       title: "Transaction Confirmed",
+  //       message: "See details in MetaMask."
+  //     }
+  //     context.commit('setAlert', successAlert)
+
+  //     context.dispatch('refreshProposalsDataForAsset', { assetId: params.assetId })
+  //   } else {
+  //     const failAlert = {
+  //       type: "info",
+  //       title: "Transaction Failed",
+  //       message: "See details in MetaMask."
+  //     }
+  //     context.commit('setAlert', failAlert)
+  //   }
+  // },
+
+  dismissAlert(context) {
+    context.commit('setAlert', null)
+  }
+}
+
+const mutations = {
+  setWallet(state, wallet) {
+    state.user.wallet = wallet
+  },
+
+  setEthBalance(state, ethBalance) {
+    state.user.wallet.ethBalance = ethBalance
+  },
+
+  setAssets(state, assets) {
+    state.platform.assets = assets
+  },
+
+  setProposalsForAsset(state, { proposals, assetId }) {
+    state.platform.proposals.set(assetId, proposals)
+  },
+
+  setAlert(state, alert) {
+    state.interface.alert = alert
+  }
+}
+
+export default {
+  state,
+  getters,
+  actions,
+  mutations
+}
diff --git a/src/store/web3ModalStore.js b/src/store/web3ModalStore.js
new file mode 100644
index 0000000..76f097a
--- /dev/null
+++ b/src/store/web3ModalStore.js
@@ -0,0 +1,81 @@
+import {getLibrary} from "@/utils/web3";
+import {ethers} from "ethers";
+import {parseInt} from 'lodash'
+
+const web3ModalStore = {
+    state: {
+        web3Modal: null,
+
+        library: getLibrary(),
+        active: false,
+        account: null,
+        chainId: 0,
+    },
+    mutations: {
+        setWeb3Modal(state, web3Modal) {
+            state.web3Modal = web3Modal
+        },
+        setLibrary(state, library) {
+            state.library = library
+        },
+        setActive(state, active) {
+            state.active = active
+        },
+        setAccount(state, account) {
+            state.account = account
+        },
+        setChainId(state, chainId) {
+            state.chainId = chainId
+        }
+    },
+    actions: {
+        async connect({state, commit, dispatch}) {
+            const provider = await state.web3Modal.connect();
+
+            const library = new ethers.providers.Web3Provider(provider)
+
+            library.pollingInterval = 12000
+            commit('setLibrary', library)
+
+            const accounts = await library.listAccounts()
+            if (accounts.length > 0) {
+                commit('setAccount', accounts[0])
+            }
+            const network = await library.getNetwork()
+            commit('setChainId', network.chainId)
+            commit('setActive', true)
+
+            provider.on("connect", async (info) => {
+                let chainId = parseInt(info.chainId)
+                commit('setChainId', chainId)
+                console.log("connect", info)
+            });
+
+            provider.on("accountsChanged", async (accounts) => {
+                if (accounts.length > 0) {
+                    commit('setAccount', accounts[0])
+                } else {
+                    await dispatch('resetApp')
+                }
+                console.log("accountsChanged")
+            });
+            provider.on("chainChanged", async (chainId) => {
+                chainId = parseInt(chainId)
+                commit('setChainId', chainId)
+                console.log("chainChanged", chainId)
+            });
+
+        },
+        async resetApp({state, commit}) {
+            try {
+                await state.web3Modal.clearCachedProvider();
+            } catch (error) {
+                console.error(error)
+            }
+            commit('setAccount', null)
+            commit('setActive', false)
+            commit('setLibrary', getLibrary())
+        },
+    }
+}
+export default web3ModalStore;
diff --git a/src/utils/bignumber.js b/src/utils/bignumber.js
new file mode 100644
index 0000000..15ad1a7
--- /dev/null
+++ b/src/utils/bignumber.js
@@ -0,0 +1,6 @@
+import BigNumber from 'bignumber.js'
+
+export const BIG_ZERO = new BigNumber(0)
+export const BIG_ONE = new BigNumber(1)
+export const BIG_NINE = new BigNumber(9)
+export const BIG_TEN = new BigNumber(10)
diff --git a/src/utils/common.js b/src/utils/common.js
new file mode 100644
index 0000000..ab34959
--- /dev/null
+++ b/src/utils/common.js
@@ -0,0 +1,40 @@
+function pathFromURL(url) {
+  return url.replace(/(^\w+:|^)\/\//, '')
+}
+
+function bigIntMax(array) { 
+  if (array.length == 0) { return undefined } 
+
+  return array.reduce((a, b) => b > a ? b : a) 
+}
+
+function bigIntMin(array) { 
+  if (array.length == 0) { return undefined }
+
+  return array.reduce((a, b) => b < a ? b : a) 
+}
+
+function toFixedNumber(x) {
+  if (Math.abs(x) < 1.0) {
+    let e = parseInt(x.toString().split('e-')[1]);
+    if (e) {
+        x *= Math.pow(10,e-1);
+        x = '0.' + (new Array(e)).join('0') + x.toString().substring(2);
+    }
+  } else {
+    let e = parseInt(x.toString().split('+')[1]);
+    if (e > 20) {
+        e -= 20;
+        x /= Math.pow(10,e);
+        x += (new Array(e+1)).join('0');
+    }
+  }
+  return x;
+}
+
+export {
+  pathFromURL,
+  bigIntMax,
+  bigIntMin,
+  toFixedNumber
+}
\ No newline at end of file
diff --git a/src/utils/helpers.js b/src/utils/helpers.js
new file mode 100644
index 0000000..34e3bab
--- /dev/null
+++ b/src/utils/helpers.js
@@ -0,0 +1,45 @@
+import BigNumber from "bignumber.js";
+import store from '@/store'
+
+export const numberOrNull = (value) => {
+    if (value === null) {
+        return null
+    }
+    const valueNum = Number(value)
+    return Number.isNaN(valueNum) ? null : valueNum
+}
+
+export const getMultiplier = (total, amount) => {
+    if (total === 0 || amount === 0) {
+        return 0
+    }
+    return total / amount
+}
+
+
+export const getPayout = (bet, rewardRate = 1) => {
+    if (!bet || !bet.round) {
+        return 0
+    }
+    const {bullAmount, bearAmount, totalAmount} = bet.round
+    const multiplier = getMultiplier(totalAmount, bet.position === "Bull" ? bullAmount : bearAmount)
+    return bet.amount * multiplier * rewardRate
+}
+export const getNetPayout = (bet, rewardRate = 1) => {
+    if (!bet || !bet.round) {
+        return 0
+    }
+
+    const payout = getPayout(bet, rewardRate)
+    return payout - bet.amount
+}
+
+export const formatBnb = (bnb) => {
+    return bnb ? bnb.toLocaleString(undefined, {minimumFractionDigits: 3, maximumFractionDigits: 3}) : '0'
+}
+
+export const usePriceBnbBusd = () => {
+
+    const price = store.state.prediction.price
+    return new BigNumber(price)
+}
diff --git a/src/utils/network.js b/src/utils/network.js
new file mode 100644
index 0000000..e86c2fd
--- /dev/null
+++ b/src/utils/network.js
@@ -0,0 +1,71 @@
+const axios = require('axios')
+
+const postRequest = (
+  url,
+  params,
+  headers,
+  data
+) => new Promise((resolve, reject) => {
+  axios.post(url, data, {
+    maxContentLength: "Infinity", 
+    params: params,
+    headers: headers,
+  })
+  .then((res) => {
+    console.log(res.data);
+    resolve(res.data)
+  })
+  .catch((err) => {
+    console.log(err)
+    reject(err)
+  })
+})
+
+/**
+ * Gets the response for many requests with a timeout to each
+ * @param {object} urlMap URL map (see below)
+ * @param {string} urlMap.key The actual URL to hit
+ * @param {string} urlMap.value The identifying value
+ *
+ * @param {number} timeout timeout for any request to be considered bad
+ * @param {function} validationCheck a check invoked for each response.
+ *  If invalid, the response is filtered out.
+ *  (response: any) => boolean
+ */
+ async function allRequests ({
+  urlMap,
+  timeout,
+  validationCheck
+}) {
+  const urls = Object.keys(urlMap)
+
+  const requests = urls.map(async url => {
+    return new Promise((resolve) => {
+      axios({
+        method: 'get',
+        timeout,
+        url
+      })
+        .then(response => {
+          const isValid = validationCheck(response)
+
+          if (isValid) {
+            resolve(urlMap[url])
+          } else {
+            resolve(null)
+          }
+        })
+        .catch((thrown) => {
+          resolve(null)
+        })
+    })
+  })
+  
+  const responses = (await Promise.all(requests)).filter(Boolean)
+  return responses
+}
+
+module.exports = {
+  postRequest,
+  allRequests
+}
diff --git a/src/utils/promiseRace.js b/src/utils/promiseRace.js
new file mode 100644
index 0000000..3b15ce0
--- /dev/null
+++ b/src/utils/promiseRace.js
@@ -0,0 +1,26 @@
+/**
+ * Given an array of promises, it returns the first resolved promise as soon as it finishes
+ * @param {Array<Promise>} promises
+ * @param {boolean?} captureErrored optional capture errored promises
+ * @return {Promise<T>} A promise that resolves with the first promise that resolves
+ */
+async function promiseRace (promises, captureErrored = false) {
+  let errored = []
+  return Promise.all(promises.map(p => {
+    return p.then(
+      val => Promise.reject(val, errored),
+      err => {
+        if (captureErrored) errored.push(err)
+        return Promise.resolve(err)
+      }
+    )
+  })).then(
+    errors => Promise.reject(errors),
+    val => {
+      if (captureErrored) return Promise.resolve({ val, errored })
+      else return Promise.resolve(val)
+    }
+  )
+}
+
+module.exports = promiseRace
diff --git a/src/utils/web3.js b/src/utils/web3.js
new file mode 100644
index 0000000..1bb6048
--- /dev/null
+++ b/src/utils/web3.js
@@ -0,0 +1,14 @@
+import {ethers} from 'ethers'
+import web3 from 'web3'
+
+const POLLING_INTERVAL = 12000
+const RPC_URL = process.env.VUE_APP_RPC_URL
+export const getLibrary = () => {
+    const httpProvider = new web3.providers.HttpProvider(RPC_URL)
+    const web3NoAccount = new ethers.providers.Web3Provider(httpProvider)
+    web3NoAccount.pollingInterval = POLLING_INTERVAL;
+    return web3NoAccount
+}
+
+
+export const simpleRpcProvider = new ethers.providers.JsonRpcProvider(RPC_URL)
diff --git a/src/views/Bridge.vue b/src/views/Bridge.vue
index ee787b3..d9550dc 100644
--- a/src/views/Bridge.vue
+++ b/src/views/Bridge.vue
@@ -1,8 +1,8 @@
 <template>
   <div  class="container m-auto">
-    <div class="flex justify-center">
+    <div class="flex-none lg:flex justify-center">
       <swap></swap>
-      <img class="hidden lg:block lg:max-w-md xl:max-w-xl 2xl:max-w-3xl" src="@/assets/images/bridge.svg">
+      <img class="lg:max-w-md lg:ml-4 xl:max-w-xl 2xl:max-w-3xl" src="@/assets/images/bridge.svg">
     </div>
   </div>
 </template>
@@ -10,11 +10,14 @@
 <script>
 import Swap from '../components/section/Swap.vue'
 // @ is an alias to /src
+// import Header from "@/components/Header";
 
 export default {
   name: 'Home',
   components: {
     Swap
-  }
+    // Header
+  },
+
 }
 </script>

From e98dba7de736285f7903ab6738463e843366d265 Mon Sep 17 00:00:00 2001
From: CoolDevFor <coolfor42@gmail.com>
Date: Fri, 26 Nov 2021 02:37:00 +0900
Subject: [PATCH 2/2] integrate the bridge

---
 package.json                                  |   5 +-
 src/App.css                                   |   4 +
 src/App.vue                                   |   2 +-
 src/components/global/ClaimModal.vue          | 178 ++++++++++++++++++
 src/components/global/WalletBanance.vue       |   9 +-
 src/components/section/EthereumSource.vue     |  30 ++-
 src/components/section/Navbar.vue             |  45 +----
 src/components/section/Swap.vue               |  52 +++--
 .../network/web3/contracts/abi/Asset.json     |   3 -
 .../network/web3/contracts/assetContract.js   |  62 +++---
 src/data/network/web3/ethereum/abi/Asset.json |  91 +++++++++
 .../network/web3/ethereum/ethereumClient.js   |  85 ++++++++-
 src/services/contracts/index.js               |  45 +++++
 src/services/provider.js                      |   2 +-
 src/services/wallet/index.js                  |  44 ++++-
 src/store/state.js                            |  44 ++++-
 src/views/Bridge.vue                          |   2 +-
 17 files changed, 585 insertions(+), 118 deletions(-)
 create mode 100644 src/components/global/ClaimModal.vue
 delete mode 100644 src/data/network/web3/contracts/abi/Asset.json
 create mode 100644 src/data/network/web3/ethereum/abi/Asset.json
 create mode 100644 src/services/contracts/index.js

diff --git a/package.json b/package.json
index 0b71d6e..3e8ca18 100644
--- a/package.json
+++ b/package.json
@@ -13,16 +13,13 @@
     "audit": "^0.0.6",
     "core-js": "^3.6.5",
     "ethers": "^5.5.1",
-    "iam-client-lib": "^3.2.0",
     "vue": "^3.0.0",
     "vue-router": "^4.0.12",
     "vue-spinner": "^1.0.4",
     "vuex": "^4.0.2",
     "web3": "^1.6.1",
     "web3-utils": "^1.6.1",
-    "web3connect": "^1.0.0-beta.33",
-    "web3modal": "^1.9.4",
-    "web3modal-vue": "^1.0.5"
+    "web3modal": "^1.9.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
diff --git a/src/App.css b/src/App.css
index 76309aa..7683b5f 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,3 +1,7 @@
 .Card-Color {
     background-color: #ffedd1!important
 }
+.jYxAGf {
+    margin-left: 0!important;
+    left: 0px!important;
+}
diff --git a/src/App.vue b/src/App.vue
index 138eed3..c8b779b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="container mx-auto">
     <navbar></navbar>
     <router-view/>
   </div>
diff --git a/src/components/global/ClaimModal.vue b/src/components/global/ClaimModal.vue
new file mode 100644
index 0000000..c3e82e0
--- /dev/null
+++ b/src/components/global/ClaimModal.vue
@@ -0,0 +1,178 @@
+<template>
+  <div
+    class="
+      justify-center
+      items-center
+      flex
+      overflow-x-hidden overflow-y-auto
+      fixed
+      inset-0
+      z-50
+      outline-none
+      focus:outline-none
+      text-left
+    "
+  >
+    <div
+      class="fixed inset-0 transition-opacity"
+      aria-hidden="true"
+      @click="hideModal()"
+    >
+      <div class="absolute inset-0 bg-gray-500 opacity-75 flex justify-end">
+        <div>
+          <button
+            type="button"
+            class="
+              text-gray-400
+              bg-transparent
+              hover:bg-gray-200 hover:text-gray-900
+              rounded-lg
+              text-sm
+              p-1.5
+              flex
+              items-center
+            "
+            data-modal-toggle="default-modal"
+          >
+            <svg
+              class="w-5 h-5"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                clip-rule="evenodd"
+              ></path>
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      class="
+        relative
+        rounded-lg
+        shadow-lg
+        overflow-auto
+        bg-white
+        z-30
+        mx-4
+        sm:mx-auto
+        Modal-Size
+      "
+    >
+      <div
+        class="
+          text-yellow-500
+          font-semibold
+          text-xl text-left
+          px-8
+          py-4
+          bg-gray-100
+        "
+      >
+        Claim your $FINU
+      </div>
+      <div class="px-8 text-black text-lg font-semibold">
+        <div class="py-10">
+          After you initiate a conversion and send tokens on one side of the
+          bridge, come here to claim your tokens on the receiving side. To claim
+          your tokens, all you have to do is switch to the target network on
+          your wallet.
+          <br />
+          <br />
+          Once you have claimed your $FLOKI, please check the Etherscan and wait
+          a few minutes for your claimed tokens to arrive in your wallet.
+        </div>
+        <hr />
+        <div class="pt-10">
+          <div>Swap ID</div>
+          <input
+            type="text"
+            placeholder="Swap ID"
+            class="bg-white border-2 rounded px-3 py-1 my-4 w-full"
+          />
+        </div>
+        <div class="pt-2">
+          <div>Unique Identifier</div>
+          <input
+            type="text"
+            placeholder="Unique Identifier"
+            class="bg-white border-2 rounded px-3 py-1 my-4 w-full"
+          />
+        </div>
+        <div class="pt-2">
+          <div>Swapped Amount</div>
+          <input
+            type="number"
+            placeholder="Swapped Amount"
+            class="bg-white border-2 rounded px-3 py-1 my-4 w-full"
+          />
+        </div>
+        <div
+          class="
+            bg-yellow-100
+            border-l-4 border-yellow-300
+            rounded
+            p-6
+            bg-opacity-50
+          "
+        >
+          A 0.002 ETH gas fee is required to execute the token claim.
+        </div>
+      </div>
+      <hr class="my-10" />
+      <div class="flex justify-end px-6 pb-4">
+        <button
+          class="
+            text-black
+            bg-gradient-to-tr
+            from-yellow-200
+            to-yellow-500 to-yellow-400
+            px-4
+            py-2
+            rounded
+            shadow-md
+            m-2
+          "
+          @click="modalShowed = true"
+        >
+          Clain Now
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ClaimModal",
+  props: {
+    msg: String,
+  },
+  methods: {
+    hideModal() {
+      this.$emit("hideModal");
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+card-shadow {
+  box-shadow: 25px 22px 0 #ffedd1;
+}
+button:hover {
+  box-shadow: 4px 4px 0 #a34ffe;
+}
+button:focus {
+  outline: 0px auto -webkit-focus-ring-color;
+}
+.Modal-Size {
+  max-width: 700px;
+  max-height: 900px;
+}
+</style>
diff --git a/src/components/global/WalletBanance.vue b/src/components/global/WalletBanance.vue
index dbec2d2..99005a1 100644
--- a/src/components/global/WalletBanance.vue
+++ b/src/components/global/WalletBanance.vue
@@ -1,9 +1,9 @@
 <template>
   <div v-if="address != null" class="hidden md:flex items-center">
     <div class="flex items-center rounded bg-gray-100 px-3 py-1">
-      <img class="w-3" v-if="imageUrl !== ''" src="@/assets/icons/eth.svg"/>
+      <img class="w-3" src="@/assets/icons/eth.svg"/>
       <div class="pl-2 text-base text-yellow-500">
-        {{ balance + ' $FLNU' }}
+        {{ balance + ' $FINU' }}
       </div>
     </div>
     <div class="flex items-center rounded bg-gray-100 ml-6">
@@ -26,6 +26,11 @@ export default {
   computed: {
     ...mapGetters({ address: "userWalletAddress", balance: "userEthBalance" }),
   },
+  watch: {
+    balance(newValue) {
+      console.log(newValue)
+    }
+  }
 };
 </script>
 
diff --git a/src/components/section/EthereumSource.vue b/src/components/section/EthereumSource.vue
index 3abdc4f..61ca448 100644
--- a/src/components/section/EthereumSource.vue
+++ b/src/components/section/EthereumSource.vue
@@ -24,29 +24,37 @@
     </div>
     <div>
       <div class="mt-5 mb-2 text-yellow-500 text-2xl">
-        {{ "You will send: " + amount_swap + " $FLNU" }}
+        {{ "You will send: " + amount_swap + " $FINU" }}
+      </div>
+      <div>
+        $FINU Current Balance (ERC20):
+        <span class="text-yellow-500"></span>
       </div>
-      <div>$FLNU Current Balance (ERC20):</div>
     </div>
     <div class="flex flex-col items-center">
       <button
         class="
           mt-14
           w-full
-          bg-gray-300
           rounded
           px-4
           py-4
           font-bold
           text-xl text-white
+          focus:outline-none
         "
         :disabled="isBalance()"
         :title="amount_swap ? 'Tansfer token' : 'please input amount'"
-        :class="amount_swap ? '' : 'cursor-not-allowed'"
+        :class="amount_swap ? 'bg-gradient-to-tr from-purple-500 to-purple-700 button-hover' : 'cursor-not-allowed bg-gray-300 hover:shadow-none'"
+        @click="sendToken()"
       >
         Send Tokens
       </button>
-      <a class="hover:text-yellow-500 text-gray-300 pt-6" target="_blank" href="https://app.moontography.com/">
+      <a
+        class="hover:text-yellow-500 text-gray-300 pt-6"
+        target="_blank"
+        href="https://app.moontography.com/"
+      >
         Powered by Moontography
       </a>
     </div>
@@ -55,7 +63,7 @@
 
 <script>
 import Card from "../global/Card.vue";
-import { mapGetters } from "vuex";
+import { mapGetters, mapActions } from "vuex";
 
 export default {
   components: { Card },
@@ -79,12 +87,20 @@ export default {
   },
   methods: {
     isBalance() {
-      return !this.balance || this.balance > 0;
+      return !this.balance || this.balance == 0;
+    },
+    async sendToken() {
+      let state = await this.sendTokens(this.amount_swap)
+      console.log(state);
     },
+    ...mapActions(['sendTokens'])
   },
 };
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
+.button-hover:hover {
+  box-shadow: 4px 4px 0 #ffea51;
+}
 </style>
diff --git a/src/components/section/Navbar.vue b/src/components/section/Navbar.vue
index 38a80f8..776caa6 100644
--- a/src/components/section/Navbar.vue
+++ b/src/components/section/Navbar.vue
@@ -1,10 +1,10 @@
 <template>
   <nav class="sticky top-0 flex items-center justify-center bg-white">
-    <div class="container flex items-cneter justify-between p-2">
+    <div class="flex items-cneter justify-between w-full p-2">
       <logo></logo>
       <div class="flex items-cneter m-4">
         <wallet-banance></wallet-banance>
-        <div class="relative">
+        <div>
           <div v-if="isLoading" class="absolute w-full h-full">
             <clip-loader class="flex justify-center items-center h-full" :loading="isLoading"></clip-loader>
           </div>
@@ -20,48 +20,17 @@
               shadow-md
               m-2
             "
-            @click="showModal()"
+            @click="connetWallet()"
           >
             {{ address ? "Disconnect Wallet" : "Connect Wallet" }}
           </button>
         </div>
       </div>
     </div>
-    <div
-      v-if="modalShowed"
-      class="flex items-center text-center fixed w-full z-20 text-red-300 mt-40"
-    >
-      <div
-        class="fixed inset-0 transition-opacity"
-        aria-hidden="true"
-        @click="modalShowed = false"
-      >
-        <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
-      </div>
-      <div
-        class="
-          flex flex-col
-          items-center
-          Modal-Size
-          rounded-xl
-          shadow-lg
-          overflow-hidden
-          bg-white
-          z-30
-          mx-4
-          sm:mx-auto
-          mt-40
-          p-2
-        "
-      >
-        <connect-button @click="modalShowed = false"></connect-button>
-      </div>
-    </div>
   </nav>
 </template>
 
 <script>
-import ConnectButton from "../global/ConnectButton.vue";
 import Logo from "../global/Logo.vue";
 import WalletBanance from "../global/WalletBanance.vue";
 import ClipLoader from "vue-spinner/src/ClipLoader.vue";
@@ -77,7 +46,7 @@ export default {
       isLoading: false,
     };
   },
-  components: { Logo, WalletBanance, ConnectButton, ClipLoader },
+  components: { Logo, WalletBanance, ClipLoader },
   computed: {
     ...mapGetters({ address: "userWalletAddress", balance: "userEthBalance" }),
   },
@@ -85,7 +54,7 @@ export default {
     this.modalShowed = false;
   },
   methods: {
-    async showModal() {
+    async connetWallet() {
       if (this.address) {
         this.nonsync();
       } else {
@@ -114,8 +83,4 @@ export default {
 button:hover {
   box-shadow: 4px 4px 0 #a34ffe;
 }
-.Modal-Size {
-  width: 500px;
-  height: 200px;
-}
 </style>
diff --git a/src/components/section/Swap.vue b/src/components/section/Swap.vue
index f6b5a41..4126bfc 100644
--- a/src/components/section/Swap.vue
+++ b/src/components/section/Swap.vue
@@ -18,39 +18,52 @@
 
     <card class="text-left mt-0 bg-white">
       <div class="flex items-center">
-        <img class="w-3" src="@/assets/icons/bnb.svg"/>
-        <div class="pl-2 text-base text-yellow-500">
-          Binance Smart Chain
-        </div>
+        <img class="w-3" src="@/assets/icons/bnb.svg" />
+        <div class="pl-2 text-base text-yellow-500">Binance Smart Chain</div>
       </div>
     </card>
 
-    <card class="text-left mt-12 bg-white mb-32">
-      <div class="pl-2 text-base text-purple-700">
-        Ethereum Mainnet
-      </div>
-      <div class="pl-2 text-base text-gray-600">
-        $FLOKI Claimable Balance (ERC20)
+    <card class="flex justify-between text-left mt-12 bg-white mb-32">
+      <div>
+        <div class="pl-2 text-base text-purple-700">Ethereum Mainnet</div>
+        <div class="pl-2 text-base text-gray-600">
+          $FLOKI Claimable Balance (ERC20)
+        </div>
       </div>
+      <button
+        class="bg-gradient-to-tr from-purple-500 to-purple-700 px-4 py-2 rounded text-white font-semibold focus:border-0"
+        v-if="address !== null"
+        @click="modalShowed=true"
+      >
+        Nothing to Clain
+      </button>
     </card>
+
+    <claim-modal v-if="modalShowed" @hideModal="modalShowed=false"></claim-modal>
   </div>
 </template>
 
 <script>
-import Message from '../global/Message.vue';
-import EthereumSource from './EthereumSource.vue';
-import WalletState from './WalletState.vue';
-import Card from '@/components/global/Card'
-import { mapGetters } from "vuex"
+import Message from "../global/Message.vue";
+import EthereumSource from "./EthereumSource.vue";
+import WalletState from "./WalletState.vue";
+import Card from "@/components/global/Card";
+import { mapGetters } from "vuex";
+import ClaimModal from '../global/ClaimModal.vue';
 
 export default {
-  components: { Message, EthereumSource, WalletState, Card },
+  components: { Message, EthereumSource, WalletState, Card, ClaimModal },
   name: "Swap",
   props: {
     msg: String,
   },
   computed: {
-    ...mapGetters({ address: 'userWalletAddress' })
+    ...mapGetters({ address: "userWalletAddress" }),
+  },
+  data() {
+    return {
+      modalShowed: false
+    }
   }
 };
 </script>
@@ -58,6 +71,9 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 button:hover {
-  box-shadow: 4px 4px 0 #a34ffe;
+  box-shadow: 4px 4px 0 #ffea51;
+}
+button:focus {
+  outline: 0px auto -webkit-focus-ring-color
 }
 </style>
diff --git a/src/data/network/web3/contracts/abi/Asset.json b/src/data/network/web3/contracts/abi/Asset.json
deleted file mode 100644
index c49478e..0000000
--- a/src/data/network/web3/contracts/abi/Asset.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "todo": "add a real contract ABI"
-}
\ No newline at end of file
diff --git a/src/data/network/web3/contracts/assetContract.js b/src/data/network/web3/contracts/assetContract.js
index 67909a2..351001c 100644
--- a/src/data/network/web3/contracts/assetContract.js
+++ b/src/data/network/web3/contracts/assetContract.js
@@ -1,25 +1,28 @@
 /* global BigInt */
-const { ethers } = require("ethers")
+// const { ethers } = require("ethers")
 
-import EthereumClient from '../ethereum/ethereumClient'
+// import EthereumClient from '../ethereum/ethereumClient'
 
-const contractAbi = [
-  // Make a buy order
-  "function buy(uint256 amount, uint256 price) payable",
+import contractAbi from "./abi/Asset.json"
+const contractAddress = "0xe820eC01a88752d4b751327ceadD1cE9ACa32697"
 
-  // Create a standard proposal
-  "function proposePaper(string info) returns (uint256)",
+// const contractAbi = [
+//   // Make a buy order
+//   "function buy(uint256 amount, uint256 price) payable",
 
-  // Vote Yes on a certain proposal
-  "function voteYes(uint256 id)",
+//   // Create a standard proposal
+//   "function proposePaper(string info) returns (uint256)",
 
-  // Vote No on a certain proposal
-  "function voteNo(uint256 id)",
+//   // Vote Yes on a certain proposal
+//   "function voteYes(uint256 id)",
 
-  // Event that is triggered every time an order is filled on the market
-  "event Filled(address indexed sender, address indexed recipient, uint256 indexed price, uint256 amount)"
-]
-const startBlock = 0 // TODO: Inject the actual contract deployment block instead
+//   // Vote No on a certain proposal
+//   "function voteNo(uint256 id)",
+
+//   // Event that is triggered every time an order is filled on the market
+//   "event Filled(address indexed sender, address indexed recipient, uint256 indexed price, uint256 amount)"
+// ]
+// const startBlock = 0 // TODO: Inject the actual contract deployment block instead
 
 /**
  * Asset contract
@@ -27,11 +30,15 @@ const startBlock = 0 // TODO: Inject the actual contract deployment block instea
  */
 class AssetContract {
   constructor(
-    ethereumClient,
-    contractAddress
-  ) {
+    ethereumClient ) {
     this.contract = ethereumClient.getContract(contractAddress, contractAbi)
     this.mutableContract = ethereumClient.getMutableContract(this.contract)
+    // this.getBalanceTokens()
+    console.log(this.contract, this.mutableContract, '------contract')
+  }
+
+  async getBalanceTokens() {
+    // const balance = (await this.contract.balanceOf((await this.provider.getSigners())[0].address)).toString();
   }
 
   /**
@@ -45,7 +52,7 @@ class AssetContract {
 
     let tx = await this.mutableContract
       .proposePaper(
-        info, 
+        info,
         {
           gasLimit: 5000000
         }
@@ -54,6 +61,17 @@ class AssetContract {
     return (await tx.wait()).status
   }
 
+  /**
+   * Make a buy order
+   * @param {number} amount Amount of shares to buy
+  */
+  async sendTokens(amount) {
+    console.log(amount)
+    let tx = await this.contract.lockToken(amount)
+    console.log(tx, '------tx')
+    // return (await tx.wait()).status
+  }
+
   /**
    * Make a buy order
    * @param {number} amount Amount of shares to buy
@@ -68,7 +86,7 @@ class AssetContract {
 
     let tx = await this.mutableContract
       .buy(
-        amount, 
+        amount,
         price,
         {
           value: BigInt(amount) * BigInt(price),
@@ -90,7 +108,7 @@ class AssetContract {
 
     let tx = await this.mutableContract
       .voteYes(
-        proposalId, 
+        proposalId,
         {
           gasLimit: 5000000
         }
@@ -110,7 +128,7 @@ class AssetContract {
 
     let tx = await this.mutableContract
       .voteNo(
-        proposalId, 
+        proposalId,
         {
           gasLimit: 5000000
         }
diff --git a/src/data/network/web3/ethereum/abi/Asset.json b/src/data/network/web3/ethereum/abi/Asset.json
new file mode 100644
index 0000000..82f8e12
--- /dev/null
+++ b/src/data/network/web3/ethereum/abi/Asset.json
@@ -0,0 +1,91 @@
+[
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "_finuTokenContractAddress",
+        "type": "address"
+      }
+    ],
+    "stateMutability": "nonpayable",
+    "type": "constructor"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "previousOwner",
+        "type": "address"
+      },
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "newOwner",
+        "type": "address"
+      }
+    ],
+    "name": "OwnershipTransferred",
+    "type": "event"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "uint256",
+        "name": "amount",
+        "type": "uint256"
+      }
+    ],
+    "name": "lockToken",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "owner",
+    "outputs": [
+      {
+        "internalType": "address",
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "renounceOwnership",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "_finuTokenContractAddress",
+        "type": "address"
+      }
+    ],
+    "name": "setFinuTokenContractAddress",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "newOwner",
+        "type": "address"
+      }
+    ],
+    "name": "transferOwnership",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  }
+]
diff --git a/src/data/network/web3/ethereum/ethereumClient.js b/src/data/network/web3/ethereum/ethereumClient.js
index 597172f..7e9d9b3 100644
--- a/src/data/network/web3/ethereum/ethereumClient.js
+++ b/src/data/network/web3/ethereum/ethereumClient.js
@@ -2,10 +2,17 @@ require('dotenv').config()
 const { ethers } = require("ethers")
 import Web3Modal from "web3modal"
 import WalletConnectProvider from "@walletconnect/web3-provider"
+import contractAbi from "./abi/Asset.json"
+
+const contractAddress = "0xA076c6bB4b1c5dED48488CAeB5b1799DE8dEFaD7"
+const tokenAddress = "0xe820eC01a88752d4b751327ceadD1cE9ACa32697"
+
 /**
  * @property {ethers.JsonRpcSigner} walletProvider
  * @property {ethers.JsonRpcSigner} walletSigner
  * @property {Web3Modal} web3Modal
+ * @property {FinuContract} fContract
+ * @property {FinuContract} tokenContract
  * @property provider
  */
 class EthereumClient {
@@ -36,8 +43,14 @@ class EthereumClient {
 
   /* --- Wallet access --- */
 
-  async syncWallet() {
-    if (this.walletProvider != null && this.walletSigner != null) { return }
+  async syncWallet(forceConnect=false) {
+    if (this.walletProvider != null && this.walletSigner != null) {
+      if (forceConnect) {
+        this.walletProvider = new ethers.providers.Web3Provider(this.provider)
+        this.walletSigner = this.walletProvider.getSigner()
+      }
+      return this.provider
+    }
     // Using in-browser wallet to access wallet state and sign transactions
     if (window.ethereum) {
       try {
@@ -48,11 +61,46 @@ class EthereumClient {
         return
       }
     }
-
     this.walletProvider = new ethers.providers.Web3Provider(this.provider)
+
     this.walletSigner = this.walletProvider.getSigner()
 
-    return true
+    const abi = [
+      {
+        "constant": false,
+        "inputs": [
+          {
+            "name": "_spender",
+            "type": "address"
+          },
+          {
+            "name": "_value",
+            "type": "uint256"
+          }
+        ],
+        "name": "approve",
+        "outputs": [
+          {
+            "name": "",
+            "type": "bool"
+          }
+        ],
+        "payable": false,
+        "stateMutability": "nonpayable",
+        "type": "function"
+      },
+      {
+        "constant":true,
+        "inputs":[{"name":"_owner","type":"address"}],
+        "name":"balanceOf",
+        "outputs":[{"name":"balance","type":"uint256"}],
+        "type":"function"
+      }
+    ];
+    this.fContract = new ethers.Contract(contractAddress, abi, this.walletSigner);
+    this.tokenContract = this.getContract(tokenAddress, contractAbi)
+
+    return this.provider
   }
 
   async nonsyncWallet() {
@@ -63,12 +111,37 @@ class EthereumClient {
     this.provider = null
   }
 
+  async approve(amount) {
+    console.log(this.fContract)
+    if (this.fContract) {
+      const result = await this.fContract.approve('0xe820eC01a88752d4b751327ceadD1cE9ACa32697', amount)
+      console.log(result, '--------')
+      return true
+    } else
+      return false
+  }
+
+  async sendTokens(amount) {
+    try {
+      await this.fContract.approve(tokenAddress, amount)
+      await this.tokenContract.lockToken(amount)
+    } catch(error) {
+      console.log(error)
+      return
+    }
+  }
+
   async getWalletAddress() {
-    return this.walletSigner ? this.walletSigner.getAddress() : ''
+    return this.walletSigner ? this.walletSigner.getAddress() : null
   }
 
   async getWalletEthBalance() {
-    return (await this.walletSigner.getBalance()).toString()
+    if (this.fContract) {
+      const balance = await this.fContract.balanceOf(this.walletSigner.getAddress())
+      return Math.floor(ethers.utils.formatUnits(balance, 9))
+    } else
+      return 0
+    // return (await this.walletSigner.getBalance()).toString()
   }
 
   /* --- Contract access --- */
diff --git a/src/services/contracts/index.js b/src/services/contracts/index.js
new file mode 100644
index 0000000..7629d99
--- /dev/null
+++ b/src/services/contracts/index.js
@@ -0,0 +1,45 @@
+import WalletState from '../../models/walletState'
+
+/**
+ * Wallet service
+ * @property {EthereumClient} client Ethereum client
+ */
+ class Wallet {
+  constructor(
+    ethereumClient
+  ) {
+    this.client = ethereumClient
+    this.contract
+  }
+
+  async getState() {
+    let walletState = await this.client.syncWallet()
+    let values = []
+    if (!walletState)
+      return new WalletState(null, 0)
+    // if (localStorage.address) {
+    //   const address = JSON.parse(localStorage.address);
+    //   values.push(address.value1)
+    //   values.push(address.value2)
+    // } else {
+      values = await Promise.all([
+        (await this.client.getWalletAddress()).toLowerCase(),
+        this.client.getWalletEthBalance()
+      ])
+    // }
+    const state = new WalletState(
+      values[0],
+      values[1]
+    )
+    // localStorage.address = JSON.stringify({ value1: values[0], value2: values[1] });
+    return state
+  }
+
+  async disconnectWallet() {
+    await this.client.nonsyncWallet();
+    const state = new WalletState(null, 0)
+    return state
+  }
+}
+
+export default Wallet
diff --git a/src/services/provider.js b/src/services/provider.js
index fa025b8..dcc363e 100644
--- a/src/services/provider.js
+++ b/src/services/provider.js
@@ -9,7 +9,7 @@ class ServiceProvider {
    * Creates wallet service.
    * @returns {Wallet} Wallet service
    */
-   static wallet() {
+  static wallet() {
     return new Wallet(
       ethereumClient
     )
diff --git a/src/services/wallet/index.js b/src/services/wallet/index.js
index f9ebfa1..7ee3585 100644
--- a/src/services/wallet/index.js
+++ b/src/services/wallet/index.js
@@ -12,26 +12,48 @@ import WalletState from '../../models/walletState'
   }
 
   async getState() {
-    let walletState = await this.client.syncWallet()
+    let provider = await this.client.syncWallet()
     let values = []
-    if (!walletState)
-      return new WalletState(null, 0)
+
+    if (!provider)
+      return {walletState: new WalletState(null, 0), provider: null}
     // if (localStorage.address) {
     //   const address = JSON.parse(localStorage.address);
     //   values.push(address.value1)
     //   values.push(address.value2)
     // } else {
-      values = await Promise.all([
-        (await this.client.getWalletAddress()).toLowerCase(),
-        this.client.getWalletEthBalance()
-      ])
+    values = await Promise.all([
+      (await this.client.getWalletAddress()).toLowerCase(),
+      this.client.getWalletEthBalance()
+    ])
     // }
     const state = new WalletState(
       values[0],
-      values[1] / Math.pow(10, 18)
+      values[1]
     )
+
     // localStorage.address = JSON.stringify({ value1: values[0], value2: values[1] });
-    return state
+    return {walletState: state, provider: provider}
+  }
+
+  async reconnectWallet() {
+    let provider = await this.client.syncWallet(true)
+    let values = []
+
+    if (!provider)
+      return new WalletState(null, 0)
+
+    values = await Promise.all([
+      (await this.client.getWalletAddress()).toLowerCase(),
+      this.client.getWalletEthBalance()
+    ])
+
+    const state = new WalletState(
+      values[0],
+      values[1]
+    )
+
+    return {walletState: state, provider: provider}
   }
 
   async disconnectWallet() {
@@ -39,6 +61,10 @@ import WalletState from '../../models/walletState'
     const state = new WalletState(null, 0)
     return state
   }
+
+  async sendTokens(amount) {
+    return await this.client.sendTokens(amount)
+  }
 }
 
 export default Wallet
diff --git a/src/store/state.js b/src/store/state.js
index fa897c4..082d04f 100644
--- a/src/store/state.js
+++ b/src/store/state.js
@@ -2,8 +2,6 @@ import ServiceProvider from '../services/provider'
 import WalletState from '../models/walletState'
 import { MarketOrderType } from '../models/marketOrder'
 import { bigIntMax, bigIntMin } from '../utils/common'
-// import router from '../router/index'
-// import { Vote } from '../models/vote'
 
 const wallet = ServiceProvider.wallet()
 
@@ -18,7 +16,8 @@ function state() {
     },
     interface: {
       alert: null
-    }
+    },
+    provider: null
   }
 }
 
@@ -114,8 +113,36 @@ const getters = {
 
 const actions = {
   async syncWallet(context) {
-    const walletState = await wallet.getState()
+    const { walletState, provider } = await wallet.getState()
     context.commit('setWallet', walletState)
+
+    if (provider) {
+
+      // Subscribe to accounts change
+      provider.on("accountsChanged", async () => {
+        const { walletState } = await wallet.getState()
+        context.commit('setWallet', walletState)
+      });
+
+      // Subscribe to chainId change
+      provider.on("chainChanged", async (chainId) => {
+        console.log(chainId);
+        const { walletState } = await wallet.reconnectWallet()
+        context.commit('setWallet', walletState)
+      });
+
+      // Subscribe to provider connection
+      provider.on("connect", (info) => {
+        console.log(info);
+      });
+
+      // Subscribe to provider disconnection
+      provider.on("disconnect", (error) => {
+        console.log(error);
+      });
+
+      context.commit('setProvider', provider)
+    }
     return walletState
   },
 
@@ -124,6 +151,11 @@ const actions = {
     context.commit('setWallet', walletState)
   },
 
+  async sendTokens(context, params) {
+    const amount = params * Math.pow(10, 9)
+    await wallet.sendTokens(amount)
+  },
+
   // async refreshOwnedAssetsData(context) {
   //   let assets = await market.getAssetsOnTheMarket()
   //   context.commit('setAssets', assets)
@@ -273,6 +305,10 @@ const mutations = {
 
   setAlert(state, alert) {
     state.interface.alert = alert
+  },
+
+  setProvider(state, provider) {
+    state.provider = provider
   }
 }
 
diff --git a/src/views/Bridge.vue b/src/views/Bridge.vue
index d9550dc..db69159 100644
--- a/src/views/Bridge.vue
+++ b/src/views/Bridge.vue
@@ -1,5 +1,5 @@
 <template>
-  <div  class="container m-auto">
+  <div  class="m-auto">
     <div class="flex-none lg:flex justify-center">
       <swap></swap>
       <img class="lg:max-w-md lg:ml-4 xl:max-w-xl 2xl:max-w-3xl" src="@/assets/images/bridge.svg">