Skip to content

Commit

Permalink
revamp docs forms
Browse files Browse the repository at this point in the history
  • Loading branch information
2qx committed Aug 11, 2023
1 parent af14d6c commit 52a4442
Show file tree
Hide file tree
Showing 8 changed files with 393 additions and 240 deletions.
7 changes: 4 additions & 3 deletions packages/app/src/lib/ContractPicker.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,17 @@
export let instanceType;
let contractTypes = [
{ id: 'A', name: 'Annuity' },
{ id: 'P', name: 'Perpetuity' },
{ id: 'A', name: 'Annuity' },
{ id: 'D', name: 'Divide' },
{ id: 'F', name: 'Faucet' },
{ id: 'P', name: 'Perpetuity' },
{ id: 'R', name: 'Record' }
];
</script>

<Select
key={(c) => `${c ? c.name : ''}`}
key={(c) => `${c ? c.name : 'Perpetuity'}`}
on:MDCSelect:change={(e) => (instanceType = e.detail.value.name)}
bind:value={selected}
label="Contract Type"
Expand Down
111 changes: 70 additions & 41 deletions packages/app/src/lib/forms/AnnuityForm.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import { Annuity, DUST_UTXO_THRESHOLD, sanitizeAddress } from '@unspent/phi';
import Textfield from '@smui/textfield';
import HelperText from '@smui/textfield/helper-text';
import Button from '@smui/button';
import Radio from '@smui/radio';
import FormField from '@smui/form-field';
Expand All @@ -14,9 +15,11 @@
let options = { network: network, version: version };
let isPublished = false;
let showWarning = true;
let showHelp = true;
let periodOptions = [
let periodOptions = [
{
name: 'Annually',
value: 52596,
Expand All @@ -43,9 +46,18 @@
let receiptAddress = '';
let installment = NaN;
let executorAllowance = 1200;
function createContract() {
async function createContract() {
if (receiptAddress && installment && period) {
try {
try {
receiptAddress = await sanitizeAddress(receiptAddress);
} catch (e: any) {
if (e.message) {
toast.push(e.message, { classes: ['warn'] });
} else {
toast.push(e, { classes: ['warn'] });
}
}
contract = new Annuity(period, receiptAddress, installment, executorAllowance, options);
} catch (e: any) {
contract = undefined;
Expand All @@ -60,35 +72,53 @@
</script>

<div class="margins">
<Textfield
bind:value={receiptAddress}
on:change={() => createContract()}
style="width: 100%;"
helperLine$style="width: 100%;"
type="text"
required
label="Receipt Address"
>
<HelperText slot="helper">The address to receive a regular payout.</HelperText>
</Textfield>
<p>
An annuity contract may send a fixed amount to a predefined address on a
regular schedule.
</p>
{#if showWarning}
<ul>
<li>Do <b>NOT</b> use an exchange address as the receipt address.</li>
<li>Once a contract is funded, the receipt addresses can <b>never be changed</b>.</li>
<li>Funds sent to the contract <b>cannot be withdrawn prematurely</b>, only as scheduled.</li>
</ul>

{#if receiptAddress}
<Button
on:click={() => {
showWarning = false;
}}
>
I understand the risks.
</Button>
{:else}
<Textfield
bind:value={receiptAddress}
on:change={() => createContract()}
style="width: 100%;"
helperLine$style="width: 100%;"
type="text"
required
label="Receipt Address"
>
<HelperText slot="helper">The address to receive a regular payout.</HelperText>
</Textfield>

<div class="radio-demo">
{#each periodOptions as periodOption}
<FormField>
<Radio
on:change={() => createContract()}
bind:group={period}
value={periodOption.value}
touch
/>
<span slot="label">{periodOption.name}</span>
</FormField>
{/each}
</div>
{#if receiptAddress}
<div class="radio-demo">
{#each periodOptions as periodOption}
<FormField>
<Radio
on:change={() => createContract()}
bind:group={period}
value={periodOption.value}
touch
/>
<span slot="label">{periodOption.name}</span>
</FormField>
{/each}
</div>

<!--Textfield
<!--Textfield
bind:value={period}
on:change={() => createContract()}
type="number"
Expand All @@ -102,19 +132,18 @@
>
</Textfield-->

<!-- <BlockTimeField bind:blockTime={period} on:message={() => createContract()} /> -->
<!-- <BlockTimeField bind:blockTime={period} on:message={() => createContract()} /> -->

<Textfield
bind:value={installment}
on:change={() => createContract()}
type="number"
input$min={DUST_UTXO_THRESHOLD}
required
label="Installment"
>
<HelperText slot="helper">Amount (sats) contract will payout per period.</HelperText>
</Textfield>
<Textfield
bind:value={installment}
on:change={() => createContract()}
type="number"
input$min="600n"
required
label="Installment"
>
<HelperText slot="helper">Amount (sats) contract will payout per period.</HelperText>
</Textfield>
{/if}
{/if}
</div>


103 changes: 64 additions & 39 deletions packages/app/src/lib/forms/PerpetuityForm.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import Textfield from '@smui/textfield';
import HelperText from '@smui/textfield/helper-text';
import Radio from '@smui/radio';
import Button from '@smui/button';
import FormField from '@smui/form-field';
import { Perpetuity, sanitizeAddress } from '@unspent/phi';
import { toast } from '@zerodevx/svelte-toast';
Expand All @@ -13,6 +14,8 @@
let options = { network: network, version: version };
let isPublished = false;
let showWarning = true;
let periodOptions = [
{
name: 'Annually',
Expand All @@ -38,7 +41,7 @@
let period = 4383;
let receiptAddress = '';
let decay = 100;
let decay = 96;
let executorAllowance = 1500;
async function createContract() {
if (receiptAddress) {
Expand All @@ -52,6 +55,7 @@
toast.push(e, { classes: ['warn'] });
}
}
decay = Math.floor(420786/period);
contract = new Perpetuity(period, receiptAddress, executorAllowance, decay, options);
} catch (e: Error) {
contract = undefined;
Expand All @@ -66,33 +70,53 @@
</script>

<div class="margins">
<Textfield
bind:value={receiptAddress}
on:change={() => createContract()}
style="width: 100%;"
helperLine$style="width: 100%;"
type="text"
required
label="Receipt Address"
>
<HelperText slot="helper">The address to receive a regular payout.</HelperText>
</Textfield>
{#if receiptAddress}
<div class="radio-demo">
{#each periodOptions as periodOption}
<FormField>
<Radio
on:change={() => createContract()}
bind:group={period}
value={periodOption.value}
touch
/>
<span slot="label">{periodOption.name}</span>
</FormField>
{/each}
</div>
<p>
A perpetuity contract will send a fixed fraction of total value to a predefined address on a
regular schedule.
</p>
{#if showWarning}

<ul>
<li>Do <b>NOT</b> use an exchange address as the receipt address.</li>
<li>Once a contract is funded, the receipt addresses can <b>never be changed</b>.</li>
<li>Funds sent to the contract <b>cannot be withdrawn prematurely</b>, only as scheduled.</li>
</ul>

<Button
on:click={() => {
showWarning = false;
}}
>
I understand the risks.
</Button>
{:else}
<Textfield
bind:value={receiptAddress}
on:change={() => createContract()}
style="width: 100%;"
helperLine$style="width: 100%;"
type="text"
required
label="Receipt Address"
>
<HelperText slot="helper">The address to receive a regular payout.</HelperText>
</Textfield>
{#if receiptAddress}
<div class="radio-demo">
{#each periodOptions as periodOption}
<FormField>
<Radio
on:change={() => createContract()}
bind:group={period}
value={periodOption.value}
touch
/>
<span slot="label">{periodOption.name}</span>
</FormField>
{/each}
</div>

<!--Textfield
<!--Textfield
bind:value={period}
on:change={() => createContract()}
type="number"
Expand All @@ -106,18 +130,19 @@
>
</Textfield-->

<Textfield
bind:value={decay}
on:change={() => createContract()}
type="number"
input$min="2"
required
label="Decay"
>
<HelperText slot="helper"
>The fraction of inputs that should be sent each period. E.g. A decay of two (2) dispenses
half (1/2) the total each time. A decay of 20 would release 1/20th the value each period.</HelperText
<!--Textfield
bind:value={manualDecay}
on:change={() => createContract()}
type="number"
input$min="2"
required
label="Decay"
>
</Textfield>
<HelperText slot="helper"
>The fraction of inputs that should be sent each period. E.g. A decay of two (2) dispenses
half (1/2) the total each time. A decay of 20 would release 1/20th the value each period.</HelperText
>
</Textfield-->
{/if}
{/if}
</div>
Loading

0 comments on commit 52a4442

Please sign in to comment.