connect wallet

package.json

@@ -8,10 +8,18 @@
     "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",
     "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",
+    "web3modal": "^1.9.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

src/App.css

@@ -1,3 +1,7 @@
 .Card-Color {
     background-color: #ffedd1!important
 }
+.jYxAGf {
+    margin-left: 0!important;
+    left: 0px!important;
+}

src/App.vue

@@ -1,6 +1,8 @@
 <template>
-  <navbar></navbar>
-  <router-view/>
+  <div class="container mx-auto">
+    <navbar></navbar>
+    <router-view/>
+  </div>
 </template>
 
 <script>

src/components/global/Card.vue

@@ -6,7 +6,7 @@
 
 <script>
 export default {
-  name: 'InputBox',
+  name: 'Card',
   props: {
     msg: String
   }

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>

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>

src/components/global/WalletBanance.vue

@@ -0,0 +1,42 @@
+<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" src="@/assets/icons/eth.svg"/>
+      <div class="pl-2 text-base text-yellow-500">
+        {{ balance + ' $FINU' }}
+      </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" }),
+  },
+  watch: {
+    balance(newValue) {
+      console.log(newValue)
+    }
+  }
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+button:hover {
+  box-shadow: 4px 4px 0 #a34ffe;
+}
+</style>