Skip to content

Commit

Permalink
feat: add payment splitter demo page
Browse files Browse the repository at this point in the history
  • Loading branch information
@fabianbormann
fabianbormann committed May 9, 2024
1 parent 662ca4d commit bff1305
Show file tree
Hide file tree
Showing 5 changed files with 71 additions and 99 deletions.
22 changes: 15 additions & 7 deletions packages/demo/components/pages/contracts/payment-splitter/common.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { MeshGiftCardContract } from '@meshsdk/contracts';
import { MeshPaymentSplitterContract } from '@meshsdk/contracts';
import { BlockfrostProvider, MeshTxBuilder } from '@meshsdk/core';

export function getContract(wallet) {
Expand All @@ -11,12 +11,20 @@ export function getContract(wallet) {
submitter: blockchainProvider,
});

const contract = new MeshGiftCardContract({
mesh: meshTxBuilder,
fetcher: blockchainProvider,
wallet: wallet,
networkId: 0,
});
const contract = new MeshPaymentSplitterContract(
{
mesh: meshTxBuilder,
fetcher: blockchainProvider,
wallet: wallet,
networkId: 0,
},
[
'addr_test1vpg334d6skwu6xxq0r4lqrnsjd5293n8s3d80em60kf6guc7afx8k',
'addr_test1vp4l2kk0encl7t7972ngepgm0044fu8695prkgh5vjj5l6sxu0l3p',
'addr_test1vqqnfs2vt42nq4htq460wd6gjxaj05jg9vzg76ur6ws4sngs55pwr',
'addr_test1vqv2qhqddxmf87pzky2nkd9wm4y5599mhp62mu4atuss5dgdja5pw',
]
);

