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

Compare commits

base: hueso:develop
Branches Tags
hueso:develop hueso:refactor/network-dynamize hueso:type-check hueso:buy-refactor hueso:rsk
..
compare: hueso:a5f02a99b13519bac870dc3f4e5df832eddaacc2
Branches Tags
hueso:develop hueso:refactor/network-dynamize hueso:type-check hueso:buy-refactor hueso:rsk

3 Commits
develop ... a5f02a99b1

Author SHA1 Message Date
hueso
a5f02a99b1 remove deprecated NetworkEnum 2025-10-11 21:32:53 -03:00
hueso
2890a2e982 fixed network selection (hex string) and icons 2025-10-11 21:31:53 -03:00
hueso
0ca05b106d refactored network selection 2025-10-11 02:17:07 -03:00
106 changed files with 22886 additions and 4058 deletions
Expand all files Collapse all files

18
.eslintrc.cjs Normal file
View File

@@ -0,0 +1,18 @@
/* eslint-env node */
require("@rushstack/eslint-patch/modern-module-resolution");
module.exports = {
root: true,
env: {
node: true,
},
extends: [
"plugin:vue/vue3-essential",
"eslint:recommended",
"@vue/eslint-config-typescript",
"@vue/eslint-config-prettier",
],
parserOptions: {
ecmaVersion: "latest",
},
};

60
.github/workflows/cd.yml vendored Normal file
View File

@@ -0,0 +1,60 @@
name: Deploy FrontEnd
on:
push:
branches: [ main, develop ]
jobs:
deploy-staging:
if: github.ref == 'refs/heads/develop'
runs-on: ubuntu-latest
env:
VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID_STAGING }}
VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID_STAGING }}
ENV_VARIABLE: ${{ secrets.ENV_STAGING }}
steps:
- name: 🏗 Setup repo
uses: actions/checkout@v3
- name: 🏗 Config .env
run: echo "$ENV_VARIABLE" > .env
- name: 🏗 Install Vercel CLI
run: npm install --global vercel@latest
- name: 🏗 Pull staging app from vercel environment
run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_AUTH_TOKEN }}
- name: 📦 Build staging app artifacts
run: vercel build --prod --token=${{ secrets.VERCEL_AUTH_TOKEN }}
- name: 📦 Deploy staging app artifacts to vercel
run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_AUTH_TOKEN }}
deploy-production:
if: github.ref == 'refs/heads/main'
runs-on: ubuntu-latest
env:
VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
ENV_VARIABLE: ${{ secrets.ENV_PROD }}
steps:
- name: 🏗 Setup repo
uses: actions/checkout@v3
- name: 🏗 Config .env
run: echo "$ENV_VARIABLE" > .env
- name: 🏗 Install Vercel CLI
run: npm install --global vercel@latest
- name: 🏗 Pull production vercel environment
run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_AUTH_TOKEN }}
- name: 📦 Build app artifacts
run: vercel build --prod --token=${{ secrets.VERCEL_AUTH_TOKEN }}
- name: 📦 Deploy app artifacts to vercel in production
run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_AUTH_TOKEN }}

64
.github/workflows/ci.yml vendored Normal file
View File

@@ -0,0 +1,64 @@
name: CI script
on:
push:
branches: [ main, develop ]
pull_request:
branches: [ main, develop ]
jobs:
lint:
runs-on: ubuntu-latest
steps:
- name: 🏗 Setup repo
uses: actions/checkout@v3
- name: 🏗 Setup node
uses: actions/setup-node@v3
with:
node-version: 16.x
cache: 'yarn'
- name: 🏗 Install dependencies
run: yarn
- name: 📦 Lint with eslint
run: yarn lint
build:
runs-on: ubuntu-latest
env:
VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID_STAGING }}
VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID_STAGING }}
steps:
- name: 🏗 Setup repo
uses: actions/checkout@v3
- name: 🏗 Install Vercel CLI
run: npm install --global vercel@latest
- name: 🏗 Pull staging app from vercel environment
run: vercel pull --yes --token=${{ secrets.VERCEL_AUTH_TOKEN }}
- name: 📦 Build staging app artifacts
run: vercel build --token=${{ secrets.VERCEL_AUTH_TOKEN }}
test-coverage:
name: SonarCloud
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
with:
fetch-depth: 0
- name: 🏗 Install dependencies
run: yarn
- name: 📦 Test and coverage
run: yarn coverage
- name: 📦 SonarCloud Scan
uses: SonarSource/sonarcloud-github-action@master
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}

139
.github/workflows/deploy.yml vendored
View File

@@ -1,139 +0,0 @@
name: Deploy to IPFS
on:
push:
branches: [main, develop]
tags: ['*']
pull_request:
branches: [main, develop]
workflow_dispatch:
concurrency:
group: deploy-${{ github.ref }}
cancel-in-progress: true
jobs:
build:
runs-on: ubuntu-latest
container: node:lts
steps:
- uses: actions/checkout@v4
with:
fetch-depth: 0
submodules: recursive
- name: Install bun
run: npm install -g bun
- name: Install submodule deps (yarn 4 via corepack)
run: corepack enable && yarn --cwd p2pix-smart-contracts install --immutable
- name: Install dependencies
run: bun install --frozen-lockfile
- name: Generate contract ABIs
env:
ALCHEMY_API_KEY: dummy
run: bun run wagmi:gen
- name: Build SPA
run: bun run build-only
- name: Upload dist artifact
# v3 pinned: Gitea Actions does not implement the v4 cache API
# (the runner returns ECONNREFUSED on getCacheEntry).
uses: actions/upload-artifact@v3
with:
name: dist
path: dist/
retention-days: 1
deploy-rsync:
needs: build
runs-on: ubuntu-latest
container: node:lts
steps:
- uses: actions/download-artifact@v3
with:
name: dist
path: dist/
- name: Deploy via RSYNC
uses: up9cloud/action-rsync@v1
env:
USER: ${{ secrets.SSH_USER }}
HOST: ${{ secrets.SSH_HOST }}
KEY: ${{ secrets.SSH_KEY }}
SOURCE: dist/
TARGET: ${{ github.ref_name }}
deploy-ipfs:
needs: build
runs-on: ubuntu-latest
container: node:lts
outputs:
cid: ${{ steps.ipfs.outputs.cid }}
steps:
- name: Install jq
run: apt-get update && apt-get install -y --no-install-recommends jq
- uses: actions/download-artifact@v3
with:
name: dist
path: dist/
- name: Deploy to IPFS
uses: ipshipyard/ipfs-deploy-action@v1
id: ipfs
with:
path-to-deploy: dist
set-github-status: false
set-pr-comment: false
kubo-api-url: ${{ secrets.KUBO_API_URL }}
kubo-api-auth: ${{ secrets.KUBO_API_AUTH }}
upload-car-artifact: false
deploy-pinata:
needs: [deploy-ipfs, deploy-rsync]
runs-on: ubuntu-latest
container: node:lts
steps:
- name: Install jq
run: apt-get update && apt-get install -y --no-install-recommends jq
- uses: actions/checkout@v4
with:
sparse-checkout: package.json
- uses: actions/download-artifact@v3
with:
name: dist
path: dist/
- name: Install Pinata CLI
run: curl -fsSL https://cli.pinata.cloud/install | bash
- name: Authenticate Pinata CLI
env:
PINATA_JWT: ${{ secrets.PINATA_JWT }}
run: echo -n "$PINATA_JWT" > ~/.pinata-files-cli
- name: Upload to Pinata
env:
PINATA_GROUP: ${{ secrets.PINATA_GROUP }}
IPFS_CID: ${{ needs.deploy-ipfs.outputs.cid }}
run: |
export PATH="$HOME/.local/share/pinata/:$PATH"
VERSION=$(jq -r .version package.json)
UPLOAD_JSON=$(pinata upload --group "$PINATA_GROUP" --name "p2pix_${VERSION}" ./dist)
CID=$(echo "$UPLOAD_JSON" | jq -r .cid)
if [ -z "$CID" ] || [ "$CID" = "null" ]; then
echo "Error: Could not parse CID. Output: $UPLOAD_JSON"
exit 1
fi
{
echo "## Deploy Summary"
echo "- IPFS CID (kubo): \`$IPFS_CID\`"
echo "- Pinata CID: \`$CID\`"
echo "- Version: \`$VERSION\`"
} >> "$GITHUB_STEP_SUMMARY"

30
.github/workflows/lint.yml vendored
View File

@@ -1,30 +0,0 @@
name: Lint & Format
on:
push:
branches: [main, develop]
pull_request:
branches: [main, develop]
concurrency:
group: lint-${{ github.ref }}
cancel-in-progress: true
jobs:
lint:
runs-on: ubuntu-latest
container: oven/bun:1-alpine
steps:
- name: Install required tools
run: apk add --no-cache git
- uses: actions/checkout@v4
- name: Install dependencies
run: bun install --frozen-lockfile
- name: ESLint
run: bun run lint
- name: Prettier check
run: bun run format:check

28
.github/workflows/tests.yml vendored
View File

@@ -1,28 +0,0 @@
name: Tests
on:
push:
branches: [main, develop]
pull_request:
branches: [main, develop]
concurrency:
group: tests-${{ github.ref }}
cancel-in-progress: true
jobs:
unit:
runs-on: ubuntu-latest
container: oven/bun:1-alpine
steps:
- name: Install required tools
run: apk add --no-cache git
- uses: actions/checkout@v4
- name: Install dependencies
run: bun install --frozen-lockfile
- name: Unit tests (vitest)
run: bunx vitest run --passWithNoTests

6
.gitignore vendored
View File

@@ -13,9 +13,6 @@ dist
dist-ssr
coverage
*.local
vendor/
.dagrobin
.claude
/cypress/videos/
/cypress/screenshots/
@@ -32,6 +29,3 @@ vendor/
.vercel
.env
# Codegen output (regenerated by `bun run wagmi:gen`, runs on prestart)
src/blockchain/abi.ts

3
.gitmodules vendored
View File

@@ -1,3 +0,0 @@
[submodule "p2pix-smart-contracts"]
path = p2pix-smart-contracts
url = https://git.p2pix.co/doiim/p2pix-smart-contracts

4
.prettierrc.json
View File

@@ -1,3 +1 @@
{
"singleQuote": true
}
{}

12
Dockerfile
View File

@@ -1,10 +1,10 @@
FROM oven/bun:latest
FROM node:lts-alpine
WORKDIR /app
COPY package.json bun.lock ./
COPY vendor ./vendor
RUN bun install --frozen-lockfile
COPY . .
COPY package.json yarn.lock ./
RUN yarn
COPY ./ ./
EXPOSE 3000
CMD ["bun", "run", "start"]
CMD ["yarn", "start"]

50
README.md
View File

