create-leo-app 0.8.2 → 0.8.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-leo-app",
-  "version": "0.8.2",
+  "version": "0.8.6",
   "type": "module",
   "license": "GPL-3.0",
   "collaborators": [

package/template-extension/src/service_worker.js

@@ -13,7 +13,7 @@ async function createOffscreen(path) {
     await chrome.offscreen.createDocument({
         url: offscreenUrl,
         reasons: ["WORKERS"],
-        justification: "Top-level await and Workers cannot be used in service workers, but they are necessary to use the Aleo SDK.",
+        justification: "Top-level await and Workers cannot be used in service workers, but they are necessary to use the Provable SDK.",
     });
 }
 

package/template-offline-public-transaction-ts/README.md

@@ -1,9 +1,9 @@
 # Offline Transaction Builder 
 
 ## 1. Overview
-### 1.1 Proving Keys for Zero Knowledge Function Execution
-To achieve zero knowledge execution, all Aleo functions require a `ProvingKey` and `VerifyingKey` in order to build a
-zero knowledge ZkSnark proof of execution. If a user does not possess these keys for a function, they are normally
+### 1.1 Proving Keys for Zero-Knowledge Function Execution
+To achieve zero-knowledge execution, all Aleo functions require a `ProvingKey` and `VerifyingKey` in order to build a
+zero-knowledge zk-SNARK proof of execution. If a user does not possess these keys for a function, they are normally
 downloaded from the internet when the function is called.
 
 ### 1.2 Key Providers
@@ -21,31 +21,27 @@ the internet for it. This provides a way to build Aleo execution transactions wi
 This pathway is suitable for use-cases such as hardware wallets or air-gapped machines used
 for building secure transactions.
 
-### 1.4 Assumptions
+### 1.4 Transaction Types
 
-The key material in this example is assumed to be pre-downloaded onto the machine performing the 
-construction of the offline transaction.
+Several types of transactions can be built and executed using this template:
+
+`bond_public`
+`unbond_public`
+`claim_unbond_public`
 
 ## 2. Usage
 
-### 2.1 Pre-Download the Keys
-First run this command online to download the key material to disk:
+`npm run build`
 
-`npm start`
+`npm run dev`
 
 Once this command is run, all proving keys for the `transfer_public`, `bond_public`, `unbond_public`, and
-`claim_unbond_public` functions will be downloaded to the `./keys` folder. The machine can then be disconnected from
+`claim_unbond_public` functions will be downloaded to the `dist/keys` folder. The machine can then be disconnected from
 the internet and the `OfflineKeyProvider` will search this directory for the function proving keys when building the
 transaction instead of connecting to the internet. Alternatively you can skip the online step entirely by adding the proving key creating this directory manually and
 adding the key material yourself.
 
-### 2.2 Build the Transaction Offline
-
-Once the key material is downloaded, turn off your internet connection and run the following command:
-
-`npm start`
-
-You should see the transactions being built and the resulting transaction IDs printed to the console.
+Once the keys are downloaded to your local machine, the offline transactions will be built without requiring an internet connection.
 
 ## 3. Notes
 

package/template-offline-public-transaction-ts/src/helpers.ts

@@ -28,7 +28,7 @@ async function preDownloadTransferKeys() {
     const keysDirPath = path.join(__dirname, "keys");
     await fsPromises.mkdir(keysDirPath, { recursive: true });
 
-    for (const keyData of [CREDITS_PROGRAM_KEYS.transfer_public, CREDITS_PROGRAM_KEYS.fee_public]) {
+    for (const keyData of [CREDITS_PROGRAM_KEYS.transfer_public, CREDITS_PROGRAM_KEYS.fee_public, CREDITS_PROGRAM_KEYS.transfer_public_as_signer]) {
         try {
             keyPaths[keyData.locator] = await downloadAndSaveKey(keyData, keysDirPath);
         } catch (error) {

package/template-offline-public-transaction-ts/src/index.ts

@@ -15,10 +15,11 @@ async function buildTransferPublicTxOffline(recipientAddress: Address, amount: n
     // Create the proving keys from the key bytes on the offline machine
     console.log("Creating proving keys from local key files");
     const feePublicKeyBytes = await getLocalKey(<string>keyPaths[CREDITS_PROGRAM_KEYS.fee_public.locator]);
-    const transferPublicAsSignerKeyBytes = await getLocalKey(<string>keyPaths[CREDITS_PROGRAM_KEYS.transfer_public_as_signer.locator]);
     const feePublicProvingKey = ProvingKey.fromBytes(feePublicKeyBytes);
-    const transferPublicProvingKey = ProvingKey.fromBytes(transferPublicAsSignerKeyBytes);
-
+    const transferPublicProvingKey = ProvingKey.fromBytes(
+        await getLocalKey(<string>keyPaths[CREDITS_PROGRAM_KEYS.transfer_public.locator])
+    );
+    
     // Create an offline key provider
     console.log("Creating offline key provider");
     const offlineKeyProvider = new OfflineKeyProvider();
@@ -27,10 +28,25 @@ async function buildTransferPublicTxOffline(recipientAddress: Address, amount: n
     // keys into the key manager.
     console.log("Inserting proving keys into key provider");
     offlineKeyProvider.insertFeePublicKeys(feePublicProvingKey);
+
+try {
     offlineKeyProvider.insertTransferPublicKeys(transferPublicProvingKey);
+    console.log("Successfully inserted proving key");
+} catch (err) {
+    console.error("Failed to insert proving key:", err);
+}
+
 
     // Create an offline query to complete the inclusion proof
-    const offlineQuery = new OfflineQuery(latestStateRoot);
+    let offlineQuery: OfflineQuery;
+    const blockHeight = 0;
+    // TODO this is a placeholder block height for now, which offlineQuery now requires
+try {
+    const offlineQuery = new OfflineQuery(blockHeight, latestStateRoot);
+    console.log("Successfully created OfflineQuery", offlineQuery);
+} catch (err) {
+    console.error("Failed to create OfflineQuery:", err);
+}
 
     // Insert the key provider into the program manager
     programManager.setKeyProvider(offlineKeyProvider);
@@ -47,7 +63,13 @@ async function buildTransferPublicTxOffline(recipientAddress: Address, amount: n
 }
 
 /// Build bonding and unbonding transactions without connection to the internet
-async function buildBondingTxOffline(stakerAddress: Address,  validatorAddress: Address, withdrawalAddress: Address, amount: number, latestStateRoot: string, keyPaths: {}): Promise<Transaction[]> {
+async function buildBondingTxOffline(
+    validatorAddress: Address, 
+    withdrawalAddress: Address, 
+    amount: number, 
+    latestStateRoot: string, 
+    keyPaths: {}
+): Promise<Transaction[]> {
     // Create an offline program manager
     const programManager = new ProgramManager();
 
@@ -70,8 +92,7 @@ async function buildBondingTxOffline(stakerAddress: Address,  validatorAddress:
     console.log("Creating offline key provider");
     const offlineKeyProvider = new OfflineKeyProvider();
 
-    // Insert the proving keys into the offline key provider. The key provider will automatically insert the verifying
-    // keys into the key manager.
+    // Insert the proving keys into the offline key provider
     console.log("Inserting proving keys into key provider");
     offlineKeyProvider.insertFeePublicKeys(feePublicProvingKey);
     offlineKeyProvider.insertBondPublicKeys(bondPublicProvingKey);
@@ -83,49 +104,48 @@ async function buildBondingTxOffline(stakerAddress: Address,  validatorAddress:
 
     // Build the bonding transactions offline
     console.log("Building a bond_public execution transaction offline");
-    const bondPublicOptions = {
-        executionParams: {
-            keySearchParams: OfflineSearchParams.bondPublicKeyParams()
-        },
-        offlineParams: {
-            offlineQuery: new OfflineQuery(latestStateRoot)
-        }
+
+    if (!latestStateRoot) {
+        throw new Error("latestStateRoot is undefined");
     }
 
+    const bondPublicOptions = {
+        keySearchParams: OfflineSearchParams.bondPublicKeyParams(),
+        offlineQuery: new OfflineQuery(0, latestStateRoot)
+    };
+
+
     const bondTx = <Transaction>await programManager.buildBondPublicTransaction(
-        stakerAddress.to_string(),
         validatorAddress.to_string(),
         withdrawalAddress.to_string(),
         amount,
-        bondPublicOptions,
-    )
+        bondPublicOptions
+    );
+
     console.log("\nbond_public transaction built!\n");
 
-    console.log("Building an unbond_public execution transaction offline")
     const unbondPublicOptions = {
-        executionParams: {
-            keySearchParams: OfflineSearchParams.unbondPublicKeyParams()
-        },
-        offlineParams: {
-            offlineQuery: new OfflineQuery(latestStateRoot)
-        }
-    }
+        keySearchParams: OfflineSearchParams.unbondPublicKeyParams(),
+        offlineQuery: new OfflineQuery(0, latestStateRoot)
+    };
 
-    const unBondTx = <Transaction>await programManager.buildUnbondPublicTransaction(stakerAddress.to_string(), amount, unbondPublicOptions);
+    const unBondTx = <Transaction>await programManager.buildUnbondPublicTransaction(
+        stakerAddress.to_string(),
+        amount,
+        unbondPublicOptions
+    );
     console.log("\nunbond_public transaction built!\n");
 
-    console.log("Building a claim_unbond_public transaction offline")
-    // Build the claim unbonding transaction offline
+    console.log("Building a claim_unbond_public transaction offline");
     const claimUnbondPublicOptions = {
-        executionParams: {
-            keySearchParams: OfflineSearchParams.claimUnbondPublicKeyParams()
-        },
-        offlineParams: {
-            offlineQuery: new OfflineQuery(latestStateRoot)
-        }
-    }
+        keySearchParams: OfflineSearchParams.claimUnbondPublicKeyParams(),
+        offlineQuery: new OfflineQuery(0, latestStateRoot)
+    };
 
-    const claimUnbondTx = <Transaction>await programManager.buildClaimUnbondPublicTransaction(stakerAddress.to_string(), claimUnbondPublicOptions);
+    const claimUnbondTx = <Transaction>await programManager.buildClaimUnbondPublicTransaction(
+        stakerAddress.to_string(),
+        claimUnbondPublicOptions
+    );
     console.log("\nclaim_unbond_public transaction built!\n");
     return [bondTx, unBondTx, claimUnbondTx];
 }
@@ -153,13 +173,13 @@ console.log(`\n---------------transfer_public transaction---------------\n${tran
 console.log(`---------------------------------------------------------`);
 
 // Build bonding & unbonding transactions
-const bondTransactions = await buildBondingTxOffline(stakerAddress, validatorAddress, withdrawalAddress, 100, latestStateRoot, bondingKeyPaths);
+const bondTransactions = await buildBondingTxOffline(validatorAddress, withdrawalAddress, 100, latestStateRoot, bondingKeyPaths);
 console.log("Bonding transactions built offline!");
 console.log(`\n-----------------bond_public transaction-----------------\n${bondTransactions[0]}`);
 console.log(`---------------------------------------------------------`);
 console.log(`\n----------------unbond_public transaction:---------------\n${bondTransactions[1]}`);
 console.log(`---------------------------------------------------------`);
-console.log(`\n-----------------claim_unbond transaction:---------------\n${bondTransactions[2]}`);
+console.log(`\n-----------------claim_unbond_public transaction:---------------\n${bondTransactions[2]}`);
 console.log(`---------------------------------------------------------`);
 //---------------------------------------------------------
 
@@ -168,4 +188,4 @@ console.log(`---------------------------------------------------------`);
 // ONLINE COMPONENT (Uncomment this part to send the transaction to the Aleo Network on an internet connected machine)
 // Submit the transaction to the network
 // const transferTxId = await networkClient.submitTransaction(transferTx);
-//---------------------------------------------------------
+//---------------------------------------------------------

package/template-react-leo/src/App.jsx

@@ -34,7 +34,7 @@ function App() {
     try {
       const result = await aleoWorker.deployProgram(helloworld_program);
       console.log("Transaction:")
-      console.log("https://explorer.hamp.app/transaction?id=" + result)
+      console.log("https://explorer.provable.com/transaction/" + result)
       alert("Transaction ID: " + result);
     } catch (e) {
       console.log(e)

package/template-react-ts/src/App.tsx

@@ -34,7 +34,7 @@ function App() {
     try {
       const result = await aleoWorker.deployProgram(helloworld_program);
       console.log("Transaction:")
-      console.log("https://explorer.hamp.app/transaction?id=" + result)
+      console.log("https://explorer.provable.com/transaction/" + result)
       alert("Transaction ID: " + result);
     } catch (e) {
       console.log(e)

package/template-react-ts/src/components/Sidebar.jsx

@@ -0,0 +1,47 @@
+import { Layout, Menu } from 'antd';
+import { UserOutlined, CrownOutlined } from '@ant-design/icons';
+import { Link, useLocation } from 'react-router-dom';
+
+const { Sider } = Layout;
+
+export const Sidebar = () => {
+    const location = useLocation();
+
+    const items = [
+        {
+            key: '/bidder',
+            icon: <UserOutlined />,
+            label: <Link to="/bidder">Bidder</Link>,
+        },
+        {
+            key: '/auctioneer',
+            icon: <CrownOutlined />,
+            label: <Link to="/auctioneer">Auctioneer</Link>,
+        }
+    ];
+
+    return (
+        <Sider 
+            width={200} 
+            theme="light"
+            style={{
+                position: 'fixed',
+                left: 0,
+                top: 0,
+                bottom: 0,
+                background: '#ffffff'
+            }}
+        >
+            <Menu
+                mode="inline"
+                selectedKeys={[location.pathname]}
+                style={{ 
+                    height: '100%', 
+                    borderRight: '1px solid #f0f0f0',
+                    background: '#ffffff'
+                }}
+                items={items}
+            />
+        </Sider>
+    );
+}; 

package/template-react-ts/src/pages/AuctioneerPage.jsx

@@ -0,0 +1,144 @@
+import { Card, Form, Input, Button, List, Typography, message } from 'antd';
+import { useState } from 'react';
+import { AleoWorker } from "../workers/AleoWorker";
+
+const aleoWorker = AleoWorker();
+
+export const AuctioneerPage = () => {
+    const [receivedBids, setReceivedBids] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [resolveForm] = Form.useForm();
+    const [finishForm] = Form.useForm();
+
+    const layout = {
+        labelCol: { span: 6 },
+        wrapperCol: { span: 16 },
+    };
+
+    const handleResolveBids = async (values) => {
+        try {
+            setLoading(true);
+            const result = await aleoWorker.resolveBids(values.bid1, values.bid2);
+            message.success('Bids resolved successfully');
+            resolveForm.resetFields();
+        } catch (error) {
+            console.error('Error resolving bids:', error);
+            message.error('Failed to resolve bids');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleFinishAuction = async (values) => {
+        try {
+            setLoading(true);
+            const result = await aleoWorker.finishAuction(values.winningBid);
+            message.success('Auction finished successfully');
+            finishForm.resetFields();
+        } catch (error) {
+            console.error('Error finishing auction:', error);
+            message.error('Failed to finish auction');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <div style={{ padding: '24px', maxWidth: '800px', margin: '0 auto' }}>
+            <Typography.Title level={2}>Auction Management</Typography.Title>
+            
+            <Card 
+                title={<Typography.Title level={4}>Current Auction Bids</Typography.Title>}
+                style={{ marginBottom: '24px' }}
+            >
+                <List
+                    dataSource={receivedBids}
+                    renderItem={(bid) => (
+                        <List.Item>
+                            <Typography.Text>
+                                Bid ID: {bid.id} - Amount: {bid.amount}
+                            </Typography.Text>
+                        </List.Item>
+                    )}
+                    locale={{ 
+                        emptyText: <Typography.Text type="secondary">No bids received yet</Typography.Text> 
+                    }}
+                />
+            </Card>
+
+            <Card 
+                title={<Typography.Title level={4}>Compare and Resolve Bids</Typography.Title>}
+                style={{ marginBottom: '24px' }}
+            >
+                <Form 
+                    {...layout}
+                    form={resolveForm}
+                    onFinish={handleResolveBids}
+                >
+                    <Form.Item 
+                        label="First Bid Record"
+                        name="bid1"
+                        tooltip="Enter the record of the first bid to compare"
+                        rules={[{ required: true, message: 'Please enter the first bid record' }]}
+                    >
+                        <Input.TextArea
+                            placeholder="Enter the complete bid record"
+                            rows={3}
+                        />
+                    </Form.Item>
+                    <Form.Item 
+                        label="Second Bid Record"
+                        name="bid2"
+                        tooltip="Enter the record of the second bid to compare"
+                        rules={[{ required: true, message: 'Please enter the second bid record' }]}
+                    >
+                        <Input.TextArea
+                            placeholder="Enter the complete bid record"
+                            rows={3}
+                        />
+                    </Form.Item>
+                    <Form.Item wrapperCol={{ offset: 6, span: 16 }}>
+                        <Button 
+                            type="primary" 
+                            htmlType="submit"
+                            loading={loading}
+                        >
+                            Compare and Resolve Bids
+                        </Button>
+                    </Form.Item>
+                </Form>
+            </Card>
+
+            <Card 
+                title={<Typography.Title level={4}>Finalize Auction</Typography.Title>}
+            >
+                <Form 
+                    {...layout}
+                    form={finishForm}
+                    onFinish={handleFinishAuction}
+                >
+                    <Form.Item 
+                        label="Winning Bid Record"
+                        name="winningBid"
+                        tooltip="Enter the record of the winning bid"
+                        rules={[{ required: true, message: 'Please enter the winning bid record' }]}
+                    >
+                        <Input.TextArea
+                            placeholder="Enter the complete winning bid record"
+                            rows={3}
+                        />
+                    </Form.Item>
+                    <Form.Item wrapperCol={{ offset: 6, span: 16 }}>
+                        <Button 
+                            type="primary" 
+                            htmlType="submit"
+                            loading={loading}
+                        >
+                            Finalize Auction with Winner
+                        </Button>
+                    </Form.Item>
+                </Form>
+            </Card>
+        </div>
+    );
+};

package/template-react-ts/src/pages/BidderPage.jsx

@@ -0,0 +1,142 @@
+import { Card, Form, Input, Button, List, Typography, message } from 'antd';
+import { useState } from 'react';
+import { AleoWorker } from "../workers/AleoWorker";
+
+const aleoWorker = AleoWorker();
+
+export const BidderPage = () => {
+    const [account, setAccount] = useState(null);
+    const [bids, setBids] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [bidForm] = Form.useForm();
+
+    const layout = {
+        labelCol: { span: 4 },
+        wrapperCol: { span: 20 },
+    };
+
+    const handleSetAccount = async (value) => {
+        try {
+            setLoading(true);
+            await aleoWorker.setAccount(value);
+            setAccount(value);
+            message.success('Account set successfully');
+        } catch (error) {
+            console.error('Error setting account:', error);
+            message.error('Failed to set account');
+            setAccount(null);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handlePlaceBid = async (values) => {
+        if (!account) {
+            message.error('Please set your account first');
+            return;
+        }
+
+        try {
+            setLoading(true);
+            const result = await aleoWorker.placeBid(values.amount, values.auctionId);
+            message.success('Bid placed successfully');
+            bidForm.resetFields();
+            
+            // Add the new bid to the list
+            setBids(prevBids => [...prevBids, {
+                auctionId: values.auctionId,
+                amount: values.amount,
+                id: result.id // Assuming the worker returns a bid ID
+            }]);
+        } catch (error) {
+            console.error('Error placing bid:', error);
+            message.error('Failed to place bid');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <div style={{ padding: '24px' }}>
+            <Card 
+                title="Aleo Account" 
+                style={{ marginBottom: '24px' }}
+            >
+                <Form {...layout}>
+                    <Form.Item 
+                        label="Private Key"
+                        required
+                        tooltip="Your Aleo private key is required to place bids"
+                    >
+                        <Input.Password
+                            placeholder="Enter your Aleo private key"
+                            onChange={(e) => handleSetAccount(e.target.value)}
+                            value={account}
+                            disabled={loading}
+                        />
+                    </Form.Item>
+                    {account && (
+                        <Form.Item wrapperCol={{ offset: 4 }}>
+                            <Typography.Text type="success">
+                                Account set ✓
+                            </Typography.Text>
+                        </Form.Item>
+                    )}
+                </Form>
+            </Card>
+
+            <Card 
+                title="Place Bid" 
+                style={{ marginBottom: '24px' }}
+            >
+                <Form 
+                    {...layout}
+                    form={bidForm}
+                    onFinish={handlePlaceBid}
+                >
+                    <Form.Item 
+                        label="Amount"
+                        name="amount"
+                        rules={[
+                            { required: true, message: 'Please enter bid amount' },
+                            { pattern: /^\d+$/, message: 'Please enter a valid number' }
+                        ]}
+                    >
+                        <Input placeholder="Enter bid amount" disabled={!account || loading} />
+                    </Form.Item>
+                    <Form.Item 
+                        label="Auction ID"
+                        name="auctionId"
+                        rules={[{ required: true, message: 'Please enter auction ID' }]}
+                    >
+                        <Input placeholder="Enter auction ID" disabled={!account || loading} />
+                    </Form.Item>
+                    <Form.Item wrapperCol={{ offset: 4 }}>
+                        <Button 
+                            type="primary" 
+                            htmlType="submit"
+                            loading={loading}
+                            disabled={!account}
+                        >
+                            Submit Bid
+                        </Button>
+                    </Form.Item>
+                </Form>
+            </Card>
+
+            <Card title="Open Bids">
+                <List
+                    dataSource={bids}
+                    renderItem={(bid) => (
+                        <List.Item>
+                            <Typography.Text>
+                                Auction ID: {bid.auctionId} - Amount: {bid.amount}
+                            </Typography.Text>
+                        </List.Item>
+                    )}
+                    locale={{ emptyText: 'No bids placed yet' }}
+                />
+            </Card>
+        </div>
+    );
+};

package/template-vanilla/main.js

@@ -39,7 +39,7 @@ document.querySelector("#app").innerHTML = `
     <div class="card">
       <button onclick="window.execute()">Call Execute Function</button>
       <button onclick="window.key()">Get Private Key</button>
-      <button onclick="window.deploy()">Deploy HelloWorld Program</button>
+      <button onclick="window.deploy()">Deploy Hello World Program</button>
     </div>
     <p class="read-the-docs">
       Click on the Aleo logo to learn more