diff --git a/src/App.vue b/src/App.vue index 95fb929..61ba952 100644 --- a/src/App.vue +++ b/src/App.vue @@ -4,6 +4,8 @@ import TopBar from "./components/TopBar.vue"; diff --git a/src/assets/account.svg b/src/assets/account.svg new file mode 100644 index 0000000..2e0660b --- /dev/null +++ b/src/assets/account.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/chevronDown.svg b/src/assets/chevronDown.svg new file mode 100644 index 0000000..655a1c5 --- /dev/null +++ b/src/assets/chevronDown.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/ethereum.svg b/src/assets/ethereum.svg new file mode 100644 index 0000000..362923a --- /dev/null +++ b/src/assets/ethereum.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/main.css b/src/assets/main.css index bb364a0..d7b270e 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -6,10 +6,10 @@ #app { margin: 0 auto; padding: 2rem 4rem; - height: 100vh; + height: fit-content; + min-height: 100vh; background-image: url( './bg.svg' ); background-size: cover; - font-weight: normal; } @@ -25,6 +25,3 @@ a, background-color: hsla(160, 100%, 37%, 0.2); } } - -@media (min-width: 1024px) { -} diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue deleted file mode 100644 index c201be2..0000000 --- a/src/components/HelloWorld.vue +++ /dev/null @@ -1,41 +0,0 @@ - - - - - diff --git a/src/components/TheWelcome.vue b/src/components/TheWelcome.vue deleted file mode 100644 index af57c51..0000000 --- a/src/components/TheWelcome.vue +++ /dev/null @@ -1,121 +0,0 @@ - - - diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue index 7b3d6dc..757cd4b 100644 --- a/src/components/TopBar.vue +++ b/src/components/TopBar.vue @@ -11,19 +11,14 @@ const connectMetaMask = () => { ethers.connectProvider(); }; -const makeTransaction = () => { - ethers.makeTransaction() - alert("oi") -}; - -const formatWalletAddress = (): string => { +const formatWalletAddress = (): string => { const walletAddressLength = walletAddress.value.length; const initialText = walletAddress.value.substring(0, 5); const finalText = walletAddress.value.substring( walletAddressLength - 5, walletAddressLength - 1 ); - return `${initialText} ... ${finalText}`; + return `${initialText}...${finalText}`; }; const formatWalletBalance = (): string => { @@ -44,28 +39,49 @@ const formatWalletBalance = (): string => { height="75" />
- - -
- - {{ formatWalletAddress() }} - - MBRZ: {{ formatWalletBalance() }} +
@@ -76,7 +92,18 @@ header { @apply flex flex-row justify-between w-full items-center; } -.logo { - display: block; +.default-button{ + @apply px-4 py-2 rounded text-gray-50 font-semibold text-base +} +.account-info{ + @apply flex items-center gap-6 +} + +.default-text{ + @apply text-gray-50 font-semibold text-base +} + +.top-bar-info{ + @apply flex justify-between gap-2 px-4 py-2 border-amber-500 border-2 rounded } diff --git a/src/components/WelcomeItem.vue b/src/components/WelcomeItem.vue deleted file mode 100644 index 6cff194..0000000 --- a/src/components/WelcomeItem.vue +++ /dev/null @@ -1,86 +0,0 @@ - - - diff --git a/src/components/icons/IconCommunity.vue b/src/components/icons/IconCommunity.vue deleted file mode 100644 index ea8ddef..0000000 --- a/src/components/icons/IconCommunity.vue +++ /dev/null @@ -1,12 +0,0 @@ - diff --git a/src/components/icons/IconDocumentation.vue b/src/components/icons/IconDocumentation.vue deleted file mode 100644 index 63a8534..0000000 --- a/src/components/icons/IconDocumentation.vue +++ /dev/null @@ -1,12 +0,0 @@ - diff --git a/src/components/icons/IconEcosystem.vue b/src/components/icons/IconEcosystem.vue deleted file mode 100644 index 385a202..0000000 --- a/src/components/icons/IconEcosystem.vue +++ /dev/null @@ -1,12 +0,0 @@ - diff --git a/src/components/icons/IconSupport.vue b/src/components/icons/IconSupport.vue deleted file mode 100644 index 7db961e..0000000 --- a/src/components/icons/IconSupport.vue +++ /dev/null @@ -1,12 +0,0 @@ - diff --git a/src/components/icons/IconTooling.vue b/src/components/icons/IconTooling.vue deleted file mode 100644 index 660598d..0000000 --- a/src/components/icons/IconTooling.vue +++ /dev/null @@ -1,19 +0,0 @@ - - diff --git a/src/model/Pix.ts b/src/model/Pix.ts new file mode 100644 index 0000000..2bb546d --- /dev/null +++ b/src/model/Pix.ts @@ -0,0 +1,11 @@ +export type Pix = { + pixKey: string; + merchantCity?: string; + merchantName?: string; + value?: number; + transactionId?: string; + message?: string; + cep?: string; + currency?: number; + countryCode?: string; + }; \ No newline at end of file diff --git a/src/router/index.ts b/src/router/index.ts index 7e1bc84..bd6a7af 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -1,5 +1,6 @@ import { createRouter, createWebHistory } from "vue-router"; import HomeView from "../views/HomeView.vue"; +import QrCodeFormVue from "../views/QrCodeForm.vue"; const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), @@ -9,18 +10,10 @@ const router = createRouter({ name: "home", component: HomeView, }, - { - path: "/ethers", - name: "ethers", - // route level code-splitting - // this generates a separate chunk (About.[hash].js) for this route - // which is lazy-loaded when the route is visited. - component: () => import("../views/EthersView.vue"), - }, { path: "/pix", name: "pix", - component: () => import("../views/QrCodeForm.vue"), + component: QrCodeFormVue, }, ], }); diff --git a/src/utils/QrCodePix.ts b/src/utils/QrCodePix.ts index 633fa3e..05f410a 100644 --- a/src/utils/QrCodePix.ts +++ b/src/utils/QrCodePix.ts @@ -1,18 +1,7 @@ import qrcode from "qrcode"; import type { QRCodeToDataURLOptions } from "qrcode"; import { crc16ccitt } from "crc"; - -interface PixParams { - pixKey: string; - merchantCity?: string; - merchantName?: string; - value?: number; - transactionId?: string; - message?: string; - cep?: string; - currency?: number; - countryCode?: string; -} +import {type Pix } from "@/model/Pix"; const pix = ({ pixKey, @@ -24,7 +13,7 @@ const pix = ({ transactionId = "***", currency = 986, countryCode = "BR", -}: PixParams) => { +}: Pix) => { const payloadKeyString = generatePixKey(pixKey, message); const payload: string[] = [ @@ -84,4 +73,4 @@ const formatEMV = (id: string, param: string): string => { return `${id}${len}${param}`; }; -export { type PixParams, pix }; +export { pix }; diff --git a/src/utils/ethers.ts b/src/utils/ethers.ts index c3291d5..3046c91 100644 --- a/src/utils/ethers.ts +++ b/src/utils/ethers.ts @@ -8,12 +8,9 @@ import addresses from "../../../p2pix-smart-contracts/deploys/localhost.json" const updateWalletStatus = async (walletAddress: string) => { const etherStore = useEtherStore(); - const window_ = window as any; - const connection = window_.ethereum; - - if (!connection) return; - - const provider = new ethers.providers.Web3Provider(connection); + const provider = getProvider(); + if(!provider) return; + const signer = provider.getSigner(); const contract = new ethers.Contract(addresses.token, mocktoken.abi, signer); @@ -29,33 +26,27 @@ const connectProvider = async () => { const connection = window_.ethereum; let provider: ethers.providers.Web3Provider | null = null; - if (connection) { + if (!connection) return; + provider = new ethers.providers.Web3Provider(connection); + const signer = provider.getSigner(); + const contract = new ethers.Contract(addresses.token, mocktoken.abi, signer); - provider = new ethers.providers.Web3Provider(connection); - const signer = provider.getSigner(); - const contract = new ethers.Contract(addresses.token, mocktoken.abi, signer); + const walletAddress = await provider.send("eth_requestAccounts", []); + const balance = await contract.balanceOf(walletAddress[0]); - const walletAddress = await provider.send("eth_requestAccounts", []); - const balance = await contract.balanceOf(walletAddress[0]); + etherStore.setWalletAddress(walletAddress[0]); + etherStore.setBalance(String(balance)); - etherStore.setWalletAddress(walletAddress[0]); - etherStore.setBalance(String(balance)); - - connection.on("accountsChanged", (accounts: string[]) => { - updateWalletStatus(accounts[0]); - }); - } + connection.on("accountsChanged", (accounts: string[]) => { + updateWalletStatus(accounts[0]); + }); }; const makeTransaction = async () => { const etherStore = useEtherStore(); - const window_ = window as any; - const connection = window_.ethereum; - let provider: ethers.providers.Web3Provider | null = null; + const provider = getProvider(); + if(!provider) return; - if (!connection) return; - - provider = new ethers.providers.Web3Provider(connection); const signer = provider.getSigner(); const contract = new ethers.Contract(addresses.token, mocktoken.abi, signer); @@ -71,4 +62,13 @@ const formatEther = (balance: string) => { return formatted; }; +const getProvider = (): ethers.providers.Web3Provider | null => { + const window_ = window as any; + const connection = window_.ethereum; + + if (!connection) return null; + + return new ethers.providers.Web3Provider(connection); +} + export default { connectProvider, formatEther, makeTransaction }; diff --git a/src/views/EthersView.vue b/src/views/EthersView.vue deleted file mode 100644 index c753af0..0000000 --- a/src/views/EthersView.vue +++ /dev/null @@ -1,30 +0,0 @@ - - - - - diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 23a53cd..dd302d7 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -1,9 +1,5 @@ diff --git a/src/views/QrCodeForm.vue b/src/views/QrCodeForm.vue index 215274c..ec7cdb0 100644 --- a/src/views/QrCodeForm.vue +++ b/src/views/QrCodeForm.vue @@ -49,145 +49,150 @@ const submit = () => {