Skip to content

Commit

Permalink
feat: demos
Browse files Browse the repository at this point in the history
  • Loading branch information
@jinglescode
jinglescode committed May 3, 2024
1 parent b82ba4b commit 7266f7e
Show file tree
Hide file tree
Showing 14 changed files with 1,313 additions and 1,338 deletions.
68 changes: 32 additions & 36 deletions packages/demo/components/pages/contracts/escrow/cancelEscrow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,6 @@ export default function EscrowCancel() {
}

function Left() {
let code = ``;
code += `const utxo = await contract.getUtxoByTxHash(txHashToSearchFor);\n`;
code += `\n`;
code += `const tx = await contract.cancelEscrow(utxo);\n`;
code += `const signedTx = await wallet.signTx(tx, true);\n`;
code += `const txHash = await wallet.submitTx(signedTx);\n`;

return (
<>
<p>
Expand All @@ -45,7 +38,6 @@ function Left() {
<b>escrowUtxo (UTxO)</b> - the utxo of the transaction to be canceled
</li>
</ul>
<Codeblock data={code} isJson={false} />
</>
);
}
Expand Down Expand Up @@ -87,33 +79,37 @@ function Right() {
setLoading(false);
}

if (userLocalStorage) {
return (
<Card>
<p>
At any time before the escrow is completed, the partcipated
users/wallets can cancel the escrow.
</p>
{connected ? (
<>
<Button
onClick={() => rundemo()}
style={
loading ? 'warning' : response !== null ? 'success' : 'light'
}
disabled={loading}
>
Cancel Escrow
</Button>
<RunDemoResult response={response} />
</>
) : (
<CardanoWallet />
)}
<RunDemoResult response={responseError} label="Error" />
</Card>
);
}
let code = ``;
code += `const utxo = await contract.getUtxoByTxHash(txHashToSearchFor);\n`;
code += `\n`;
code += `const tx = await contract.cancelEscrow(utxo);\n`;
code += `const signedTx = await wallet.signTx(tx, true);\n`;
code += `const txHash = await wallet.submitTx(signedTx);\n`;

return <></>;
return (
<Card>
<p>
At any time before the escrow is completed, the partcipated
users/wallets can cancel the escrow.
</p>
<Codeblock data={code} isJson={false} />
{connected ? (
<>
<Button
onClick={() => rundemo()}
style={
loading ? 'warning' : response !== null ? 'success' : 'light'
}
disabled={loading || userLocalStorage === undefined}
>
Cancel Escrow
</Button>
<RunDemoResult response={response} />
</>
) : (
<CardanoWallet />
)}
<RunDemoResult response={responseError} label="Error" />
</Card>
);
}
124 changes: 63 additions & 61 deletions packages/demo/components/pages/contracts/escrow/completeEscrow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,6 @@ export default function EscrowComplete() {
}

function Left() {
let code = ``;
code += `const utxo = await contract.getUtxoByTxHash(txHashToSearchFor);\n`;
code += `const tx = await contract.completeEscrow(utxo);\n`;
code += `const signedTxUserA = await wallet.signTx(tx, true);\n`;

let code2 = ``;
code2 += `const signedTxUserB = await wallet.signTx(signedTxUserA, true);\n`;
code2 += `const txHash = await wallet.submitTx(signedTxUserB);\n`;

return (
<>
<p>
Expand All @@ -53,16 +44,6 @@ function Left() {
the transaction to complete the escrow.
</b>
</p>
<p>
User A completes the escrow by calling the `completeEscrow()` function
and partial sign the transaction.
</p>
<Codeblock data={code} isJson={false} />
<p>
And the signed transaction will be handled to User B to sign the
transaction and submits it to the blockchain to complete the escrow.
</p>
<Codeblock data={code2} isJson={false} />
</>
);
}
Expand Down Expand Up @@ -122,47 +103,68 @@ function Right() {
setLoading(false);
}

if (userLocalStorage) {
return (
<Card>
<p>
This is a multi-signature transaction. After the recipient has
deposited the assets, this final transaction requires both signatures.
</p>
<p>
In this demo, you can connect with one of the wallet to sign
transaction. Then connect with another wallet, refresh this page, and
complete the escrow.
</p>
{connected ? (
<>
<Button
onClick={() => rundemo()}
style={
loading ? 'warning' : response !== null ? 'success' : 'light'
}
disabled={loading}
>
Sign Transaction
</Button>
<Button
onClick={() => rundemo2()}
style={
loading ? 'warning' : response !== null ? 'success' : 'light'
}
disabled={loading || userLocalStorage_tx === undefined}
>
Complete Escrow
</Button>
let code = ``;
code += `const utxo = await contract.getUtxoByTxHash(txHashToSearchFor);\n`;
code += `const tx = await contract.completeEscrow(utxo);\n`;
code += `const signedTxUserA = await wallet.signTx(tx, true);\n`;

let code2 = ``;
code2 += `const signedTxUserB = await wallet.signTx(signedTxUserA, true);\n`;
code2 += `const txHash = await wallet.submitTx(signedTxUserB);\n`;

<RunDemoResult response={response} />
</>
) : (
<CardanoWallet />
)}
<RunDemoResult response={responseError} label="Error" />
</Card>
);
}
return <></>;
return (
<Card>
<p>
This is a multi-signature transaction. After the recipient has deposited
the assets, this final transaction requires both signatures.
</p>
<p>
In this demo, you can connect with one of the wallet to sign
transaction. Then connect with another wallet, refresh this page, and
complete the escrow.
</p>
<p>
User A completes the escrow by calling the `completeEscrow()` function
and partial sign the transaction.
</p>
<Codeblock data={code} isJson={false} />
{connected ? (
<>
<Button
onClick={() => rundemo()}
style={
loading ? 'warning' : response !== null ? 'success' : 'light'
}
disabled={loading || userLocalStorage === undefined}
>
Sign Transaction
</Button>
</>
) : (
<CardanoWallet />
)}
<p>
And the signed transaction will be handled to User B to sign the
transaction and submits it to the blockchain to complete the escrow.
</p>
<Codeblock data={code2} isJson={false} />
{connected ? (
<>
<Button
onClick={() => rundemo2()}
style={
loading ? 'warning' : response !== null ? 'success' : 'light'
}
disabled={loading || userLocalStorage_tx === undefined}
>
Complete Escrow
</Button>
</>
) : (
<CardanoWallet />
)}
<RunDemoResult response={response} />
<RunDemoResult response={responseError} label="Error" />
</Card>
);
}
26 changes: 13 additions & 13 deletions packages/demo/components/pages/contracts/escrow/initiateEscrow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,18 +23,6 @@ export default function EscrowInitiate() {
}

