alephium · anonfedora · Nov 29, 2024 · Nov 30, 2024 · Nov 30, 2024 · Nov 30, 2024
diff --git a/fee-structure/.gitignore b/fee-structure/.gitignore
@@ -0,0 +1 @@
+/node_modules
diff --git a/fee-structure/README.md b/fee-structure/README.md
@@ -0,0 +1,62 @@
+# My Next.js dApp with app router
+
+This template monorepo was designed to provide a developer-friendly experience to Alephium ecosystem newcomers. It is split into 2 parts:
+
+- app: contains the Next.js frontend part of the dApp
+- contracts: contains the dApp contracts
+
+It uses **yarn workspaces** to manage both app and contract projects from the monorepo root.
+
+## Local development
+
+To get started quickly, follow these steps:
+
+### Set up a devnet
+
+Start a local devnet for testing and development. Please refer to the [Getting Started documentation](https://docs.alephium.org/full-node/getting-started#devnet).
+
+### Install dependencies
+
+```
+yarn install
+```
+
+### Compile the contracts
+
+```
+yarn compile
+```
+
+### Deploy the contracts
+
+```
+yarn deploy
+```
+
+### Build the contracts package
+
+```
+yarn build:contracts
+```
+
+### Run the app
+
+```
+yarn dev
+```
+
+### Install an Alephium wallet
+
+Download an [Alephium wallet](https://alephium.org/#wallets), and connect it to your devnet dApp.
+
+## Testnet, Mainnet, and More
+
+You could use yarn workspace to run commands in the contracts or app directory.
+
+```
+yarn <my-contracts|my-dapp> <command>
+```
+
+You could also get some testnet tokens from the [Faucet](https://docs.alephium.org/infrastructure/public-services/#testnet-faucet).
+
+To learn more about smart contract development on Alephium, take a look at the [documentation](https://docs.alephium.org/dapps/).
diff --git a/fee-structure/app/.gitignore b/fee-structure/app/.gitignore
@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.ralph-lsp
diff --git a/fee-structure/app/next.config.js b/fee-structure/app/next.config.js
@@ -0,0 +1,13 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  webpack: (config, { isServer }) => {
+    if (!isServer) {
+      config.resolve.fallback.fs = false
+    }
+    config.externals.push('pino-pretty', 'encoding')
+    return config
+  }
+}
+
+module.exports = nextConfig
diff --git a/fee-structure/app/package.json b/fee-structure/app/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "my-dapp",
+  "version": "0.1.0",
+  "private": true,
+  "license": "GPL",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@alephium/web3": "^1.8.5",
+    "@alephium/web3-react": "^1.8.5",
+    "my-contracts": "0.1.0",
+    "next": "^14.2.15",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/node": "^20.16.13",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.1",
+    "eslint": "^8",
+    "eslint-config-next": "15.0.2",
+    "typescript": "^5.5.4"
+  },
+  "engines": {
+    "node": ">=18.0.0",
+    "npm": ">=10.0.0"
+  }
+}
diff --git a/fee-structure/app/src/app/favicon.ico b/fee-structure/app/src/app/favicon.ico
diff --git a/fee-structure/app/src/app/layout.tsx b/fee-structure/app/src/app/layout.tsx
@@ -0,0 +1,32 @@
+import '@/styles/globals.css'
+
+import { tokenFaucetConfig } from '@/services/utils';
+import { AlephiumWalletProvider } from '@alephium/web3-react';
+import React from 'react';
+
+export const metadata = {
+  title: "Alephium dApp Template",
+  description: "A template for building dApps on Alephium",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <head>
+        <title>Token Faucet</title>
+        <meta name="description" content="Generated by @alephium/cli init" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </head>
+      <body>
+        <AlephiumWalletProvider theme="web95" network={tokenFaucetConfig.network} addressGroup={tokenFaucetConfig.groupIndex}>
+          {children}
+        </AlephiumWalletProvider>
+      </body>
+    </html>
+  );
+}
diff --git a/fee-structure/app/src/app/page.tsx b/fee-structure/app/src/app/page.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import Home from '@/components/Home';
+
+export default function HomePage() {
+  return (
+    <>
+      <Home />
+    </>
+  )
+}
diff --git a/fee-structure/app/src/components/Home.tsx b/fee-structure/app/src/components/Home.tsx
@@ -0,0 +1,24 @@
+'use client'
+
+import React from 'react'
+import Head from 'next/head'
+import styles from '@/styles/Home.module.css'
+import { TokenDapp } from './TokenDapp'
+import { AlephiumConnectButton, useWallet } from '@alephium/web3-react'
+import { tokenFaucetConfig } from '@/services/utils'
+
+export default function Home() {
+  const { connectionStatus } = useWallet()
+
+  return (
+    <>
+      <div className={styles.container}>
+        <AlephiumConnectButton />
+
+        {connectionStatus === 'connected' && (
+          <TokenDapp config={tokenFaucetConfig} />
+        )}
+      </div>
+    </>
+  )
+}
diff --git a/fee-structure/app/src/components/TokenDapp.tsx b/fee-structure/app/src/components/TokenDapp.tsx
@@ -0,0 +1,81 @@
+'use client'
+
+import React, { useCallback } from 'react'
+import { FC, useState } from 'react'
+import styles from '../styles/Home.module.css'
+import { withdrawToken } from '@/services/token.service'
+import { TxStatus } from './TxStatus'
+import { useWallet } from '@alephium/web3-react'
+import { node } from '@alephium/web3'
+import { TokenFaucetConfig } from '@/services/utils'
+
+export const TokenDapp: FC<{
+  config: TokenFaucetConfig
+}> = ({ config }) => {
+  const { signer, account } = useWallet()
+  const addressGroup = config.groupIndex
+  const [withdrawAmount, setWithdrawAmount] = useState('')
+  const [ongoingTxId, setOngoingTxId] = useState<string>()
+
+  const handleWithdrawSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (signer) {
+      const result = await withdrawToken(signer, withdrawAmount, config.faucetTokenId)
+      setOngoingTxId(result.txId)
+    }
+  }
+
+  const txStatusCallback = useCallback(async (status: node.TxStatus, numberOfChecks: number): Promise<any> => {
+    if (
+      (status.type === 'Confirmed' && numberOfChecks > 2) ||
+      (status.type === 'TxNotFound' && numberOfChecks > 3)
+    ) {
+      setOngoingTxId(undefined)
+    }
+
+    return Promise.resolve()
+  }, [setOngoingTxId])
+
+  console.log("ongoing..", ongoingTxId)
+  return (
+    <>
+      {ongoingTxId && <TxStatus txId={ongoingTxId} txStatusCallback={txStatusCallback} />}
+
+      <div className="columns">
+        <form onSubmit={handleWithdrawSubmit}>
+          <>
+            <h2 className={styles.title}>Alephium Token Faucet on {config.network}</h2>
+            <p>PublicKey: {account?.publicKey ?? '???'}</p>
+            <p>Maximum 2 tokens can be withdrawn at a time.</p>
+            <table>
+              <thead>
+                <tr>
+                  <td>id</td>
+                  <th>group</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr key={addressGroup} style={{ background: 'red', color: 'white' }}>
+                  <td>{config.faucetTokenId}</td>
+                  <td>{addressGroup}</td>
+                </tr>
+              </tbody>
+            </table>
+            <label htmlFor="withdraw-amount">Amount</label>
+            <input
+              type="number"
+              id="transfer-amount"
+              name="amount"
+              max="2"
+              min="1"
+              value={withdrawAmount}
+              onChange={(e) => setWithdrawAmount(e.target.value)}
+            />
+            <br />
+            <input type="submit" disabled={!!ongoingTxId} value="Send Me Token" />
+          </>
+        </form>
+      </div>
+    </>
+  )
+}
diff --git a/fee-structure/app/src/components/TxStatus.tsx b/fee-structure/app/src/components/TxStatus.tsx
@@ -0,0 +1,29 @@
+import React, { useCallback, useRef } from 'react'
+import { useTxStatus } from '@alephium/web3-react'
+import { node } from "@alephium/web3"
+
+interface TxStatusAlertProps {
+  txId: string
+  txStatusCallback(status: node.TxStatus, numberOfChecks: number): Promise<any>
+}
+
+export const TxStatus = ({ txId, txStatusCallback }: TxStatusAlertProps) => {
+  const numberOfChecks = useRef(0)
+  const callback = useCallback(async (status: node.TxStatus) => {
+    numberOfChecks.current += 1
+    return txStatusCallback(status, numberOfChecks.current)
+  }, [txStatusCallback, numberOfChecks])
+
+  const { txStatus } = useTxStatus(txId, callback)
+
+  return (
+    <>
+      <h3 style={{ margin: 0 }}>
+        Transaction status: <code>{txStatus?.type || 'unknown'}</code>
+      </h3>
+      <h3 style={{ margin: 0 }}>
+        Transaction hash: <code>{txId}</code>
+      </h3>
+    </>
+  )
+}
diff --git a/fee-structure/app/src/services/token.service.ts b/fee-structure/app/src/services/token.service.ts
@@ -0,0 +1,12 @@
+import { DUST_AMOUNT, ExecuteScriptResult, SignerProvider } from '@alephium/web3'
+import { Withdraw } from 'my-contracts'
+
+export const withdrawToken = async (signerProvider: SignerProvider, amount: string, tokenId: string): Promise<ExecuteScriptResult> => {
+  return await Withdraw.execute(signerProvider, {
+    initialFields: {
+      token: tokenId,
+      amount: BigInt(amount)
+    },
+    attoAlphAmount: DUST_AMOUNT,
+  })
+}
diff --git a/fee-structure/app/src/services/utils.tsx b/fee-structure/app/src/services/utils.tsx
@@ -0,0 +1,25 @@
+import { NetworkId } from "@alephium/web3";
+import { loadDeployments } from "my-contracts/deployments"
+
+export interface TokenFaucetConfig {
+  network: NetworkId
+  groupIndex: number
+  tokenFaucetAddress: string
+  faucetTokenId: string
+}
+
+function getNetwork(): NetworkId {
+  const network = (process.env.NEXT_PUBLIC_NETWORK ?? 'devnet') as NetworkId
+  return network
+}
+
+function getTokenFaucetConfig(): TokenFaucetConfig {
+  const network = getNetwork()
+  const tokenFaucet = loadDeployments(network).contracts.TokenFaucet.contractInstance
+  const groupIndex = tokenFaucet.groupIndex
+  const tokenFaucetAddress = tokenFaucet.address
+  const faucetTokenId = tokenFaucet.contractId
+  return { network, groupIndex, tokenFaucetAddress, faucetTokenId }
+}
+
+export const tokenFaucetConfig = getTokenFaucetConfig()