Added Banking View, displaying balance and transactions
This commit is contained in:
Samuel Andert
parent
563e9945c3
commit
d55e4bb203
@ -1,6 +0,0 @@
|
||||
query Continents {
|
||||
countries_continents {
|
||||
name
|
||||
code
|
||||
}
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
query Countries($filter: countries_CountryFilterInput) {
|
||||
countries_countries(filter: $filter) {
|
||||
code
|
||||
name
|
||||
capital
|
||||
}
|
||||
}
|
||||
22
.wundergraph/operations/getBalance.ts
Normal file
22
.wundergraph/operations/getBalance.ts
Normal file
@ -0,0 +1,22 @@
|
||||
import { createOperation, z } from '../generated/wundergraph.factory';
|
||||
import axios from 'axios';
|
||||
|
||||
export default createOperation.query({
|
||||
input: z.object({
|
||||
address: z.string(),
|
||||
}),
|
||||
handler: async ({ input }) => {
|
||||
const { data } = await axios.get('https://api.gnosisscan.io/api', {
|
||||
params: {
|
||||
module: 'account',
|
||||
action: 'balance',
|
||||
address: input.address,
|
||||
tag: 'latest',
|
||||
apikey: process.env.GNOSISSCAN_API,
|
||||
},
|
||||
});
|
||||
return {
|
||||
balance: parseFloat(data.result),
|
||||
};
|
||||
},
|
||||
});
|
||||
27
.wundergraph/operations/getTransactions.ts
Normal file
27
.wundergraph/operations/getTransactions.ts
Normal file
@ -0,0 +1,27 @@
|
||||
import { createOperation, z } from '../generated/wundergraph.factory';
|
||||
import axios from 'axios';
|
||||
|
||||
export default createOperation.query({
|
||||
input: z.object({
|
||||
address: z.string(),
|
||||
}),
|
||||
handler: async ({ input }) => {
|
||||
const { data } = await axios.get('https://api.gnosisscan.io/api', {
|
||||
params: {
|
||||
module: 'account',
|
||||
action: 'txlist',
|
||||
address: input.address,
|
||||
startblock: 0,
|
||||
endblock: 'latest',
|
||||
sort: 'desc',
|
||||
apikey: process.env.GNOSISSCAN_API,
|
||||
},
|
||||
});
|
||||
return {
|
||||
transactions: data.result.map(transaction => ({
|
||||
...transaction,
|
||||
timestamp: new Date(transaction.timeStamp * 1000).toISOString(),
|
||||
})),
|
||||
};
|
||||
},
|
||||
});
|
||||
@ -4,15 +4,11 @@ import operations from './wundergraph.operations';
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import dotenv from 'dotenv';
|
||||
import axios from 'axios';
|
||||
dotenv.config();
|
||||
|
||||
const directusSchema = fs.readFileSync(path.join(path.resolve(), './schemas/directus.graphql'), 'utf8');
|
||||
|
||||
const countries = introspect.graphql({
|
||||
apiNamespace: 'countries',
|
||||
url: 'https://countries.trevorblades.com/',
|
||||
});
|
||||
|
||||
const spaceX = introspect.graphql({
|
||||
apiNamespace: 'spacex',
|
||||
url: 'https://spacex-api.fly.dev/graphql/',
|
||||
@ -28,7 +24,7 @@ const directus = introspect.graphql({
|
||||
|
||||
// configureWunderGraph emits the configuration
|
||||
configureWunderGraphApplication({
|
||||
apis: [countries, spaceX, directus],
|
||||
apis: [spaceX, directus],
|
||||
server,
|
||||
operations,
|
||||
generate: {
|
||||
@ -65,6 +61,6 @@ configureWunderGraphApplication({
|
||||
},
|
||||
},
|
||||
authorization: {
|
||||
roles: ['admin'],
|
||||
roles: ['owner'],
|
||||
},
|
||||
});
|
||||
|
||||
@ -29,9 +29,11 @@
|
||||
"@types/node": "^20.5.8",
|
||||
"autoprefixer": "^10.4.15",
|
||||
"concurrently": "^7.6.0",
|
||||
"dayjs": "^1.11.9",
|
||||
"postcss": "^8.4.29",
|
||||
"svelte": "^3.54.0",
|
||||
"svelte-check": "^3.0.1",
|
||||
"svelte-time": "^0.8.0",
|
||||
"tailwindcss": "^3.3.3",
|
||||
"tslib": "^2.4.1",
|
||||
"typescript": "^5.0.0",
|
||||
|
||||
13
pnpm-lock.yaml
generated
13
pnpm-lock.yaml
generated
@ -135,6 +135,9 @@ devDependencies:
|
||||
concurrently:
|
||||
specifier: ^7.6.0
|
||||
version: 7.6.0
|
||||
dayjs:
|
||||
specifier: ^1.11.9
|
||||
version: 1.11.9
|
||||
postcss:
|
||||
specifier: ^8.4.29
|
||||
version: 8.4.29
|
||||
@ -144,6 +147,9 @@ devDependencies:
|
||||
svelte-check:
|
||||
specifier: ^3.0.1
|
||||
version: 3.0.1(@babel/core@7.22.11)(postcss@8.4.29)(svelte@3.54.0)
|
||||
svelte-time:
|
||||
specifier: ^0.8.0
|
||||
version: 0.8.0
|
||||
tailwindcss:
|
||||
specifier: ^3.3.3
|
||||
version: 3.3.3
|
||||
@ -6636,7 +6642,6 @@ packages:
|
||||
|
||||
/dayjs@1.11.9:
|
||||
resolution: {integrity: sha512-QvzAURSbQ0pKdIye2txOzNaHmxtUBXerpY0FJsFXUMKbIZeFm5ht1LS/jFsrncjnmtv8HsG0W2g6c0zUjZWmpA==}
|
||||
dev: false
|
||||
|
||||
/debug@2.6.9:
|
||||
resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
|
||||
@ -11424,6 +11429,12 @@ packages:
|
||||
typescript: 4.9.5
|
||||
dev: true
|
||||
|
||||
/svelte-time@0.8.0:
|
||||
resolution: {integrity: sha512-V0LBpJhYV2Q+jqiJ94ITAo51P6RIhrHQpDt3LCSk8PXfL2UMvSMlDzkqHq8mdKqmBCRZURnXhpynN03GQa/G/A==}
|
||||
dependencies:
|
||||
dayjs: 1.11.9
|
||||
dev: true
|
||||
|
||||
/svelte@3.54.0:
|
||||
resolution: {integrity: sha512-tdrgeJU0hob0ZWAMoKXkhcxXA7dpTg6lZGxUeko5YqvPdJBiyRspGsCwV27kIrbrqPP2WUoSV9ca0gnLlw8YzQ==}
|
||||
engines: {node: '>= 8'}
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
<ul>
|
||||
<li><a href="/me">Dashboard</a></li>
|
||||
<li><a href="/me/projects">My Projects</a></li>
|
||||
<li><a href="/me/banking">Banking</a></li>
|
||||
<li><a href="/me/acc">Access Control</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
83
src/routes/me/banking/+page.svelte
Normal file
83
src/routes/me/banking/+page.svelte
Normal file
@ -0,0 +1,83 @@
|
||||
<script lang="ts">
|
||||
import HeaderMain from "$lib/layouts/HeaderMain.svelte";
|
||||
import { createQuery } from "$lib/wundergraph";
|
||||
import Time from "svelte-time";
|
||||
import Icon from "@iconify/svelte";
|
||||
|
||||
const getBalanceQuery = createQuery({
|
||||
operationName: "getBalance",
|
||||
input: {
|
||||
address: "0x4b975F10baf1153A5CC688B52d55809cd2d8BB57",
|
||||
},
|
||||
});
|
||||
|
||||
const getTransactionsQuery = createQuery({
|
||||
operationName: "getTransactions",
|
||||
input: {
|
||||
address: "0x4b975F10baf1153A5CC688B52d55809cd2d8BB57",
|
||||
},
|
||||
});
|
||||
|
||||
function fromWei(wei: BigInt): string {
|
||||
return (Number(wei) / 10 ** 18).toFixed(2);
|
||||
}
|
||||
</script>
|
||||
|
||||
<HeaderMain>
|
||||
<div slot="header">
|
||||
<h1>Banking</h1>
|
||||
</div>
|
||||
|
||||
<div slot="main">
|
||||
<div class="pb-4">
|
||||
ACCOUNT
|
||||
<p class="text-2xl">0x4b975F10baf1153A5CC688B52d55809cd2d8BB57</p>
|
||||
</div>
|
||||
<div class="pb-4">
|
||||
{#if $getBalanceQuery.isLoading}
|
||||
<p>Loading...</p>
|
||||
{:else if $getBalanceQuery.error}
|
||||
<pre>Error: {JSON.stringify($getBalanceQuery.error, null, 2)}</pre>
|
||||
{:else}
|
||||
BALANCE
|
||||
<p class="text-5xl">${fromWei($getBalanceQuery.data.balance)}</p>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="pb-4">
|
||||
{#if $getTransactionsQuery.isLoading}
|
||||
<p>Loading...</p>
|
||||
{:else if $getTransactionsQuery.error}
|
||||
<pre>Error: {JSON.stringify($getTransactionsQuery.error, null, 2)}</pre>
|
||||
{:else}
|
||||
<div class="pb-4">TRANSACTIONS</div>
|
||||
<ul class="list-disc">
|
||||
{#each $getTransactionsQuery.data.transactions as transaction (transaction.hash)}
|
||||
<li class="flex justify-between items-center mb-4">
|
||||
<div class="flex items-center">
|
||||
<div class="pr-3">
|
||||
<Icon icon="ri:user-received-2-line" width="44" height="44" />
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xl">
|
||||
from {transaction.from.substring(0, 10)}...
|
||||
</p>
|
||||
<p class="text-sm text-gray-500">
|
||||
{transaction.hash}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-2xl">
|
||||
${fromWei(BigInt(transaction.value))}
|
||||
</p>
|
||||
<p class="text-sm text-gray-500">
|
||||
<Time timestamp={transaction.timestamp} relative />
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</HeaderMain>
|
||||
Loading…
Reference in New Issue
Block a user