Merge pull request #5 from liftlearning/search-tokens

Search Tokens component

package.json

@@ -8,8 +8,8 @@
     "serve": "vue-cli-service serve",
     "build-only": "vite build",
     "type-check": "vue-tsc --noEmit",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
-    "lint:fix": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore --fix"
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore",
+    "lint:fix": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
   },
   "dependencies": {
     "@headlessui/vue": "^1.7.3",

src/assets/arrow.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 1.5C4 0.947715 4.44772 0.5 5 0.5C5.55229 0.5 6 0.947715 6 1.5V12.0858L8.29289 9.79289C8.68342 9.40237 9.31658 9.40237 9.70711 9.79289C10.0976 10.1834 10.0976 10.8166 9.70711 11.2071L5.70711 15.2071C5.31658 15.5976 4.68342 15.5976 4.29289 15.2071L0.292893 11.2071C-0.0976311 10.8166 -0.0976311 10.1834 0.292893 9.79289C0.683417 9.40237 1.31658 9.40237 1.70711 9.79289L4 12.0858V1.5Z" fill="white"/>
+</svg>

src/assets/brz.svg

@@ -0,0 +1,18 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_257_714)">
+<path d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z" fill="#170636"/>
+<path d="M24.269 9.72809L20.1404 13.8568L24.269 17.9854L28.3977 13.8568L24.269 9.72809Z" fill="#14B23D"/>
+<path d="M7.76489 9.68823L3.63623 13.8169L7.76489 17.9456L11.8936 13.8169L7.76489 9.68823Z" fill="#FFC100"/>
+<path d="M16.0261 17.9628L11.8975 22.0915L16.0261 26.2202L20.1548 22.0915L16.0261 17.9628Z" fill="#14B23D"/>
+<path d="M7.76196 9.69141L16.0274 17.9568H24.2549L15.9895 9.69141H7.76196Z" fill="url(#paint0_linear_257_714)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_257_714" x1="9.81965" y1="7.64005" x2="13.4843" y2="22.2149" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFDC00"/>
+<stop offset="1" stop-color="#07E58A"/>
+</linearGradient>
+<clipPath id="clip0_257_714">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/polygon.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM14.7232 9.76501C15.0157 9.6188 15.3446 9.6188 15.6005 9.76501L18.5614 11.483C18.8538 11.6658 19 11.9582 19 12.2507V15.7232C19 16.0522 18.8172 16.3446 18.5614 16.4909L15.6005 18.2089C15.3081 18.3551 14.9791 18.3551 14.7232 18.2089L11.7624 16.4909C11.47 16.3081 11.3238 16.0157 11.3238 15.7232V14.517L12.7128 13.7128V14.8825C12.7128 15.2115 12.8956 15.5039 13.1514 15.6501L14.7232 16.564C15.0157 16.7102 15.3446 16.7102 15.6005 16.564L17.1358 15.6501C17.4282 15.4674 17.5744 15.1749 17.5744 14.8825V13.0548C17.5744 12.7258 17.3916 12.4334 17.1358 12.2872L15.564 11.3734C15.2715 11.2272 14.9426 11.2272 14.6867 11.3734L12.6762 12.5431L11.2872 13.3473L9.27676 14.517C8.98433 14.6632 8.65535 14.6632 8.39948 14.517L5.43864 12.799C5.14621 12.6162 5 12.3238 5 12.0313V8.5953C5 8.30287 5.14621 8.01044 5.43864 7.86423L8.43603 6.10966C8.72846 5.96345 9.05744 5.96345 9.31332 6.10966L12.2376 7.82768C12.53 8.01044 12.6762 8.30287 12.6762 8.5953V9.83812L11.2872 10.6423V9.43603C11.2872 9.10705 11.1044 8.81462 10.8486 8.66841L9.27676 7.71802C8.98433 7.5718 8.65535 7.5718 8.39948 7.71802L6.82768 8.63185C6.53525 8.81462 6.38903 9.10705 6.38903 9.39948V11.2272C6.38903 11.5561 6.5718 11.8486 6.82768 11.9948L8.39948 12.9452C8.69191 13.0914 9.02089 13.0914 9.27676 12.9452L11.2872 11.7389L12.6762 10.9713L14.7232 9.76501Z" fill="#6366F1"/>
+</svg>

