123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548 |
- // TODO: FIXME: Remove those and fix errors!
- /* eslint-disable */
- // @ts-nocheck
- import React, { useState } from 'react';
- import { number, object, withKnobs } from '@storybook/addon-knobs';
- import { Card, Container, Message } from 'semantic-ui-react';
- import { u128, GenericAccountId } from '@polkadot/types';
- import { Balance } from '@polkadot/types/interfaces';
- import { ApplicationDetails } from '@joystream/types/schemas/role.schema';
- import { ConfirmStakesStage, ConfirmStakesStageProps,
- ProgressStepsView, ProgressStepsProps, ProgressSteps,
- ApplicationDetailsStage, ApplicationDetailsStageProps,
- SubmitApplicationStage, SubmitApplicationStageProps,
- DoneStage, DoneStageProps,
- FundSourceSelector,
- StakeRankSelector, StakeRankSelectorProps,
- ConfirmStakes2Up, ConfirmStakes2UpProps } from './apply';
- import { OpeningStakeAndApplicationStatus } from '../tabs/Opportunities';
- import { ApplicationStakeRequirement,
- RoleStakeRequirement,
- StakeType } from '../StakeRequirement';
- import 'semantic-ui-css/semantic.min.css';
- import '@polkadot/joy-roles/index.sass';
- export default {
- title: 'Roles / Components / Apply flow / Elements',
- decorators: [withKnobs]
- };
- const applicationSliderOptions = {
- range: true,
- min: 0,
- max: 20,
- step: 1
- };
- const moneySliderOptions = {
- range: true,
- min: 0,
- max: 1000000,
- step: 500
- };
- const applications: OpeningStakeAndApplicationStatus = {
- numberOfApplications: number('Applications count', 0, applicationSliderOptions, 'Role rationing policy'),
- maxNumberOfApplications: number('Application max', 0, applicationSliderOptions, 'Role rationing policy'),
- requiredApplicationStake: new ApplicationStakeRequirement(
- new u128(number('Application stake', 500, moneySliderOptions, 'Role stakes'))
- ),
- requiredRoleStake: new RoleStakeRequirement(
- new u128(number('Role stake', 0, moneySliderOptions, 'Role stakes'))
- )
- };
- type TestProps = {
- _description: string;
- }
- export function ProgressIndicator () {
- const permutations: (ProgressStepsProps & TestProps)[] = [
- {
- _description: 'Three steps, second active',
- activeStep: ProgressSteps.SubmitApplication,
- hasConfirmStep: false
- },
- {
- _description: 'Four steps, first active',
- activeStep: ProgressSteps.ConfirmStakes,
- hasConfirmStep: true
- },
- {
- _description: 'Four steps, second active',
- activeStep: ProgressSteps.SubmitApplication,
- hasConfirmStep: true
- }
- ];
- return (
- <Container>
- {permutations.map((permutation, key) => (
- <Container className='outer' key={key}>
- <h4>{permutation._description}</h4>
- <Card fluid>
- <ProgressStepsView {...permutation} />
- </Card>
- </Container>
- ))}
- </Container>
- );
- }
- export function FundSourceSelectorFragment () {
- const [address, setAddress] = useState<AccountId>();
- const [passphrase, setPassphrase] = useState('');
- const props = {
- transactionFee: new u128(number('Transaction fee', 500, moneySliderOptions, 'Application Tx')),
- keypairs: [
- {
- shortName: 'KP1',
- accountId: new GenericAccountId('5HZ6GtaeyxagLynPryM7ZnmLzoWFePKuDrkb4AT8rT4pU1fp'),
- balance: new u128(23342)
- },
- {
- shortName: 'KP2',
- accountId: new GenericAccountId('5DQqNWRFPruFs9YKheVMqxUbqoXeMzAWfVfcJgzuia7NA3D3'),
- balance: new u128(993342)
- },
- {
- shortName: 'KP3',
- accountId: new GenericAccountId('5DBaczGTDhcHgwsZzNE5qW15GrQxxdyros4pYkcKrSUovFQ9'),
- balance: new u128(242)
- }
- ]
- };
- return (
- <Container className='apply-flow'>
- <Card fluid>
- <Card.Content>
- <FundSourceSelector {...props}
- addressCallback={setAddress}
- passphraseCallback={setPassphrase}
- />
- </Card.Content>
- </Card>
- <Message info>
- <p>Address: {address ? address.toString() : 'not set'}</p>
- <p>Passphrase: {passphrase}</p>
- </Message>
- </Container>
- );
- }
- export function StakeRankSelectorFragment () {
- const [stake, setStake] = useState<Balance>(new u128(0));
- // List of the minimum stake required to beat each rank
- const slots: Balance[] = [];
- for (let i = 0; i < 10; i++) {
- slots.push(new u128((i * 100) + 10 + i + 1));
- }
- const props: StakeRankSelectorProps = {
- stake: stake,
- setStake: setStake,
- slots: slots,
- step: new u128(10)
- };
- return (
- <Container className='apply-flow'>
- <Card fluid>
- <Message info>
- <StakeRankSelector {...props} />
- </Message>
- </Card>
- <Message warning>
- Slots: {JSON.stringify(slots)}<br />
- Stake: {stake.toString()}
- </Message>
- </Container>
- );
- }
- export function SelectTwoMinimumStakes () {
- const [applicationStake, setApplicationStake] = useState(new u128(1));
- const [roleStake, setRoleStake] = useState(new u128(2));
- // List of the minimum stake required to beat each rank
- const slots: Balance[] = [];
- for (let i = 0; i < 20; i++) {
- slots.push(new u128((i * 100) + 10 + i + 1));
- }
- const props: ConfirmStakes2UpProps & TestProps = {
- _description: 'One fixed stake (application), no limit',
- applications: {
- requiredApplicationStake: new ApplicationStakeRequirement(new u128(1)),
- requiredRoleStake: new RoleStakeRequirement(new u128(2)),
- maxNumberOfApplications: 0,
- numberOfApplications: 0
- },
- defactoMinimumStake: new u128(0),
- step: new u128(5),
- slots: slots,
- selectedApplicationStake: applicationStake,
- setSelectedApplicationStake: setApplicationStake,
- selectedRoleStake: roleStake,
- setSelectedRoleStake: setRoleStake
- };
- return (
- <Container className='apply-flow'>
- <Card fluid>
- <Card.Content>
- <ConfirmStakes2Up {...props} />
- </Card.Content>
- </Card>
- </Container>
- );
- }
- export function StageAConfirmStakes () {
- const permutations: (any & TestProps)[] = [
- {
- _description: 'One fixed stake (application), no limit',
- applications: {
- requiredApplicationStake: new ApplicationStakeRequirement(new u128(10)),
- requiredRoleStake: new RoleStakeRequirement(new u128(0)),
- maxNumberOfApplications: 0,
- numberOfApplications: 0
- },
- defactoMinimumStake: new u128(0)
- },
- {
- _description: 'One fixed stake (role), no limit',
- applications: {
- requiredApplicationStake: new ApplicationStakeRequirement(new u128(0)),
- requiredRoleStake: new RoleStakeRequirement(new u128(1213)),
- maxNumberOfApplications: 0,
- numberOfApplications: 0
- },
- defactoMinimumStake: new u128(0)
- },
- {
- _description: 'Two fixed stakes, no limit',
- applications: {
- requiredApplicationStake: new ApplicationStakeRequirement(new u128(10)),
- requiredRoleStake: new RoleStakeRequirement(new u128(10)),
- maxNumberOfApplications: 0,
- numberOfApplications: 0
- },
- defactoMinimumStake: new u128(0)
- },
- {
- _description: 'One fixed stake (application), 20 applicant limit',
- applications: {
- requiredApplicationStake: new ApplicationStakeRequirement(new u128(10)),
- requiredRoleStake: new RoleStakeRequirement(new u128(0)),
- maxNumberOfApplications: 20,
- numberOfApplications: 0
- },
- defactoMinimumStake: new u128(0)
- },
- {
- _description: 'One fixed stake (role), 20 applicant limit',
- applications: {
- requiredApplicationStake: new ApplicationStakeRequirement(new u128(456)),
- requiredRoleStake: new RoleStakeRequirement(new u128(0)),
- maxNumberOfApplications: 20,
- numberOfApplications: 0
- },
- defactoMinimumStake: new u128(0)
- },
- {
- _description: 'Two fixed stakes, 20 applicant limit',
- applications: {
- requiredApplicationStake: new ApplicationStakeRequirement(new u128(10)),
- requiredRoleStake: new RoleStakeRequirement(new u128(10)),
- maxNumberOfApplications: 20,
- numberOfApplications: 0
- },
- defactoMinimumStake: new u128(0)
- },
- {
- _description: 'One minimum stake (application), no limit',
- applications: {
- requiredApplicationStake: new ApplicationStakeRequirement(new u128(10), StakeType.AtLeast),
- requiredRoleStake: new RoleStakeRequirement(new u128(0)),
- maxNumberOfApplications: 0,
- numberOfApplications: 20
- },
- defactoMinimumStake: new u128(0)
- },
- {
- _description: 'One minimum stake (role), no limit',
- applications: {
- requiredApplicationStake: new ApplicationStakeRequirement(new u128(0)),
- requiredRoleStake: new RoleStakeRequirement(new u128(10), StakeType.AtLeast),
- maxNumberOfApplications: 0,
- numberOfApplications: 20
- },
- defactoMinimumStake: new u128(0)
- },
- {
- _description: 'Two minimum stakes, no limit',
- applications: {
- requiredApplicationStake: new ApplicationStakeRequirement(new u128(10), StakeType.AtLeast),
- requiredRoleStake: new RoleStakeRequirement(new u128(10), StakeType.AtLeast),
- maxNumberOfApplications: 0
- },
- defactoMinimumStake: new u128(0)
- },
- {
- _description: 'Minimum application stake, fixed role stake, no limit',
- applications: {
- requiredApplicationStake: new ApplicationStakeRequirement(new u128(10), StakeType.AtLeast),
- requiredRoleStake: new RoleStakeRequirement(new u128(10)),
- maxNumberOfApplications: 0
- },
- defactoMinimumStake: new u128(0)
- },
- {
- _description: 'Minimum role stake, fixed application stake, no limit',
- applications: {
- requiredApplicationStake: new ApplicationStakeRequirement(new u128(10)),
- requiredRoleStake: new RoleStakeRequirement(new u128(10), StakeType.AtLeast),
- maxNumberOfApplications: 0
- },
- defactoMinimumStake: new u128(0)
- },
- {
- _description: 'One minimum stake (application), 20 applicant limit',
- applications: {
- requiredApplicationStake: new ApplicationStakeRequirement(new u128(10), StakeType.AtLeast),
- requiredRoleStake: new RoleStakeRequirement(new u128(0)),
- maxNumberOfApplications: 0,
- numberOfApplications: 20
- },
- defactoMinimumStake: new u128(0)
- },
- {
- _description: 'One minimum stake (role), 20 applicant limit',
- applications: {
- requiredApplicationStake: new ApplicationStakeRequirement(new u128(0)),
- requiredRoleStake: new RoleStakeRequirement(new u128(10), StakeType.AtLeast),
- maxNumberOfApplications: 0,
- numberOfApplications: 20
- },
- defactoMinimumStake: new u128(0)
- },
- {
- _description: 'Two minimum stakes, 20 applicant limit',
- applications: {
- requiredApplicationStake: new ApplicationStakeRequirement(new u128(10), StakeType.AtLeast),
- requiredRoleStake: new RoleStakeRequirement(new u128(10), StakeType.AtLeast),
- maxNumberOfApplications: 20
- },
- defactoMinimumStake: new u128(0)
- },
- {
- _description: 'Minimum application stake, fixed role stake, 20 applicant limit',
- applications: {
- requiredApplicationStake: new ApplicationStakeRequirement(new u128(10), StakeType.AtLeast),
- requiredRoleStake: new RoleStakeRequirement(new u128(10)),
- maxNumberOfApplications: 0,
- numberOfApplications: 20
- },
- defactoMinimumStake: new u128(0)
- },
- {
- _description: 'Minimum role stake, fixed application stake, 20 applicant limit',
- applications: {
- requiredApplicationStake: new ApplicationStakeRequirement(new u128(10)),
- requiredRoleStake: new RoleStakeRequirement(new u128(10), StakeType.AtLeast),
- maxNumberOfApplications: 0,
- numberOfApplications: 20
- },
- defactoMinimumStake: new u128(0)
- }
- ];
- const keypairs = [
- {
- shortName: 'KP1',
- accountId: new GenericAccountId('5HZ6GtaeyxagLynPryM7ZnmLzoWFePKuDrkb4AT8rT4pU1fp'),
- balance: new u128(23342)
- },
- {
- shortName: 'KP2',
- accountId: new GenericAccountId('5DQqNWRFPruFs9YKheVMqxUbqoXeMzAWfVfcJgzuia7NA3D3'),
- balance: new u128(993342)
- },
- {
- shortName: 'KP3',
- accountId: new GenericAccountId('5DBaczGTDhcHgwsZzNE5qW15GrQxxdyros4pYkcKrSUovFQ9'),
- balance: new u128(242)
- }
- ];
- // List of the minimum stake required to beat each rank
- const slots: Balance[] = [];
- for (let i = 0; i < 20; i++) {
- slots.push(new u128((i * 100) + 10 + i + 1));
- }
- const renders = [];
- permutations.map((permutation, key) => {
- const [applicationStake, setApplicationStake] = useState(new u128(0));
- const [roleStake, setRoleStake] = useState<Balance>(new u128(0));
- const [stakeKeyAddress, setStakeKeyAddress] = useState<AccountId>(null);
- const [stakeKeyPassphrase, setStakeKeyPassphrase] = useState('');
- const [stake, setStake] = useState<Balance>(new u128(0));
- const stakeRankSelectorProps: StakeRankSelectorProps = {
- slots: slots,
- step: new u128(10)
- };
- renders.push(
- (
- <Container className='outer' key={key}>
- <h4>{key}. {permutation._description}</h4>
- <Card fluid>
- <ConfirmStakesStage {...permutation}
- {...stakeRankSelectorProps}
- keypairs={keypairs}
- selectedApplicationStake={applicationStake}
- setSelectedApplicationStake={setApplicationStake}
- selectedRoleStake={roleStake}
- setSelectedRoleStake={setRoleStake}
- keyAddress={stakeKeyAddress}
- setKeyAddress={setStakeKeyAddress}
- keyPassphrase={stakeKeyPassphrase}
- setKeyPassphrase={setStakeKeyPassphrase}
- />
- </Card>
- <Message info>
- A: {applicationStake.toString()}, R: {roleStake.toString()}
- </Message>
- </Container>
- )
- );
- });
- return (
- <Container className='apply-flow'>
- {renders.map((render, key) => (
- <div key={key}>{render}</div>
- ))}
- </Container>
- );
- }
- export function StageBApplicationDetails () {
- const [data, setData] = useState<object>({
- 'About you': {
- 'Your e-mail address': 'pre-filled'
- }
- });
- const props: ApplicationDetailsStageProps = {
- applicationDetails: object('JSON', {
- sections: [
- {
- title: 'About you',
- questions: [
- {
- title: 'Your name',
- type: 'text'
- },
- {
- title: 'Your e-mail address',
- type: 'text'
- }
- ]
- },
- {
- title: 'Your experience',
- questions: [
- {
- title: 'Why would you be good for this role?',
- type: 'text area'
- }
- ]
- }
- ]
- }, 'Application questions'),
- data: data,
- setData: setData,
- nextTransition: () => { /* do nothing */ }
- };
- return (
- <Container className='apply-flow'>
- <Card fluid>
- <Card.Content>
- <ApplicationDetailsStage {...props} />
- </Card.Content>
- <Message info>
- {JSON.stringify(data)}
- </Message>
- </Card>
- </Container>
- );
- }
- export function StageCSubmitApplication () {
- const props: SubmitApplicationStageProps = {
- nextTransition: () => { /* do nothing */ },
- applications: applications,
- transactionFee: new u128(number('Transaction fee', 500, moneySliderOptions, 'Application Tx')),
- transactionDetails: new Map<string, string>([
- ['Extrinsic hash', '0xae6d24d4d55020c645ddfe2e8d0faf93b1c0c9879f9bf2c439fb6514c6d1292e'],
- ['SOmething else', 'abc123']
- ]),
- keypairs: [
- {
- shortName: 'KP1',
- accountId: new GenericAccountId('5HZ6GtaeyxagLynPryM7ZnmLzoWFePKuDrkb4AT8rT4pU1fp'),
- balance: new u128(23342)
- },
- {
- shortName: 'KP2',
- accountId: new GenericAccountId('5F5SwL7zwfdDN4UifacVrYKQVVYzoNcoDoGzmhVkaPN2ef8F'),
- balance: new u128(993342)
- },
- {
- shortName: 'KP3',
- accountId: new GenericAccountId('5HmMiZSGnidr3AhUk7hhZa7wJrvYyKEiT8cneyavA1ALkfJc'),
- balance: new u128(242)
- }
- ]
- };
- return (
- <Container className='apply-flow'>
- <Card fluid>
- <Card.Content>
- <SubmitApplicationStage {...props} />
- </Card.Content>
- </Card>
- </Container>
- );
- }
- export function StageDDone () {
- const props: DoneStageProps = {
- applications: applications,
- roleKeyName: 'NEW_ROLE_KEY'
- };
- return (
- <Container className='apply-flow'>
- <Card fluid>
- <DoneStage {...props} />
- </Card>
- </Container>
- );
- }
|