Added Banking View, displaying balance and transactions

.wundergraph/operations/Continents.graphql

@@ -1,6 +0,0 @@
-query Continents {
-	countries_continents {
-		name
-		code
-	}
-}

.wundergraph/operations/Countries.graphql

@@ -1,7 +0,0 @@
-query Countries($filter: countries_CountryFilterInput) {
-	countries_countries(filter: $filter) {
-		code
-		name
-		capital
-	}
-}

.wundergraph/operations/getBalance.ts

@@ -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),
+    };
+  },
+});

.wundergraph/operations/getTransactions.ts

@@ -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(),
+            })),
+        };
+    },
+});

.wundergraph/wundergraph.config.ts

@@ -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'],
 	},
 });

package.json

@@ -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",

pnpm-lock.yaml

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

src/routes/me/+layout.svelte

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

src/routes/me/banking/+page.svelte

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