src/components/CustomButton.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+const props = defineProps({
+  text: String,
+  isDisabled: Boolean,
+});
+
+const emit = defineEmits(["buttonClicked"]);
+</script>
+
+<template>
+  <button
+    type="button"
+    class="button"
+    @click="emit('buttonClicked')"
+    v-bind:class="{ 'opacity-70': props.isDisabled }"
+    :disabled="props.isDisabled ? props.isDisabled : false"
+  >
+    {{ props.text }}
+  </button>
+</template>
+
+<style scoped>
+.button {
+  @apply rounded-lg w-full text-base font-semibold text-gray-900 py-4 bg-amber-400;
+}
+</style>

src/components/SearchComponent.vue

@@ -0,0 +1,193 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import CustomButton from "../components/CustomButton.vue";
+import { debounce } from "@/utils/debounce";
+import { useEtherStore } from "@/store/ether";
+import { storeToRefs } from "pinia";
+import blockchain from "../utils/blockchain";
+
+const etherStore = useEtherStore();
+
+const { walletAddress, depositList } = storeToRefs(etherStore);
+
+const tokenValue = ref(0);
+const enableSelectButton = ref(false);
+const hasLiquidity = ref(true);
+const validDecimals = ref(true);
+const selectedDeposit = ref();
+
+const connectAccount = async () => {
+  await blockchain.connectProvider();
+  verifyLiquidity();
+};
+
+const handleInputEvent = (event: any) => {
+  const { value } = event.target;
+
+  tokenValue.value = Number(value);
+
+  if (decimalCount(tokenValue.value) > 2) {
+    validDecimals.value = false;
+    enableSelectButton.value = false;
+    return;
+  }
+  validDecimals.value = true;
+
+  verifyLiquidity();
+};
+
+const decimalCount = (num: Number) => {
+  const numStr = String(num);
+  if (numStr.includes(".")) {
+    return numStr.split(".")[1].length;
+  }
+  return 0;
+};
+
+const verifyLiquidity = () => {
+  enableSelectButton.value = false;
+  selectedDeposit.value = null;
+
+  if (!walletAddress.value || tokenValue.value == 0) return;
+
+  depositList.value.forEach((deposit) => {
+    const p2pixTokenValue = blockchain.verifyDepositAmmount(
+      deposit.args.amount
+    );
+
+    if (
+      tokenValue.value!! <= Number(p2pixTokenValue) &&
+      tokenValue.value!! != 0
+    ) {
+      enableSelectButton.value = true;
+      hasLiquidity.value = true;
+      selectedDeposit.value = deposit;
+      return;
+    }
+  });
+
+  if (!enableSelectButton.value) {
+    hasLiquidity.value = false;
+  }
+};
+
+const emit = defineEmits(["tokenBuy"]);
+</script>
+
+<template>
+  <div class="page">
+    <div class="text-container">
+      <span class="text font-extrabold text-5xl max-w-[29rem]"
+        >Adquira cripto com apenas um Pix</span
+      >
+      <span class="text font-medium text-base max-w-[28rem]"
+        >Digite um valor, confira a oferta, conecte sua carteira e receba os
+        tokens após realizar o Pix</span
+      >
+    </div>
+    <div class="blur-container">
+      <div
+        class="flex flex-col w-full bg-white px-10 py-5 rounded-lg border-y-10"
+      >
+        <div class="flex justify-between w-full items-center">
+          <input
+            type="number"
+            class="border-none outline-none text-lg text-gray-900 w-fit"
+            v-bind:class="{
+              'font-semibold': tokenValue != undefined,
+              'text-xl': tokenValue != undefined,
+            }"
+            @input="debounce(handleInputEvent, 500)($event)"
+            placeholder="0  "
+            step=".01"
+          />
+          <div
+            class="flex flex-row p-2 px-3 bg-gray-300 rounded-3xl min-w-fit gap-1"
+          >
+            <img alt="Token image" class="w-fit" src="@/assets/brz.svg" />
+            <span class="text-gray-900 text-lg w-fit" id="brz">BRZ</span>
+          </div>
+        </div>
+
+        <div class="custom-divide py-2"></div>
+        <div class="flex justify-between pt-2" v-if="hasLiquidity">
+          <p class="text-gray-500 font-normal text-sm w-auto">
+            ~ R$ {{ tokenValue.toFixed(2) }}
+          </p>
+          <div class="flex gap-2">
+            <img
+              alt="Polygon image"
+              src="@/assets/polygon.svg"
+              width="24"
+              height="24"
+            />
+            <img
+              alt="Ethereum image"
+              src="@/assets/ethereum.svg"
+              width="24"
+              height="24"
+            />
+          </div>
+        </div>
+        <div class="flex pt-2 justify-center" v-if="!validDecimals">
+          <span class="text-red-500 font-normal text-sm"
+            >Por favor utilize no máximo 2 casas decimais</span
+          >
+        </div>
+        <div class="flex pt-2 justify-center" v-else-if="!hasLiquidity">
+          <span class="text-red-500 font-normal text-sm"
+            >Atualmente não há liquidez nas redes para sua demanda</span
+          >
+        </div>
+      </div>
+      <CustomButton
+        v-if="!walletAddress"
+        :text="'Conectar carteira'"
+        @buttonClicked="connectAccount()"
+      />
+      <CustomButton
+        v-if="walletAddress"
+        :text="'Confirmar compra'"
+        :is-disabled="!enableSelectButton"
+        @buttonClicked="emit('tokenBuy', { selectedDeposit, tokenValue })"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.custom-divide {
+  width: 100%;
+  border-bottom: 1px solid #d1d5db;
+}
+.bottom-position {
+  top: -20px;
+  right: 50%;
+  transform: translateX(50%);
+}
+
+.page {
+  @apply flex flex-col items-center justify-center w-full mt-16;
+}
+
+.text-container {
+  @apply flex flex-col items-center justify-center gap-4;
+}
+
+.text {
+  @apply text-gray-800 text-center;
+}
+
+.blur-container {
+  @apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-10;
+}
+
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+}
+</style>