return contract;
}
29 changes: 18 additions & 11 deletions packages/demo/components/pages/contracts/payment-splitter/hero.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import Link from 'next/link';
export default function Hero() {
let code = ``;
code += `import { BlockfrostProvider, MeshTxBuilder } from '@meshsdk/core';\n`;
code += `import { MeshGiftCardContract } from '@meshsdk/contracts';\n`;
code += `import { MeshPaymentSplitterContract } from '@meshsdk/contracts';\n`;
code += `import { useWallet } from '@meshsdk/react';\n`;
code += `\n`;
code += `const { connected, wallet } = useWallet();\n`;
Expand All @@ -17,12 +17,19 @@ export default function Hero() {
code += ` submitter: blockchainProvider,\n`;
code += `});\n`;
code += `\n`;
code += `const contract = new MeshGiftCardContract({\n`;
code += ` mesh: meshTxBuilder,\n`;
code += ` fetcher: blockchainProvider,\n`;
code += ` wallet: wallet,\n`;
code += ` networkId: 0,\n`;
code += `});\n`;
code += `const contract = new MeshPaymentSplitterContract(\n`;
code += ` {\n`;
code += ` mesh: meshTxBuilder,\n`;
code += ` fetcher: blockchainProvider,\n`;
code += ` wallet: wallet,\n`;
code += ` networkId: 0,\n`;
code += ` },\n`;
code += ` [\n`;
code += ` 'addr_test1vpg334d6skwu6xxq0r4lqrnsjd5293n8s3d80em60kf6guc7afx8k',\n`;
code += ` 'addr_test1vp4l2kk0encl7t7972ngepgm0044fu8695prkgh5vjj5l6sxu0l3p',\n`;
code += ` 'addr_test1vqqnfs2vt42nq4htq460wd6gjxaj05jg9vzg76ur6ws4sngs55pwr',\n`;
code += ` 'addr_test1vqv2qhqddxmf87pzky2nkd9wm4y5599mhp62mu4atuss5dgdja5pw',\n`;
code += ` ]\n`;

return (
<>
Expand All @@ -48,13 +55,13 @@ export default function Hero() {
smart contract:
</p>
<ul>
<li>create giftcard</li>
<li>redeem giftcard</li>
<li>Send Lovelace to Payment Splitter</li>
<li>Trigger Payout</li>
</ul>
<p>
To initialize the escrow, we need to initialize a{' '}
To initialize the payment splitter, we need to initialize a{' '}
<Link href="/providers">provider</Link>, <code>MeshTxBuilder</code>{' '}
and <code>MeshPaymentSplitterContract</code>.
,<code>MeshPaymentSplitterContract</code> and a list of payees.
</p>
<Codeblock data={code} isJson={false} />
<p>
Expand Down
17 changes: 10 additions & 7 deletions packages/demo/components/pages/contracts/payment-splitter/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
import CommonLayout from '../../../common/layout';
import GiftcardCreate from './createGiftCard';
import PaymentSplitterSendLovelace from './sendLovelace';
import Hero from './hero';
import GiftcardRedeem from './redeemGiftCard';
import PaymentSplitterTriggerPayout from './triggerPayout';

export default function ContractsGiftcard() {
export default function ContractsPaymentSplitter() {
const sidebarItems = [
{ label: 'Create Giftcard', to: 'createGiftCard' },
{ label: 'Redeem Giftcard', to: 'redeemGiftCard' },
{
label: 'Send Lovelace to Payment Splitter',
to: 'sendLovelaceToSplitter',
},
{ label: 'Trigger Payout', to: 'triggerPayout' },
];

return (
Expand All @@ -20,8 +23,8 @@ export default function ContractsGiftcard() {
function Main() {
return (
<>
<GiftcardCreate />
<GiftcardRedeem />
<PaymentSplitterSendLovelace />
<PaymentSplitterTriggerPayout />
</>
);
}
56 changes: 15 additions & 41 deletions ...racts/payment-splitter/createGiftCard.tsx → ...ntracts/payment-splitter/sendLovelace.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,12 @@ import { Asset } from '@meshsdk/core';
import useLocalStorage from '../../../../hooks/useLocalStorage';
import { getContract } from './common';

export default function GiftcardCreate() {
export default function PaymentSplitterSendLovelace() {
return (
<>
<SectionTwoCol
sidebarTo="createGiftCard"
header="Create Giftcard"
sidebarTo="sendLovelaceToSplitter"
header="Send Lovelace to Payment Splitter"
leftFn={Left()}
rightFn={Right()}
/>
Expand All @@ -26,24 +26,18 @@ function Left() {
return (
<>
<p>
<code>createGiftCard()</code> create a gift card. The
function accepts the following parameters:
<code>sendLovelaceToSplitter()</code> will lock Lovelace in the
contract. The function accepts the following parameters:
</p>
<ul>
<li>
<b>tokenName (string)</b> - name of the token
</li>
<li>
<b>giftValue (Asset[])</b> - a list of assets
<b>lovelaceAmount (number)</b> - the amount of Lovelace you want to
send to the contract
</li>
</ul>
<p>The function returns a transaction hash.</p>
<p>
The function returns a transaction hash if the gift card is successfully
created.
</p>
<p>
The code snippet below demonstrates how to create a gift card with a
value of 20 ADA.
The code snippet below demonstrates how to lock 10 ADA in the contract.
</p>
</>
);
Expand All @@ -55,7 +49,7 @@ function Right() {
const [response, setResponse] = useState<null | any>(null);
const [responseError, setResponseError] = useState<null | any>(null);
const [userLocalStorage, setUserlocalStorage] = useLocalStorage(
'mesh_giftcard_demo',
'mesh_payment_splitter_demo',
undefined
);

Expand All @@ -67,19 +61,7 @@ function Right() {
try {
const contract = getContract(wallet);

const tokenName = `Mesh_Gift_Card_${parseInt(
(Math.random() * 1000).toString()
)}`;
const giftValue: Asset[] = [
{
unit: 'lovelace',
quantity: '20000000',
},
];

const tx = await contract.createGiftCard(tokenName, giftValue);
const signedTx = await wallet.signTx(tx);
const txHash = await wallet.submitTx(signedTx);
const txHash = await contract.sendLovelaceToSplitter(10000000);
setUserlocalStorage(txHash);
setResponse(txHash);
} catch (error) {
Expand All @@ -89,21 +71,13 @@ function Right() {
}

let code = ``;
code += `const tokenName = 'Mesh Gift Card';\n`;
code += `const giftValue: Asset[] = [\n`;
code += ` {\n`;
code += ` unit: 'lovelace',\n`;
code += ` quantity: '20000000',\n`;
code += ` },\n`;
code += `];\n`;
code += `const sendLovelaceToSplitter: number = '10000000';\n`;
code += `\n`;
code += `const tx = await contract.createGiftCard(tokenName, giftValue);\n`;
code += `const signedTx = await wallet.signTx(tx);\n`;
code += `const txHash = await wallet.submitTx(signedTx);\n`;
code += `const txHash = await contract.sendLovelaceToSplitter(10000000);\n`;

return (
<Card>
<p>This demo, we will create a giftcard containing 20 ADA.</p>
<p>This demo, shows how to send 10 Ada to the payment splitter.</p>
<Codeblock data={code} isJson={false} />
{connected ? (
<>
Expand All @@ -114,7 +88,7 @@ function Right() {
}
disabled={loading}
>
Create Giftcard
Send Lovelace to Payment Splitter
</Button>
<RunDemoResult response={response} />
</>
Expand Down
46 changes: 13 additions & 33 deletions ...racts/payment-splitter/redeemGiftCard.tsx → ...tracts/payment-splitter/triggerPayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,12 @@ import RunDemoResult from '../../../common/runDemoResult';
import useLocalStorage from '../../../../hooks/useLocalStorage';
import { getContract } from './common';

export default function GiftcardRedeem() {
export default function TriggerPayout() {
return (
<>
<SectionTwoCol
sidebarTo="redeemGiftCard"
header="Redeem Giftcard"
sidebarTo="triggerPayout"
header="Trigger Payout"
leftFn={Left()}
rightFn={Right()}
/>
Expand All @@ -25,20 +25,14 @@ function Left() {
return (
<>
<p>
<code>redeemGiftCard()</code> redeem a gift
card. The function accepts the following parameters:
<code>triggerPayout()</code> will split the locked amount equally among
the list of payees. The function doesn't need any parameters.
</p>
<ul>
<li>
<b>giftCardUtxo (UTxO)</b> - unspent transaction output in the script
</li>
</ul>
<p>
The function returns a transaction hash if the gift card is successfully
redeemed. It will burn the gift card and transfer the value to the
wallet signing this transaction.
The function returns a transaction hash if the payout has been done
successfully.
</p>
<p>The code snippet below demonstrates how to redeem a gift card.</p>
<p>The code snippet below demonstrates how to trigger the payout.</p>
</>
);
}
Expand All @@ -60,18 +54,7 @@ function Right() {

try {
const contract = getContract(wallet);

const utxo = await contract.getUtxoByTxHash(userLocalStorage);

if (!utxo) {
setResponseError('Input utxo not found');
setLoading(false);
return;
}

const tx = await contract.redeemGiftCard(utxo);
const signedTx = await wallet.signTx(tx, true);
const txHash = await wallet.submitTx(signedTx);
const txHash = await contract.triggerPaypout();
setResponse(txHash);
} catch (error) {
setResponseError(`${error}`);
Expand All @@ -80,16 +63,13 @@ function Right() {
}

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

return (
<Card>
<p>
This demo, we will redeem the giftcard that was created in the previous
step. You may connect with another wallet to claim the giftcard
This demo, we will trigger the payout of the locked amount equally among
the list of payees. The amount has been locked in the previous step.
</p>
<Codeblock data={code} isJson={false} />
{connected ? (
Expand All @@ -101,7 +81,7 @@ function Right() {
}
disabled={loading || userLocalStorage === undefined}
>
Redeem Giftcard
Trigger Paypout
</Button>
<RunDemoResult response={response} />
</>
Expand Down

0 comments on commit bff1305

Please sign in to comment.