hueso/P2Pix-Front-End
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve Listing Component and import with alias in other components

Browse Source
This commit is contained in:
RcleydsonR 2023-01-24 22:25:38 -03:00
parent 6b8bbc9e6a
commit 4b08b6df4b
7 changed files with 21 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import CustomButton from "@/components/CustomButton.vue"; import CustomButton from "@/components/CustomButton/CustomButton.vue";
import ListingComponent from "@/components/ListingComponent.vue"; import ListingComponent from "@/components/ListingComponent/ListingComponent.vue";
import type { Event } from "ethers"; import type { Event } from "ethers";
// props // props

11
src/components/ListingComponent/ListingComponent.vue
View File

@ -3,7 +3,7 @@ import { NetworkEnum } from "@/model/NetworkEnum";
import type { ValidDeposit } from "@/model/ValidDeposit"; import type { ValidDeposit } from "@/model/ValidDeposit";
import { useEtherStore } from "@/store/ether"; import { useEtherStore } from "@/store/ether";
import { formatEther } from "@ethersproject/units"; import { formatEther } from "@ethersproject/units";
import type { Event } from "ethers"; import type { BigNumber, Event } from "ethers";
import { ref, watch } from "vue"; import { ref, watch } from "vue";
// props // props
@ -55,6 +55,11 @@ const getEventName = (event: string | undefined): string => {
return possibleEventName[event]; return possibleEventName[event];
}; };
const getAmountFormatted = (amount?: BigNumber): string => {
if(!amount) return ""
return formatEther(amount);
}
// watch props changes // watch props changes
watch(props, async (): Promise<void> => { watch(props, async (): Promise<void> => {
const itemsToShowQty = itemsToShow.value.length; const itemsToShowQty = itemsToShow.value.length;
@ -99,7 +104,7 @@ showInitialItems();
> >
<span class="last-release-info"> <span class="last-release-info">
{{ {{
isValidDeposit(item) ? item.remaining : formatEther(item.args?.amount) isValidDeposit(item) ? item.remaining : getAmountFormatted(item.args?.amount)
}} }}
BRZ BRZ
</span> </span>
@ -137,7 +142,7 @@ showInitialItems();
" "
> >
<span class="last-release-info">Retirar</span> <span class="last-release-info">Retirar</span>
<img alt="Cancel image" src="@/assets/withdraw.svg" /> <img alt="Withdraw image" src="@/assets/withdraw.svg" />
</div> </div>
</div> </div>
<div <div

2
src/components/SearchComponent.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, watch } from "vue"; import { ref, watch } from "vue";
import CustomButton from "../components/CustomButton.vue"; import CustomButton from "@/components/CustomButton/CustomButton.vue";
import { debounce } from "@/utils/debounce"; import { debounce } from "@/utils/debounce";
import { useEtherStore } from "@/store/ether"; import { useEtherStore } from "@/store/ether";
import { storeToRefs } from "pinia"; import { storeToRefs } from "pinia";

8
src/components/TopBar/TopBar.vue
View File

@ -1,11 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { storeToRefs } from "pinia"; import { storeToRefs } from "pinia";
import { useEtherStore } from "../../store/ether"; import { useEtherStore } from "@/store/ether";
import { ref } from "vue"; import { ref } from "vue";
import { NetworkEnum } from "@/model/NetworkEnum"; import { NetworkEnum } from "@/model/NetworkEnum";
import { connectProvider, requestNetworkChange } from "../blockchain/provider"; import { connectProvider, requestNetworkChange } from "@/blockchain/provider";
import ethereumImage from "../assets/ethereum.svg"; import ethereumImage from "@/assets/ethereum.svg";
import polygonImage from "../assets/polygon.svg"; import polygonImage from "@/assets/polygon.svg";
// Store reference // Store reference
const etherStore = useEtherStore(); const etherStore = useEtherStore();

8
src/views/HomeView.vue
View File

@ -1,10 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import SearchComponent from "../components/SearchComponent.vue"; import SearchComponent from "@/components/SearchComponent.vue";
import ValidationComponent from "../components/LoadingComponent.vue"; import ValidationComponent from "@/components/LoadingComponent.vue";
import BuyConfirmedComponent from "@/components/BuyConfirmedComponent.vue"; import BuyConfirmedComponent from "@/components/BuyConfirmedComponent/BuyConfirmedComponent.vue";
import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue";
import { useEtherStore } from "@/store/ether"; import { useEtherStore } from "@/store/ether";
import QrCodeComponent from "../components/QrCodeComponent.vue"; import QrCodeComponent from "@/components/QrCodeComponent.vue";
import { storeToRefs } from "pinia"; import { storeToRefs } from "pinia";
import { addLock, releaseLock } from "@/blockchain/buyerMethods"; import { addLock, releaseLock } from "@/blockchain/buyerMethods";
import { updateWalletStatus } from "@/blockchain/wallet"; import { updateWalletStatus } from "@/blockchain/wallet";

2
src/views/ManageBidsView.vue
View File

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { useEtherStore } from "@/store/ether"; import { useEtherStore } from "@/store/ether";
import { storeToRefs } from "pinia"; import { storeToRefs } from "pinia";
import ListingComponent from "@/components/ListingComponent.vue"; import ListingComponent from "@/components/ListingComponent/ListingComponent.vue";
import type { BigNumber } from "ethers"; import type { BigNumber } from "ethers";
import { ref, watch, onMounted } from "vue"; import { ref, watch, onMounted } from "vue";
import { cancelDeposit, withdrawDeposit } from "@/blockchain/buyerMethods"; import { cancelDeposit, withdrawDeposit } from "@/blockchain/buyerMethods";

2
src/views/TransactionHistoryView.vue
View File

@ -2,7 +2,7 @@
import { useEtherStore } from "@/store/ether"; import { useEtherStore } from "@/store/ether";
import { storeToRefs } from "pinia"; import { storeToRefs } from "pinia";
import { ref, watch, onMounted } from "vue"; import { ref, watch, onMounted } from "vue";
import ListingComponent from "@/components/ListingComponent.vue"; import ListingComponent from "@/components/ListingComponent/ListingComponent.vue";
import { listAllTransactionByWalletAddress } from "@/blockchain/wallet"; import { listAllTransactionByWalletAddress } from "@/blockchain/wallet";
import type { Event } from "ethers"; import type { Event } from "ethers";
import type { ValidDeposit } from "@/model/ValidDeposit"; import type { ValidDeposit } from "@/model/ValidDeposit";