src/components/TopBar.vue

@@ -37,6 +37,7 @@ const formatWalletBalance = (): string => {
       src="@/assets/logo.svg"
       width="75"
       height="75"
+      @load="connectMetaMask()"
     />
     <div class="flex gap-4 items-center">
       <button type="button" class="default-button">Quero vender</button>

src/router/index.ts

@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from "vue-router";
 import HomeView from "../views/HomeView.vue";
 import QrCodeFormVue from "../views/QrCodeForm.vue";
+import MockView from "../views/MockView.vue";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -15,6 +16,11 @@ const router = createRouter({
       name: "pix",
       component: QrCodeFormVue,
     },
+    {
+      path: "/mock",
+      name: "mock",
+      component: MockView,
+    },
   ],
 });
 

src/store/ether.ts

@@ -4,6 +4,7 @@ export const useEtherStore = defineStore("ether", {
   state: () => ({
     walletAddress: "",
     balance: "",
+    depositList: [{}],
   }),
   actions: {
     setWalletAddress(walletAddress: string) {
@@ -12,5 +13,8 @@ export const useEtherStore = defineStore("ether", {
     setBalance(balance: string) {
       this.balance = balance;
     },
+    setDepositList(depositList: any[]) {
+      this.depositList = depositList;
+    },
   },
 });

src/utils/blockchain.ts

@@ -1,11 +1,13 @@
 import { useEtherStore } from "@/store/ether";
-import { ethers } from "ethers";
+import { BigNumber, ethers } from "ethers";
 
 // smart contract imports
 import mockToken from "./smart_contract_files/MockToken.json";
-//import p2pix from "./smart_contract_files/P2PIX.json";
+import p2pix from "./smart_contract_files/P2PIX.json";
 import addresses from "./smart_contract_files/localhost.json";
 
+import { wallets } from "./smart_contract_files/wallets.json";
+
 const updateWalletStatus = async (walletAddress: string) => {
   const etherStore = useEtherStore();
   const provider = getProvider();
@@ -37,15 +39,20 @@ const connectProvider = async () => {
   etherStore.setWalletAddress(walletAddress[0]);
   etherStore.setBalance(String(balance));
 
+  const p2pContract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
+
+  const filter = p2pContract.filters.DepositAdded(null);
+  const events = await p2pContract.queryFilter(filter);
+
+  console.log(events);
+  etherStore.setDepositList(events);
+
   connection.on("accountsChanged", (accounts: string[]) => {
     updateWalletStatus(accounts[0]);
   });
 };
 
-const makeTransaction = async (
-  receiverAccountAddress = "0x70997970C51812dc3A010C7d01b50e0d17dc79C8",
-  ammount = "100.0"
-) => {
+const splitTokens = async () => {
   const etherStore = useEtherStore();
   const provider = getProvider();
   if (!provider) return;
@@ -53,13 +60,78 @@ const makeTransaction = async (
   const signer = provider.getSigner();
   const contract = new ethers.Contract(addresses.token, mockToken.abi, signer);
 
-  const tx = await contract.transfer(
-    receiverAccountAddress,
-    ethers.utils.parseEther(ammount)
+  for (let i = 0; i < wallets.length; i++) {
+    const tx = await contract.transfer(
+      wallets[i],
+      ethers.utils.parseEther("4000000.0")
+    );
+    await tx.wait();
+    updateWalletStatus(etherStore.walletAddress);
+  }
+};
+
+const mockDeposit = async (tokenQty = "1000.0", pixKey = "00011122233") => {
+  const etherStore = useEtherStore();
+  const provider = getProvider();
+  if (!provider) return;
+
+  const signer = provider.getSigner();
+
+  const tokenContract = new ethers.Contract(
+    addresses.token,
+    mockToken.abi,
+    signer
   );
-  await tx.wait();
+  const p2pContract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
+
+  // first get the approval
+  const apprv = await tokenContract.approve(
+    addresses.p2pix,
+    ethers.utils.parseEther(tokenQty)
+  );
+  await apprv.wait();
+
+  // deposit
+  const deposit = await p2pContract.deposit(
+    addresses.token,
+    ethers.utils.parseEther(tokenQty),
+    pixKey
+  );
+  await deposit.wait();
 
   updateWalletStatus(etherStore.walletAddress);
+
+  const filter = p2pContract.filters.DepositAdded(null);
+  const events = await p2pContract.queryFilter(filter);
+
+  console.log(events);
+
+  etherStore.setDepositList(events);
+};
+
+const countDeposit = async () => {
+  const provider = getProvider();
+  if (!provider) return;
+
+  const signer = provider.getSigner();
+  const contract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
+
+  const count = await contract.depositCount();
+
+  console.log(Number(count));
+};
+
+const mapDeposits = async (depositId: BigNumber) => {
+  const provider = getProvider();
+  if (!provider) return;
+
+  const signer = provider.getSigner();
+  const contract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
+
+  const deposit = await contract.mapDeposits(depositId);
+
+  console.log(deposit);
+  return deposit;
 };
 
 const formatEther = (balance: string) => {
@@ -67,6 +139,10 @@ const formatEther = (balance: string) => {
   return formatted;
 };
 
+const verifyDepositAmmount = (ammountBigNumber: BigNumber): string => {
+  return ethers.utils.formatEther(ammountBigNumber);
+};
+
 const getProvider = (): ethers.providers.Web3Provider | null => {
   const window_ = window as any;
   const connection = window_.ethereum;
@@ -76,4 +152,12 @@ const getProvider = (): ethers.providers.Web3Provider | null => {
   return new ethers.providers.Web3Provider(connection);
 };
 
-export default { connectProvider, formatEther, makeTransaction };
+export default {
+  connectProvider,
+  formatEther,
+  splitTokens,
+  mockDeposit,
+  countDeposit,
+  mapDeposits,
+  verifyDepositAmmount,
+};

src/utils/debounce.ts

@@ -0,0 +1,9 @@
+export const debounce = (func: any, delay: number) => {
+  let timer: any = null;
+  return function (this: unknown, ...args: any) {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      func.apply(this, args);
+    }, delay);
+  };
+};

src/utils/smart_contract_files/wallets.json

@@ -0,0 +1,6 @@
+{
+    "wallets":[
+        "0x70997970C51812dc3A010C7d01b50e0d17dc79C8",
+        "0x3C44CdDdB6a900fa2b585dd299e03d12FA4293BC"
+    ]
+}

src/views/HomeView.vue

@@ -1,5 +1,21 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import SearchComponent from "../components/SearchComponent.vue";
+import blockchain from "../utils/blockchain";
+
+const confirmBuyClick = async ({ selectedDeposit, tokenValue }: any) => {
+  // finish buy screen
+  console.log(selectedDeposit);
+  let depositDetail;
+  await blockchain
+    .mapDeposits(selectedDeposit["args"]["depositID"])
+    .then((deposit) => (depositDetail = deposit));
+  console.log(tokenValue);
+  console.log(depositDetail);
+};
+</script>
 
 <template>
-  <h2 v-bind:hidden="true">Home View</h2>
+  <SearchComponent @token-buy="confirmBuyClick" />
 </template>
+
+<style scoped></style>

src/views/MockView.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import type { BigNumber } from "ethers";
+import { storeToRefs } from "pinia";
+import { ref } from "vue";
+import { useEtherStore } from "../store/ether";
+import blockchain from "../utils/blockchain";
+
+const etherStore = useEtherStore();
+
+const { depositList } = storeToRefs(etherStore);
+
+const depositValue = ref<Number>();
+const depositPixKey = ref<string>("");
+
+const splitTokens = () => {
+  blockchain.splitTokens();
+};
+
+const mockDeposit = () => {
+  if (!depositValue.value || !depositPixKey.value) return;
+  blockchain.mockDeposit(depositValue.value.toString(), depositPixKey.value);
+};
+
+const countDeposit = () => {
+  blockchain.countDeposit();
+};
+
+const mapDeposit = (depositId: BigNumber) => {
+  blockchain.mapDeposits(depositId);
+};
+</script>
+
+<template>
+  <div class="page">
+    <div class="flex flex-col gap-4 justify-start items-start w-2/3">
+      <button type="button" class="default-button" @click="countDeposit()">
+        Contar depósitos
+      </button>
+
+      <div class="flex gap-4 w-full justify-between">
+        <input
+          type="number"
+          class="default-input"
+          placeholder="Quantidade de tokens"
+          v-model="depositValue"
+        />
+
+        <input
+          type="text"
+          class="default-input"
+          placeholder="Chave pix"
+          v-model="depositPixKey"
+        />
+
+        <button type="button" class="default-button" @click="mockDeposit()">
+          Mockar depósitos
+        </button>
+      </div>
+
+      <button type="button" class="default-button" @click="splitTokens()">
+        Dividir tokens
+      </button>
+    </div>
+
+    <ul class="flex flex-col justify-center items-center gap-4">
+      <li
+        class="text-gray-900 font-semibold text-lg cursor-pointer border-2 border-amber-400 p-2 rounded-md bg-amber-200"
+        v-for="deposit in depositList"
+        :key="deposit['blockNumber']"
+        @click="mapDeposit(deposit['args']['depositID'])"
+      >
+        Address:<br />{{ deposit["args"]["0"] }}<br />
+        MRBZ: {{ blockchain.formatEther(deposit["args"]["amount"]) }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+header {
+  @apply flex flex-row justify-between w-full items-center;
+}
+
+.default-button {
+  @apply p-2 rounded border-2 border-amber-400 text-gray-50 font-extrabold text-base w-full;
+}
+
+.default-input {
+  @apply border-none outline-none text-lg text-gray-900 w-64 p-2 rounded-lg;
+}
+
+.page {
+  @apply flex gap-8 mt-24;
+}
+
+@media (max-width: 1024px) {
+  .page {
+    @apply flex-wrap;
+  }
+}
+</style>