arkadiko-dao · csgui · Dec 30, 2021 · Dec 30, 2021
diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,6 @@
 settings/Mainnet.toml
 settings/Testnet.toml
 history.txt
+
+client/node_modules
+client/yarn-error.log
diff --git a/client/README.md b/client/README.md
@@ -0,0 +1,18 @@
+# Token Vesting client application
+
+## Instructions
+
+```
+$ yarn install
+```
+
+```
+$ npm run serve
+```
+to run the development mode.
+
+
+```
+$ yarn build
+```
+to bundle the application.
diff --git a/client/index.html b/client/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <title>Vesting Client</title>
+        <link rel="stylesheet" href="https://unpkg.com/terminal.css@0.7.2/dist/terminal.min.css" />
+
+    </head>
+    <body>
+        <div id="root"></div>
+    </body>
+</html>
diff --git a/client/package.json b/client/package.json
@@ -0,0 +1,34 @@
+{
+    "dependencies": {
+        "@stacks/blockchain-api-client": "^1.0.4",
+        "@stacks/network": "^3.0.0",
+        "@stacks/transactions": "^3.1.0",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2",
+        "tsconfig-paths-webpack-plugin": "^3.5.2"
+    },
+    "devDependencies": {
+        "@types/react": "^17.0.38",
+        "@types/react-dom": "^17.0.11",
+        "@webpack-cli/generators": "^2.4.1",
+        "css-loader": "^6.5.1",
+        "html-webpack-plugin": "^5.5.0",
+        "prettier": "^2.5.1",
+        "style-loader": "^3.3.1",
+        "ts-loader": "^9.2.6",
+        "typescript": "^4.5.4",
+        "webpack": "^5.65.0",
+        "webpack-cli": "^4.9.1",
+        "webpack-dev-server": "^4.7.1"
+    },
+    "version": "0.0.1",
+    "description": "Vesting Client",
+    "name": "vesting-client",
+    "scripts": {
+        "build": "webpack --mode=production --node-env=production",
+        "build:dev": "webpack --mode=development",
+        "build:prod": "webpack --mode=production --node-env=production",
+        "watch": "webpack --watch",
+        "serve": "webpack serve"
+    }
+}
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import "./index.css";
+
+import { VestingSection } from '@components/VestingSection';
+
+const App = () => {
+    return (
+        <div>
+            <section style={{margin: '10px'}}>
+                <div className="terminal-card">
+                    <header>Arkadiko - Vesting Contract</header>
+                </div>
+                <br />
+            </section>
+            <VestingSection />
+        </div>
+    );
+}
+
+export default App;
diff --git a/client/src/components/ContractDetail.tsx b/client/src/components/ContractDetail.tsx
@@ -0,0 +1,112 @@
+import React from 'react';
+
+import {
+    makeContractCall,
+    broadcastTransaction,
+    AnchorMode,
+    standardPrincipalCV,
+    contractPrincipalCV,
+    uintCV,
+    listCV,
+    tupleCV
+} from '@stacks/transactions';
+
+import {
+    StacksMainnet,
+    StacksTestnet,
+    StacksMocknet
+} from '@stacks/network';
+
+interface InputProps {
+    txIdFromLocking: any
+}
+
+export const ContractDetail: React.FC<InputProps> = (props) => {
+    const [contract, setContract] = React.useState('');
+    const [token, setToken] = React.useState('');
+    const [amount, setAmount] = React.useState('');
+    const [lockingPeriod, setLockingPeriod] = React.useState('');
+    const [assignees, setAssignees] = React.useState('');
+
+    const handleAssignees = () => {
+        let assigneesList: any[] = [];
+        assignees.split(' ').join('').split(',').forEach((assignee) => {
+            assigneesList.push(
+                tupleCV({
+                    address: standardPrincipalCV(assignee),
+                    amount: uintCV(123)
+                })
+            );
+        });
+
+        return listCV(assigneesList);
+    };
+
+    const lock = async () => {
+        let assigneesList = handleAssignees();
+        // TODO set url dynamically
+        const network = new StacksMocknet({ url: 'http://localhost:3999' });
+        const txOptions = {
+            contractAddress: contract,
+            contractName: "token-vesting",
+            functionName: "deposit",
+            functionArgs: [
+                contractPrincipalCV(contract, token),
+                uintCV(amount),
+                uintCV(lockingPeriod),
+                assigneesList
+            ],
+            // TODO set senderKey from an environment variable?
+            senderKey: '753b7cc01a1a2e86221266a154af739463fce51219d97e4f856cd7200c3bd2a601',
+            validateWithAbi: true,
+            network,
+            postConditionMode: 1,
+            anchorMode: AnchorMode.Any,
+            fee: 300n
+        };
+
+        const transaction = await makeContractCall(txOptions);
+        const broadcastResponse = await broadcastTransaction(transaction, network);
+        const txId = broadcastResponse.txid;
+        props.txIdFromLocking(txId);
+    };
+
+    return (
+        <div>
+            <section>
+                <form action="#">
+                    <fieldset>
+                        <legend>Vesting Contract</legend>
+                        <p>Add vesting details and click "Lock Tokens" to finish</p>
+                        <div className="form-group">
+                            <label htmlFor="contract">Contract:</label>
+                            <input id="contract" name="contract" type="text" onChange={e => setContract(e.target.value)}/>
+                        </div>
+                        <div className="form-group">
+                            <label htmlFor="token">Token:</label>
+                            <input id="token" name="token" type="text" onChange={e => setToken(e.target.value)}/>
+                        </div>
+                        <div className="form-group">
+                            <label htmlFor="amount">Amount:</label>
+                            <input id="amount" name="amount" type="text" onChange={e => setAmount(e.target.value)}/>
+                        </div>
+                        <div className="form-group">
+                            <label htmlFor="lockingPeriod">Locking Period:</label>
+                            <input id="lockingPeriod" name="lockingPeriod" type="text" onChange={e => setLockingPeriod(e.target.value)}/>
+                        </div>
+                        <div className="form-group">
+                            <label htmlFor="assignees">Assignees:</label>
+                            <textarea id="assignees" name="assignees" onChange={e => setAssignees(e.target.value)}/>
+                        </div>
+                        <div className="form-group">
+                            <button className="btn btn-default" role="button" name="lockTokens" id="lockTokens" onClick={lock}>Lock Tokens</button>
+                        </div>
+
+
+
+                    </fieldset>
+                </form>
+            </section>
+        </div>
+    );
+}
diff --git a/client/src/components/Result.tsx b/client/src/components/Result.tsx
@@ -0,0 +1,84 @@
+import React from 'react';
+
+import {
+    makeContractCall,
+    broadcastTransaction,
+    AnchorMode,
+    standardPrincipalCV,
+    contractPrincipalCV,
+    uintCV,
+    listCV,
+    tupleCV
+} from '@stacks/transactions';
+
+import {
+    StacksMainnet,
+    StacksTestnet,
+    StacksMocknet
+} from '@stacks/network';
+
+interface ResultProps {
+    txId: string
+}
+
+export const Result: React.FC<ResultProps> = (props) => {
+    const [txStatus, setTxStatus] = React.useState('');
+    const [result, setResult] = React.useState('');
+    const [timeoutResponse, setTimeoutResponse] = React.useState('');
+    const [retry, setRetry] = React.useState(0);
+
+    const processResult = async (txId: string, count: number = 0) => {
+        // TODO set url dynamically
+        const url = `http://localhost:3999/extended/v1/tx/${txId}`;
+        const data = await fetch(url);
+        const resp = await data.json();
+
+        setTxStatus(resp.tx_status);
+
+        if (resp.tx_status === 'pending') {
+            setTxStatus("pending... transaction will be available below, as soon as it's block is mined.");
+        }
+
+        if (resp.tx_status === 'success') {
+            const jsonStr = JSON.stringify(resp, undefined, 4);
+            setResult(jsonStr);
+        }
+
+        if (count < 50) {
+            if (resp.tx_status !== 'success') {
+                setTimeout(function() {
+                    processResult(props.txId, ++count)
+                }, 2000);
+                setRetry(count);
+            }
+        } else {
+            setTimeoutResponse(`Timeouting after ${count} tries. Haven't received response from the blockchain.`);
+            return false;
+        }
+    }
+
+    React.useEffect(() => { processResult(props.txId, 0); }, []);
+
+    return (
+        <div>
+            <section>
+                <form action="#">
+                    <fieldset>
+                        <legend>Transaction Details</legend>
+                        <div className="form-group">
+                            <label htmlFor="txId">Id:</label>
+                            <input id="txId" name="txId" type="text" value={props.txId} readOnly />
+                        </div>
+                        <p id="txStatus">Status: {txStatus}</p>
+                        <p id="retry">Retry: {retry}</p>
+                        <p id="timeoutResponse">{timeoutResponse}</p>
+                        <div className="form-group">
+                            <label htmlFor="result">Result:</label>
+                            <textarea id="result" name="result" value={result} readOnly rows={15} />
+                        </div>
+                    </fieldset>
+                </form>
+            </section>
+        </div>
+    )
+}
diff --git a/client/src/components/VestingSection.tsx b/client/src/components/VestingSection.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { ContractDetail }  from '@components/ContractDetail';
+import { Result }  from '@components/Result';
+
+export const VestingSection: React.FC = () => {
+    const [showResult, setShowResult] = React.useState(false);
+    const [txId, setTxId] = React.useState('');
+
+    const txIdFromLocking = (txIdFromLocking: string) => {
+        setTxId(txIdFromLocking);
+    }
+
+    return (
+        <>
+            <div style={{margin: '10px'}}>
+                <ContractDetail txIdFromLocking={txIdFromLocking} />
+            </div>
+            <div style={{margin: '10px'}}>
+                {txId !== '' && <Result txId={txId} />}
+            </div>
+        </>
+    );
+}
diff --git a/client/src/index.css b/client/src/index.css
diff --git a/client/src/index.tsx b/client/src/index.tsx
@@ -0,0 +1,10 @@
+console.log("Starting App...");
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(
+    <App />,
+    document.getElementById('root')
+);
diff --git a/client/tsconfig.json b/client/tsconfig.json
@@ -0,0 +1,21 @@
+{
+    "compilerOptions": {
+        "allowJs": true,
+        "allowSyntheticDefaultImports": true,
+        "baseUrl": ".",
+        "jsx": "react",
+        "lib": ["es2017", "dom"],
+        "module": "es6",
+        "moduleResolution": "node",
+        "noImplicitAny": true,
+        "paths": {
+			      "@components/*": ["./src/components/*"]
+		    },
+        "strict": true,
+        "target": "esnext",
+    },
+    "include": [
+        "./src/index.tsx",
+        "./src/components/**/*"
+    ]
+}