function Left() {
let code = ``;
code += `const escrowAmount: Asset[] = [\n`;
code += ` {\n`;
code += ` unit: 'lovelace',\n`;
code += ` quantity: '10000000',\n`;
code += ` },\n`;
code += `];\n`;
code += ` \n`;
code += `const tx = await contract.initiateEscrow(escrowAmount);\n`;
code += `const signedTx = await wallet.signTx(tx);\n`;
code += `const txHash = await wallet.submitTx(signedTx);`;

return (
<>
<p>An escrow is initiated by one of the party, user A.</p>
Expand All @@ -52,7 +40,6 @@ function Left() {
The function returns a transaction hex if the escrow is successfully
initiated.
</p>
<Codeblock data={code} isJson={false} />
</>
);
}
Expand Down Expand Up @@ -93,9 +80,22 @@ function Right() {
setLoading(false);
}

let code = ``;
code += `const escrowAmount: Asset[] = [\n`;
code += ` {\n`;
code += ` unit: 'lovelace',\n`;
code += ` quantity: '10000000',\n`;
code += ` },\n`;
code += `];\n`;
code += ` \n`;
code += `const tx = await contract.initiateEscrow(escrowAmount);\n`;
code += `const signedTx = await wallet.signTx(tx);\n`;
code += `const txHash = await wallet.submitTx(signedTx);`;

return (
<Card>
<p>This demo, wallet A initiate an escrow with 10 ADA.</p>
<Codeblock data={code} isJson={false} />
{connected ? (
<>
<Button
Expand Down
85 changes: 41 additions & 44 deletions packages/demo/components/pages/contracts/escrow/recipientDeposit.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,20 +24,6 @@ export default function EscrowDeposit() {
}

function Left() {
let code = ``;
code += `const depositAmount: Asset[] = [\n`;
code += ` {\n`;
code += ` unit: '64af286e2ad0df4de2e7de15f8ff5b3d27faecf4ab2757056d860a424d657368546f6b656e',\n`;
code += ` quantity: '1',\n`;
code += ` },\n`;
code += `];\n`;
code += `\n`;
code += `const utxo = await contract.getUtxoByTxHash(txHashToSearchFor);\n`;
code += `\n`;
code += `const tx = await contract.recipientDeposit(utxo, depositAmount);\n`;
code += `const signedTx = await wallet.signTx(tx, true);\n`;
code += `const txHash = await wallet.submitTx(signedTx);\n`;

return (
<>
<p>User B can deposit funds into the escrow after initiation.</p>
Expand All @@ -55,7 +41,6 @@ function Left() {
sending
</li>
</ul>
<Codeblock data={code} isJson={false} />
</>
);
}
Expand Down Expand Up @@ -105,33 +90,45 @@ function Right() {
setLoading(false);
}

if (userLocalStorage) {
return (
<Card>
<p>
Connect with wallet B to deposit assets. This demo will deposit 1 Mesh
Token (you can mint it{' '}
<Link href="/apis/transaction/minting">here</Link>).
</p>
{connected ? (
<>
<Button
onClick={() => rundemo()}
style={
loading ? 'warning' : response !== null ? 'success' : 'light'
}
disabled={loading}
>
Deposit Fund
</Button>
<RunDemoResult response={response} />
</>
) : (
<CardanoWallet />
)}
<RunDemoResult response={responseError} label="Error" />
</Card>
);
}
return <></>;
let code = ``;
code += `const depositAmount: Asset[] = [\n`;
code += ` {\n`;
code += ` unit: '64af286e2ad0df4de2e7de15f8ff5b3d27faecf4ab2757056d860a424d657368546f6b656e',\n`;
code += ` quantity: '1',\n`;
code += ` },\n`;
code += `];\n`;
code += `\n`;
code += `const utxo = await contract.getUtxoByTxHash(txHashToSearchFor);\n`;
code += `\n`;
code += `const tx = await contract.recipientDeposit(utxo, depositAmount);\n`;
code += `const signedTx = await wallet.signTx(tx, true);\n`;
code += `const txHash = await wallet.submitTx(signedTx);\n`;

return (
<Card>
<p>
Connect with wallet B to deposit assets. This demo will deposit 1 Mesh
Token (you can mint it{' '}
<Link href="/apis/transaction/minting">here</Link>).
</p>
<Codeblock data={code} isJson={false} />
{connected ? (
<>
<Button
onClick={() => rundemo()}
style={
loading ? 'warning' : response !== null ? 'success' : 'light'
}
disabled={loading || userLocalStorage === undefined}
>
Deposit Fund
</Button>
<RunDemoResult response={response} />
</>
) : (
<CardanoWallet />
)}
<RunDemoResult response={responseError} label="Error" />
</Card>
);
}

0 comments on commit 7266f7e

Please sign in to comment.