@@ -3,6 +3,13 @@
</p>
<br />
<center>
[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=liftlearning_P2Pix-Front-End&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=liftlearning_P2Pix-Front-End)
[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=liftlearning_P2Pix-Front-End&metric=coverage)](https://sonarcloud.io/summary/new_code?id=liftlearning_P2Pix-Front-End)
</center>
This application aims to create a democratic and secure solution for the purchase and sale of ERC20 tokens, through the PIX, integrating the functionalities of smart contracts (smart contracts) of the blockchain with a receipt by digital signature. Allowing the integration of national financial system transactions to public blockchains, dispensing with custody through intermediaries.
# Table of Contents
@@ -52,54 +59,47 @@ See [Vite Configuration Reference](https://vitejs.dev/config/).
## Dependencies
### API + RPC
### API
For full operation of the application, it is necessary to correctly configure the variable that points to the api in the .env file, in the repository there is an .env.example file, just rename it to just .env and modify the variable `VITE_API_URL`. The api can be run locally see [https://github.com/liftlearning/Pix-Explorer-Back-End](https://github.com/liftlearning/Pix-Explorer-Back-End), or it can be pointed to just her staging address: [https://p2pix-block-explorer-api-staging.vercel.app/](https://p2pix-block-explorer-api-staging.vercel.app/)
Copy `.env.example` to `.env` and set the per-network variables:
### Alchemy Keys
In the .env file, set `VITE_GOERLI_API_URL=https://eth-goerli.g.alchemy.com/v2/Zu9m4b2U_EzVU_zd-vgZDOleY8OF1DNP` and `VITE_MUMBAI_API_URL=https://polygon-mumbai.g.alchemy.com/v2/ZANeCqfj6VsXGpOH6gWAP6SIVIgD9Pwv`
| Var | Purpose |
|---|---|
| `VITE_APP_API_URL` | zkPix middleware base URL (default `http://localhost:3001`) |
| `VITE_SEPOLIA_API_URL`, `VITE_MAINNET_API_URL`, `VITE_RSK_API_URL` | RPC endpoints per network (Alchemy, Infura, public RPC) |
| `VITE_SEPOLIA_TOKEN_ADDRESS`, `VITE_MAINNET_TOKEN_ADDRESS`, `VITE_RSK_TOKEN_ADDRESS` | BRZ token address per network |
| `VITE_SEPOLIA_SUBGRAPH_URL`, `VITE_MAINNET_SUBGRAPH_URL`, `VITE_RSK_SUBGRAPH_URL` | The Graph subgraph endpoints |
You can also replace it with your own Alchemy Keys if you have one.
## Build Setup
The application can be tested by its trial version [https://p2pix-staging.vercel.app/](https://p2pix-staging.vercel.app/), the only requirement is to be running the smart contract of local way. To run the application locally, there are two different ways:
### Run with bun
### Run with yarn
```sh
# Pull the smart-contracts submodule (skip if you cloned with --recurse-submodules)
git submodule update --init
# Clone the repo
git clone https://github.com/liftlearning/P2Pix-Front-End
cd P2Pix-Front-End
# Install front-end dependencies
bun install
# One-time bootstrap of the smart-contracts submodule (needed before wagmi:gen)
cd p2pix-smart-contracts && bun install && cd ..
# Generate ABI bindings from the submodule (run again whenever contracts change)
bun run wagmi:gen
# Install dependencies with yarn
yarn install
# Type-Check, Compile and Minify for Production
bun run build
yarn build
# Compile and Hot-Reload for Development (port 3000)
bun start
yarn start
# Lint with [ESLint](https://eslint.org/)
bun run lint
yarn lint
```
### Run with docker-compose
```sh
# Pull the smart-contracts submodule (skip if you cloned with --recurse-submodules)
git submodule update --init
# Clone the repo
git clone https://github.com/liftlearning/P2Pix-Front-End
cd P2Pix-Front-End
#1. Install [Docker](https://docs.docker.com/install/linux/docker-ce/ubuntu/);
#2. Install [Docker Compose](https://docs.docker.com/compose/install/).
# Run docker-compose up command
docker-compose up
```

6
babel.config.js
View File

@@ -1,7 +1,7 @@
module.exports = {
presets: [
[
'@babel/preset-env',
"@babel/preset-env",
{
modules: false,
},
@@ -10,8 +10,8 @@ module.exports = {
env: {
test: {
presets: [
['@babel/preset-env', { targets: { node: 'current' } }],
'@babel/preset-typescript',
["@babel/preset-env", { targets: { node: "current" } }],
"@babel/preset-typescript",
],
},
},

1204
bun.lock
View File

File diff suppressed because it is too large Load Diff

2
docker-compose.yml
View File

@@ -5,5 +5,7 @@ services:
container_name: p2pix_frontend
build:
context: .
volumes:
- '.:/app'
ports:
- '3000:3000'

2
env.d.ts vendored
View File

@@ -1,3 +1 @@
/// <reference types="vite/client" />
declare const __APP_VERSION__: string;

31
eslint.config.js
View File

@@ -1,31 +0,0 @@
import pluginVue from 'eslint-plugin-vue';
import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript';
import vuePrettierConfig from '@vue/eslint-config-prettier';
const sources = ['src/**/*.{ts,tsx,vue,js,mjs,cjs}', 'tests/**/*.{ts,tsx,vue,js,mjs,cjs}'];
export default defineConfigWithVueTs(
{ ignores: ['src/generated.ts', 'dist/**', 'node_modules/**'] },
{
files: sources,
extends: [pluginVue.configs['flat/essential'], vueTsConfigs.recommended],
},
{
files: sources,
rules: {
quotes: ['error', 'single', { avoidEscape: true }],
'prettier/prettier': ['error', { singleQuote: true }],
'@typescript-eslint/no-unused-vars': [
'warn',
{
argsIgnorePattern: '^_',
varsIgnorePattern: '^_',
caughtErrorsIgnorePattern: '^_',
destructuredArrayIgnorePattern: '^_',
},
],
'@typescript-eslint/no-explicit-any': 'warn',
},
},
{ ...vuePrettierConfig, files: sources },
);

21
knip.json
View File

@@ -1,21 +0,0 @@
{
"$schema": "https://unpkg.com/knip@latest/schema.json",
"entry": [
"src/router/index.ts",
"index.html",
"wagmi.config.ts"
],
"project": [
"src/**/*.{ts,vue}",
"*.config.{ts,js}"
],
"ignore": [
"p2pix-smart-contracts/**",
"babel.config.js"
],
"ignoreUnresolved": [
"./abi",
"@/blockchain/abi"
],
"tags": ["public"]
}

1
p2pix-smart-contracts

Submodule p2pix-smart-contracts deleted from c4db98ae00

12285
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

95
package.json
View File

@@ -1,60 +1,57 @@
{
"name": "p2pix-front-end",
"version": "1.2.0",
"type": "module",
"version": "0.1.0",
"scripts": {
"start": "vite --host=0.0.0.0 --port 3000",
"build": "bun run type-check && bun run build-only",
"build-only": "vite build",
"build": "run-p type-check build-only",
"preview": "vite preview",
"serve": "vue-cli-service serve",
"build-only": "vite build",
"type-check": "vue-tsc --skipLibCheck --noEmit",
"lint": "eslint",
"lint:fix": "eslint --fix",
"format": "prettier --write \"src/**/*.{ts,vue,json}\"",
"format:check": "prettier --check \"src/**/*.{ts,vue,json}\"",
"wagmi:gen": "wagmi generate",
"test": "vitest run --passWithNoTests",
"test:watch": "vitest",
"test:coverage": "vitest run --coverage"
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore --fix",
"lint:fix": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
},
"dependencies": {
"@floating-ui/vue": "^1.1.11",
"@vueuse/core": "^14.3.0",
"@web3-onboard/injected-wallets": "^2.11.3",
"@web3-onboard/vue": "^2.10.0",
"marked": "^18.0.3",
"qrcode": "^1.5.4",
"viem": "^2.48.8",
"vite-svg-loader": "^5.1.1",
"vue": "^3.5.33",
"vue-router": "^5.0.6"
"@floating-ui/vue": "^0.2.1",
"@headlessui/vue": "^1.7.3",
"@heroicons/vue": "^2.0.12",
"@vueuse/core": "^9.12.0",
"@web3-onboard/injected-wallets": "^2.11.2",
"@web3-onboard/vue": "^2.9.0",
"alchemy-sdk": "^2.3.0",
"axios": "^1.2.1",
"marked": "^4.2.12",
"qrcode": "^1.5.1",
"viem": "^2.31.3",
"vite-svg-loader": "^5.1.0",
"vue": "^3.2.41",
"vue-markdown": "^2.2.4",
"vue-router": "^4.1.5"
},
"devDependencies": {
"@playwright/test": "^1.59.1",
"@tailwindcss/vite": "^4.2.4",
"@types/node": "^25.6.0",
"@types/qrcode": "^1.5.6",
"@vitejs/plugin-vue": "^6.0.6",
"@vitejs/plugin-vue-jsx": "^5.1.5",
"@vitest/coverage-v8": "^4.1.5",
"@vue/eslint-config-prettier": "^10.2.0",
"@vue/eslint-config-typescript": "^14.7.0",
"@vue/tsconfig": "^0.9.1",
"@wagmi/cli": "^2.10.0",
"autoprefixer": "^10.5.0",
"eslint": "^10.3.0",
"eslint-plugin-vue": "^10.9.0",
"happy-dom": "^20.9.0",
"postcss": "^8.5.8",
"prettier": "^3.5.3",
"tailwindcss": "^4.2.4",
"typescript": "^6.0.3",
"vite": "^8.0.10",
"vitest": "^4.1.5",
"vue-tsc": "^3.2.7"
},
"trustedDependencies": [
"esbuild",
"vue-demi"
]
"@babel/preset-env": "^7.20.2",
"@babel/preset-typescript": "^7.18.6",
"@rushstack/eslint-patch": "^1.1.4",
"@types/crc": "^3.8.0",
"@types/marked": "^4.0.8",
"@types/node": "^16.11.68",
"@types/qrcode": "^1.5.0",
"@types/vue-markdown": "^2.2.1",
"@vitejs/plugin-vue": "^3.1.2",
"@vitejs/plugin-vue-jsx": "^2.0.1",
"@vue/eslint-config-prettier": "^7.0.0",
"@vue/eslint-config-typescript": "^11.0.0",
"@vue/tsconfig": "^0.1.3",
"@wagmi/cli": "^2.3.1",
"autoprefixer": "^10.4.12",
"eslint": "^8.22.0",
"eslint-plugin-vue": "^9.3.0",
"npm-run-all": "^4.1.5",
"postcss": "^8.4.18",
"prettier": "^2.7.1",
"tailwindcss": "^3.2.1",
"typescript": "~5.8.2",
"vite": "^3.1.8",
"vue-tsc": "^2.2.8"
}
}

3
postcss.config.js
View File

@@ -1,5 +1,6 @@
export default {
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};

24
src/App.vue
View File

@@ -1,13 +1,12 @@
<script setup lang="ts">
import { useRoute } from 'vue-router';
import TopBar from '@/components/TopBar/TopBar.vue';
import SpinnerComponent from '@/components/ui/SpinnerComponent.vue';
import ToasterComponent from '@/components/ui/ToasterComponent.vue';
import VersionFooter from '@/components/ui/VersionFooter.vue';
import { init, useOnboard } from '@web3-onboard/vue';
import injectedModule from '@web3-onboard/injected-wallets';
import { Networks, DEFAULT_NETWORK } from '@/config/networks';
import { ref } from 'vue';
import { useRoute } from "vue-router";
import TopBar from "@/components/TopBar/TopBar.vue";
import SpinnerComponent from "@/components/ui/SpinnerComponent.vue";
import ToasterComponent from "@/components/ui/ToasterComponent.vue";
import { init, useOnboard } from "@web3-onboard/vue";
import injectedModule from "@web3-onboard/injected-wallets";
import { Networks, DEFAULT_NETWORK } from "@/config/networks";
import { ref } from "vue";
const route = useRoute();
const injected = injectedModule();
@@ -16,7 +15,7 @@ const targetNetwork = ref(DEFAULT_NETWORK);
const web3Onboard = init({
wallets: [injected],
chains: Object.values(Networks).map((network) => ({
id: `0x${network.id.toString(16)}`,
id: network.id,
token: network.nativeCurrency.symbol,
label: network.name,
rpcUrl: network.rpcUrls.default.http[0],
@@ -33,7 +32,7 @@ if (!connectedWallet) {
</script>
<template>
<main class="p-3 sm:p-4 md:p-8">
<div class="p-3 sm:p-4 md:p-8">
<TopBar />
<RouterView v-slot="{ Component }">
<template v-if="Component">
@@ -54,6 +53,5 @@ if (!connectedWallet) {
</template>
</RouterView>
<ToasterComponent :targetNetwork="targetNetwork" />
<VersionFooter />
</main>
</div>
</template>

0
src/assets/tokens/brx.svg → src/assets/brx.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 644 B

After

Width:  |  Height:  |  Size: 644 B

0
src/assets/tokens/brz.svg → src/assets/brz.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

0
src/assets/networks/ethereum.svg → src/assets/ethereum.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

6
src/assets/main.css
View File

@@ -1,5 +1,7 @@
@import "./base.css" layer(base);
@import "tailwindcss";
@import './base.css';
@tailwind base;
@tailwind components;
@tailwind utilities;
#app {
width: 100%;

76
src/assets/networks/rootstock-testnet.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 79 KiB

0
src/assets/networks/polygon.svg → src/assets/polygon.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

0
src/assets/networks/rootstock-mainnet.svg → src/assets/rootstock.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 30 KiB

0
src/assets/networks/sepolia.svg → src/assets/sepolia.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

2266
src/blockchain/abi.ts Normal file
View File

File diff suppressed because it is too large Load Diff

38
src/blockchain/buyerMethods.ts
View File

@@ -1,23 +1,27 @@
import { getContract } from './provider';
import { ChainContract } from 'viem';
import { parseEther, type Address, type TransactionReceipt } from 'viem';
import { getContract } from "./provider";
import { ChainContract } from "viem";
import {
parseEther,
type Address,
type TransactionReceipt,
} from "viem";
export const addLock = async (
sellerAddress: Address,
tokenAddress: Address,
amount: number,
amount: number
): Promise<bigint> => {
const { address, abi, wallet, client, account } = await getContract();
const parsedAmount = parseEther(amount.toString());
if (!wallet) {
throw new Error('Wallet not connected');
throw new Error("Wallet not connected");
}
const { result, request } = await client.simulateContract({
address,
abi,
functionName: 'lock',
functionName: "lock",
args: [sellerAddress, tokenAddress, parsedAmount, [], []],
account,
});
@@ -25,52 +29,52 @@ export const addLock = async (
const receipt = await client.waitForTransactionReceipt({ hash });
if (!receipt.status)
throw new Error('Transaction failed: ' + receipt.transactionHash);
throw new Error("Transaction failed: " + receipt.transactionHash);
return result;
};
export const withdrawDeposit = async (
amount: string,
token: Address,
token: Address
): Promise<boolean> => {
const { address, abi, wallet, client, account } = await getContract();
if (!wallet) {
throw new Error('Wallet not connected');
throw new Error("Wallet not connected");
}
const { request } = await client.simulateContract({
address,
abi,
functionName: 'withdraw',
functionName: "withdraw",
args: [token, parseEther(amount), []],
account,
account
});
const hash = await wallet.writeContract(request);
const receipt = await client.waitForTransactionReceipt({ hash });
return receipt.status === 'success';
return receipt.status === "success";
};
export const releaseLock = async (
lockID: bigint,
pixTimestamp: `0x${string}` & { lenght: 34 },
signature: `0x${string}`,
pixTimestamp: `0x${string}`&{lenght:34},
signature: `0x${string}`
): Promise<TransactionReceipt> => {
const { address, abi, wallet, client, account } = await getContract();
if (!wallet) {
throw new Error('Wallet not connected');
throw new Error("Wallet not connected");
}
const { request } = await client.simulateContract({
address,
abi,
functionName: 'release',
functionName: "release",
args: [BigInt(lockID), pixTimestamp, signature],
account,
account
});
const hash = await wallet.writeContract(request);

58
src/blockchain/events.ts
View File

@@ -1,13 +1,13 @@
import { useUser } from '@/composables/useUser';
import { formatEther, toHex, stringToHex } from 'viem';
import type { PublicClient, Address } from 'viem';
import { Networks } from '@/config/networks';
import { getContract } from './provider';
import { p2PixAbi } from './abi';
import type { ValidDeposit } from '@/model/ValidDeposit';
import type { NetworkConfig } from '@/model/NetworkEnum';
import type { UnreleasedLock } from '@/model/UnreleasedLock';
import { ChainContract } from 'viem';
import { useUser } from "@/composables/useUser";
import { formatEther, toHex, stringToHex } from "viem";
import type { PublicClient, Address } from "viem";
import { Networks } from "@/config/networks";
import { getContract } from "./provider";
import { p2PixAbi } from "./abi"
import type { ValidDeposit } from "@/model/ValidDeposit";
import type { NetworkConfig } from "@/model/NetworkEnum";
import type { UnreleasedLock } from "@/model/UnreleasedLock";
import { ChainContract } from "viem";
const getNetworksLiquidity = async (): Promise<void> => {
const user = useUser();
@@ -18,7 +18,7 @@ const getNetworksLiquidity = async (): Promise<void> => {
for (const network of Object.values(Networks)) {
const deposits = await getValidDeposits(
user.network.value.tokens[user.selectedToken.value].address,
network,
network
);
if (deposits) depositLists.push(deposits);
}
@@ -30,37 +30,37 @@ const getNetworksLiquidity = async (): Promise<void> => {
const getParticipantID = async (
seller: Address,
token: Address,
token: Address
): Promise<string> => {
const { address, abi, client } = await getContract();
const participantIDHex = await client.readContract({
address,
abi,
functionName: 'getPixTarget',
functionName: "getPixTarget",
args: [seller, token],
});
// Remove '0x' prefix and convert hex to UTF-8 string
const hexString =
typeof participantIDHex === 'string'
typeof participantIDHex === "string"
? participantIDHex
: toHex(participantIDHex as bigint);
if (!hexString) throw new Error('Participant ID not found');
if (!hexString) throw new Error("Participant ID not found");
const bytes = new Uint8Array(
hexString
.slice(2)
.match(/.{1,2}/g)!
.map((byte: string) => parseInt(byte, 16)),
.map((byte: string) => parseInt(byte, 16))
);
// Remove null bytes from the end of the string
return new TextDecoder().decode(bytes).replace(/\0/g, '');
return new TextDecoder().decode(bytes).replace(/\0/g, "");
};
const getValidDeposits = async (
token: Address,
network: NetworkConfig,
contractInfo?: { client: PublicClient; address: Address },
contractInfo?: { client: PublicClient; address: Address }
): Promise<ValidDeposit[]> => {
let client: PublicClient, abi;
@@ -84,27 +84,23 @@ const getValidDeposits = async (
`,
};
const depositLogs = await fetch(network.subgraphUrls[0], {
method: 'POST',
const depositLogs = await fetch( network.subgraphUrls[0], {
method: "POST",
headers: {
'Content-Type': 'application/json',
"Content-Type": "application/json",
},
body: JSON.stringify(body),
});
// remove doubles from sellers list
const depositData = await depositLogs.json();
if (!depositData.data) {
console.error('Error fetching deposit logs');
return [];
}
const depositAddeds = depositData.data.depositAddeds;
const uniqueSellers = depositAddeds.reduce(
(acc: Record<Address, boolean>, deposit: any) => {
acc[deposit.seller] = true;
return acc;
},
{} as Record<Address, boolean>,
{} as Record<Address, boolean>
);
if (!contractInfo) {
@@ -119,7 +115,7 @@ const getValidDeposits = async (
const balanceCalls = sellersList.map((seller) => ({
address: (network.contracts?.p2pix as ChainContract).address,
abi,
functionName: 'getBalance',
functionName: "getBalance",
args: [seller, token],
}));
@@ -138,7 +134,7 @@ const getValidDeposits = async (
remaining: Number(formatEther(mappedBalance.result as bigint)),
seller,
network,
participantID: '',
participantID: "",
};
depositList[seller + token] = validDeposit;
}
@@ -147,14 +143,14 @@ const getValidDeposits = async (
};
const getUnreleasedLockById = async (
lockID: bigint,
lockID: bigint
): Promise<UnreleasedLock> => {
const { address, abi, client } = await getContract();
const [, , , amount, token, seller] = await client.readContract({
const [ , , , amount, token, seller ] = await client.readContract({
address,
abi,
functionName: 'mapLocks',
functionName: "mapLocks",
args: [lockID],
});

33
src/blockchain/provider.ts
View File

@@ -1,5 +1,5 @@
import { p2PixAbi } from './abi';
import { updateWalletStatus } from './wallet';
import { p2PixAbi } from "./abi";
import { updateWalletStatus } from "./wallet";
import {
createPublicClient,
createWalletClient,
@@ -7,22 +7,22 @@ import {
http,
PublicClient,
WalletClient,
} from 'viem';
import { useUser } from '@/composables/useUser';
import type { NetworkConfig } from '@/model/NetworkEnum';
import type { ChainContract } from 'viem';
} from "viem";
import { useUser } from "@/composables/useUser";
import type { NetworkConfig } from "@/model/NetworkEnum";
import type { ChainContract } from "viem";
let walletClient: WalletClient | null = null;
const getPublicClient = (): PublicClient => {
const user = useUser();
const rpcUrl = (user.network.value as NetworkConfig).rpcUrls.default.http[0];
const chain = user.network.value;
const user = useUser();
const rpcUrl = (user.network.value as NetworkConfig).rpcUrls.default.http[0];
const chain = user.network.value;
return createPublicClient({
chain,
transport: http(rpcUrl),
});
return createPublicClient({
chain,
transport: http(rpcUrl),
});
};
const getWalletClient = (): WalletClient | null => {
@@ -32,13 +32,12 @@ const getWalletClient = (): WalletClient | null => {
const getContract = async (onlyRpcProvider = false) => {
const client = getPublicClient();
const user = useUser();
const address = (user.network.value.contracts?.p2pix as ChainContract)
.address;
const address = (user.network.value.contracts?.p2pix as ChainContract).address;
const abi = p2PixAbi;
const wallet = onlyRpcProvider ? null : getWalletClient();
if (!client) {
throw new Error('Public client not initialized');
throw new Error("Public client not initialized");
}
const [account] = wallet ? await wallet.getAddresses() : [null];
@@ -50,7 +49,7 @@ const connectProvider = async (p: any): Promise<void> => {
const user = useUser();
const chain = user.network.value;
const [account] = await p!.request({ method: 'eth_requestAccounts' });
const [account] = await p!.request({ method: "eth_requestAccounts" });
walletClient = createWalletClient({
account,

35
src/blockchain/sellerMethods.ts
View File

@@ -1,10 +1,10 @@
import { getContract, getPublicClient, getWalletClient } from './provider';
import { parseEther, toHex, ChainContract } from 'viem';
import { mockTokenAbi } from './abi';
import { useUser } from '@/composables/useUser';
import { createParticipant } from '@/utils/bbPay';
import type { Participant } from '@/utils/bbPay';
import type { Address } from 'viem';
import { getContract, getPublicClient, getWalletClient } from "./provider";
import { parseEther, toHex, ChainContract } from "viem";
import { mockTokenAbi } from "./abi";
import { useUser } from "@/composables/useUser";
import { createParticipant } from "@/utils/bbPay";
import type { Participant } from "@/utils/bbPay";
import type { Address } from "viem";
const getP2PixAddress = (): Address => {
const user = useUser();
@@ -17,31 +17,30 @@ const approveTokens = async (participant: Participant): Promise<any> => {
const walletClient = getWalletClient();
if (!publicClient || !walletClient) {
throw new Error('Clients not initialized');
throw new Error("Clients not initialized");
}
user.setSeller(participant);
const [account] = await walletClient.getAddresses();
// Get token address
const tokenAddress =
user.network.value.tokens[user.selectedToken.value].address;
const tokenAddress = user.network.value.tokens[user.selectedToken.value].address;
// Check if the token is already approved
const allowance = await publicClient.readContract({
address: tokenAddress,
abi: mockTokenAbi,
functionName: 'allowance',
functionName: "allowance",
args: [account, getP2PixAddress()],
});
if (allowance < parseEther(participant.offer.toString())) {
if ( allowance < parseEther(participant.offer.toString()) ) {
// Approve tokens
const chain = user.network.value;
const hash = await walletClient.writeContract({
address: tokenAddress,
abi: mockTokenAbi,
functionName: 'approve',
functionName: "approve",
args: [getP2PixAddress(), parseEther(participant.offer.toString())],
account,
chain,
@@ -59,7 +58,7 @@ const addDeposit = async (): Promise<any> => {
const user = useUser();
if (!walletClient) {
throw new Error('Wallet client not initialized');
throw new Error("Wallet client not initialized");
}
const [account] = await walletClient.getAddresses();
@@ -67,16 +66,16 @@ const addDeposit = async (): Promise<any> => {
const sellerId = await createParticipant(user.seller.value);
user.setSellerId(sellerId.id);
if (!sellerId.id) {
throw new Error('Failed to create participant');
throw new Error("Failed to create participant");
}
const chain = user.network.value;
const hash = await walletClient.writeContract({
address,
abi,
functionName: 'deposit',
functionName: "deposit",
args: [
user.network.value.id + '-' + sellerId.id,
toHex('', { size: 32 }),
user.network.value.id + "-" + sellerId.id,
toHex("", { size: 32 }),
user.network.value.tokens[user.selectedToken.value].address,
parseEther(user.seller.value.offer.toString()),
true,

159
src/blockchain/wallet.ts
View File

@@ -1,14 +1,14 @@
import { formatEther, type Address } from 'viem';
import { useUser } from '@/composables/useUser';
import { formatEther, type Address } from "viem";
import { useUser } from "@/composables/useUser";
import { getPublicClient, getWalletClient, getContract } from './provider';
import { getPublicClient, getWalletClient, getContract } from "./provider";
import { getValidDeposits, getUnreleasedLockById } from './events';
import { getValidDeposits, getUnreleasedLockById } from "./events";
import type { ValidDeposit } from '@/model/ValidDeposit';
import type { WalletTransaction } from '@/model/WalletTransaction';
import type { UnreleasedLock } from '@/model/UnreleasedLock';
import { LockStatus } from '@/model/LockStatus';
import type { ValidDeposit } from "@/model/ValidDeposit";
import type { WalletTransaction } from "@/model/WalletTransaction";
import type { UnreleasedLock } from "@/model/UnreleasedLock";
import { LockStatus } from "@/model/LockStatus";
export const updateWalletStatus = async (): Promise<void> => {
const user = useUser();
@@ -17,7 +17,7 @@ export const updateWalletStatus = async (): Promise<void> => {
const walletClient = getWalletClient();
if (!publicClient || !walletClient) {
console.error('Client not initialized');
console.error("Client not initialized");
return;
}
@@ -30,12 +30,12 @@ export const updateWalletStatus = async (): Promise<void> => {
};
export const listValidDepositTransactionsByWalletAddress = async (
walletAddress: Address,
walletAddress: Address
): Promise<ValidDeposit[]> => {
const user = useUser();
const walletDeposits = await getValidDeposits(
user.network.value.tokens[user.selectedToken.value].address,
user.network.value,
user.network.value
);
if (walletDeposits) {
return walletDeposits
@@ -50,17 +50,17 @@ export const listValidDepositTransactionsByWalletAddress = async (
const getLockStatus = async (id: bigint): Promise<LockStatus> => {
const { address, abi, client } = await getContract();
const [sortedIDs, status] = await client.readContract({
const [ sortedIDs , status ] = await client.readContract({
address,
abi,
functionName: 'getLocksStatus',
functionName: "getLocksStatus",
args: [[id]],
});
return status[0];
};
export const listAllTransactionByWalletAddress = async (
walletAddress: Address,
walletAddress: Address
): Promise<WalletTransaction[]> => {
const user = useUser();
@@ -109,9 +109,9 @@ export const listAllTransactionByWalletAddress = async (
};
const response = await fetch(network.subgraphUrls[0], {
method: 'POST',
method: "POST",
headers: {
'Content-Type': 'application/json',
"Content-Type": "application/json",
},
body: JSON.stringify(subgraphQuery),
});
@@ -126,11 +126,10 @@ export const listAllTransactionByWalletAddress = async (
transactions.push({
token: deposit.token,
blockNumber: parseInt(deposit.blockNumber),
blockTimestamp: parseInt(deposit.blockTimestamp),
amount: parseFloat(formatEther(BigInt(deposit.amount))),
seller: deposit.seller,
buyer: '',
event: 'DepositAdded',
buyer: "",
event: "DepositAdded",
lockStatus: undefined,
transactionHash: deposit.transactionHash,
});
@@ -146,11 +145,10 @@ export const listAllTransactionByWalletAddress = async (
transactions.push({
token: lock.token,
blockNumber: parseInt(lock.blockNumber),
blockTimestamp: parseInt(lock.blockTimestamp),
amount: parseFloat(formatEther(BigInt(lock.amount))),
seller: lock.seller,
buyer: lock.buyer,
event: 'LockAdded',
event: "LockAdded",
lockStatus: lockStatus,
transactionHash: lock.transactionHash,
transactionID: lock.lockID.toString(),
@@ -164,11 +162,10 @@ export const listAllTransactionByWalletAddress = async (
transactions.push({
token: undefined, // Subgraph doesn't provide token in this event, we could enhance this later
blockNumber: parseInt(release.blockNumber),
blockTimestamp: parseInt(release.blockTimestamp),
amount: -1, // Amount not available in this event
seller: '',
seller: "",
buyer: release.buyer,
event: 'LockReleased',
event: "LockReleased",
lockStatus: undefined,
transactionHash: release.transactionHash,
transactionID: release.lockId.toString(),
@@ -182,11 +179,10 @@ export const listAllTransactionByWalletAddress = async (
transactions.push({
token: withdrawal.token,
blockNumber: parseInt(withdrawal.blockNumber),
blockTimestamp: parseInt(withdrawal.blockTimestamp),
amount: parseFloat(formatEther(BigInt(withdrawal.amount))),
seller: withdrawal.seller,
buyer: '',
event: 'DepositWithdrawn',
buyer: "",
event: "DepositWithdrawn",
lockStatus: undefined,
transactionHash: withdrawal.transactionHash,
});
@@ -197,6 +193,72 @@ export const listAllTransactionByWalletAddress = async (
return transactions.sort((a, b) => b.blockNumber - a.blockNumber);
};
// get wallet's release transactions
export const listReleaseTransactionByWalletAddress = async (
walletAddress: Address
) => {
const user = useUser();
const network = user.network.value;
// Query subgraph for release transactions
const subgraphQuery = {
query: `
{
lockReleaseds(where: {buyer: "${walletAddress.toLowerCase()}"}) {
buyer
lockId
e2eId
blockTimestamp
blockNumber
transactionHash
}
}
`,
};
// Fetch data from subgraph
const response = await fetch(network.subgraphUrls[0], {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(subgraphQuery),
});
const data = await response.json();
// Process the subgraph response into the same format as the previous implementation
if (!data.data?.lockReleaseds) {
return [];
}
// Transform the subgraph data to match the event log decode format
return data.data.lockReleaseds
.sort((a: any, b: any) => {
return parseInt(b.blockNumber) - parseInt(a.blockNumber);
})
.map((release: any) => {
try {
// Create a structure similar to the decoded event log
return {
eventName: "LockReleased",
args: {
buyer: release.buyer,
lockID: BigInt(release.lockId),
e2eId: release.e2eId,
},
// Add any other necessary fields to match the original return format
blockNumber: BigInt(release.blockNumber),
transactionHash: release.transactionHash,
};
} catch (error) {
console.error("Error processing subgraph data", error);
return null;
}
})
.filter((decoded: any) => decoded !== null);
};
const listLockTransactionByWalletAddress = async (walletAddress: Address) => {
const user = useUser();
const network = user.network.value;
@@ -221,9 +283,9 @@ const listLockTransactionByWalletAddress = async (walletAddress: Address) => {
try {
// Fetch data from subgraph
const response = await fetch(network.subgraphUrls[0], {
method: 'POST',
method: "POST",
headers: {
'Content-Type': 'application/json',
"Content-Type": "application/json",
},
body: JSON.stringify(subgraphQuery),
});
@@ -243,12 +305,12 @@ const listLockTransactionByWalletAddress = async (walletAddress: Address) => {
try {
// Create a structure similar to the decoded event log
return {
eventName: 'LockAdded',
eventName: "LockAdded",
args: {
buyer: lock.buyer,
lockID: BigInt(lock.lockID),
seller: lock.seller,
token: undefined, // Token not available in LockAdded subgraph event
token: lock.token,
amount: BigInt(lock.amount),
},
// Add other necessary fields to match the original format
@@ -256,13 +318,13 @@ const listLockTransactionByWalletAddress = async (walletAddress: Address) => {
transactionHash: lock.transactionHash,
};
} catch (error) {
console.error('Error processing subgraph data', error);
console.error("Error processing subgraph data", error);
return null;
}
})
.filter((decoded: any) => decoded !== null);
} catch (error) {
console.error('Error fetching from subgraph:', error);
console.error("Error fetching from subgraph:", error);
}
};
@@ -278,6 +340,7 @@ const listLockTransactionBySellerAddress = async (sellerAddress: Address) => {
buyer
lockID
seller
token
amount
blockTimestamp
blockNumber
@@ -290,9 +353,9 @@ const listLockTransactionBySellerAddress = async (sellerAddress: Address) => {
try {
// Fetch data from subgraph
const response = await fetch(network.subgraphUrls[0], {
method: 'POST',
method: "POST",
headers: {
'Content-Type': 'application/json',
"Content-Type": "application/json",
},
body: JSON.stringify(subgraphQuery),
});
@@ -312,12 +375,12 @@ const listLockTransactionBySellerAddress = async (sellerAddress: Address) => {
try {
// Create a structure similar to the decoded event log
return {
eventName: 'LockAdded',
eventName: "LockAdded",
args: {
buyer: lock.buyer,
lockID: BigInt(lock.lockID),
seller: lock.seller,
token: undefined, // Token not available in LockAdded subgraph event
token: lock.token,
amount: BigInt(lock.amount),
},
// Add other necessary fields to match the original format
@@ -325,19 +388,19 @@ const listLockTransactionBySellerAddress = async (sellerAddress: Address) => {
transactionHash: lock.transactionHash,
};
} catch (error) {
console.error('Error processing subgraph data', error);
console.error("Error processing subgraph data", error);
return null;
}
})
.filter((decoded: any) => decoded !== null);
} catch (error) {
console.error('Error fetching from subgraph:', error);
console.error("Error fetching from subgraph:", error);
return [];
}
};
export const checkUnreleasedLock = async (
walletAddress: Address,
walletAddress: Address
): Promise<UnreleasedLock | undefined> => {
const { address, abi, client } = await getContract();
const addedLocks = await listLockTransactionByWalletAddress(walletAddress);
@@ -346,15 +409,15 @@ export const checkUnreleasedLock = async (
const lockIds = addedLocks.map((lock: any) => lock.args.lockID);
const [sortedIDs, status] = await client.readContract({
const [ sortedIDs, status ] = await client.readContract({
address,
abi,
functionName: 'getLocksStatus',
functionName: "getLocksStatus",
args: [lockIds],
});
const unreleasedLockId = status.findIndex(
(status: LockStatus) => status == LockStatus.Active,
(status: LockStatus) => status == LockStatus.Active
);
if (unreleasedLockId !== -1)
@@ -362,7 +425,7 @@ export const checkUnreleasedLock = async (
};
export const getActiveLockAmount = async (
walletAddress: Address,
walletAddress: Address
): Promise<number> => {
const { address, abi, client } = await getContract(true);
const lockSeller = await listLockTransactionBySellerAddress(walletAddress);
@@ -371,10 +434,10 @@ export const getActiveLockAmount = async (
const lockIds = lockSeller.map((lock: any) => lock.args.lockID);
const [sortedIDs, status] = await client.readContract({
const [ sortedIDs, status ] = await client.readContract({
address,
abi,
functionName: 'getLocksStatus',
functionName: "getLocksStatus",
args: [lockIds],
});
@@ -382,9 +445,9 @@ export const getActiveLockAmount = async (
client.readContract({
address: address,
abi,
functionName: 'mapLocks',
functionName: "mapLocks",
args: [BigInt(id)],
}),
})
);
const mapLocksResults = await client.multicall({

40
src/components/BuyerSteps/BuyConfirmedComponent.vue
View File

@@ -1,16 +1,16 @@
<script setup lang="ts">
import { withdrawDeposit } from '@/blockchain/buyerMethods';
import { withdrawDeposit } from "@/blockchain/buyerMethods";
import {
getActiveLockAmount,
listAllTransactionByWalletAddress,
listValidDepositTransactionsByWalletAddress,
} from '@/blockchain/wallet';
import CustomButton from '@/components/ui/CustomButton.vue';
import type { ValidDeposit } from '@/model/ValidDeposit';
import type { WalletTransaction } from '@/model/WalletTransaction';
import { useUser } from '@/composables/useUser';
import { onMounted, ref, watch } from 'vue';
import ListingComponent from '@/components/ListingComponent/ListingComponent.vue';
} from "@/blockchain/wallet";
import CustomButton from "@/components/ui/CustomButton.vue";
import type { ValidDeposit } from "@/model/ValidDeposit";
import type { WalletTransaction } from "@/model/WalletTransaction";
import { useUser } from "@/composables/useUser";
import { onMounted, ref, watch } from "vue";
import ListingComponent from "@/components/ListingComponent/ListingComponent.vue";
// props
const props = defineProps<{
@@ -31,11 +31,11 @@ const getWalletTransactions = async () => {
user.setLoadingWalletTransactions(true);
if (walletAddress.value) {
const walletDeposits = await listValidDepositTransactionsByWalletAddress(
walletAddress.value,
walletAddress.value
);
const allUserTransactions = await listAllTransactionByWalletAddress(
walletAddress.value,
walletAddress.value
);
activeLockAmount.value = await getActiveLockAmount(walletAddress.value);
@@ -53,22 +53,19 @@ const getWalletTransactions = async () => {
const callWithdraw = async (amount: string) => {
if (amount) {
user.setLoadingWalletTransactions(true);
const withdraw = await withdrawDeposit(
amount,
user.network.value.tokens[user.selectedToken.value].address,
);
const withdraw = await withdrawDeposit(amount, user.network.value.tokens[user.selectedToken.value].address);
if (withdraw) {
console.log('Saque realizado!');
console.log("Saque realizado!");
await getWalletTransactions();
} else {
console.log('Não foi possível realizar o saque!');
console.log("Não foi possível realizar o saque!");
}
user.setLoadingWalletTransactions(false);
}
};
// Emits
const emit = defineEmits(['makeAnotherTransaction']);
const emit = defineEmits(["makeAnotherTransaction"]);
// observer
watch(props, async (): Promise<void> => {
@@ -89,7 +86,9 @@ onMounted(async () => {
</span>
</div>
<div class="main-container">
<div class="flex flex-col w-full bg-white px-10 py-5 rounded-lg">
<div
class="flex flex-col w-full bg-white px-10 py-5 rounded-lg border-y-10"
>
<div>
<p>Tokens recebidos</p>
<p class="text-2xl text-gray-900">
@@ -130,7 +129,6 @@ onMounted(async () => {
</template>
<style scoped>
@reference "tailwindcss";
.page {
@apply flex flex-col items-center justify-center w-full mt-16;
}
@@ -151,8 +149,8 @@ p {
@apply font-medium text-base text-gray-900;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
</style>

207
src/components/BuyerSteps/BuyerSearchComponent.vue
View File

@@ -1,19 +1,16 @@
<script setup lang="ts">
import { ref, watch, computed } from 'vue';
import { useUser } from '@/composables/useUser';
import SpinnerComponent from '@/components/ui/SpinnerComponent.vue';
import CustomButton from '@/components/ui/CustomButton.vue';
import { debounce } from '@/utils/debounce';
import { verifyNetworkLiquidity } from '@/utils/networkLiquidity';
import type { ValidDeposit } from '@/model/ValidDeposit';
import { decimalCount } from '@/utils/decimalCount';
import { getTokenImage, getNetworkImage } from '@/utils/imagesPath';
import { onClickOutside } from '@vueuse/core';
import { Networks } from '@/config/networks';
import { TokenEnum } from '@/model/NetworkEnum';
import { getContract } from '@/blockchain/provider';
import { reputationAbi } from '@/blockchain/abi';
import { type Address } from 'viem';
import { ref, watch } from "vue";
import { useUser } from "@/composables/useUser";
import SpinnerComponent from "@/components/ui/SpinnerComponent.vue";
import CustomButton from "@/components/ui/CustomButton.vue";
import { debounce } from "@/utils/debounce";
import { verifyNetworkLiquidity } from "@/utils/networkLiquidity";
import type { ValidDeposit } from "@/model/ValidDeposit";
import { decimalCount } from "@/utils/decimalCount";
import { getTokenImage } from "@/utils/imagesPath";
import { onClickOutside } from "@vueuse/core";
import { Networks } from "@/config/networks";
import { TokenEnum } from "@/model/NetworkEnum";
// Store reference
const user = useUser();
@@ -35,106 +32,15 @@ const tokenValue = ref<number>(0);
const enableConfirmButton = ref<boolean>(false);
const hasLiquidity = ref<boolean>(true);
const validDecimals = ref<boolean>(true);
const identification = ref<string>('');
const identification = ref<string>("");
const selectedDeposits = ref<ValidDeposit[]>();
const reputationLimit = ref<number | null>(null);
const exceedsReputationLimit = ref<boolean>(false);
import ChevronDown from '@/assets/chevronDown.svg';
import { useOnboard } from '@web3-onboard/vue';
import { getParticipantID } from '@/blockchain/events';
import ChevronDown from "@/assets/chevronDown.svg";
import { useOnboard } from "@web3-onboard/vue";
import { getParticipantID } from "@/blockchain/events";
// Emits
const emit = defineEmits(['tokenBuy']);
const castAddrToKey = (address: Address): bigint => {
return BigInt(address) << BigInt(12);
};
const getUserCredit = async (userAddress: Address): Promise<bigint> => {
try {
const { address, abi, client } = await getContract(true);
const userKey = castAddrToKey(userAddress);
const userCredit = await client.readContract({
address,
abi,
functionName: 'userRecord',
args: [userKey],
});
return userCredit as bigint;
} catch (error) {
console.error('Error fetching user credit:', error);
return BigInt(0);
}
};
const getReputationAddress = async (): Promise<Address | null> => {
try {
const { address, abi, client } = await getContract(true);
const reputationAddr = await client.readContract({
address,
abi,
functionName: 'reputation',
});
return reputationAddr as Address;
} catch (error) {
console.error('Error fetching reputation address:', error);
return null;
}
};
const getSpendLimit = async (userCredit: bigint): Promise<bigint> => {
try {
const reputationAddr = await getReputationAddress();
if (!reputationAddr) return BigInt(0);
const { client } = await getContract(true);
const spendLimit = await client.readContract({
address: reputationAddr,
abi: reputationAbi,
functionName: 'limiter',
args: [userCredit],
});
return spendLimit as bigint;
} catch (error) {
console.error('Error fetching spend limit:', error);
return BigInt(0);
}
};
const checkReputationLimit = async (inputValue: number): Promise<void> => {
exceedsReputationLimit.value = false;
if (!walletAddress.value) {
reputationLimit.value = null;
return;
}
if (inputValue === 0) {
return;
}
try {
const userCredit = await getUserCredit(walletAddress.value);
const spendLimitRaw = await getSpendLimit(userCredit);
const spendLimitNumber = Number(spendLimitRaw);
reputationLimit.value = spendLimitNumber;
exceedsReputationLimit.value = spendLimitNumber < inputValue;
enableConfirmButton.value = !exceedsReputationLimit.value;
} catch (error) {
console.error('Error checking reputation limit:', error);
reputationLimit.value = null;
exceedsReputationLimit.value = false;
}
};
const emit = defineEmits(["tokenBuy"]);
// Blockchain methods
const connectAccount = async (): Promise<void> => {
@@ -144,11 +50,11 @@ const connectAccount = async (): Promise<void> => {
const emitConfirmButton = async (): Promise<void> => {
const deposit = selectedDeposits.value?.find(
(d) => d.network === network.value,
(d) => d.network === network.value
);
if (!deposit) return;
deposit.participantID = await getParticipantID(deposit.seller, deposit.token);
emit('tokenBuy', deposit, tokenValue.value);
emit("tokenBuy", deposit, tokenValue.value);
};
// Debounce methods
@@ -164,7 +70,6 @@ const handleInputEvent = (event: any): void => {
}
validDecimals.value = true;
checkReputationLimit(tokenValue.value);
verifyLiquidity();
};
@@ -184,14 +89,17 @@ const handleSelectedToken = (token: TokenEnum): void => {
// Verify if there is a valid deposit to buy
const verifyLiquidity = (): void => {
enableConfirmButton.value = false;
if (!walletAddress.value) return;
if (!walletAddress.value)
return;
const selDeposits = verifyNetworkLiquidity(
tokenValue.value,
walletAddress.value,
depositsValidList.value,
depositsValidList.value
);
selectedDeposits.value = selDeposits;
hasLiquidity.value = !!selDeposits.find((d) => d.network === network.value);
hasLiquidity.value = !!selDeposits.find(
(d) => d.network === network.value
);
enableOrDisableConfirmButton();
};
@@ -218,13 +126,6 @@ watch(walletAddress, (): void => {
verifyLiquidity();
});
const availableNetworks = computed(() => {
if (!selectedDeposits.value) return [];
return Object.values(Networks).filter((network) =>
selectedDeposits.value?.some((d) => d.network.id === network.id),
);
});
// Add form submission handler
const handleSubmit = async (e: Event): Promise<void> => {
e.preventDefault();
@@ -251,12 +152,14 @@ const handleSubmit = async (e: Event): Promise<void> => {
</div>
<form class="main-container" @submit="handleSubmit">
<div class="backdrop-blur -z-10 w-full h-full"></div>
<div class="flex flex-col w-full bg-white sm:px-10 px-6 py-5 rounded-lg">
<div
class="flex flex-col w-full bg-white sm:px-10 px-6 py-5 rounded-lg border-y-10"
>
<div class="flex justify-between sm:w-full items-center">
<input
type="number"
name="tokenAmount"
class="border-none outline-none text-lg text-gray-900 sm:flex-1 max-w-[60%]"
class="border-none outline-none text-lg text-gray-900"
v-bind:class="{
'font-semibold': tokenValue != undefined,
'text-xl': tokenValue != undefined,
@@ -266,7 +169,7 @@ const handleSubmit = async (e: Event): Promise<void> => {
step=".01"
required
/>
<div class="relative overflow-visible ml-auto sm:ml-0">
<div class="relative overflow-visible">
<button
ref="tokenDropdownRef"
class="flex flex-row items-center p-2 bg-gray-300 hover:bg-gray-200 focus:outline-indigo-800 focus:outline-2 rounded-3xl min-w-fit gap-2 transition-colors"
@@ -329,12 +232,24 @@ const handleSubmit = async (e: Event): Promise<void> => {
</p>
<div class="flex gap-2">
<img
v-for="network in availableNetworks"
:key="network.id"
:alt="`${network.name} image`"
:src="getNetworkImage(network.name)"
alt="Rootstock image"
src="@/assets/rootstock.svg?url"
width="24"
height="24"
v-if="
selectedDeposits &&
selectedDeposits.find((d) => d.network == Networks.rootstockTestnet)
"
/>
<img
alt="Ethereum image"
src="@/assets/ethereum.svg?url"
width="24"
height="24"
v-if="
selectedDeposits &&
selectedDeposits.find((d) => d.network == Networks.sepolia)
"
/>
</div>
</div>
@@ -358,10 +273,7 @@ const handleSubmit = async (e: Event): Promise<void> => {
<div
class="flex justify-center"
v-else-if="
!hasLiquidity &&
!loadingNetworkLiquidity &&
tokenValue > 0 &&
!exceedsReputationLimit
!hasLiquidity && !loadingNetworkLiquidity && tokenValue > 0
"
>
<span class="text-red-500 font-normal text-sm"
@@ -369,22 +281,11 @@ const handleSubmit = async (e: Event): Promise<void> => {
demanda</span
>
</div>
<div
class="flex justify-center"
v-if="
exceedsReputationLimit &&
!loadingNetworkLiquidity &&
reputationLimit !== null
"
>
<span class="text-red-500 font-normal text-sm"
>O valor excede o limite permitido pela sua reputação. Limite
máximo: {{ reputationLimit }} {{ selectedToken }}</span
>
</div>
</div>
<div class="flex flex-col w-full bg-white sm:px-10 px-6 py-4 rounded-lg">
<div
class="flex flex-col w-full bg-white sm:px-10 px-6 py-4 rounded-lg border-y-10"
>
<input
type="text"
v-model="identification"
@@ -401,7 +302,6 @@ const handleSubmit = async (e: Event): Promise<void> => {
v-if="walletAddress"
type="submit"
text="Confirmar Oferta"
:isDisabled="!enableConfirmButton"
/>
<CustomButton
v-else
@@ -413,7 +313,6 @@ const handleSubmit = async (e: Event): Promise<void> => {
</template>
<style scoped>
@reference "tailwindcss";
.custom-divide {
width: 100%;
border-bottom: 1px solid #d1d5db;
@@ -436,12 +335,12 @@ const handleSubmit = async (e: Event): Promise<void> => {
@apply text-white text-center;
}
input[type='number'] {
input[type="number"] {
-moz-appearance: textfield;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
}

57
src/components/BuyerSteps/QrCodeComponent.vue
View File

@@ -1,12 +1,12 @@
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import CustomButton from '@/components/ui/CustomButton.vue';
import CustomModal from '@/components/ui/CustomModal.vue';
import SpinnerComponent from '@/components/ui/SpinnerComponent.vue';
import { createSolicitation, getSolicitation, type Offer } from '@/utils/bbPay';
import { getParticipantID } from '@/blockchain/events';
import { getUnreleasedLockById } from '@/blockchain/events';
import QRCode from 'qrcode';
import { ref, onMounted, onUnmounted } from "vue";
import CustomButton from "@/components/ui/CustomButton.vue";
import CustomModal from "@/components/ui/CustomModal.vue";
import SpinnerComponent from "@/components/ui/SpinnerComponent.vue";
import { createSolicitation, getSolicitation, type Offer } from "@/utils/bbPay";
import { getParticipantID } from "@/blockchain/events";
import { getUnreleasedLockById } from "@/blockchain/events";
import QRCode from "qrcode";
// Props
interface Props {
@@ -15,11 +15,11 @@ interface Props {
const props = defineProps<Props>();
const qrCode = ref<string>('');
const qrCodeSvg = ref<string>('');
const qrCode = ref<string>("");
const qrCodeSvg = ref<string>("");
const showWarnModal = ref<boolean>(true);
const pixTimestamp = ref<string>('');
const releaseSignature = ref<string>('');
const pixTimestamp = ref<string>("");
const releaseSignature = ref<string>("");
const solicitationData = ref<any>(null);
const pollingInterval = ref<NodeJS.Timeout | null>(null);
const copyFeedback = ref<boolean>(false);
@@ -29,22 +29,22 @@ const copyFeedbackTimeout = ref<NodeJS.Timeout | null>(null);
const generateQrCodeSvg = async (text: string) => {
try {
const svgString = await QRCode.toString(text, {
type: 'svg',
type: "svg",
width: 192, // 48 * 4 for better quality
margin: 2,
color: {
dark: '#000000',
light: '#FFFFFF',
dark: "#000000",
light: "#FFFFFF",
},
});
qrCodeSvg.value = svgString;
} catch (error) {
console.error('Error generating QR code SVG:', error);
console.error("Error generating QR code SVG:", error);
}
};
// Emits
const emit = defineEmits(['pixValidated']);
const emit = defineEmits(["pixValidated"]);
// Function to check solicitation status
const checkSolicitationStatus = async () => {
@@ -54,7 +54,7 @@ const checkSolicitationStatus = async () => {
try {
const response = await getSolicitation(
solicitationData.value.numeroSolicitacao,
solicitationData.value.numeroSolicitacao
);
if (response.signature) {
@@ -67,7 +67,7 @@ const checkSolicitationStatus = async () => {
}
}
} catch (error) {
console.error('Error checking solicitation status:', error);
console.error("Error checking solicitation status:", error);
}
};
@@ -82,6 +82,7 @@ const startPolling = () => {
pollingInterval.value = setInterval(checkSolicitationStatus, 10000);
};
const copyToClipboard = async () => {
if (!qrCode.value) {
return;
@@ -100,17 +101,20 @@ const copyToClipboard = async () => {
copyFeedback.value = false;
}, 2000);
} catch (error) {
console.error('Error copying to clipboard:', error);
console.error("Error copying to clipboard:", error);
}
};
onMounted(async () => {
try {
const { tokenAddress, sellerAddress, amount } = await getUnreleasedLockById(
BigInt(props.lockID),
BigInt(props.lockID)
);
const participantId = await getParticipantID(sellerAddress, tokenAddress);
const participantId = await getParticipantID(
sellerAddress,
tokenAddress
);
const offer: Offer = {
amount,
@@ -130,7 +134,7 @@ onMounted(async () => {
// Start polling for solicitation status
startPolling();
} catch (error) {
console.error('Error creating solicitation:', error);
console.error("Error creating solicitation:", error);
}
});
@@ -219,7 +223,6 @@ onUnmounted(() => {
</template>
<style scoped>
@reference "tailwindcss";
.page {
@apply flex flex-col items-center justify-center w-full mt-16;
}
@@ -268,13 +271,13 @@ h2 {
@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-6 max-w-screen-sm;
}
input[type='number'] {
input[type="number"] {
appearance: textfield;
-moz-appearance: textfield;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
}

78
src/components/Explorer/AnalyticsCard.vue
View File

@@ -1,78 +0,0 @@
<script setup lang="ts">
interface Props {
title: string;
value: string;
change?: string;
changeType?: 'positive' | 'negative' | 'neutral';
icon?: string;
loading?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
changeType: 'neutral',
loading: false,
});
</script>
<template>
<div class="analytics-card">
<div class="analytics-content">
<div v-if="loading" class="analytics-value">
<div class="animate-pulse bg-gray-300 h-8 w-16 rounded"></div>
</div>
<div v-else class="analytics-value">{{ value }}</div>
<div class="analytics-title">{{ title }}</div>
<div
v-if="change && !loading"
class="analytics-change"
:class="`change-${changeType}`"
>
{{ change }}
</div>
</div>
<div v-if="icon && !loading" class="analytics-icon">
<img :src="icon" :alt="`${title} icon`" class="w-8 h-8" />
</div>
</div>
</template>
<style scoped>
@reference "tailwindcss";
.analytics-card {
@apply bg-white rounded-lg border border-gray-200 p-6 flex items-center justify-between shadow-lg;
}
.analytics-content {
@apply flex flex-col;
}
.analytics-value {
@apply text-2xl font-bold text-amber-400 mb-1 break-words overflow-hidden;
word-break: break-all;
max-width: 100%;
}
.analytics-title {
@apply text-sm text-gray-900 mb-1;
}
.analytics-change {
@apply text-xs font-medium;
}
.change-positive {
@apply text-green-600;
}
.change-negative {
@apply text-red-600;
}
.change-neutral {
@apply text-gray-600;
}
.analytics-icon {
@apply flex-shrink-0;
}
</style>

311
src/components/Explorer/TransactionTable.vue
View File

@@ -1,311 +0,0 @@
<script setup lang="ts">
import { ref } from 'vue';
interface Transaction {
id: string;
type: 'deposit' | 'lock' | 'release' | 'return';
timestamp: string;
seller?: string;
buyer?: string | null;
amount: string;
token: string;
blockNumber: string;
transactionHash: string;
}
interface Props {
transactions: Transaction[];
networkExplorerUrl: string;
}
const props = defineProps<Props>();
const copyFeedback = ref<{ [key: string]: boolean }>({});
const copyFeedbackTimeout = ref<{ [key: string]: NodeJS.Timeout | null }>({});
const getTransactionTypeInfo = (type: string) => {
const typeMap = {
deposit: { label: 'Depósito', status: 'completed' as const },
lock: { label: 'Bloqueio', status: 'open' as const },
release: { label: 'Liberação', status: 'completed' as const },
return: { label: 'Retorno', status: 'expired' as const },
};
return (
typeMap[type as keyof typeof typeMap] || {
label: type,
status: 'pending' as const,
}
);
};
const getTransactionTypeColor = (type: string) => {
const colorMap = {
deposit: 'text-emerald-600',
lock: 'text-amber-600',
release: 'text-emerald-600',
return: 'text-gray-600',
};
return colorMap[type as keyof typeof colorMap] || 'text-gray-600';
};
const formatAddress = (address: string) => {
return `${address.slice(0, 6)}...${address.slice(-4)}`;
};
const formatAmount = (amount: string, decimals: number = 18): string => {
const num = parseFloat(amount) / Math.pow(10, decimals);
return num.toString();
};
const getExplorerUrl = (txHash: string) => {
return `${props.networkExplorerUrl}/tx/${txHash}`;
};
const copyToClipboard = async (address: string, key: string) => {
if (!address) {
return;
}
try {
await navigator.clipboard.writeText(address);
if (copyFeedbackTimeout.value[key]) {
clearTimeout(copyFeedbackTimeout.value[key]!);
}
copyFeedback.value[key] = true;
copyFeedbackTimeout.value[key] = setTimeout(() => {
copyFeedback.value[key] = false;
}, 2000);
} catch (error) {
console.error('Error copying to clipboard:', error);
}
};
</script>
<template>
<div>
<div class="hidden lg:block overflow-x-auto">
<table class="w-full">
<thead>
<tr class="border-b border-gray-200">
<th class="text-left py-3 px-4 text-gray-700 font-medium">
Horário
</th>
<th class="text-left py-3 px-4 text-gray-700 font-medium">Tipo</th>
<th class="text-left py-3 px-4 text-gray-700 font-medium">
Participantes
</th>
<th class="text-left py-3 px-4 text-gray-700 font-medium">Valor</th>
<th class="text-left py-3 px-4 text-gray-700 font-medium">Bloco</th>
<th class="text-left py-3 px-4 text-gray-700 font-medium">Ações</th>
</tr>
</thead>
<tbody>
<tr
v-for="transaction in transactions"
:key="transaction.id"
class="border-b border-gray-100 hover:bg-gray-50 transition-colors"
>
<td class="py-4 px-4">
<div class="text-sm text-gray-600">
{{ transaction.timestamp }}
</div>
</td>
<td class="py-4 px-4">
<span
:class="getTransactionTypeColor(transaction.type)"
class="text-sm font-medium"
>
{{ getTransactionTypeInfo(transaction.type).label }}
</span>
</td>
<td class="py-4 px-4">
<div class="space-y-1">
<div v-if="transaction.seller" class="text-sm">
<span class="text-gray-600">Vendedor: </span>
<div class="relative inline-block">
<span
class="text-gray-900 font-mono cursor-pointer hover:text-amber-500 transition-colors"
@click="
copyToClipboard(
transaction.seller,
`seller-${transaction.id}`,
)
"
title="Copiar"
>
{{ formatAddress(transaction.seller) }}
</span>
<transition name="fade">
<span
v-if="copyFeedback[`seller-${transaction.id}`]"
class="absolute -top-6 left-1/2 transform -translate-x-1/2 text-xs text-emerald-500 font-semibold bg-white px-2 py-1 rounded shadow-sm whitespace-nowrap z-10"
>
Copiado!
</span>
</transition>
</div>
</div>
<div v-if="transaction.buyer" class="text-sm">
<span class="text-gray-600">Comprador: </span>
<div class="relative inline-block">
<span
class="text-gray-900 font-mono cursor-pointer hover:text-amber-500 transition-colors"
@click="
copyToClipboard(
transaction.buyer,
`buyer-${transaction.id}`,
)
"
title="Copiar"
>
{{ formatAddress(transaction.buyer) }}
</span>
<transition name="fade">
<span
v-if="copyFeedback[`buyer-${transaction.id}`]"
class="absolute -top-6 left-1/2 transform -translate-x-1/2 text-xs text-emerald-500 font-semibold bg-white px-2 py-1 rounded shadow-sm whitespace-nowrap z-10"
>
Copiado!
</span>
</transition>
</div>
</div>
</div>
</td>
<td class="py-4 px-4">
<div class="text-sm font-semibold text-emerald-600">
{{ formatAmount(transaction.amount, 18) }} BRZ
</div>
</td>
<td class="py-4 px-4">
<div class="text-sm text-gray-600 font-mono">
#{{ transaction.blockNumber }}
</div>
</td>
<td class="py-4 px-4">
<a
:href="getExplorerUrl(transaction.transactionHash)"
target="_blank"
rel="noopener noreferrer"
class="inline-flex items-center px-3 py-1 bg-amber-400 text-gray-900 rounded-lg text-sm font-medium hover:bg-amber-500 transition-colors"
>
Explorador
</a>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Mobile Cards -->
<div class="lg:hidden space-y-4">
<div
v-for="transaction in transactions"
:key="transaction.id"
class="bg-gray-50 rounded-lg p-4 border border-gray-200"
>
<div class="flex items-center justify-between mb-3">
<span
:class="getTransactionTypeColor(transaction.type)"
class="text-sm font-medium"
>
{{ getTransactionTypeInfo(transaction.type).label }}
</span>
<div class="text-sm text-gray-600">{{ transaction.timestamp }}</div>
</div>
<div class="space-y-2 mb-4">
<div v-if="transaction.seller" class="text-sm">
<span class="text-gray-600">Vendedor: </span>
<div class="relative inline-block">
<span
class="text-gray-900 font-mono cursor-pointer hover:text-amber-500 transition-colors"
@click="
copyToClipboard(
transaction.seller,
`seller-${transaction.id}`,
)
"
title="Copiar"
>
{{ formatAddress(transaction.seller) }}
</span>
<transition name="fade">
<span
v-if="copyFeedback[`seller-${transaction.id}`]"
class="absolute -top-6 left-1/2 transform -translate-x-1/2 text-xs text-emerald-500 font-semibold bg-white px-2 py-1 rounded shadow-sm whitespace-nowrap z-10"
>
Copiado!
</span>
</transition>
</div>
</div>
<div v-if="transaction.buyer" class="text-sm">
<span class="text-gray-600">Comprador: </span>
<div class="relative inline-block">
<span
class="text-gray-900 font-mono cursor-pointer hover:text-amber-500 transition-colors"
@click="
copyToClipboard(transaction.buyer, `buyer-${transaction.id}`)
"
title="Copiar"
>
{{ formatAddress(transaction.buyer) }}
</span>
<transition name="fade">
<span
v-if="copyFeedback[`buyer-${transaction.id}`]"
class="absolute -top-6 left-1/2 transform -translate-x-1/2 text-xs text-emerald-500 font-semibold bg-white px-2 py-1 rounded shadow-sm whitespace-nowrap z-10"
>
Copiado!
</span>
</transition>
</div>
</div>
<div class="text-sm">
<span class="text-gray-600">Valor: </span>
<span class="font-semibold text-emerald-600"
>{{ formatAmount(transaction.amount, 18) }} BRZ</span
>
</div>
<div class="text-sm">
<span class="text-gray-600">Bloco: </span>
<span class="text-gray-900 font-mono"
>#{{ transaction.blockNumber }}</span
>
</div>
</div>
<a
:href="getExplorerUrl(transaction.transactionHash)"
target="_blank"
rel="noopener noreferrer"
class="inline-flex items-center px-3 py-1 bg-amber-400 text-gray-900 rounded-lg text-sm font-medium hover:bg-amber-500 transition-colors"
>
Ver no Explorador
</a>
</div>
</div>
<!-- Empty State -->
<div v-if="transactions.length === 0" class="text-center py-12">
<div class="text-gray-500 text-lg mb-2">📭</div>
<p class="text-gray-600">Nenhuma transação encontrada</p>
</div>
</div>
</template>
<style scoped>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>

37
src/components/ListingComponent/BalanceCard.vue
View File

@@ -1,11 +1,11 @@
<script setup lang="ts">
import type { ValidDeposit } from '@/model/ValidDeposit';
import { ref, watch, onMounted, computed } from 'vue';
import { debounce } from '@/utils/debounce';
import { decimalCount } from '@/utils/decimalCount';
import { useFloating, arrow, offset, flip, shift } from '@floating-ui/vue';
import IconButton from '../ui/IconButton.vue';
import withdrawIcon from '@/assets/withdraw.svg?url';
import type { ValidDeposit } from "@/model/ValidDeposit";
import { ref, watch, onMounted, computed } from "vue";
import { debounce } from "@/utils/debounce";
import { decimalCount } from "@/utils/decimalCount";
import { useFloating, arrow, offset, flip, shift } from "@floating-ui/vue";
import IconButton from "../ui/IconButton.vue";
import withdrawIcon from "@/assets/withdraw.svg?url";
const props = defineProps<{
validDeposits: ValidDeposit[];
@@ -17,7 +17,7 @@ const emit = defineEmits<{
withdraw: [amount: string];
}>();
const withdrawAmount = ref<string>('');
const withdrawAmount = ref<string>("");
const isCollapsibleOpen = ref<boolean>(false);
const validDecimals = ref<boolean>(true);
const validWithdrawAmount = ref<boolean>(true);
@@ -58,9 +58,9 @@ const handleInputEvent = (event: any): void => {
const callWithdraw = () => {
if (enableConfirmButton.value && withdrawAmount.value) {
emit('withdraw', withdrawAmount.value);
emit("withdraw", withdrawAmount.value);
// Reset form after withdraw
withdrawAmount.value = '';
withdrawAmount.value = "";
isCollapsibleOpen.value = false;
}
};
@@ -71,7 +71,7 @@ const openWithdrawForm = () => {
const cancelWithdraw = () => {
isCollapsibleOpen.value = false;
withdrawAmount.value = '';
withdrawAmount.value = "";
validDecimals.value = true;
validWithdrawAmount.value = true;
enableConfirmButton.value = false;
@@ -79,7 +79,7 @@ const cancelWithdraw = () => {
onMounted(() => {
useFloating(reference, floating, {
placement: 'right',
placement: "right",
middleware: [
offset(10),
flip(),
@@ -162,7 +162,10 @@ onMounted(() => {
</span>
</div>
<hr v-show="isCollapsibleOpen" class="pb-3" />
<div v-show="isCollapsibleOpen" class="flex justify-between items-center">
<div
v-show="isCollapsibleOpen"
class="flex justify-between items-center"
>
<h1
@click="cancelWithdraw"
class="text-black font-medium cursor-pointer hover:text-gray-600 transition-colors"
@@ -185,7 +188,6 @@ onMounted(() => {
</template>
<style scoped>
@reference "tailwindcss";
p {
@apply text-gray-900;
}
@@ -194,13 +196,13 @@ p {
@apply bg-white text-gray-900 font-medium text-xs md:text-base px-3 py-2 rounded border-2 border-emerald-500 left-5 top-[-3rem];
}
input[type='number'] {
input[type="number"] {
appearance: textfield;
-moz-appearance: textfield;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
@@ -210,3 +212,4 @@ input[type='number']::-webkit-outer-spin-button {
}
}
</style>

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

@@ -1,11 +1,11 @@
<script setup lang="ts">
import type { ValidDeposit } from '@/model/ValidDeposit';
import type { WalletTransaction } from '@/model/WalletTransaction';
import { useUser } from '@/composables/useUser';
import { ref, watch } from 'vue';
import SpinnerComponent from '../ui/SpinnerComponent.vue';
import BalanceCard from './BalanceCard.vue';
import TransactionCard from './TransactionCard.vue';
import type { ValidDeposit } from "@/model/ValidDeposit";
import type { WalletTransaction } from "@/model/WalletTransaction";
import { useUser } from "@/composables/useUser";
import { ref, watch } from "vue";
import SpinnerComponent from "../ui/SpinnerComponent.vue";
import BalanceCard from "./BalanceCard.vue";
import TransactionCard from "./TransactionCard.vue";
const user = useUser();
@@ -16,14 +16,14 @@ const props = defineProps<{
activeLockAmount: number;
}>();
const emit = defineEmits(['depositWithdrawn']);
const emit = defineEmits(["depositWithdrawn"]);
const { loadingWalletTransactions } = user;
const itemsToShow = ref<WalletTransaction[]>([]);
const callWithdraw = (amount: string) => {
emit('depositWithdrawn', amount);
emit("depositWithdrawn", amount);
};
const showInitialItems = (): void => {
@@ -33,13 +33,13 @@ const showInitialItems = (): void => {
const openEtherscanUrl = (transactionHash: string): void => {
const networkUrl = user.network.value.blockExplorers?.default.url;
const url = `https://${networkUrl}/tx/${transactionHash}`;
window.open(url, '_blank');
window.open(url, "_blank");
};
const loadMore = (): void => {
const itemsShowing = itemsToShow.value.length;
itemsToShow.value?.push(
...props.walletTransactions.slice(itemsShowing, itemsShowing + 3),
...props.walletTransactions.slice(itemsShowing, itemsShowing + 3)
);
};

66
src/components/ListingComponent/TransactionCard.vue
View File

@@ -1,9 +1,9 @@
<script setup lang="ts">
import type { WalletTransaction } from '@/model/WalletTransaction';
import { TokenEnum } from '@/model/NetworkEnum';
import { computed } from 'vue';
import StatusBadge, { type StatusType } from '../ui/StatusBadge.vue';
import { Networks } from '@/config/networks';
import type { WalletTransaction } from "@/model/WalletTransaction";
import { TokenEnum } from "@/model/NetworkEnum";
import { computed } from "vue";
import StatusBadge, { type StatusType } from "../ui/StatusBadge.vue";
import { Networks } from "@/config/networks";
const props = defineProps<{
transaction: WalletTransaction;
@@ -16,64 +16,48 @@ const emit = defineEmits<{
}>();
const eventName = computed(() => {
if (!props.transaction.event) return 'Desconhecido';
if (!props.transaction.event) return "Desconhecido";
const possibleEventName: { [key: string]: string } = {
DepositAdded: 'Oferta',
LockAdded: 'Reserva',
LockReleased: 'Compra',
DepositWithdrawn: 'Retirada',
DepositAdded: "Oferta",
LockAdded: "Reserva",
LockReleased: "Compra",
DepositWithdrawn: "Retirada",
};
return possibleEventName[props.transaction.event] || 'Desconhecido';
return possibleEventName[props.transaction.event] || "Desconhecido";
});
const explorerName = computed(() => {
return Networks[(props.networkName as string).toLowerCase()].blockExplorers
?.default.name;
return Networks[props.networkName].blockExplorers?.default.name;
});
const statusType = computed((): StatusType => {
if (eventName.value === 'Reserva') {
if (eventName.value === "Reserva") {
switch (props.transaction.lockStatus) {
case 1:
return 'open';
return "open";
case 2:
return 'expired';
return "expired";
case 3:
return 'completed';
return "completed";
default:
return 'completed';
return "completed";
}
}
return 'completed';
return "completed";
});
const showExplorerLink = computed(() => {
return eventName.value !== 'Reserva' || props.transaction.lockStatus !== 1;
return eventName.value !== "Reserva" || props.transaction.lockStatus !== 1;
});
const showContinueButton = computed(() => {
return eventName.value === 'Reserva' && props.transaction.lockStatus === 1;
});
const formattedDate = computed(() => {
if (!props.transaction.blockTimestamp) return '';
const timestamp = props.transaction.blockTimestamp;
const date = new Date(timestamp * 1000);
const day = String(date.getDate()).padStart(2, '0');
const month = String(date.getMonth() + 1).padStart(2, '0');
const year = date.getFullYear();
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
return `${day}/${month}/${year} ${hours}:${minutes}`;
return eventName.value === "Reserva" && props.transaction.lockStatus === 1;
});
const handleExplorerClick = () => {
emit('openExplorer', props.transaction.transactionHash);
emit("openExplorer", props.transaction.transactionHash);
};
</script>
@@ -87,12 +71,6 @@ const handleExplorerClick = () => {
<span class="text-xl sm:text-xl leading-7 font-semibold text-gray-900">
{{ transaction.amount }} {{ selectedToken }}
</span>
<span
v-if="formattedDate"
class="text-xs sm:text-sm leading-5 font-normal text-gray-500 mt-1"
>
{{ formattedDate }}
</span>
</div>
<div class="flex flex-col items-center justify-center">
<div class="mb-2 mt-4">
@@ -131,7 +109,6 @@ const handleExplorerClick = () => {
</template>
<style scoped>
@reference "tailwindcss";
.item-container {
@apply flex justify-between items-center;
}
@@ -144,3 +121,4 @@ const handleExplorerClick = () => {
@apply rounded-lg border-amber-300 border-2 px-3 py-2 text-gray-900 font-semibold sm:text-base text-xs hover:bg-transparent w-full text-center;
}
</style>

69
src/components/SellerSteps/SellerComponent.vue
View File

@@ -1,16 +1,16 @@
<script setup lang="ts">
import { ref, computed } from 'vue';
import { useUser } from '@/composables/useUser';
import CustomButton from '@/components/ui/CustomButton.vue';
import { postProcessKey } from '@/utils/pixKeyFormat';
import { TokenEnum } from '@/model/NetworkEnum';
import { getTokenImage } from '@/utils/imagesPath';
import { useOnboard } from '@web3-onboard/vue';
import ChevronDown from '@/assets/chevron.svg';
import { ref, computed } from "vue";
import { useUser } from "@/composables/useUser";
import CustomButton from "@/components/ui/CustomButton.vue";
import { postProcessKey } from "@/utils/pixKeyFormat";
import { TokenEnum } from "@/model/NetworkEnum";
import { getTokenImage } from "@/utils/imagesPath";
import { useOnboard } from "@web3-onboard/vue";
import ChevronDown from "@/assets/chevron.svg";
// Import the bank list
import bankList from '@/utils/files/isbpList.json';
import type { Participant } from '@/utils/bbPay';
import bankList from "@/utils/files/isbpList.json";
import type { Participant } from "@/utils/bbPay";
// Define Bank interface
interface Bank {
@@ -26,17 +26,17 @@ const formRef = ref<HTMLFormElement | null>(null);
const user = useUser();
const { walletAddress, selectedToken } = user;
const offer = ref<string>('');
const identification = ref<string>('');
const account = ref<string>('');
const branch = ref<string>('');
const accountType = ref<string>('');
const offer = ref<string>("");
const identification = ref<string>("");
const account = ref<string>("");
const branch = ref<string>("");
const accountType = ref<string>("");
const selectTokenToggle = ref<boolean>(false);
const savingsVariation = ref<string>('');
const savingsVariation = ref<string>("");
const errors = ref<{ [key: string]: string }>({});
// Bank selection
const bankSearchQuery = ref<string>('');
const bankSearchQuery = ref<string>("");
const showBankList = ref<boolean>(false);
const selectedBank = ref<Bank | null>(null);
@@ -44,7 +44,7 @@ const filteredBanks = computed(() => {
if (!bankSearchQuery.value) return [];
return bankList
.filter((bank) =>
bank.longName.toLowerCase().includes(bankSearchQuery.value.toLowerCase()),
bank.longName.toLowerCase().includes(bankSearchQuery.value.toLowerCase())
)
.slice(0, 5);
});
@@ -56,7 +56,7 @@ const handleBankSelect = (bank: Bank) => {
};
// Emits
const emit = defineEmits(['approveTokens']);
const emit = defineEmits(["approveTokens"]);
// Methods
const connectAccount = async (): Promise<void> => {
@@ -77,10 +77,10 @@ const handleSubmit = (e: Event): void => {
accountType: accountType.value,
account: account.value,
branch: branch.value,
savingsVariation: savingsVariation.value || '',
savingsVariation: savingsVariation.value || "",
};
emit('approveTokens', data);
emit("approveTokens", data);
};
// Token selection
@@ -113,7 +113,7 @@ const handleSelectedToken = (token: TokenEnum): void => {
<form ref="formRef" @submit="handleSubmit" class="main-container">
<!-- Offer input -->
<div
class="flex justify-between items-center w-full bg-white sm:px-10 px-6 py-5 rounded-lg gap-4"
class="flex justify-between items-center w-full bg-white sm:px-10 px-6 py-5 rounded-lg border-y-10 gap-4"
>
<input
type="number"
@@ -185,7 +185,9 @@ const handleSelectedToken = (token: TokenEnum): void => {
</div>
</div>
<!-- CPF or CNPJ input -->
<div class="flex flex-col w-full bg-white sm:px-10 px-6 py-4 rounded-lg">
<div
class="flex flex-col w-full bg-white sm:px-10 px-6 py-4 rounded-lg border-y-10"
>
<input
type="text"
v-model="identification"
@@ -198,7 +200,9 @@ const handleSelectedToken = (token: TokenEnum): void => {
/>
</div>
<!-- Bank selection -->
<div class="flex flex-col w-full bg-white sm:px-10 px-6 py-4 rounded-lg">
<div
class="flex flex-col w-full bg-white sm:px-10 px-6 py-4 rounded-lg border-y-10"
>
<div class="relative">
<input
type="text"
@@ -231,7 +235,9 @@ const handleSelectedToken = (token: TokenEnum): void => {
}}</span>
</div>
<!-- Account and Branch inputs -->
<div class="flex flex-col w-full bg-white sm:px-10 px-6 py-4 rounded-lg">
<div
class="flex flex-col w-full bg-white sm:px-10 px-6 py-4 rounded-lg border-y-10"
>
<div class="flex gap-4">
<div class="flex-1">
<input
@@ -256,7 +262,9 @@ const handleSelectedToken = (token: TokenEnum): void => {
</div>
</div>
<!-- Account Type Selection -->
<div class="flex flex-col w-full bg-white sm:px-10 px-6 py-4 rounded-lg">
<div
class="flex flex-col w-full bg-white sm:px-10 px-6 py-4 rounded-lg border-y-10"
>
<div class="flex gap-4">
<div class="flex-1">
<select
@@ -279,7 +287,7 @@ const handleSelectedToken = (token: TokenEnum): void => {
v-if="accountType === '2'"
type="text"
v-model="savingsVariation"
class="border-none outline-none sm:text-lg text-sm text-gray-900 w-full bg-white sm:px-10 px-6 py-4 rounded-lg"
class="border-none outline-none sm:text-lg text-sm text-gray-900 w-full bg-white sm:px-10 px-6 py-4 rounded-lg border-y-10"
:class="{ 'text-xl font-medium': savingsVariation }"
placeholder="Variação da poupança"
required
@@ -297,7 +305,6 @@ const handleSelectedToken = (token: TokenEnum): void => {
</template>
<style scoped>
@reference "tailwindcss";
.custom-divide {
width: 100%;
border-bottom: 1px solid #d1d5db;
@@ -320,13 +327,13 @@ const handleSelectedToken = (token: TokenEnum): void => {
@apply text-white text-center;
}
input[type='number'] {
input[type="number"] {
-moz-appearance: textfield;
appearance: textfield;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
}

158
src/components/SellerSteps/SellerSearchComponent.vue Normal file
View File

@@ -0,0 +1,158 @@
<script setup lang="ts">
import { ref } from "vue";
import { useUser } from "@/composables/useUser";
import CustomButton from "@/components/ui/CustomButton.vue";
import { debounce } from "@/utils/debounce";
import { decimalCount } from "@/utils/decimalCount";
import { getTokenImage } from "@/utils/imagesPath";
import { useOnboard } from "@web3-onboard/vue";
// Store
const user = useUser();
const { walletAddress } = user;
// Reactive state
const tokenValue = ref<number>(0);
const enableSelectButton = ref<boolean>(false);
const hasLiquidity = ref<boolean>(true);
const validDecimals = ref<boolean>(true);
// Emits
const emit = defineEmits(["tokenBuy"]);
// Blockchain methods
const connectAccount = async (): Promise<void> => {
const { connectWallet } = useOnboard();
await connectWallet();
};
// Debounce methods
const handleInputEvent = (event: any): void => {
const { value } = event.target;
tokenValue.value = Number(value);
if (decimalCount(String(tokenValue.value)) > 2) {
validDecimals.value = false;
enableSelectButton.value = false;
return;
}
validDecimals.value = true;
};
</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="main-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="getTokenImage(user.selectedToken.value)"
/>
<span class="text-gray-900 text-lg w-fit" id="token">{{
user.selectedToken
}}</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?url"
width="24"
height="24"
/>
<img
alt="Ethereum image"
src="@/assets/ethereum.svg?url"
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="emit('tokenBuy')"
/>
<CustomButton
v-if="!walletAddress"
:text="'Conectar carteira'"
@buttonClicked="connectAccount()"
/>
</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-white text-center;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
</style>

13
src/components/SellerSteps/SendNetwork.vue
View File

@@ -1,8 +1,8 @@
<script setup lang="ts">
import CustomButton from '@/components/ui/CustomButton.vue';
import CustomButton from "@/components/ui/CustomButton.vue";
// Emits
const emit = defineEmits(['sendNetwork']);
const emit = defineEmits(["sendNetwork"]);
// props and store references
const props = defineProps({
@@ -27,7 +27,9 @@ const props = defineProps({
>
</div>
<div class="main-container">
<div class="flex flex-col w-full bg-white px-10 py-5 rounded-lg">
<div
class="flex flex-col w-full bg-white px-10 py-5 rounded-lg border-y-10"
>
<div>
<p>Tokens ofertados</p>
<p class="text-2xl text-gray-900">
@@ -57,7 +59,6 @@ const props = defineProps({
</template>
<style scoped>
@reference "tailwindcss";
.page {
@apply flex flex-col items-center justify-center w-full mt-16;
}
@@ -78,8 +79,8 @@ p {
@apply font-medium text-base;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
</style>

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

@@ -1,30 +1,18 @@
<script setup lang="ts">
import { ref, watch } from 'vue';
import { useUser } from '@/composables/useUser';
import { onClickOutside } from '@vueuse/core';
import { getNetworkImage } from '@/utils/imagesPath';
import { Networks } from '@/config/networks';
import { useOnboard } from '@web3-onboard/vue';
import { ref, watch } from "vue";
import { useUser } from "@/composables/useUser";
import { onClickOutside } from "@vueuse/core";
import { getNetworkImage } from "@/utils/imagesPath";
import { Networks } from "@/config/networks";
import { useOnboard } from "@web3-onboard/vue";
import ChevronDown from '@/assets/chevronDown.svg';
import TwitterIcon from '@/assets/twitterIcon.svg';
import LinkedinIcon from '@/assets/linkedinIcon.svg';
import GithubIcon from '@/assets/githubIcon.svg';
import { connectProvider } from '@/blockchain/provider';
import { DEFAULT_NETWORK } from '@/config/networks';
import type { NetworkConfig } from '@/model/NetworkEnum';
interface MenuOption {
label: string;
route?: string;
action?: () => void;
showInDesktop?: boolean;
showInMobile?: boolean;
isDynamic?: boolean;
dynamicLabel?: () => string;
dynamicRoute?: () => string;
showVersion?: boolean;
}
import ChevronDown from "@/assets/chevronDown.svg";
import TwitterIcon from "@/assets/twitterIcon.svg";
import LinkedinIcon from "@/assets/linkedinIcon.svg";
import GithubIcon from "@/assets/githubIcon.svg";
import { connectProvider } from "@/blockchain/provider";
import { DEFAULT_NETWORK } from "@/config/networks";
import type { NetworkConfig } from "@/model/NetworkEnum";
// Use the new composable
const user = useUser();
@@ -47,7 +35,7 @@ const connnectWallet = async (): Promise<void> => {
watch(connectedWallet, async (newVal: any) => {
connectProvider(newVal.provider);
const addresses = await newVal.provider.request({ method: 'eth_accounts' });
const addresses = await newVal.provider.request({ method: "eth_accounts" });
user.setWalletAddress(addresses.shift());
});
@@ -55,10 +43,12 @@ watch(connectedChain, (newVal: any) => {
// Check if connected chain is valid, otherwise default to Sepolia
if (
!newVal ||
!Object.values(Networks).some((network) => network.id === Number(newVal.id))
!Object.values(Networks).some(
(network) => network.id === Number(newVal.id)
)
) {
console.log(
'Invalid or unsupported network detected, defaulting to Sepolia',
"Invalid or unsupported network detected, defaulting to Sepolia"
);
user.setNetwork(DEFAULT_NETWORK);
return;
@@ -67,19 +57,20 @@ watch(connectedChain, (newVal: any) => {
});
const formatWalletAddress = (): string => {
if (!walletAddress.value) throw new Error('Wallet not connected');
if (!walletAddress.value)
throw new Error("Wallet not connected");
const walletAddressLength = walletAddress.value.length;
const initialText = walletAddress.value.substring(0, 5);
const finalText = walletAddress.value.substring(
walletAddressLength - 4,
walletAddressLength,
walletAddressLength
);
return `${initialText}...${finalText}`;
};
const disconnectUser = async (): Promise<void> => {
user.setWalletAddress(null);
await disconnectWallet({ label: connectedWallet.value?.label || '' });
await disconnectWallet({ label: connectedWallet.value?.label || "" });
closeMenu();
};
@@ -89,22 +80,15 @@ const closeMenu = (): void => {
const networkChange = async (network: NetworkConfig): Promise<void> => {
currencyMenuOpenToggle.value = false;
// If wallet is connected, try to change chain in wallet
if (connectedWallet.value) {
const chainId = network.id.toString(16);
try {
await setChain({
chainId: `0x${chainId}`,
wallet: connectedWallet.value.label,
});
user.setNetwork(network);
} catch (error) {
console.log('Error changing network', error);
}
} else {
// If no wallet connected, just update the network state
const chainId = network.id.toString(16)
try {
await setChain({
chainId: `0x${chainId}`,
wallet: connectedWallet.value?.label || "",
});
user.setNetwork(network);
} catch (error) {
console.log("Error changing network", error);
}
};
@@ -119,83 +103,11 @@ onClickOutside(currencyRef, () => {
onClickOutside(infoMenuRef, () => {
infoMenuOpenToggle.value = false;
});
const infoMenuOptions: MenuOption[] = [
{
label: 'Explorar Transações',
route: '/explore',
showInDesktop: true,
showInMobile: false,
},
{
label: 'Perguntas frequentes',
route: '/faq',
showInDesktop: true,
showInMobile: false,
},
{
label: 'Versões',
route: '/versions',
showInDesktop: true,
showInMobile: false,
},
];
const walletMenuOptions: MenuOption[] = [
{
label: 'Quero vender',
isDynamic: true,
dynamicLabel: () => (sellerView.value ? 'Quero comprar' : 'Quero vender'),
dynamicRoute: () => (sellerView.value ? '/' : '/seller'),
showInDesktop: false,
showInMobile: true,
},
{
label: 'Explorar Transações',
route: '/explore',
showInDesktop: false,
showInMobile: true,
},
{
label: 'Gerenciar Ofertas',
route: '/manage_bids',
showInDesktop: true,
showInMobile: true,
},
{
label: 'Perguntas frequentes',
route: '/faq',
showInDesktop: false,
showInMobile: true,
},
{
label: 'Versões',
route: '/versions',
showInDesktop: false,
showInMobile: true,
},
{
label: 'Desconectar',
route: '/',
action: disconnectUser,
showInDesktop: true,
showInMobile: true,
},
];
const handleMenuOptionClick = (option: MenuOption): void => {
if (!option.action) {
closeMenu();
}
};
</script>
<template>
<header class="z-20">
<RouterLink
:to="'/'"
class="default-button flex items-center md:h-auto md:py-2 h-10 py-0"
>
<RouterLink :to="'/'" class="default-button">
<img
alt="P2Pix logo"
class="logo hidden md:inline-block"
@@ -205,7 +117,7 @@ const handleMenuOptionClick = (option: MenuOption): void => {
/>
<img
alt="P2Pix logo"
class="logo inline-block md:hidden h-10"
class="logo inline-block md:hidden w-10/12"
width="40"
height="40"
src="@/assets/logo2.svg?url"
@@ -217,11 +129,13 @@ const handleMenuOptionClick = (option: MenuOption): void => {
<button
ref="infoMenuRef"
class="default-button hidden md:inline-block cursor-pointer"
@click="[
(infoMenuOpenToggle = !infoMenuOpenToggle),
(menuOpenToggle = false),
(currencyMenuOpenToggle = false),
]"
@click="
[
(infoMenuOpenToggle = !infoMenuOpenToggle),
(menuOpenToggle = false),
(currencyMenuOpenToggle = false),
]
"
>
<h1
class="topbar-text topbar-link"
@@ -241,45 +155,26 @@ const handleMenuOptionClick = (option: MenuOption): void => {
>
<div class="mt-2">
<div class="bg-white rounded-md z-10 -left-36 w-52">
<template
v-for="(option, index) in infoMenuOptions.filter(
(opt) => opt.showInDesktop,
)"
:key="index"
<div class="menu-button gap-2 px-4 rounded-md cursor-pointer">
<span
class="text-gray-900 py-4 text-end font-semibold text-sm"
>
Documentação
</span>
</div>
<div class="w-full flex justify-center">
<hr class="w-4/5" />
</div>
<RouterLink
:to="'/faq'"
class="menu-button gap-2 px-4 rounded-md cursor-pointer"
>
<RouterLink
v-if="option.route"
:to="option.route"
class="menu-button gap-2 px-4 rounded-md cursor-pointer"
<span
class="text-gray-900 py-4 text-end font-semibold text-sm whitespace-nowrap"
>
<span
class="text-gray-900 py-4 text-end font-semibold text-sm whitespace-nowrap"
>
{{ option.label }}
</span>
</RouterLink>
<div
v-else
class="menu-button gap-2 px-4 rounded-md cursor-pointer"
>
<span
class="text-gray-900 py-4 text-end font-semibold text-sm"
>
{{ option.label }}
</span>
</div>
<div
v-if="
index <
infoMenuOptions.filter((opt) => opt.showInDesktop)
.length -
1
"
class="w-full flex justify-center"
>
<hr class="w-4/5" />
</div>
</template>
Perguntas frequentes
</span>
</RouterLink>
<div class="w-full flex justify-center">
<hr class="w-4/5" />
</div>
@@ -325,24 +220,42 @@ const handleMenuOptionClick = (option: MenuOption): void => {
</div>
</transition>
</div>
<RouterLink
:to="'/faq'"
v-if="!walletAddress"
class="default-button inline-block md:hidden"
>
FAQ
</RouterLink>
<RouterLink
:to="sellerView ? '/' : '/seller'"
class="default-button whitespace-nowrap w-40 sm:w-44 md:w-36 hidden md:inline-block"
>
<div class="topbar-text topbar-link text-center mx-auto inline-block">
{{ sellerView ? 'Quero comprar' : 'Quero vender' }}
{{ sellerView ? "Quero comprar" : "Quero vender" }}
</div>
</RouterLink>
<div class="flex flex-col relative">
<RouterLink
:to="sellerView ? '/' : '/seller'"
v-if="!walletAddress"
class="default-button sm:whitespace-normal whitespace-nowrap inline-block md:hidden w-40 sm:w-44 md:w-36"
>
<div class="topbar-text topbar-link text-center mx-auto inline-block">
{{ sellerView ? "Quero comprar" : "Quero vender" }}
</div>
</RouterLink>
<div class="flex flex-col relative" v-if="walletAddress">
<div
ref="currencyRef"
class="top-bar-info cursor-pointer h-10 group hover:bg-gray-50 transition-all duration-500 ease-in-out"
:class="{ 'bg-gray-50': currencyMenuOpenToggle }"
@click="[
(currencyMenuOpenToggle = !currencyMenuOpenToggle),
(menuOpenToggle = false),
(infoMenuOpenToggle = false),
]"
@click="
[
(currencyMenuOpenToggle = !currencyMenuOpenToggle),
(menuOpenToggle = false),
(infoMenuOpenToggle = false),
]
"
>
<img
alt="Choosed network image"
@@ -354,7 +267,9 @@ const handleMenuOptionClick = (option: MenuOption): void => {
class="default-text hidden sm:inline-block text-gray-50 group-hover:text-gray-900 transition-all duration-500 ease-in-out whitespace-nowrap text-ellipsis overflow-hidden"
:class="{ '!text-gray-900': currencyMenuOpenToggle }"
>
{{ user.network.value.name || 'Invalid Chain' }}
{{
user.network.value.name || "Invalid Chain"
}}
</span>
<div
class="transition-all duration-500 ease-in-out mt-1"
@@ -402,7 +317,7 @@ const handleMenuOptionClick = (option: MenuOption): void => {
<button
type="button"
v-if="!walletAddress"
class="border-amber-500 border-2 sm:rounded !rounded-lg default-button hidden md:inline-block"
class="border-amber-500 border-2 rounded default-button hidden md:inline-block"
@click="connnectWallet()"
>
Conectar carteira
@@ -410,7 +325,7 @@ const handleMenuOptionClick = (option: MenuOption): void => {
<button
type="button"
v-if="!walletAddress"
class="border-amber-500 border-2 sm:rounded !rounded-lg default-button inline-block md:hidden h-10"
class="border-amber-500 border-2 rounded default-button inline-block md:hidden"
@click="connnectWallet()"
>
Conectar
@@ -421,11 +336,13 @@ const handleMenuOptionClick = (option: MenuOption): void => {
ref="walletAddressRef"
class="top-bar-info cursor-pointer h-10 group hover:bg-gray-50 transition-all duration-500 ease-in-out"
:class="{ 'bg-gray-50': menuOpenToggle }"
@click="[
(menuOpenToggle = !menuOpenToggle),
(currencyMenuOpenToggle = false),
(infoMenuOpenToggle = false),
]"
@click="
[
(menuOpenToggle = !menuOpenToggle),
(currencyMenuOpenToggle = false),
(infoMenuOpenToggle = false),
]
"
>
<img alt="Account image" src="@/assets/account.svg?url" />
<span
@@ -454,40 +371,23 @@ const handleMenuOptionClick = (option: MenuOption): void => {
<div
class="bg-white rounded-md z-10 border border-gray-300 drop-shadow-md shadow-md overflow-clip"
>
<template
v-for="(option, index) in walletMenuOptions.filter(
(opt) => opt.showInDesktop,
)"
:key="index"
<RouterLink
to="/manage_bids"
class="redirect_button menu-button"
@click="closeMenu()"
>
<RouterLink
v-if="option.route && !option.action"
:to="option.route"
class="redirect_button menu-button"
@click="closeMenu()"
>
{{ option.label }}
</RouterLink>
<RouterLink
v-else-if="option.route && option.action"
:to="option.route"
class="redirect_button menu-button"
@click="option.action"
>
{{ option.label }}
</RouterLink>
<div
v-if="
index <
walletMenuOptions.filter((opt) => opt.showInDesktop)
.length -
1
"
class="w-full flex justify-center"
>
<hr class="w-4/5" />
</div>
</template>
Gerenciar Ofertas
</RouterLink>
<div class="w-full flex justify-center">
<hr class="w-4/5" />
</div>
<RouterLink
to="/"
class="redirect_button menu-button"
@click="disconnectUser"
>
Desconectar
</RouterLink>
</div>
</div>
</div>
@@ -499,49 +399,32 @@ const handleMenuOptionClick = (option: MenuOption): void => {
v-show="menuOpenToggle"
class="mobile-menu fixed w-4/5 text-gray-900 inline-block md:hidden"
>
<div class="pl-4 h-full">
<div class="pl-4 mt-2 h-full">
<div class="bg-white rounded-md z-10 h-full">
<template
v-for="(option, index) in walletMenuOptions.filter(
(opt) => opt.showInMobile,
)"
:key="index"
>
<div class="menu-button" @click="handleMenuOptionClick(option)">
<RouterLink
v-if="option.isDynamic"
:to="option.dynamicRoute ? option.dynamicRoute() : '/'"
class="redirect_button"
:class="{ 'mt-2': index === 0 }"
>
{{ option.dynamicLabel ? option.dynamicLabel() : option.label }}
</RouterLink>
<RouterLink
v-else-if="option.route && !option.action"
:to="option.route"
class="redirect_button"
>
{{ option.label }}
</RouterLink>
<RouterLink
v-else-if="option.route && option.action"
:to="option.route"
class="redirect_button"
@click.stop="option.action"
>
{{ option.label }}
</RouterLink>
</div>
<div
v-if="
index <
walletMenuOptions.filter((opt) => opt.showInMobile).length - 1
"
class="w-full flex justify-center"
<div class="menu-button" @click="closeMenu()">
<RouterLink
:to="sellerView ? '/' : '/seller'"
class="redirect_button mt-2"
>
<hr class="w-4/5" />
</div>
</template>
{{ sellerView ? "Quero comprar" : "Quero vender" }}
</RouterLink>
</div>
<div class="w-full flex justify-center">
<hr class="w-4/5" />
</div>
<div class="menu-button" @click="closeMenu()">
<RouterLink to="/manage_bids" class="redirect_button">
Gerenciar Ofertas
</RouterLink>
</div>
<div class="w-full flex justify-center">
<hr class="w-4/5" />
</div>
<div class="menu-button" @click="disconnectUser">
<RouterLink to="/" class="redirect_button">
Desconectar
</RouterLink>
</div>
<div class="w-full flex justify-center">
<hr class="w-4/5" />
</div>
@@ -575,7 +458,7 @@ const handleMenuOptionClick = (option: MenuOption): void => {
v-show="currencyMenuOpenToggle"
class="mobile-menu fixed w-4/5 text-gray-900 inline-block md:hidden"
>
<div class="pl-4 h-full">
<div class="pl-4 mt-2 h-full">
<div class="bg-white rounded-md z-10 h-full">
<div
v-for="network in Networks"
@@ -600,7 +483,6 @@ const handleMenuOptionClick = (option: MenuOption): void => {
</template>
<style scoped>
@reference "tailwindcss";
header {
@apply flex flex-row justify-between w-full items-center;
}
@@ -641,14 +523,8 @@ a:hover {
}
.mobile-menu {
top: 60px;
right: 10px;
left: auto;
max-height: calc(100vh - 60px);
overflow-y: auto;
border-radius: 8px;
box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
margin-top: 1400px;
bottom: 0px;
height: auto;
}
</style>

208
src/components/ui/AmountInput.vue Normal file
View File

@@ -0,0 +1,208 @@
<script setup lang="ts">
import { ref, watch, computed } from "vue";
import { TokenEnum } from "@/model/NetworkEnum";
import { decimalCount } from "@/utils/decimalCount";
import { debounce } from "@/utils/debounce";
import TokenSelector from "./TokenSelector.vue";
import ErrorMessage from "./ErrorMessage.vue";
const props = withDefaults(
defineProps<{
modelValue: number;
selectedToken: TokenEnum;
placeholder?: string;
showTokenSelector?: boolean;
showConversion?: boolean;
conversionRate?: number;
minValue?: number;
maxValue?: number;
disabled?: boolean;
required?: boolean;
}>(),
{
placeholder: "0",
showTokenSelector: true,
showConversion: true,
conversionRate: 1,
minValue: 0,
disabled: false,
required: false,
}
);
const emit = defineEmits<{
"update:modelValue": [value: number];
"update:selectedToken": [token: TokenEnum];
error: [message: string | null];
valid: [isValid: boolean];
}>();
const inputValue = ref<string>(String(props.modelValue || ""));
const validDecimals = ref(true);
const validRange = ref(true);
const convertedValue = computed(() => {
return (props.modelValue * props.conversionRate).toFixed(2);
});
const errorMessage = computed(() => {
if (!validDecimals.value) {
return "Por favor utilize no máximo 2 casas decimais";
}
if (!validRange.value) {
if (props.minValue && props.modelValue < props.minValue) {
return `Valor mínimo: ${props.minValue}`;
}
if (props.maxValue && props.modelValue > props.maxValue) {
return `Valor máximo: ${props.maxValue}`;
}
}
return null;
});
const isValid = computed(() => {
return validDecimals.value && validRange.value;
});
const handleInput = (event: Event) => {
const target = event.target as HTMLInputElement;
const value = target.value;
inputValue.value = value;
const numValue = Number(value);
// Validar decimais
if (decimalCount(value) > 2) {
validDecimals.value = false;
emit("error", "Por favor utilize no máximo 2 casas decimais");
emit("valid", false);
return;
}
validDecimals.value = true;
// Validar range
if (props.minValue !== undefined && numValue < props.minValue) {
validRange.value = false;
emit("error", `Valor mínimo: ${props.minValue}`);
emit("valid", false);
return;
}
if (props.maxValue !== undefined && numValue > props.maxValue) {
validRange.value = false;
emit("error", `Valor máximo: ${props.maxValue}`);
emit("valid", false);
return;
}
validRange.value = true;
emit("update:modelValue", numValue);
emit("error", null);
emit("valid", true);
};
const debouncedHandleInput = debounce(handleInput, 500);
const handleTokenChange = (token: TokenEnum) => {
emit("update:selectedToken", token);
};
watch(() => props.modelValue, (newVal) => {
if (newVal !== Number(inputValue.value)) {
inputValue.value = String(newVal || "");
}
});
</script>
<template>
<div class="amount-input-container">
<div class="input-row">
<input
type="number"
:value="inputValue"
:placeholder="placeholder"
:disabled="disabled"
:required="required"
class="amount-input"
:class="{
'font-semibold text-xl': modelValue > 0,
'has-error': !isValid,
}"
step="0.01"
@input="debouncedHandleInput"
/>
<TokenSelector
v-if="showTokenSelector"
:model-value="selectedToken"
:disabled="disabled"
size="md"
@update:model-value="handleTokenChange"
/>
<div v-else class="token-display">
{{ selectedToken }}
</div>
</div>
<div class="divider"></div>
<div class="info-row">
<p v-if="showConversion" class="conversion-text">
~ R$ {{ convertedValue }}
</p>
<slot name="extra-info"></slot>
</div>
<ErrorMessage
v-if="errorMessage"
:message="errorMessage"
type="error"
/>
</div>
</template>
<style scoped>
.amount-input-container {
@apply flex flex-col w-full gap-2;
}
.input-row {
@apply flex justify-between items-center w-full gap-4;
}
.amount-input {
@apply border-none outline-none text-lg text-gray-900 flex-1 bg-transparent;
appearance: textfield;
-moz-appearance: textfield;
}
.amount-input::-webkit-inner-spin-button,
.amount-input::-webkit-outer-spin-button {
-webkit-appearance: none;
}
.amount-input:disabled {
@apply opacity-50 cursor-not-allowed;
}
.amount-input.has-error {
@apply text-red-500;
}
.token-display {
@apply flex items-center px-3 py-2 bg-gray-300 rounded-3xl min-w-fit text-gray-900 font-medium;
}
.divider {
@apply w-full border-b border-gray-300 my-2;
}
.info-row {
@apply flex justify-between items-center;
}
.conversion-text {
@apply text-gray-500 font-normal text-sm;
}
</style>

137
src/components/ui/BankSelector.vue Normal file
View File

@@ -0,0 +1,137 @@
<script setup lang="ts">
import { computed } from "vue";
import bankList from "@/utils/files/isbpList.json";
export interface Bank {
ISPB: string;
longName: string;
}
const props = withDefaults(
defineProps<{
modelValue: string | null;
disabled?: boolean;
placeholder?: string;
}>(),
{
disabled: false,
placeholder: "Busque e selecione seu banco",
}
);
const emit = defineEmits<{
"update:modelValue": [value: string];
change: [bank: Bank];
}>();
const bankItems = computed(() => {
return bankList.map((bank) => ({
value: bank.ISPB,
label: bank.longName,
bank: bank,
}));
});
const selectedItem = computed(() => {
if (!props.modelValue) return null;
return bankItems.value.find((item) => item.value === props.modelValue);
});
const searchQuery = computed({
get: () => selectedItem.value?.label || "",
set: (value: string) => {
// Handled by input
},
});
const filteredBanks = computed(() => {
if (!searchQuery.value) return [];
const query = searchQuery.value.toLowerCase();
return bankList
.filter((bank) => bank.longName.toLowerCase().includes(query))
.slice(0, 10);
});
const showBankList = computed(() => {
return filteredBanks.value.length > 0 && searchQuery.value.length > 0;
});
const selectBank = (bank: Bank) => {
emit("update:modelValue", bank.ISPB);
emit("change", bank);
};
</script>
<template>
<div class="bank-selector">
<input
type="text"
v-model="searchQuery"
:placeholder="placeholder"
:disabled="disabled"
class="bank-input"
autocomplete="off"
/>
<transition name="dropdown-fade">
<div v-if="showBankList" class="bank-list">
<div
v-for="bank in filteredBanks"
:key="bank.ISPB"
class="bank-item"
@click="selectBank(bank)"
>
<span class="bank-name">{{ bank.longName }}</span>
<span class="bank-ispb">{{ bank.ISPB }}</span>
</div>
</div>
</transition>
</div>
</template>
<style scoped>
.bank-selector {
@apply relative w-full;
}
.bank-input {
@apply w-full px-4 py-3 border-none outline-none rounded-lg bg-white text-gray-900 text-sm;
}
.bank-input:focus {
@apply ring-2 ring-indigo-800;
}
.bank-input:disabled {
@apply opacity-50 cursor-not-allowed bg-gray-100;
}
.bank-list {
@apply absolute top-full left-0 right-0 mt-2 bg-white rounded-lg border border-gray-300 shadow-lg z-50 max-h-64 overflow-y-auto;
}
.bank-item {
@apply flex justify-between items-center px-4 py-3 cursor-pointer hover:bg-gray-100 transition-colors;
}
.bank-name {
@apply text-gray-900 font-medium text-sm flex-1;
}
.bank-ispb {
@apply text-gray-500 text-xs ml-2;
}
/* Animação */
.dropdown-fade-enter-active,
.dropdown-fade-leave-active {
@apply transition-all duration-200;
}
.dropdown-fade-enter-from,
.dropdown-fade-leave-to {
@apply opacity-0 -translate-y-2;
}
</style>

38
src/components/ui/CustomAlert.vue
View File

@@ -1,36 +1,36 @@
<script setup lang="ts">
import { ref } from 'vue';
import { ref } from "vue";
const props = defineProps<{
type: string;
}>();
const alertText = ref<string>('');
const alertPaddingLeft = ref<string>('18rem');
const alertText = ref<string>("");
const alertPaddingLeft = ref<string>("18rem");
if (props.type === 'sell') {
alertPaddingLeft.value = '30%';
} else if (props.type === 'buy') {
alertPaddingLeft.value = '30%';
} else if (props.type === 'withdraw') {
alertPaddingLeft.value = '40%';
} else if (props.type === 'redirect') {
alertPaddingLeft.value = '35%';
if (props.type === "sell") {
alertPaddingLeft.value = "30%";
} else if (props.type === "buy") {
alertPaddingLeft.value = "30%";
} else if (props.type === "withdraw") {
alertPaddingLeft.value = "40%";
} else if (props.type === "redirect") {
alertPaddingLeft.value = "35%";
}
switch (props.type) {
case 'buy':
case "buy":
alertText.value =
'Tudo certo! Os tokens já foram retirados da oferta e estão disponíveis na sua carteira.';
"Tudo certo! Os tokens já foram retirados da oferta e estão disponíveis na sua carteira.";
break;
case 'sell':
case "sell":
alertText.value =
'Tudo certo! Os tokens já foram reservados e sua oferta está disponível.';
"Tudo certo! Os tokens já foram reservados e sua oferta está disponível.";
break;
case 'redirect':
alertText.value = 'Existe uma compra em aberto. Continuar?';
case "redirect":
alertText.value = "Existe uma compra em aberto. Continuar?";
break;
case 'withdraw':
alertText.value = 'Tudo certo! Saque realizado com sucesso!';
case "withdraw":
alertText.value = "Tudo certo! Saque realizado com sucesso!";
break;
}
</script>

19
src/components/ui/CustomButton.vue
View File

@@ -1,6 +1,6 @@
<script setup lang="ts">
type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost';
type ButtonSize = 'sm' | 'md' | 'lg' | 'xl';
export type ButtonVariant = "primary" | "secondary" | "outline" | "ghost";
export type ButtonSize = "sm" | "md" | "lg" | "xl";
const props = withDefaults(
defineProps<{
@@ -9,25 +9,25 @@ const props = withDefaults(
variant?: ButtonVariant;
size?: ButtonSize;
icon?: string;
iconPosition?: 'left' | 'right';
iconPosition?: "left" | "right";
fullWidth?: boolean;
loading?: boolean;
}>(),
{
isDisabled: false,
variant: 'primary',
size: 'xl',
iconPosition: 'left',
variant: "primary",
size: "xl",
iconPosition: "left",
fullWidth: true,
loading: false,
},
}
);
const emit = defineEmits(['buttonClicked']);
const emit = defineEmits(["buttonClicked"]);
const handleClick = () => {
if (!props.isDisabled && !props.loading) {
emit('buttonClicked');
emit("buttonClicked");
}
};
</script>
@@ -64,7 +64,6 @@ const handleClick = () => {
</template>
<style scoped>
@reference "tailwindcss";
.button {
@apply rounded-lg font-semibold transition-all duration-200 cursor-pointer flex items-center justify-center gap-2;
}

14
src/components/ui/CustomModal.vue
View File

@@ -1,18 +1,18 @@
<script setup lang="ts">
import { ref } from 'vue';
import { ref } from "vue";
const props = defineProps({
isRedirectModal: Boolean,
});
const modalColor = ref<string>('white');
const modalHeight = ref<string>('250px');
const pFontSize = ref<string>('16px');
const modalColor = ref<string>("white");
const modalHeight = ref<string>("250px");
const pFontSize = ref<string>("16px");
if (props.isRedirectModal) {
modalColor.value = 'rgba(251, 191, 36, 1)';
modalHeight.value = '150px';
pFontSize.value = '20px';
modalColor.value = "rgba(251, 191, 36, 1)";
modalHeight.value = "150px";
pFontSize.value = "20px";
}
</script>

248
src/components/ui/Dropdown.vue Normal file
View File

@@ -0,0 +1,248 @@
<script setup lang="ts" generic="T">
import { ref, computed } from "vue";
import { onClickOutside } from "@vueuse/core";
import ChevronDown from "@/assets/chevronDown.svg";
export interface DropdownItem<T = any> {
value: T;
label: string;
icon?: string;
disabled?: boolean;
}
const props = withDefaults(
defineProps<{
items: DropdownItem<T>[];
modelValue: T;
placeholder?: string;
searchable?: boolean;
disabled?: boolean;
size?: "sm" | "md" | "lg";
showIcon?: boolean;
}>(),
{
placeholder: "Selecione...",
searchable: false,
disabled: false,
size: "md",
showIcon: true,
}
);
const emit = defineEmits<{
"update:modelValue": [value: T];
change: [value: T];
}>();
const isOpen = ref(false);
const searchQuery = ref("");
const dropdownRef = ref<HTMLElement | null>(null);
const selectedItem = computed(() => {
return props.items.find((item) => item.value === props.modelValue);
});
const filteredItems = computed(() => {
if (!props.searchable || !searchQuery.value) {
return props.items;
}
const query = searchQuery.value.toLowerCase();
return props.items.filter((item) =>
item.label.toLowerCase().includes(query)
);
});
const toggleDropdown = () => {
if (!props.disabled) {
isOpen.value = !isOpen.value;
if (!isOpen.value) {
searchQuery.value = "";
}
}
};
const selectItem = (item: DropdownItem<T>) => {
if (!item.disabled) {
emit("update:modelValue", item.value);
emit("change", item.value);
isOpen.value = false;
searchQuery.value = "";
}
};
onClickOutside(dropdownRef, () => {
isOpen.value = false;
searchQuery.value = "";
});
</script>
<template>
<div ref="dropdownRef" class="dropdown-container">
<button
type="button"
:class="[
'dropdown-trigger',
`size-${size}`,
{ disabled: disabled, open: isOpen },
]"
@click="toggleDropdown"
>
<img
v-if="selectedItem?.icon && showIcon"
:src="selectedItem.icon"
:alt="selectedItem.label"
class="item-icon"
/>
<span class="selected-text">
{{ selectedItem?.label || placeholder }}
</span>
<ChevronDown
class="chevron"
:class="{ rotated: isOpen }"
/>
</button>
<transition name="dropdown-fade">
<div v-if="isOpen" class="dropdown-menu">
<input
v-if="searchable"
v-model="searchQuery"
type="text"
class="search-input"
placeholder="Buscar..."
@click.stop
/>
<div class="items-container">
<div
v-for="item in filteredItems"
:key="String(item.value)"
:class="[
'dropdown-item',
{
selected: item.value === modelValue,
disabled: item.disabled,
},
]"
@click="selectItem(item)"
>
<img
v-if="item.icon && showIcon"
:src="item.icon"
:alt="item.label"
class="item-icon"
/>
<span class="item-label">{{ item.label }}</span>
</div>
<div v-if="filteredItems.length === 0" class="no-results">
Nenhum resultado encontrado
</div>
</div>
</div>
</transition>
</div>
</template>
<style scoped>
.dropdown-container {
@apply relative inline-block;
}
.dropdown-trigger {
@apply flex items-center gap-2 bg-gray-300 hover:bg-gray-200 rounded-3xl transition-colors cursor-pointer border-none outline-none;
}
.dropdown-trigger:focus {
@apply outline-2 outline-indigo-800;
}
.dropdown-trigger.disabled {
@apply opacity-50 cursor-not-allowed;
}
.dropdown-trigger.disabled:hover {
@apply bg-gray-300;
}
.size-sm {
@apply px-2 py-1 text-sm;
}
.size-md {
@apply px-3 py-2 text-base;
}
.size-lg {
@apply px-4 py-3 text-lg;
}
.item-icon {
@apply sm:w-fit w-4 flex-shrink-0;
}
.selected-text {
@apply text-gray-900 font-medium min-w-fit;
}
.chevron {
@apply transition-transform duration-300 invert pr-1;
}
.chevron.rotated {
@apply rotate-180;
}
.dropdown-menu {
@apply absolute right-0 mt-2 bg-white rounded-xl border border-gray-300 shadow-md z-50 min-w-max w-full;
}
.search-input {
@apply w-full px-4 py-3 border-b border-gray-200 outline-none text-gray-900;
}
.search-input:focus {
@apply border-indigo-800;
}
.items-container {
@apply max-h-64 overflow-y-auto;
}
.dropdown-item {
@apply flex items-center gap-2 px-4 py-4 cursor-pointer hover:bg-gray-300 transition-colors text-gray-900 font-semibold text-sm;
}
.dropdown-item.selected {
@apply bg-gray-100;
}
.dropdown-item.disabled {
@apply opacity-50 cursor-not-allowed;
}
.dropdown-item.disabled:hover {
@apply bg-transparent;
}
.item-label {
@apply text-end;
}
.no-results {
@apply px-4 py-6 text-center text-gray-500 text-sm;
}
/* Animação */
.dropdown-fade-enter-active,
.dropdown-fade-leave-active {
@apply transition-all duration-200;
}
.dropdown-fade-enter-from,
.dropdown-fade-leave-to {
@apply opacity-0 -translate-y-2;
}
</style>

55
src/components/ui/ErrorMessage.vue Normal file
View File

@@ -0,0 +1,55 @@
<script setup lang="ts">
export type ErrorType = "error" | "warning" | "info";
const props = withDefaults(
defineProps<{
message: string;
type?: ErrorType;
centered?: boolean;
icon?: boolean;
}>(),
{
type: "error",
centered: true,
icon: false,
}
);
const colorClasses = {
error: "text-red-500",
warning: "text-amber-500",
info: "text-blue-500",
};
</script>
<template>
<div :class="['error-message-container', { centered: centered }]">
<div :class="['error-message', colorClasses[type]]">
<span v-if="icon" class="icon">⚠</span>
<span class="message">{{ message }}</span>
</div>
</div>
</template>
<style scoped>
.error-message-container {
@apply flex w-full;
}
.error-message-container.centered {
@apply justify-center;
}
.error-message {
@apply font-normal text-sm flex items-center gap-2;
}
.icon {
@apply text-base;
}
.message {
@apply leading-tight;
}
</style>

10
src/components/ui/FormCard.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
type FormCardPadding = 'sm' | 'md' | 'lg';
export type FormCardPadding = "sm" | "md" | "lg";
const props = withDefaults(
defineProps<{
@@ -8,10 +8,10 @@ const props = withDefaults(
noBorder?: boolean;
}>(),
{
padding: 'md',
padding: "md",
fullWidth: true,
noBorder: false,
},
}
);
</script>
@@ -28,13 +28,12 @@ const props = withDefaults(
</template>
<style scoped>
@reference "tailwindcss";
.form-card {
@apply flex flex-col bg-white rounded-lg;
}
.form-card:not(.no-border) {
@apply border-y;
@apply border-y-10;
}
.form-card.full-width {
@@ -53,3 +52,4 @@ const props = withDefaults(
@apply px-12 py-8;
}
</style>

18
src/components/ui/IconButton.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
type IconButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost';
type IconButtonSize = 'sm' | 'md' | 'lg';
type IconPosition = 'left' | 'right';
export type IconButtonVariant = "primary" | "secondary" | "outline" | "ghost";
export type IconButtonSize = "sm" | "md" | "lg";
export type IconPosition = "left" | "right";
const props = withDefaults(
defineProps<{
@@ -14,12 +14,12 @@ const props = withDefaults(
fullWidth?: boolean;
}>(),
{
variant: 'outline',
size: 'md',
iconPosition: 'left',
variant: "outline",
size: "md",
iconPosition: "left",
disabled: false,
fullWidth: false,
},
}
);
const emit = defineEmits<{
@@ -28,7 +28,7 @@ const emit = defineEmits<{
const handleClick = () => {
if (!props.disabled) {
emit('click');
emit("click");
}
};
</script>
@@ -62,7 +62,6 @@ const handleClick = () => {
</template>
<style scoped>
@reference "tailwindcss";
.icon-button {
@apply flex items-center justify-center gap-2 font-medium rounded-lg transition-all duration-200 cursor-pointer;
}
@@ -145,3 +144,4 @@ const handleClick = () => {
@apply flex-shrink-0;
}
</style>

91
src/components/ui/InfoTooltip.vue Normal file
View File

@@ -0,0 +1,91 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useFloating, arrow, offset, flip, shift } from "@floating-ui/vue";
const props = withDefaults(
defineProps<{
text: string;
placement?: "top" | "bottom" | "left" | "right";
iconSrc?: string;
showOnHover?: boolean;
}>(),
{
placement: "right",
iconSrc: "",
showOnHover: true,
}
);
const showTooltip = ref<boolean>(false);
const reference = ref<HTMLElement | null>(null);
const floating = ref<HTMLElement | null>(null);
const floatingArrow = ref(null);
onMounted(() => {
useFloating(reference, floating, {
placement: props.placement,
middleware: [offset(10), flip(), shift(), arrow({ element: floatingArrow })],
});
});
const handleMouseOver = () => {
if (props.showOnHover) {
showTooltip.value = true;
}
};
const handleMouseOut = () => {
if (props.showOnHover) {
showTooltip.value = false;
}
};
const toggleTooltip = () => {
if (!props.showOnHover) {
showTooltip.value = !showTooltip.value;
}
};
</script>
<template>
<div class="info-tooltip-container">
<img
:src="iconSrc || '/src/assets/info.svg'"
alt="info icon"
class="info-icon"
ref="reference"
@mouseover="handleMouseOver"
@mouseout="handleMouseOut"
@click="toggleTooltip"
/>
<div
v-if="showTooltip"
role="tooltip"
ref="floating"
class="tooltip-content"
>
{{ text }}
</div>
</div>
</template>
<style scoped>
.info-tooltip-container {
@apply relative inline-block;
}
.info-icon {
@apply cursor-pointer transition-opacity hover:opacity-70;
}
.tooltip-content {
@apply bg-white text-gray-900 font-medium text-xs md:text-sm px-3 py-2 rounded border-2 border-emerald-500 z-50 max-w-xs shadow-lg;
}
@media screen and (max-width: 640px) {
.tooltip-content {
display: none;
}
}
</style>

13
src/components/ui/LoadingComponent.vue
View File

@@ -12,11 +12,13 @@ const props = defineProps({
<span
class="text font-bold sm:text-3xl text-2xl sm:max-w-[29rem] max-w-[20rem]"
>
{{ props.title ? props.title : 'Confirme em sua carteira' }}
{{ props.title ? props.title : "Confirme em sua carteira" }}
</span>
</div>
<div class="main-container max-w-md">
<div class="flex flex-col w-full bg-white sm:px-10 px-4 py-5 rounded-lg">
<div
class="flex flex-col w-full bg-white sm:px-10 px-4 py-5 rounded-lg border-y-10"
>
<div
class="flex flex-col text-center justify-center w-full items-center p-2 px-3 rounded-3xl lg:min-w-fit gap-1"
>
@@ -36,7 +38,6 @@ const props = defineProps({
</template>
<style scoped>
@reference "tailwindcss";
.custom-divide {
width: 100%;
border-bottom: 1px solid #d1d5db;
@@ -59,12 +60,12 @@ const props = defineProps({
@apply text-white text-center;
}
input[type='number'] {
input[type="number"] {
-moz-appearance: textfield;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
</style>

60
src/components/ui/LoadingState.vue Normal file
View File

@@ -0,0 +1,60 @@
<script setup lang="ts">
import SpinnerComponent from "./SpinnerComponent.vue";
const props = withDefaults(
defineProps<{
message?: string;
size?: "sm" | "md" | "lg";
centered?: boolean;
inline?: boolean;
}>(),
{
message: "Carregando...",
size: "md",
centered: true,
inline: false,
}
);
const sizeMap = {
sm: { spinner: "4", text: "text-sm" },
md: { spinner: "6", text: "text-base" },
lg: { spinner: "8", text: "text-lg" },
};
</script>
<template>
<div
:class="[
'loading-state',
{ centered: centered, inline: inline },
]"
>
<span v-if="message" :class="['loading-message', sizeMap[size].text]">
{{ message }}
</span>
<SpinnerComponent
:width="sizeMap[size].spinner"
:height="sizeMap[size].spinner"
/>
</div>
</template>
<style scoped>
.loading-state {
@apply flex items-center gap-2;
}
.loading-state.centered {
@apply justify-center;
}
.loading-state.inline {
@apply inline-flex;
}
.loading-message {
@apply text-gray-900 font-normal;
}
</style>

72
src/components/ui/NetworkBadges.vue Normal file
View File

@@ -0,0 +1,72 @@
<script setup lang="ts">
import { computed } from "vue";
import { getNetworkImage } from "@/utils/imagesPath";
import type { NetworkConfig } from "@/model/NetworkEnum";
const props = withDefaults(
defineProps<{
networks: NetworkConfig[];
size?: "sm" | "md" | "lg";
showLabel?: boolean;
}>(),
{
size: "md",
showLabel: false,
}
);
const sizeMap = {
sm: 16,
md: 24,
lg: 32,
};
const networkData = computed(() => {
return props.networks.map((network) => ({
network,
image: getNetworkImage(network.name),
name: network.name,
}));
});
</script>
<template>
<div class="network-badges">
<div
v-for="data in networkData"
:key="data.network.id"
class="network-badge"
:title="data.name"
>
<img
:alt="`${data.name} logo`"
:src="data.image"
:width="sizeMap[size]"
:height="sizeMap[size]"
class="network-icon"
/>
<span v-if="showLabel" class="network-label">
{{ data.name }}
</span>
</div>
</div>
</template>
<style scoped>
.network-badges {
@apply flex gap-2 items-center;
}
.network-badge {
@apply flex items-center gap-1;
}
.network-icon {
@apply flex-shrink-0;
}
.network-label {
@apply text-sm font-medium text-gray-900;
}
</style>

50
src/components/ui/NetworkSelector.vue Normal file
View File

@@ -0,0 +1,50 @@
<script setup lang="ts">
import { computed } from "vue";
import { Networks } from "@/config/networks";
import type { NetworkConfig } from "@/model/NetworkEnum";
import { getNetworkImage } from "@/utils/imagesPath";
import Dropdown, { type DropdownItem } from "./Dropdown.vue";
const props = withDefaults(
defineProps<{
modelValue: NetworkConfig;
disabled?: boolean;
size?: "sm" | "md" | "lg";
availableNetworks?: NetworkConfig[];
}>(),
{
disabled: false,
size: "md",
}
);
const emit = defineEmits<{
"update:modelValue": [value: NetworkConfig];
change: [value: NetworkConfig];
}>();
const networkItems = computed((): DropdownItem<NetworkConfig>[] => {
return Object.values(Networks).map((network) => ({
value: network,
label: network.name,
icon: getNetworkImage(network.name),
}));
});
const handleChange = (value: NetworkConfig) => {
emit("update:modelValue", value);
emit("change", value);
};
</script>
<template>
<Dropdown
:model-value="modelValue"
:items="networkItems"
:disabled="disabled"
:size="size"
:show-icon="true"
@update:model-value="handleChange"
/>
</template>

66
src/components/ui/PageHeader.vue Normal file
View File

@@ -0,0 +1,66 @@
<script setup lang="ts">
export type HeaderSize = "sm" | "md" | "lg";
const props = withDefaults(
defineProps<{
title: string;
subtitle?: string;
size?: HeaderSize;
centered?: boolean;
}>(),
{
size: "lg",
centered: true,
}
);
</script>
<template>
<div
:class="['page-header', `size-${size}`, { centered: centered }]"
>
<h1 class="title text-white font-extrabold">
{{ title }}
</h1>
<p v-if="subtitle" class="subtitle text-white font-medium">
{{ subtitle }}
</p>
<slot></slot>
</div>
</template>
<style scoped>
.page-header {
@apply flex flex-col gap-4;
}
.page-header.centered {
@apply items-center justify-center text-center;
}
/* Tamanhos */
.size-sm .title {
@apply sm:text-2xl text-xl sm:max-w-[20rem] max-w-[16rem];
}
.size-sm .subtitle {
@apply sm:text-sm text-xs sm:max-w-[18rem] max-w-[14rem];
}
.size-md .title {
@apply sm:text-4xl text-2xl sm:max-w-[28rem] max-w-[22rem];
}
.size-md .subtitle {
@apply sm:text-base text-sm sm:max-w-[26rem] max-w-[20rem];
}
.size-lg .title {
@apply sm:text-5xl text-3xl sm:max-w-[29rem] max-w-[20rem];
}
.size-lg .subtitle {
@apply sm:text-base text-sm sm:max-w-[28rem] max-w-[30rem] sm:tracking-normal tracking-wide;
}
</style>

8
src/components/ui/SpinnerComponent.vue
View File

@@ -10,10 +10,10 @@ const getCustomClass = () => {
return [
`w-${props.width}`,
`h-${props.height}`,
'fill-white',
'text-gray-200',
'animate-spin',
'dark:text-gray-600',
`fill-white`,
"text-gray-200",
"animate-spin",
"dark:text-gray-600",
];
};
</script>

22
src/components/ui/StatusBadge.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import { computed } from 'vue';
import { computed } from "vue";
export type StatusType = 'open' | 'expired' | 'completed' | 'pending';
export type StatusType = "open" | "expired" | "completed" | "pending";
const props = defineProps<{
status: StatusType;
@@ -11,20 +11,20 @@ const props = defineProps<{
const statusConfig = computed(() => {
const configs: Record<StatusType, { text: string; color: string }> = {
open: {
text: 'Em Aberto',
color: 'bg-amber-300',
text: "Em Aberto",
color: "bg-amber-300",
},
expired: {
text: 'Expirado',
color: 'bg-[#94A3B8]',
text: "Expirado",
color: "bg-[#94A3B8]",
},
completed: {
text: 'Finalizado',
color: 'bg-emerald-300',
text: "Finalizado",
color: "bg-emerald-300",
},
pending: {
text: 'Pendente',
color: 'bg-gray-300',
text: "Pendente",
color: "bg-gray-300",
},
};
@@ -43,8 +43,8 @@ const displayText = computed(() => {
</template>
<style scoped>
@reference "tailwindcss";
.status-badge {
@apply text-xs sm:text-base font-medium text-gray-900 rounded-lg text-center px-2 py-1;
}
</style>

18
src/components/ui/ToasterComponent.vue
View File

@@ -1,8 +1,8 @@
<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue';
import { useOnboard } from '@web3-onboard/vue';
import { Networks } from '@/config/networks';
import { useUser } from '@/composables/useUser';
import { ref, computed, watch, onMounted } from "vue";
import { useOnboard } from "@web3-onboard/vue";
import { Networks } from "@/config/networks";
import { useUser } from "@/composables/useUser";
const { connectedWallet } = useOnboard();
const user = useUser();
@@ -23,9 +23,9 @@ const checkNetwork = () => {
const switchNetwork = async () => {
try {
if (connectedWallet.value && connectedWallet.value.provider) {
const chainId = network.value.id.toString(16);
let chainId = network.value.id.toString(16);
await connectedWallet.value.provider.request({
method: 'wallet_switchEthereumChain',
method: "wallet_switchEthereumChain",
params: [
{
chainId: `0x${chainId}`,
@@ -34,7 +34,7 @@ const switchNetwork = async () => {
});
}
} catch (error) {
console.error('Failed to switch network:', error);
console.error("Failed to switch network:", error);
}
};
@@ -66,9 +66,7 @@ watch(network, checkNetwork, { immediate: true });
<style scoped>
.slide-up-enter-active,
.slide-up-leave-active {
transition:
transform 0.3s ease,
opacity 0.3s ease;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.slide-up-enter-from,

48
src/components/ui/TokenSelector.vue Normal file
View File

@@ -0,0 +1,48 @@
<script setup lang="ts">
import { computed } from "vue";
import { TokenEnum } from "@/model/NetworkEnum";
import { getTokenImage } from "@/utils/imagesPath";
import Dropdown, { type DropdownItem } from "./Dropdown.vue";
const props = withDefaults(
defineProps<{
modelValue: TokenEnum;
disabled?: boolean;
size?: "sm" | "md" | "lg";
}>(),
{
disabled: false,
size: "md",
}
);
const emit = defineEmits<{
"update:modelValue": [value: TokenEnum];
change: [value: TokenEnum];
}>();
const tokenItems = computed((): DropdownItem<TokenEnum>[] => {
return Object.values(TokenEnum).map((token) => ({
value: token,
label: token,
icon: getTokenImage(token),
}));
});
const handleChange = (value: TokenEnum) => {
emit("update:modelValue", value);
emit("change", value);
};
</script>
<template>
<Dropdown
:model-value="modelValue"
:items="tokenItems"
:disabled="disabled"
:size="size"
:show-icon="true"
@update:model-value="handleChange"
/>
</template>

14
src/components/ui/VersionFooter.vue
View File

@@ -1,14 +0,0 @@
<script setup lang="ts">
const version =
typeof __APP_VERSION__ !== 'undefined' ? __APP_VERSION__ : 'dev';
</script>
<template>
<div
class="fixed bottom-2 left-2 text-xs font-mono text-gray-50/40 hover:text-gray-50/80 transition-opacity pointer-events-none select-none z-10"
:title="`P2Pix ${version}`"
aria-label="Application version"
>
v{{ version }}
</div>
</template>

152
src/components/ui/WalletConnectButton.vue Normal file
View File

@@ -0,0 +1,152 @@
<script setup lang="ts">
import { ref, computed } from "vue";
import { onClickOutside } from "@vueuse/core";
import CustomButton from "./CustomButton.vue";
const props = withDefaults(
defineProps<{
walletAddress: string | null;
variant?: "primary" | "secondary" | "outline";
showMenu?: boolean;
}>(),
{
variant: "primary",
showMenu: true,
}
);
const emit = defineEmits<{
connect: [];
disconnect: [];
viewTransactions: [];
}>();
const menuOpen = ref(false);
const menuRef = ref<HTMLElement | null>(null);
const isConnected = computed(() => {
return !!props.walletAddress;
});
const formattedAddress = computed(() => {
if (!props.walletAddress) return "";
const address = props.walletAddress;
const length = address.length;
const start = address.substring(0, 5);
const end = address.substring(length - 4, length);
return `${start}...${end}`;
});
const handleConnect = () => {
emit("connect");
};
const handleDisconnect = () => {
menuOpen.value = false;
emit("disconnect");
};
const handleViewTransactions = () => {
menuOpen.value = false;
emit("viewTransactions");
};
const toggleMenu = () => {
if (isConnected.value && props.showMenu) {
menuOpen.value = !menuOpen.value;
}
};
onClickOutside(menuRef, () => {
menuOpen.value = false;
});
</script>
<template>
<div class="wallet-connect-container">
<CustomButton
v-if="!isConnected"
text="Conectar carteira"
:variant="variant"
@button-clicked="handleConnect"
/>
<div v-else ref="menuRef" class="wallet-connected">
<button
type="button"
class="wallet-button"
@click="toggleMenu"
>
<span class="wallet-address">{{ formattedAddress }}</span>
<div class="wallet-indicator"></div>
</button>
<transition name="menu-fade">
<div v-if="menuOpen && showMenu" class="wallet-menu">
<button
type="button"
class="menu-item"
@click="handleViewTransactions"
>
<span>Ver transações</span>
</button>
<button
type="button"
class="menu-item disconnect"
@click="handleDisconnect"
>
<span>Desconectar</span>
</button>
</div>
</transition>
</div>
</div>
</template>
<style scoped>
.wallet-connect-container {
@apply relative inline-block;
}
.wallet-connected {
@apply relative;
}
.wallet-button {
@apply flex items-center gap-3 px-4 py-2 bg-white border-2 border-amber-400 rounded-lg hover:bg-amber-50 transition-colors cursor-pointer;
}
.wallet-address {
@apply text-gray-900 font-semibold text-sm;
}
.wallet-indicator {
@apply w-2 h-2 bg-emerald-500 rounded-full;
}
.wallet-menu {
@apply absolute top-full right-0 mt-2 bg-white rounded-lg border border-gray-300 shadow-lg z-50 min-w-[200px] overflow-hidden;
}
.menu-item {
@apply w-full px-4 py-3 text-left text-gray-900 font-medium text-sm hover:bg-gray-100 transition-colors cursor-pointer border-none;
}
.menu-item.disconnect {
@apply text-red-500 hover:bg-red-50;
}
/* Animação */
.menu-fade-enter-active,
.menu-fade-leave-active {
@apply transition-all duration-200;
}
.menu-fade-enter-from,
.menu-fade-leave-to {
@apply opacity-0 -translate-y-2;
}
</style>

468
src/composables/useGraphQL.ts
View File

@@ -1,468 +0,0 @@
import { NetworkConfig } from '@/model/NetworkEnum';
import { ref, computed, type Ref } from 'vue';
import { sepolia, rootstock, rootstockTestnet } from 'viem/chains';
export interface Transaction {
id: string;
type: 'deposit' | 'lock' | 'release' | 'return';
timestamp: string;
blockTimestamp: string;
seller?: string;
buyer?: string | null;
amount: string;
token: string;
blockNumber: string;
transactionHash: string;
}
export interface AnalyticsData {
totalVolume: string;
totalTransactions: string;
totalLocks: string;
totalDeposits: string;
totalReleases: string;
}
export function useGraphQL(network: Ref<NetworkConfig>) {
const searchAddress = ref('');
const selectedType = ref('all');
const loading = ref(false);
const error = ref<string | null>(null);
const analyticsLoading = ref(false);
const transactionsData = ref<Transaction[]>([]);
const analyticsData = ref<AnalyticsData>({
totalVolume: '0',
totalTransactions: '0',
totalLocks: '0',
totalDeposits: '0',
totalReleases: '0',
});
const executeQuery = async (query: string, variables: any = {}) => {
const url = network.value.subgraphUrls[0]; // TODO: try all available URLs
try {
const response = await fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
query,
variables,
}),
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
if (data.errors) {
throw new Error(data.errors[0]?.message || 'GraphQL error');
}
return data.data;
} catch (err) {
console.error('GraphQL query error:', err);
throw err;
}
};
const fetchAllActivity = async () => {
loading.value = true;
error.value = null;
const query = `
query GetAllActivity($first: Int = 50) {
depositAddeds(first: $first, orderBy: "blockTimestamp", orderDirection: "desc") {
id
seller
token
amount
blockNumber
blockTimestamp
transactionHash
}
depositWithdrawns(first: $first, orderBy: "blockTimestamp", orderDirection: "desc") {
id
seller
token
amount
blockNumber
blockTimestamp
transactionHash
}
lockAddeds(first: $first, orderBy: "blockTimestamp", orderDirection: "desc") {
id
buyer
lockID
seller
amount
blockNumber
blockTimestamp
transactionHash
}
lockReleaseds(first: $first, orderBy: "blockTimestamp", orderDirection: "desc") {
id
buyer
lockId
amount
blockNumber
blockTimestamp
transactionHash
}
lockReturneds(first: $first, orderBy: "blockTimestamp", orderDirection: "desc") {
id
buyer
lockId
blockNumber
blockTimestamp
transactionHash
}
}
`;
try {
const data = await executeQuery(query, { first: 50 });
transactionsData.value = processActivityData(data);
} catch (err) {
error.value =
err instanceof Error ? err.message : 'Failed to fetch transactions';
} finally {
loading.value = false;
}
};
const fetchUserActivity = async (userAddress: string) => {
loading.value = true;
error.value = null;
const query = `
query GetUserActivity($userAddress: String!, $first: Int = 50) {
depositAddeds(first: $first, where: { seller: $userAddress }, orderBy: "blockTimestamp", orderDirection: "desc") {
id
seller
token
amount
blockNumber
blockTimestamp
transactionHash
}
depositWithdrawns(first: $first, where: { seller: $userAddress }, orderBy: "blockTimestamp", orderDirection: "desc") {
id
seller
token
amount
blockNumber
blockTimestamp
transactionHash
}
lockAddeds(first: $first, where: { buyer: $userAddress }, orderBy: "blockTimestamp", orderDirection: "desc") {
id
buyer
lockID
seller
amount
blockNumber
blockTimestamp
transactionHash
}
lockReleaseds(first: $first, where: { buyer: $userAddress }, orderBy: "blockTimestamp", orderDirection: "desc") {
id
buyer
lockId
amount
blockNumber
blockTimestamp
transactionHash
}
lockReturneds(first: $first, where: { buyer: $userAddress }, orderBy: "blockTimestamp", orderDirection: "desc") {
id
buyer
lockId
blockNumber
blockTimestamp
transactionHash
}
}
`;
try {
const data = await executeQuery(query, { userAddress, first: 50 });
transactionsData.value = processActivityData(data);
} catch (err) {
error.value =
err instanceof Error
? err.message
: 'Failed to fetch user transactions';
} finally {
loading.value = false;
}
};
const clearData = () => {
transactionsData.value = [];
analyticsData.value = {
totalVolume: '0',
totalTransactions: '0',
totalLocks: '0',
totalDeposits: '0',
totalReleases: '0',
};
};
const fetchAnalytics = async () => {
analyticsLoading.value = true;
const query = `
query GetAnalytics {
depositAddeds(first: 1000) {
amount
blockTimestamp
}
depositWithdrawns(first: 1000) {
amount
blockTimestamp
}
lockAddeds(first: 1000) {
amount
blockTimestamp
}
lockReleaseds(first: 1000) {
amount
blockTimestamp
}
lockReturneds(first: 1000) {
blockTimestamp
}
}
`;
try {
const data = await executeQuery(query);
analyticsData.value = processAnalyticsData(data);
} catch (err) {
console.error('Failed to fetch analytics:', err);
} finally {
analyticsLoading.value = false;
}
};
const processActivityData = (data: any): Transaction[] => {
if (!data) return [];
const activities: Transaction[] = [];
if (data.depositAddeds) {
data.depositAddeds.forEach((deposit: any) => {
activities.push({
id: deposit.id,
blockNumber: deposit.blockNumber,
blockTimestamp: deposit.blockTimestamp,
transactionHash: deposit.transactionHash,
type: 'deposit',
seller: deposit.seller,
buyer: undefined,
amount: deposit.amount,
token: deposit.token,
timestamp: formatTimestamp(deposit.blockTimestamp),
});
});
}
if (data.depositWithdrawns) {
data.depositWithdrawns.forEach((withdrawal: any) => {
activities.push({
id: withdrawal.id,
blockNumber: withdrawal.blockNumber,
blockTimestamp: withdrawal.blockTimestamp,
transactionHash: withdrawal.transactionHash,
type: 'deposit', // Treat as deposit withdrawal
seller: withdrawal.seller,
buyer: undefined,
amount: withdrawal.amount,
token: withdrawal.token,
timestamp: formatTimestamp(withdrawal.blockTimestamp),
});
});
}
if (data.lockAddeds) {
data.lockAddeds.forEach((lock: any) => {
activities.push({
id: lock.id,
blockNumber: lock.blockNumber,
blockTimestamp: lock.blockTimestamp,
transactionHash: lock.transactionHash,
type: 'lock',
seller: lock.seller,
buyer: lock.buyer,
amount: lock.amount,
token: lock.token,
timestamp: formatTimestamp(lock.blockTimestamp),
});
});
}
if (data.lockReleaseds) {
data.lockReleaseds.forEach((release: any) => {
activities.push({
id: release.id,
blockNumber: release.blockNumber,
blockTimestamp: release.blockTimestamp,
transactionHash: release.transactionHash,
type: 'release',
seller: undefined, // Release doesn't have seller info
buyer: release.buyer,
amount: release.amount,
token: 'BRZ', // Default token
timestamp: formatTimestamp(release.blockTimestamp),
});
});
}
if (data.lockReturneds) {
data.lockReturneds.forEach((returnTx: any) => {
activities.push({
id: returnTx.id,
blockNumber: returnTx.blockNumber,
blockTimestamp: returnTx.blockTimestamp,
transactionHash: returnTx.transactionHash,
type: 'return',
seller: undefined, // Return doesn't have seller info
buyer: returnTx.buyer,
amount: '0', // Return doesn't have amount
token: 'BRZ', // Default token
timestamp: formatTimestamp(returnTx.blockTimestamp),
});
});
}
return activities.sort(
(a, b) => parseInt(b.blockTimestamp) - parseInt(a.blockTimestamp),
);
};
const formatTimestamp = (timestamp: string): string => {
const now = Date.now() / 1000;
const diff = now - parseInt(timestamp);
if (diff < 60) return 'Just now';
if (diff < 3600) return `${Math.floor(diff / 60)} minutes ago`;
if (diff < 86400) return `${Math.floor(diff / 3600)} hours ago`;
return `${Math.floor(diff / 86400)} days ago`;
};
const formatAmount = (amount: string): string => {
const num = parseFloat(amount);
if (num >= 1000000000000000)
return `${(num / 1000000000000000).toFixed(1)}Q`;
if (num >= 1000000000000) return `${(num / 1000000000000).toFixed(1)}T`;
if (num >= 1000000000) return `${(num / 1000000000).toFixed(1)}B`;
if (num >= 1000000) return `${(num / 1000000).toFixed(1)}M`;
if (num >= 1000) return `${(num / 1000).toFixed(1)}K`;
if (num < 1) return num.toFixed(4);
return num.toFixed(2);
};
const processAnalyticsData = (data: any): AnalyticsData => {
if (!data) {
return {
totalVolume: '0',
totalTransactions: '0',
totalLocks: '0',
totalDeposits: '0',
totalReleases: '0',
};
}
let totalVolume = 0;
let totalTransactions = 0;
let totalLocks = 0;
let totalDeposits = 0;
let totalReleases = 0;
if (data.depositAddeds) {
data.depositAddeds.forEach((deposit: any) => {
totalVolume += parseFloat(deposit.amount || '0');
totalTransactions++;
totalDeposits++;
});
}
if (data.depositWithdrawns) {
data.depositWithdrawns.forEach((withdrawal: any) => {
totalVolume += parseFloat(withdrawal.amount || '0');
totalTransactions++;
});
}
if (data.lockAddeds) {
data.lockAddeds.forEach((lock: any) => {
totalVolume += parseFloat(lock.amount || '0');
totalTransactions++;
totalLocks++;
});
}
if (data.lockReleaseds) {
data.lockReleaseds.forEach((release: any) => {
totalVolume += parseFloat(release.amount || '0');
totalTransactions++;
totalReleases++;
});
}
if (data.lockReturneds) {
data.lockReturneds.forEach((returnTx: any) => {
totalTransactions++;
});
}
const result = {
totalVolume: formatAmount(totalVolume.toString()),
totalTransactions: totalTransactions.toString(),
totalLocks: totalLocks.toString(),
totalDeposits: totalDeposits.toString(),
totalReleases: totalReleases.toString(),
};
return result;
};
const filteredTransactions = computed(() => {
let filtered = transactionsData.value;
if (selectedType.value !== 'all') {
filtered = filtered.filter((tx) => tx.type === selectedType.value);
}
if (searchAddress.value) {
const searchLower = searchAddress.value.toLowerCase();
filtered = filtered.filter(
(tx) =>
tx.seller?.toLowerCase().includes(searchLower) ||
tx.buyer?.toLowerCase().includes(searchLower),
);
}
return filtered;
});
return {
searchAddress,
selectedType,
transactions: filteredTransactions,
analytics: analyticsData,
loading,
error,
analyticsLoading,
fetchAllActivity,
fetchUserActivity,
fetchAnalytics,
clearData,
};
}

18
src/composables/useUser.ts
View File

@@ -1,12 +1,12 @@
import { ref } from 'vue';
import type { ValidDeposit } from '@/model/ValidDeposit';
import type { Participant } from '../utils/bbPay';
import type { Address } from 'viem';
import { DEFAULT_NETWORK, Networks } from '@/config/networks';
import { TokenEnum, NetworkConfig } from '@/model/NetworkEnum';
import { ref } from "vue";
import type { ValidDeposit } from "@/model/ValidDeposit";
import type { Participant } from "../utils/bbPay";
import type { Address } from "viem"
import { DEFAULT_NETWORK, Networks } from "@/config/networks";
import { TokenEnum, NetworkConfig } from "@/model/NetworkEnum"
const walletAddress = ref<Address | null>(null);
const balance = ref('');
const balance = ref("");
const network = ref(DEFAULT_NETWORK);
const selectedToken = ref<TokenEnum>(TokenEnum.BRZ);
const loadingLock = ref(false);
@@ -15,7 +15,7 @@ const depositsValidList = ref<ValidDeposit[]>([]);
const loadingWalletTransactions = ref(false);
const loadingNetworkLiquidity = ref(false);
const seller = ref<Participant>({} as Participant);
const sellerId = ref('');
const sellerId = ref("");
export function useUser() {
// Actions become regular functions
@@ -50,7 +50,7 @@ export function useUser() {
}
// Find network by chain ID
const chain = Object.values(Networks).find((n) => n.id === chainId);
const chain = Object.values(Networks).find(n => n.id === chainId);
if (chain) {
network.value = chain;
}

68
src/config/networks.ts
View File

@@ -1,60 +1,24 @@
import { mainnet, sepolia, rootstock, rootstockTestnet } from 'viem/chains';
import { NetworkConfig } from '@/model/NetworkEnum';
import { sepolia, rootstockTestnet } from "viem/chains";
import { NetworkConfig } from "@/model/NetworkEnum"
// TODO: import addresses from p2pix-smart-contracts deployments
export const Networks: { [key: string]: NetworkConfig } = {
mainnet: {
...mainnet,
rpcUrls: { default: { http: [import.meta.env.VITE_MAINNET_API_URL] } },
contracts: {
...mainnet.contracts,
p2pix: { address: import.meta.env.VITE_MAINNET_P2PIX_ADDRESS },
},
export const Networks: {[key:string]: NetworkConfig} = {
sepolia: { ...sepolia,
rpcUrls: { default: { http: [import.meta.env.VITE_SEPOLIA_API_URL]}},
contracts: { ...sepolia.contracts,
p2pix: {address:"0xb7cD135F5eFD9760981e02E2a898790b688939fe"} },
tokens: {
BRZ: { address: import.meta.env.VITE_MAINNET_TOKEN_ADDRESS },
},
subgraphUrls: [import.meta.env.VITE_MAINNET_SUBGRAPH_URL],
BRZ: {address:"0x3eBE67A2C7bdB2081CBd34ba3281E90377462289"} },
subgraphUrls: [import.meta.env.VITE_SEPOLIA_SUBGRAPH_URL]
},
rootstock: {
...rootstock,
rpcUrls: { default: { http: [import.meta.env.VITE_RSK_API_URL] } },
contracts: {
...rootstock.contracts,
p2pix: { address: import.meta.env.VITE_RSK_P2PIX_ADDRESS },
},
rootstockTestnet: { ...rootstockTestnet,
rpcUrls: { default: { http: [import.meta.env.VITE_RSK_API_URL]}},
contracts: { ...rootstockTestnet.contracts,
p2pix: {address:"0x57Dcba05980761169508886eEdc6f5E7EC0411Dc"} },
tokens: {
BRZ: { address: import.meta.env.VITE_RSK_TOKEN_ADDRESS },
},
subgraphUrls: [import.meta.env.VITE_RSK_SUBGRAPH_URL],
BRZ: {address:"0xfE841c74250e57640390f46d914C88d22C51e82e"} },
subgraphUrls: [import.meta.env.VITE_RSK_SUBGRAPH_URL]
},
};
/** @public */
export const NetworksTestnet: { [key: string]: NetworkConfig } = {
sepolia: {
...sepolia,
rpcUrls: { default: { http: [import.meta.env.VITE_SEPOLIA_API_URL] } },
contracts: {
...sepolia.contracts,
p2pix: { address: import.meta.env.VITE_SEPOLIA_P2PIX_ADDRESS },
},
tokens: {
BRZ: { address: import.meta.env.VITE_SEPOLIA_TOKEN_ADDRESS },
},
subgraphUrls: [import.meta.env.VITE_SEPOLIA_SUBGRAPH_URL],
},
rootstockTestnet: {
...rootstockTestnet,
rpcUrls: { default: { http: [import.meta.env.VITE_RSK_API_URL] } },
contracts: {
...rootstockTestnet.contracts,
p2pix: { address: import.meta.env.VITE_RSK_P2PIX_ADDRESS },
},
tokens: {
BRZ: { address: import.meta.env.VITE_RSK_TOKEN_ADDRESS },
},
subgraphUrls: [import.meta.env.VITE_RSK_SUBGRAPH_URL],
},
};
export const DEFAULT_NETWORK = Networks.mainnet;
export const DEFAULT_NETWORK = Networks.sepolia;

12
src/main.ts
View File

@@ -1,12 +1,12 @@
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import './assets/main.css';
import './assets/transitions.css';
import "./assets/main.css";
import "./assets/transitions.css";
const app = createApp(App);
app.use(router);
app.mount('#app');
app.mount("#app");

6
src/model/AppVersion.ts
View File

@@ -1,6 +0,0 @@
export interface AppVersion {
tag: string;
ipfsHash: string;
releaseDate: string;
description?: string;
}

5
src/model/Bank.ts Normal file
View File

@@ -0,0 +1,5 @@
export interface Bank {
COMPE: string;
ISPB: string;
longName: string;
}

4
src/model/Faq.ts
View File

@@ -1,11 +1,11 @@
export type Faq = Section[];
type Section = {
export type Section = {
name: string;
items: Question[];
};
type Question = {
export type Question = {
title: string;
content: string;
isOpen?: boolean;

11
src/model/LockStatus.ts
View File

@@ -1,9 +1,8 @@
import type { Address } from 'viem';
import type { Address } from "viem";
export enum LockStatus {
// from DataTypes.sol
export enum LockStatus { // from DataTypes.sol
Inexistent = 0, // Uninitialized Lock
Active = 1, // Valid Lock
Expired = 2, // Expired Lock
Released = 3, // Already released Lock
Active = 1, // Valid Lock
Expired = 2, // Expired Lock
Released = 3 // Already released Lock
}

6
src/model/NetworkEnum.ts
View File

@@ -1,10 +1,10 @@
import type { Chain, ChainContract } from 'viem';
import type { Chain, ChainContract } from "viem";
export enum TokenEnum {
BRZ = 'BRZ',
// BRX = 'BRX'
}
export type NetworkConfig = Chain & {
tokens: Record<TokenEnum, ChainContract>;
subgraphUrls: string[];
tokens: Record<TokenEnum, ChainContract>,
subgraphUrls: string[]
};

11
src/model/Pix.ts Normal file
View File

@@ -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;
};

2
src/model/UnreleasedLock.ts
View File

@@ -1,4 +1,4 @@
import { Address } from 'viem';
import { Address } from "viem";
export type UnreleasedLock = {
lockID: bigint;

4
src/model/ValidDeposit.ts
View File

@@ -1,5 +1,5 @@
import type { Address } from 'viem';
import type { NetworkConfig } from '@/model/NetworkEnum';
import type { Address } from "viem";
import type { NetworkConfig } from "@/model/NetworkEnum";
export type ValidDeposit = {
token: Address;

5
src/model/WalletTransaction.ts
View File

@@ -1,10 +1,9 @@
import type { LockStatus } from '@/model/LockStatus';
import type { Address } from 'viem';
import type { LockStatus } from "@/model/LockStatus"
import type { Address } from "viem"
export type WalletTransaction = {
token?: Address;
blockNumber: number;
blockTimestamp?: number;
amount: number;
seller: string;
buyer: string;

51
src/router/index.ts
View File

@@ -1,57 +1,38 @@
import {
createRouter,
createWebHistory,
createWebHashHistory,
} from 'vue-router';
import HomeView from '@/views/HomeView.vue';
import FaqView from '@/views/FaqView.vue';
import ManageBidsView from '@/views/ManageBidsView.vue';
import SellerView from '@/views/SellerView.vue';
import ExploreView from '@/views/ExploreView.vue';
import VersionsView from '@/views/VersionsView.vue';
import { createRouter, createWebHistory } from "vue-router";
import HomeView from "@/views/HomeView.vue";
import FaqView from "@/views/FaqView.vue";
import ManageBidsView from "@/views/ManageBidsView.vue";
import SellerView from "@/views/SellerView.vue";
const router = createRouter({
history:
import.meta.env.MODE === 'production' && import.meta.env.BASE_URL === './'
? createWebHashHistory()
: createWebHistory(import.meta.env.BASE_URL),
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
path: "/",
name: "home",
component: HomeView,
props: true,
},
{
path: '/:lockID',
name: 'redirect buy',
path: "/:lockID",
name: "redirect buy",
component: HomeView,
},
{
path: '/seller',
name: 'seller',
path: "/seller",
name: "seller",
component: SellerView,
},
{
path: '/manage_bids',
name: 'manage bids',
path: "/manage_bids",
name: "manage bids",
component: ManageBidsView,
},
{
path: '/faq',
name: 'faq',
path: "/faq",
name: "faq",
component: FaqView,
},
{
path: '/explore',
name: 'explore',
component: ExploreView,
},
{
path: '/versions',
name: 'versions',
component: VersionsView,
},
],
});

4
src/shims-vue.d.ts vendored
View File

@@ -1,5 +1,5 @@
declare module '*.vue' {
import { DefineComponent } from 'vue';
declare module "*.vue" {
import { DefineComponent } from "vue";
const component: DefineComponent;
export default component;
}

4
src/svgTransform.js
View File

@@ -1,11 +1,11 @@
module.exports = {
process() {
return {
code: 'module.exports = {};',
code: `module.exports = {};`,
};
},
getCacheKey() {
// The output is always the same.
return 'svgTransform';
return "svgTransform";
},
};

18
src/utils/bbPay.ts
View File

@@ -9,7 +9,7 @@ export interface Participant {
savingsVariation?: string;
}
interface ParticipantWithID extends Participant {
export interface ParticipantWithID extends Participant {
id: string;
}
@@ -23,9 +23,9 @@ export interface Offer {
export const createParticipant = async (participant: Participant) => {
const response = await fetch(`${import.meta.env.VITE_APP_API_URL}/register`, {
method: 'POST',
method: "POST",
headers: {
'Content-Type': 'application/json',
"Content-Type": "application/json",
},
body: JSON.stringify({
chainID: participant.chainID,
@@ -49,23 +49,21 @@ export const createParticipant = async (participant: Participant) => {
export const createSolicitation = async (offer: Offer) => {
const response = await fetch(`${import.meta.env.VITE_APP_API_URL}/request`, {
method: 'POST',
method: "POST",
headers: {
'Content-Type': 'application/json',
"Content-Type": "application/json",
},
body: JSON.stringify({
amount: offer.amount,
pixTarget: offer.sellerId.split('-').pop(),
pixTarget: offer.sellerId.split("-").pop(),
}),
});
return response.json();
};
export const getSolicitation = async (
id: bigint,
): Promise<{ pixTimestamp: `0x${string}`; signature: `0x${string}` }> => {
export const getSolicitation = async (id: bigint): Promise<{pixTimestamp: `0x${string}`, signature: `0x${string}`}> => {
const response = await fetch(
`${import.meta.env.VITE_APP_API_URL}/release/${id}`,
`${import.meta.env.VITE_APP_API_URL}/release/${id}`
);
const obj = await response.json();

4
src/utils/decimalCount.ts
View File

@@ -1,6 +1,6 @@
export const decimalCount = (numStr: string): number => {
if (numStr.includes('.')) {
return numStr.split('.')[1].length;
if (numStr.includes(".")) {
return numStr.split(".")[1].length;
}
return 0;
};

32
src/utils/imagesPath.ts
View File

@@ -1,15 +1,29 @@
import type { TokenEnum } from '@/model/NetworkEnum';
import { Networks } from '@/config/networks';
import type { TokenEnum } from "@/model/NetworkEnum";
export const imagesPath = import.meta.glob<string>("@/assets/*.{png,svg}", {
eager: true,
query: "?url",
import: "default",
});
export const getNetworkImage = (networkName: string): string => {
const normalizedName = networkName.toLowerCase().replace(/[^a-z0-9]/g, '-');
return new URL(`../assets/networks/${normalizedName}.svg`, import.meta.url)
.href;
const imageName = networkName
.toLowerCase()
.replace(/[^a-z0-9]/g, '-');
try {
const path = Object.keys(imagesPath).find((key) =>
key.endsWith(`${imageName}.svg`)
);
return path ? imagesPath[path] : "";
} catch (error) {
console.error("Error fetching network image");
return "";
}
};
export const getTokenImage = (tokenName: TokenEnum): string => {
return new URL(
`../assets/tokens/${tokenName.toLowerCase()}.svg`,
import.meta.url,
).href;
const path = Object.keys(imagesPath).find((key) =>
key.endsWith(`${tokenName.toLowerCase()}.svg`)
);
return path ? imagesPath[path] : "";
};

14
src/utils/networkLiquidity.ts
View File

@@ -1,17 +1,17 @@
import type { ValidDeposit } from '@/model/ValidDeposit';
import type { Address } from 'viem';
import type { ValidDeposit } from "@/model/ValidDeposit";
import type { Address } from "viem";
const verifyNetworkLiquidity = (
tokenValue: number,
walletAddress: Address,
validDepositList: ValidDeposit[],
validDepositList: ValidDeposit[]
): ValidDeposit[] => {
const filteredDepositList = validDepositList
.filter((element) => {
const remaining = element.remaining;
if (
tokenValue! <= remaining &&
tokenValue! != 0 &&
tokenValue!! <= remaining &&
tokenValue!! != 0 &&
element.seller !== walletAddress
) {
return true;
@@ -25,14 +25,14 @@ const verifyNetworkLiquidity = (
const uniqueNetworkDeposits = filteredDepositList.reduce(
(acc: ValidDeposit[], current) => {
const existingNetwork = acc.find(
(deposit) => deposit.network === current.network,
(deposit) => deposit.network === current.network
);
if (!existingNetwork) {
acc.push(current);
}
return acc;
},
[],
[]
);
return uniqueNetworkDeposits;
};

14
src/utils/pixKeyFormat.ts
View File

@@ -1,4 +1,16 @@
export const pixFormatValidation = (pixKey: string): boolean => {
const cpf = /(^\d{3}\.?\d{3}\.?\d{3}-?\d{2}$)/g;
const cnpj = /(^\d{2}\.?\d{3}\.?\d{3}\/?\d{4}-?\d{2}$)/g;
const telefone = /(^[0-9]{2})?(\s|-)?(9?[0-9]{4})-?([0-9]{4}$)/g;
if (pixKey.match(cpf) || pixKey.match(cnpj) || pixKey.match(telefone)) {
return true;
}
return false;
};
export const postProcessKey = (pixKey: string): string => {
pixKey = pixKey.replace(/[-.()/]/g, '');
pixKey = pixKey.replace(/[-.()/]/g, "");
return pixKey;
};

24
src/utils/versions.ts
View File

@@ -1,24 +0,0 @@
import type { AppVersion } from '@/model/AppVersion';
export const appVersions: AppVersion[] = [
{
tag: '1.1.0',
ipfsHash: 'bafybeiaffdxrxoex3qh7kirnkkufnvpafb4gmkt7mjxufnnpbrq6tmqoha',
releaseDate: '2025-11-06',
description: 'Explorer and versioning features added',
},
{
tag: '1.0.0',
ipfsHash: 'bafybeiagfqnxnb5zdrks6dicfm7kxjdtzzzzm2ouluxgdseg2hrrotayzi',
releaseDate: '2023-01-28',
description: 'Initial release',
},
];
export function getLatestVersion(): AppVersion | null {
return appVersions.length > 0 ? appVersions[0] : null;
}
export function getIpfsUrl(ipfsHash: string): string {
return `https://${ipfsHash}.ipfs.dweb.link`;
}

164
src/views/ExploreView.vue
View File

@@ -1,164 +0,0 @@
<script setup lang="ts">
import { onMounted, watch } from 'vue';
import { useUser } from '@/composables/useUser';
import { useGraphQL } from '@/composables/useGraphQL';
import FormCard from '@/components/ui/FormCard.vue';
import LoadingComponent from '@/components/ui/LoadingComponent.vue';
import AnalyticsCard from '@/components/Explorer/AnalyticsCard.vue';
import TransactionTable from '@/components/Explorer/TransactionTable.vue';
const user = useUser();
const { network } = user;
const {
searchAddress,
selectedType,
transactions,
analytics,
loading,
error,
analyticsLoading,
fetchAllActivity,
fetchUserActivity,
fetchAnalytics,
clearData,
} = useGraphQL(network);
const transactionTypes = [
{ key: 'all', label: 'Todas' },
{ key: 'deposit', label: 'Depósitos' },
{ key: 'lock', label: 'Bloqueios' },
{ key: 'release', label: 'Liberações' },
{ key: 'return', label: 'Retornos' },
];
const handleTypeFilter = (type: string) => {
selectedType.value = type;
};
watch(searchAddress, async (newAddress) => {
if (newAddress.trim()) {
await fetchUserActivity(newAddress.trim());
} else {
await fetchAllActivity();
}
});
watch(
network,
async () => {
clearData();
await Promise.all([fetchAllActivity(), fetchAnalytics()]);
},
{ deep: true },
);
onMounted(async () => {
await Promise.all([fetchAllActivity(), fetchAnalytics()]);
});
</script>
<template>
<div class="min-h-screen">
<div class="container mx-auto px-4 py-8">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4 mb-8">
<AnalyticsCard
title="Volume Total"
:value="analytics.totalVolume"
:loading="analyticsLoading"
/>
<AnalyticsCard
title="Total de Transações"
:value="analytics.totalTransactions"
:loading="analyticsLoading"
/>
<AnalyticsCard
title="Total de Bloqueios"
:value="analytics.totalLocks"
:loading="analyticsLoading"
/>
<AnalyticsCard
title="Total de Depósitos"
:value="analytics.totalDeposits"
:loading="analyticsLoading"
/>
<AnalyticsCard
title="Total de Liberações"
:value="analytics.totalReleases"
:loading="analyticsLoading"
/>
</div>
<!-- Search and Filters -->
<FormCard padding="lg" class="mb-6">
<div class="space-y-4">
<!-- Search Input -->
<div class="flex-1">
<input
v-model="searchAddress"
type="text"
placeholder="Buscar por endereço de carteira..."
class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:border-transparent"
/>
</div>
<!-- Type Filters -->
<div class="flex flex-wrap gap-2">
<button
v-for="type in transactionTypes"
:key="type.key"
@click="handleTypeFilter(type.key)"
:class="[
'px-4 py-2 rounded-lg text-sm font-medium transition-colors',
selectedType === type.key
? 'bg-amber-400 text-gray-900'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200',
]"
>
{{ type.label }}
</button>
</div>
</div>
</FormCard>
<!-- Loading State -->
<div v-if="loading" class="text-center py-12">
<LoadingComponent title="Carregando transações..." />
</div>
<!-- Error State -->
<div v-else-if="error" class="text-center py-12">
<div class="text-red-600 text-lg mb-2">⚠️</div>
<p class="text-red-600 mb-2">Erro ao carregar transações</p>
<p class="text-gray-600 text-sm">{{ error }}</p>
</div>
<!-- Transactions Table -->
<FormCard v-else padding="lg">
<div class="mb-6">
<h2 class="text-xl font-semibold text-gray-900 mb-2">
Transações Recentes
</h2>
<p class="text-gray-600">
{{ transactions.length }} transações encontradas
</p>
</div>
<TransactionTable
:transactions="transactions"
:network-explorer-url="network.blockExplorers?.default.url || ''"
/>
</FormCard>
</div>
</div>
</template>
<style scoped>
.container {
max-width: 1200px;
}
</style>

95
src/views/FaqView.vue
View File

@@ -1,8 +1,8 @@
<script setup lang="ts">
import type { Faq } from '@/model/Faq';
import { ref } from 'vue';
import { marked } from 'marked';
import faqContent from '@/utils/files/faqContent.json';
import type { Faq } from "@/model/Faq";
import { ref } from "vue";
import { marked } from "marked";
import faqContent from "@/utils/files/faqContent.json";
const faq = ref<Faq>(faqContent);
@@ -23,27 +23,25 @@ const openItem = (index: number) => {
faq.value[selectedSection.value].items[index].content = marked(
faq.value[selectedSection.value].items[index].content
) as string;
);
};
</script>
<template>
<div class="page">
<div class="text-container">
<span
class="text font-extrabold sm:text-5xl text-3xl sm:max-w-[50rem] max-w-[90%]"
<span class="text font-extrabold text-5xl max-w-[50rem]"
>Perguntas Frequentes
</span>
<span
class="text font-medium sm:text-base text-sm sm:max-w-[40rem] max-w-[90%]"
<span class="text font-medium text-base max-w-[40rem]"
>Não conseguiu uma resposta para sua dúvida? Acesse a comunidade do
Discord para falar diretamente conosco.</span
>
</div>
<div class="faq-container">
<div class="sumario-section">
<h1 class="sumario-title">Sumário</h1>
<div class="flex justify-between w-10/12 mt-20">
<div>
<h1 class="text-3xl text-white font-bold">Sumário</h1>
<h3
:class="index == selectedSection ? 'selected-sumario' : 'sumario'"
v-for="(f, index) in faq"
@@ -54,7 +52,7 @@ const openItem = (index: number) => {
</h3>
</div>
<div class="content-section">
<div class="w-4/6">
<div
v-for="(item, index) in faq[selectedSection].items"
v-bind:key="item.title"
@@ -63,16 +61,16 @@ const openItem = (index: number) => {
<img
alt="plus"
src="@/assets/plus.svg?url"
class="icon"
class="mr-3"
v-if="!item.isOpen"
/>
<img
alt="minus"
alt="plus"
src="@/assets/minus.svg?url"
class="icon"
class="mr-3"
v-if="item.isOpen"
/>
<h4 class="item-title">{{ item.title }}</h4>
<h4 class="text-white">{{ item.title }}</h4>
</div>
<div class="content" v-if="item.isOpen" v-html="item.content"></div>
<div class="hr"></div>
@@ -83,53 +81,23 @@ const openItem = (index: number) => {
</template>
<style scoped>
@reference "tailwindcss";
.page {
@apply flex flex-col items-center justify-center w-full mt-8 sm:mt-16 px-4;
}
.text-container {
@apply flex flex-col items-center justify-center gap-4 mb-8 sm:mb-12;
}
.text {
@apply text-white text-center;
}
.faq-container {
@apply flex flex-col sm:flex-row sm:justify-between w-full sm:w-10/12 max-w-7xl gap-8 sm:gap-0 mt-8 sm:mt-20;
}
.sumario-section {
@apply w-full sm:w-auto sm:min-w-[200px];
}
.sumario-title {
@apply text-xl sm:text-3xl text-white font-bold mb-4 sm:mb-0;
}
.sumario {
@apply text-white mt-6 sm:mt-6 cursor-pointer text-sm sm:text-base;
margin-top: 24px;
cursor: pointer;
}
.selected-sumario {
@apply text-white font-bold mt-6 sm:mt-6 cursor-pointer text-sm sm:text-base;
font-weight: bolder;
margin-top: 24px;
cursor: pointer;
}
.content-section {
@apply w-full sm:w-4/6;
}
.icon {
@apply mr-3 flex-shrink-0 w-5 h-5 sm:w-6 sm:h-6;
}
.item-title {
@apply text-white font-semibold text-sm sm:text-base;
.page {
@apply flex flex-col items-center justify-center w-full mt-16;
}
div.content {
@apply pt-6 text-white text-sm sm:text-base;
padding-top: 24px;
color: white;
}
.content :deep(ul) {
@@ -144,12 +112,9 @@ div.content {
@apply list-disc m-1 p-1;
}
.content :deep(p) {
@apply mb-2;
}
.hr {
@apply border border-gray-700 my-6;
border: 1px solid #1f2937;
margin: 24px 0;
}
h3 {
@@ -160,4 +125,12 @@ h2,
h4 {
font-weight: 600;
}
.text-container {
@apply flex flex-col items-center justify-center gap-4;
}
.text {
@apply text-white text-center;
}
</style>

47
src/views/HomeView.vue
View File

@@ -1,18 +1,18 @@
<script setup lang="ts">
import SearchComponent from '@/components/BuyerSteps/BuyerSearchComponent.vue';
import LoadingComponent from '@/components/ui/LoadingComponent.vue';
import BuyConfirmedComponent from '@/components/BuyerSteps/BuyConfirmedComponent.vue';
import { ref, onMounted, watch } from 'vue';
import { useUser } from '@/composables/useUser';
import QrCodeComponent from '@/components/BuyerSteps/QrCodeComponent.vue';
import { addLock, releaseLock } from '@/blockchain/buyerMethods';
import { updateWalletStatus, checkUnreleasedLock } from '@/blockchain/wallet';
import { getNetworksLiquidity } from '@/blockchain/events';
import type { ValidDeposit } from '@/model/ValidDeposit';
import { getUnreleasedLockById } from '@/blockchain/events';
import CustomAlert from '@/components/ui/CustomAlert.vue';
import { getSolicitation } from '@/utils/bbPay';
import type { Address } from 'viem';
import SearchComponent from "@/components/BuyerSteps/BuyerSearchComponent.vue";
import LoadingComponent from "@/components/ui/LoadingComponent.vue";
import BuyConfirmedComponent from "@/components/BuyerSteps/BuyConfirmedComponent.vue";
import { ref, onMounted, watch } from "vue";
import { useUser } from "@/composables/useUser";
import QrCodeComponent from "@/components/BuyerSteps/QrCodeComponent.vue";
import { addLock, releaseLock } from "@/blockchain/buyerMethods";
import { updateWalletStatus, checkUnreleasedLock } from "@/blockchain/wallet";
import { getNetworksLiquidity } from "@/blockchain/events";
import type { ValidDeposit } from "@/model/ValidDeposit";
import { getUnreleasedLockById } from "@/blockchain/events";
import CustomAlert from "@/components/ui/CustomAlert.vue";
import { getSolicitation } from "@/utils/bbPay";
import type { Address } from "viem";
enum Step {
Search,
@@ -29,7 +29,7 @@ const flowStep = ref<Step>(Step.Search);
const participantID = ref<string>();
const sellerAddress = ref<Address>();
const tokenAmount = ref<number>();
const lockID = ref<string>('');
const lockID = ref<string>("");
const loadingRelease = ref<boolean>(false);
const showModal = ref<boolean>(false);
const showBuyAlert = ref<boolean>(false);
@@ -37,7 +37,7 @@ const paramLockID = window.history.state?.lockID;
const confirmBuyClick = async (
selectedDeposit: ValidDeposit,
tokenValue: number,
tokenValue: number
) => {
participantID.value = selectedDeposit.participantID;
tokenAmount.value = tokenValue;
@@ -60,25 +60,22 @@ const confirmBuyClick = async (
};
const releaseTransaction = async (params: {
pixTimestamp: `0x${string}` & { lenght: 34 };
signature: `0x${string}`;
pixTimestamp: `0x${string}`&{lenght:34},
signature: `0x${string}`,
}) => {
flowStep.value = Step.List;
showBuyAlert.value = true;
loadingRelease.value = true;
const release = await releaseLock(
BigInt(lockID.value),
params.pixTimestamp,
params.signature,
);
const release = await releaseLock(BigInt(lockID.value), params.pixTimestamp, params.signature);
await updateWalletStatus();
loadingRelease.value = false;
};
const checkForUnreleasedLocks = async (): Promise<void> => {
if (!walletAddress.value) throw new Error('Wallet not connected');
if (!walletAddress.value)
throw new Error("Wallet not connected");
const lock = await checkUnreleasedLock(walletAddress.value);
if (lock) {
lockID.value = String(lock.lockID);
@@ -114,7 +111,7 @@ if (paramLockID) {
onMounted(async () => {
await getNetworksLiquidity();
if (walletAddress.value && !paramLockID) await checkForUnreleasedLocks();
window.history.state.lockID = '';
window.history.state.lockID = "";
});
</script>

36
src/views/ManageBidsView.vue
View File

@@ -1,19 +1,19 @@
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import { useUser } from '@/composables/useUser';
import ListingComponent from '@/components/ListingComponent/ListingComponent.vue';
import LoadingComponent from '@/components/ui/LoadingComponent.vue';
import CustomAlert from '@/components/ui/CustomAlert.vue';
import { ref, onMounted, watch } from "vue";
import { useUser } from "@/composables/useUser";
import ListingComponent from "@/components/ListingComponent/ListingComponent.vue";
import LoadingComponent from "@/components/ui/LoadingComponent.vue";
import CustomAlert from "@/components/ui/CustomAlert.vue";
import {
listValidDepositTransactionsByWalletAddress,
listAllTransactionByWalletAddress,
getActiveLockAmount,
} from '@/blockchain/wallet';
import { withdrawDeposit } from '@/blockchain/buyerMethods';
import type { ValidDeposit } from '@/model/ValidDeposit';
import type { WalletTransaction } from '@/model/WalletTransaction';
} from "@/blockchain/wallet";
import { withdrawDeposit } from "@/blockchain/buyerMethods";
import type { ValidDeposit } from "@/model/ValidDeposit";
import type { WalletTransaction } from "@/model/WalletTransaction";
import router from '@/router/index';
import router from "@/router/index";
const user = useUser();
const { walletAddress, network, selectedToken } = user;
@@ -30,19 +30,18 @@ const callWithdraw = async (amount: string) => {
let withdraw;
try {
withdraw = await withdrawDeposit(
amount,
network.value.tokens[selectedToken.value].address,
);
amount,
network.value.tokens[selectedToken.value].address);
} catch {
loadingWithdraw.value = false;
}
if (withdraw) {
console.log('Saque realizado!');
console.log("Saque realizado!");
await getWalletTransactions();
showAlert.value = true;
} else {
console.log('Não foi possível realizar o saque!');
console.log("Não foi possível realizar o saque!");
}
loadingWithdraw.value = false;
}
@@ -52,11 +51,11 @@ const getWalletTransactions = async () => {
user.setLoadingWalletTransactions(true);
if (walletAddress.value) {
const walletDeposits = await listValidDepositTransactionsByWalletAddress(
walletAddress.value,
walletAddress.value
);
const allUserTransactions = await listAllTransactionByWalletAddress(
walletAddress.value,
walletAddress.value
);
activeLockAmount.value = await getActiveLockAmount(walletAddress.value);
@@ -73,7 +72,7 @@ const getWalletTransactions = async () => {
onMounted(async () => {
if (!walletAddress.value) {
router.push({ name: 'home' });
router.push({ name: "home" });
}
await getWalletTransactions();
});
@@ -119,7 +118,6 @@ watch(network, async () => {
</template>
<style scoped>
@reference "tailwindcss";
.page {
@apply flex flex-col items-center gap-10 mt-20 w-full;
}

18
src/views/SellerView.vue
View File

@@ -1,13 +1,13 @@
<script setup lang="ts">
import { ref } from 'vue';
import { ref } from "vue";
import SellerComponent from '@/components/SellerSteps/SellerComponent.vue';
import SendNetwork from '@/components/SellerSteps/SendNetwork.vue';
import LoadingComponent from '@/components/ui/LoadingComponent.vue';
import { useUser } from '@/composables/useUser';
import { approveTokens, addDeposit } from '@/blockchain/sellerMethods';
import CustomAlert from '@/components/ui/CustomAlert.vue';
import type { Participant } from '@/utils/bbPay';
import SellerComponent from "@/components/SellerSteps/SellerComponent.vue";
import SendNetwork from "@/components/SellerSteps/SendNetwork.vue";
import LoadingComponent from "@/components/ui/LoadingComponent.vue";
import { useUser } from "@/composables/useUser";
import { approveTokens, addDeposit } from "@/blockchain/sellerMethods";
import CustomAlert from "@/components/ui/CustomAlert.vue";
import type { Participant } from "@/utils/bbPay";
enum Step {
Search,
@@ -69,7 +69,7 @@ const sendNetwork = async () => {
/>
<div v-if="flowStep == Step.Network">
<SendNetwork
:sellerId="String(user.sellerId.value)"
:sellerId="user.sellerId.value"
:offer="Number(user.seller.value.offer)"
:selected-token="user.selectedToken.value"
v-if="!loading"

151
src/views/VersionsView.vue
View File

@@ -1,151 +0,0 @@
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { appVersions, getIpfsUrl, getLatestVersion } from '@/utils/versions';
import type { AppVersion } from '@/model/AppVersion';
const versions = ref<AppVersion[]>([]);
const latestVersion = ref<AppVersion | null>(null);
const currentVersion = __APP_VERSION__;
onMounted(() => {
versions.value = [...appVersions].sort(
(a, b) =>
new Date(b.releaseDate).getTime() - new Date(a.releaseDate).getTime(),
);
latestVersion.value = getLatestVersion();
});
const openIpfsVersion = (ipfsHash: string) => {
const url = getIpfsUrl(ipfsHash);
window.open(url, '_blank', 'noopener,noreferrer');
};
const formatDate = (dateString: string): string => {
const date = new Date(dateString);
return date.toLocaleDateString('pt-BR', {
year: 'numeric',
month: 'long',
day: 'numeric',
});
};
</script>
<template>
<div class="page">
<div class="text-container">
<span class="text font-extrabold text-5xl max-w-[50rem]">
Versões do P2Pix
</span>
<span class="text font-medium text-base max-w-[40rem]">
Visualize todas as versões do P2Pix. Cada versão está disponível no IPFS
para acesso permanente e descentralizado.
</span>
<div v-if="currentVersion" class="mt-4">
<span class="text-gray-400 text-sm">
Versão atual:
<span class="font-semibold text-white">{{ currentVersion }}</span>
</span>
</div>
</div>
<div class="versions-container">
<div v-for="version in versions" :key="version.tag" class="version-card">
<div class="version-header">
<h3 class="version-tag">{{ version.tag }}</h3>
<span v-if="version.tag === currentVersion" class="current-badge">
Atual
</span>
</div>
<div class="version-info">
<p class="version-date">
<span class="label">Data de lançamento:</span>
{{ formatDate(version.releaseDate) }}
</p>
<p v-if="version.description" class="version-description">
{{ version.description }}
</p>
<div class="version-actions">
<button
v-if="currentVersion !== version.tag"
@click="openIpfsVersion(version.ipfsHash)"
class="ipfs-button"
>
Abrir no IPFS
</button>
</div>
</div>
</div>
<div v-if="versions.length === 0" class="empty-state">
<p class="text-gray-400">Nenhuma versão cadastrada ainda.</p>
</div>
</div>
</div>
</template>
<style scoped>
@reference "tailwindcss";
.page {
@apply flex flex-col items-center justify-center w-full mt-16 px-4;
}
.text-container {
@apply flex flex-col items-center justify-center gap-4 mb-12;
}
.text {
@apply text-white text-center;
}
.versions-container {
@apply w-full max-w-4xl space-y-4;
}
.version-card {
@apply bg-gray-800 rounded-lg p-6 border border-gray-700 hover:border-amber-500 transition-colors;
}
.version-header {
@apply flex items-center justify-between mb-4;
}
.version-tag {
@apply text-2xl font-bold text-white;
}
.current-badge {
@apply px-3 py-1 bg-amber-500 text-gray-900 text-xs font-semibold rounded-full;
}
.version-info {
@apply space-y-3;
}
.version-date {
@apply text-gray-300 text-sm;
}
.label {
@apply text-gray-400 font-medium;
}
.version-description {
@apply text-gray-300 text-sm;
}
.version-actions {
@apply flex justify-center sm:justify-start items-center gap-4 pt-2 w-full;
}
.ipfs-button {
@apply px-4 py-2 bg-amber-500 text-gray-900 font-semibold rounded hover:bg-amber-600 transition-colors text-sm;
}
.ipfs-hash {
@apply text-gray-400 text-xs font-mono break-all;
}
.empty-state {
@apply text-center py-12;
}
</style>

4
tailwind.config.js
View File

@@ -1,6 +1,6 @@
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}', './src/**/*.vue'],
module.exports = {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}", "./src/**/*.vue"],
theme: {
extend: {},
},

3
tsconfig.config.json
View File

@@ -1,5 +1,5 @@
{
"extends": "@vue/tsconfig/tsconfig.json",
"extends": "@vue/tsconfig/tsconfig.node.json",
"include": [
"vite.config.*",
"cypress.config.*",
@@ -7,7 +7,6 @@
],
"compilerOptions": {
"composite": true,
"noEmit": false,
"types": [
"node"
]

4
tsconfig.json
View File

@@ -1,5 +1,5 @@
{
"extends": "@vue/tsconfig/tsconfig.dom.json",
"extends": "@vue/tsconfig/tsconfig.web.json",
"include": [
"env.d.ts",
"src/**/*",
@@ -7,6 +7,7 @@
"scripts"
],
"compilerOptions": {
"baseUrl": ".",
"strict": true,
"paths": {
"@/*": [
@@ -20,7 +21,6 @@
"skipLibCheck": true,
"target": "esnext",
"module": "esnext",
"moduleResolution": "bundler",
"lib": [
"esnext",
"dom"

Some files were not shown because too many files have changed in this diff Show More