seller flow + blockchain integration

src/components/QrCodeComponent.vue

@@ -11,6 +11,8 @@ const props = defineProps({
   tokenValue: Number,
 });
 
+console.log(props.pixTarget, props.tokenValue);
+
 const qrCode = ref<string>("");
 const qrCodePayload = ref<string>("");
 const isPixValid = ref<boolean>(false);

src/components/SellerSteps/SendNetwork.vue

@@ -4,9 +4,11 @@ import CustomButton from "@/components/CustomButton.vue";
 // Emits
 const emit = defineEmits(["sendNetwork"]);
 
-const sendNetworkHandle = () => {
-  emit("sendNetwork");
-};
+// props and store references
+const props = defineProps({
+  pixKey: String,
+  offer: Number,
+});
 </script>
 
 <template>
@@ -27,12 +29,12 @@ const sendNetworkHandle = () => {
       >
         <div>
           <p>Tokens ofertados</p>
-          <p class="text-2xl text-gray-900">100 BRZ</p>
+          <p class="text-2xl text-gray-900">{{ props.offer }} BRZ</p>
         </div>
         <div class="my-3">
           <p>Chave Pix</p>
           <p class="text-xl text-gray-900 break-words">
-            c02942far7047f6shri5ifh371908973
+            {{ props.pixKey }}
           </p>
         </div>
         <div class="mb-5">
@@ -44,7 +46,7 @@ const sendNetworkHandle = () => {
         </div>
         <CustomButton
           :text="'Enviar para a rede'"
-          @buttonClicked="sendNetworkHandle()"
+          @buttonClicked="emit('sendNetwork')"
         />
       </div>
     </div>

src/components/SellerSteps/WantSellComponent.vue

@@ -14,12 +14,6 @@ const validDecimals = ref(true);
 // Emits
 const emit = defineEmits(["approveTokens"]);
 
-// Blockchain methods
-const approveTokensHandle = async () => {
-  console.log(offer.value, pixKey.value);
-  emit("approveTokens");
-};
-
 // Debounce methods
 const handleInputEvent = (event: any) => {
   const { value } = event.target;
@@ -106,7 +100,7 @@ const decimalCount = (num: Number) => {
       </div>
       <CustomButton
         :text="'Aprovar tokens'"
-        @buttonClicked="approveTokensHandle()"
+        @buttonClicked="emit('approveTokens', { offer, pixKey })"
       />
     </div>
   </div>

src/components/TopBar.vue

@@ -170,7 +170,10 @@ const disconnectUser = () => {
           <div
             class="top-bar-info cursor-pointer"
             @click="
-              [(menuOpenToggle = !menuOpenToggle), (currencyMenuOpenToggle = false)]
+              [
+                (menuOpenToggle = !menuOpenToggle),
+                (currencyMenuOpenToggle = false),
+              ]
             "
             @mouseover="menuHoverToggle = true"
             @mouseout="menuHoverToggle = false"

src/utils/blockchain.ts

@@ -241,8 +241,7 @@ const getProvider = (): ethers.providers.Web3Provider | null => {
 };
 
 // Deposit methods
-// Gets value and pix key from user's form to create a deposit in the blockchain
-const addDeposit = async (tokenQty: Number, pixKey: string) => {
+const approveTokens = async (tokenQty: Number) => {
   const provider = getProvider();
   if (!provider) return;
 
@@ -253,16 +252,23 @@ const addDeposit = async (tokenQty: Number, pixKey: string) => {
     mockToken.abi,
     signer
   );
-  const p2pContract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
 
-  // First get the approval
   const apprv = await tokenContract.approve(
     addresses.p2pix,
     formatEther(String(tokenQty))
   );
   await apprv.wait();
+  return apprv;
+};
+
+// Gets value and pix key from user's form to create a deposit in the blockchain
+const addDeposit = async (tokenQty: Number, pixKey: String) => {
+  const provider = getProvider();
+  if (!provider) return;
+
+  const signer = provider.getSigner();
+  const p2pContract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
 
-  // Now we make the deposit
   const deposit = await p2pContract.deposit(
     addresses.token,
     formatEther(String(tokenQty)),
@@ -391,6 +397,7 @@ export default {
   listReleaseTransactionByWalletAddress,
   listDepositTransactionByWalletAddress,
   listLockTransactionByWalletAddress,
+  approveTokens,
   addDeposit,
   mapDeposits,
   formatBigNumber,

src/views/BidHistoryView.vue

@@ -1,5 +1,4 @@
-<script setup lang="ts">
-</script>
+<script setup lang="ts"></script>
 
 <template>
   <div class="page">Histórico de ofertas</div>

src/views/ManageBidsView.vue

@@ -1,5 +1,4 @@
-<script setup lang="ts">
-</script>
+<script setup lang="ts"></script>
 
 <template>
   <div class="page">Gerenciar Ofertas</div>

src/views/SellerView.vue

@@ -2,9 +2,11 @@
 import WantSellComponent from "../components/SellerSteps/WantSellComponent.vue";
 import SendNetwork from "../components/SellerSteps/SendNetwork.vue";
 import ValidationComponent from "../components/LoadingComponent.vue";
+import blockchain from "../utils/blockchain";
 
 import { ref } from "vue";
 import router from "@/router";
+import { pix } from "@/utils/QrCodePix";
 
 enum Step {
   Search,
@@ -15,24 +17,40 @@ enum Step {
 const flowStep = ref<Step>(Step.Sell);
 const loading = ref<boolean>(false);
 
+const offerValue = ref<number>();
+const pixKeyBuyer = ref<string>("");
+
 const walletConnect = async () => {
   flowStep.value = Step.Sell;
 };
 
-const approveTokens = async () => {
+// Verificar tipagem
+const approveOffer = async ({ offer, pixKey }: any) => {
   loading.value = true;
-  setTimeout(() => {
-    loading.value = false;
+  try {
+    offerValue.value = offer;
+    pixKeyBuyer.value = pixKey;
+    await blockchain.approveTokens(offerValue.value);
     flowStep.value = Step.Network;
-  }, 2000);
+    loading.value = false;
+  } catch {
+    flowStep.value = Step.Sell;
+    loading.value = false;
+  }
 };
 
 const sendNetwork = async () => {
   loading.value = true;
-  setTimeout(() => {
+  try {
+    if (offerValue.value && pixKeyBuyer.value) {
+      await blockchain.addDeposit(offerValue.value, pixKeyBuyer.value);
+      flowStep.value = Step.Sell;
+      loading.value = false;
+    }
+  } catch {
+    flowStep.value = Step.Network;
     loading.value = false;
-    router.push("/");
-  }, 2000);
+  }
 };
 </script>
 
@@ -42,14 +60,19 @@ const sendNetwork = async () => {
     @token-buy="walletConnect"
   /> -->
   <div v-if="flowStep == Step.Sell">
-    <WantSellComponent v-if="!loading" @approve-tokens="approveTokens" />
+    <WantSellComponent v-if="!loading" @approve-tokens="approveOffer" />
     <ValidationComponent
       v-if="loading"
       :message="'A transação está sendo enviada para a rede.'"
     />
   </div>
   <div v-if="flowStep == Step.Network">
-    <SendNetwork v-if="!loading" @send-network="sendNetwork" />
+    <SendNetwork
+      :pixKey="pixKeyBuyer"
+      :offer="Number(offerValue)"
+      v-if="!loading"
+      @send-network="sendNetwork"
+    />
     <ValidationComponent
       v-if="loading"
       :message="'A transação está sendo enviada para a rede.'"