apply.elements.stories.tsx 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548
  1. // TODO: FIXME: Remove those and fix errors!
  2. /* eslint-disable */
  3. // @ts-nocheck
  4. import React, { useState } from 'react';
  5. import { number, object, withKnobs } from '@storybook/addon-knobs';
  6. import { Card, Container, Message } from 'semantic-ui-react';
  7. import { u128, GenericAccountId } from '@polkadot/types';
  8. import { Balance } from '@polkadot/types/interfaces';
  9. import { ApplicationDetails } from '@joystream/types/schemas/role.schema';
  10. import { ConfirmStakesStage, ConfirmStakesStageProps,
  11. ProgressStepsView, ProgressStepsProps, ProgressSteps,
  12. ApplicationDetailsStage, ApplicationDetailsStageProps,
  13. SubmitApplicationStage, SubmitApplicationStageProps,
  14. DoneStage, DoneStageProps,
  15. FundSourceSelector,
  16. StakeRankSelector, StakeRankSelectorProps,
  17. ConfirmStakes2Up, ConfirmStakes2UpProps } from './apply';
  18. import { OpeningStakeAndApplicationStatus } from '../tabs/Opportunities';
  19. import { ApplicationStakeRequirement,
  20. RoleStakeRequirement,
  21. StakeType } from '../StakeRequirement';
  22. import 'semantic-ui-css/semantic.min.css';
  23. import '@polkadot/joy-roles/index.sass';
  24. export default {
  25. title: 'Roles / Components / Apply flow / Elements',
  26. decorators: [withKnobs]
  27. };
  28. const applicationSliderOptions = {
  29. range: true,
  30. min: 0,
  31. max: 20,
  32. step: 1
  33. };
  34. const moneySliderOptions = {
  35. range: true,
  36. min: 0,
  37. max: 1000000,
  38. step: 500
  39. };
  40. const applications: OpeningStakeAndApplicationStatus = {
  41. numberOfApplications: number('Applications count', 0, applicationSliderOptions, 'Role rationing policy'),
  42. maxNumberOfApplications: number('Application max', 0, applicationSliderOptions, 'Role rationing policy'),
  43. requiredApplicationStake: new ApplicationStakeRequirement(
  44. new u128(number('Application stake', 500, moneySliderOptions, 'Role stakes'))
  45. ),
  46. requiredRoleStake: new RoleStakeRequirement(
  47. new u128(number('Role stake', 0, moneySliderOptions, 'Role stakes'))
  48. )
  49. };
  50. type TestProps = {
  51. _description: string;
  52. }
  53. export function ProgressIndicator () {
  54. const permutations: (ProgressStepsProps & TestProps)[] = [
  55. {
  56. _description: 'Three steps, second active',
  57. activeStep: ProgressSteps.SubmitApplication,
  58. hasConfirmStep: false
  59. },
  60. {
  61. _description: 'Four steps, first active',
  62. activeStep: ProgressSteps.ConfirmStakes,
  63. hasConfirmStep: true
  64. },
  65. {
  66. _description: 'Four steps, second active',
  67. activeStep: ProgressSteps.SubmitApplication,
  68. hasConfirmStep: true
  69. }
  70. ];
  71. return (
  72. <Container>
  73. {permutations.map((permutation, key) => (
  74. <Container className='outer' key={key}>
  75. <h4>{permutation._description}</h4>
  76. <Card fluid>
  77. <ProgressStepsView {...permutation} />
  78. </Card>
  79. </Container>
  80. ))}
  81. </Container>
  82. );
  83. }
  84. export function FundSourceSelectorFragment () {
  85. const [address, setAddress] = useState<AccountId>();
  86. const [passphrase, setPassphrase] = useState('');
  87. const props = {
  88. transactionFee: new u128(number('Transaction fee', 500, moneySliderOptions, 'Application Tx')),
  89. keypairs: [
  90. {
  91. shortName: 'KP1',
  92. accountId: new GenericAccountId('5HZ6GtaeyxagLynPryM7ZnmLzoWFePKuDrkb4AT8rT4pU1fp'),
  93. balance: new u128(23342)
  94. },
  95. {
  96. shortName: 'KP2',
  97. accountId: new GenericAccountId('5DQqNWRFPruFs9YKheVMqxUbqoXeMzAWfVfcJgzuia7NA3D3'),
  98. balance: new u128(993342)
  99. },
  100. {
  101. shortName: 'KP3',
  102. accountId: new GenericAccountId('5DBaczGTDhcHgwsZzNE5qW15GrQxxdyros4pYkcKrSUovFQ9'),
  103. balance: new u128(242)
  104. }
  105. ]
  106. };
  107. return (
  108. <Container className='apply-flow'>
  109. <Card fluid>
  110. <Card.Content>
  111. <FundSourceSelector {...props}
  112. addressCallback={setAddress}
  113. passphraseCallback={setPassphrase}
  114. />
  115. </Card.Content>
  116. </Card>
  117. <Message info>
  118. <p>Address: {address ? address.toString() : 'not set'}</p>
  119. <p>Passphrase: {passphrase}</p>
  120. </Message>
  121. </Container>
  122. );
  123. }
  124. export function StakeRankSelectorFragment () {
  125. const [stake, setStake] = useState<Balance>(new u128(0));
  126. // List of the minimum stake required to beat each rank
  127. const slots: Balance[] = [];
  128. for (let i = 0; i < 10; i++) {
  129. slots.push(new u128((i * 100) + 10 + i + 1));
  130. }
  131. const props: StakeRankSelectorProps = {
  132. stake: stake,
  133. setStake: setStake,
  134. slots: slots,
  135. step: new u128(10)
  136. };
  137. return (
  138. <Container className='apply-flow'>
  139. <Card fluid>
  140. <Message info>
  141. <StakeRankSelector {...props} />
  142. </Message>
  143. </Card>
  144. <Message warning>
  145. Slots: {JSON.stringify(slots)}<br />
  146. Stake: {stake.toString()}
  147. </Message>
  148. </Container>
  149. );
  150. }
  151. export function SelectTwoMinimumStakes () {
  152. const [applicationStake, setApplicationStake] = useState(new u128(1));
  153. const [roleStake, setRoleStake] = useState(new u128(2));
  154. // List of the minimum stake required to beat each rank
  155. const slots: Balance[] = [];
  156. for (let i = 0; i < 20; i++) {
  157. slots.push(new u128((i * 100) + 10 + i + 1));
  158. }
  159. const props: ConfirmStakes2UpProps & TestProps = {
  160. _description: 'One fixed stake (application), no limit',
  161. applications: {
  162. requiredApplicationStake: new ApplicationStakeRequirement(new u128(1)),
  163. requiredRoleStake: new RoleStakeRequirement(new u128(2)),
  164. maxNumberOfApplications: 0,
  165. numberOfApplications: 0
  166. },
  167. defactoMinimumStake: new u128(0),
  168. step: new u128(5),
  169. slots: slots,
  170. selectedApplicationStake: applicationStake,
  171. setSelectedApplicationStake: setApplicationStake,
  172. selectedRoleStake: roleStake,
  173. setSelectedRoleStake: setRoleStake
  174. };
  175. return (
  176. <Container className='apply-flow'>
  177. <Card fluid>
  178. <Card.Content>
  179. <ConfirmStakes2Up {...props} />
  180. </Card.Content>
  181. </Card>
  182. </Container>
  183. );
  184. }
  185. export function StageAConfirmStakes () {
  186. const permutations: (any & TestProps)[] = [
  187. {
  188. _description: 'One fixed stake (application), no limit',
  189. applications: {
  190. requiredApplicationStake: new ApplicationStakeRequirement(new u128(10)),
  191. requiredRoleStake: new RoleStakeRequirement(new u128(0)),
  192. maxNumberOfApplications: 0,
  193. numberOfApplications: 0
  194. },
  195. defactoMinimumStake: new u128(0)
  196. },
  197. {
  198. _description: 'One fixed stake (role), no limit',
  199. applications: {
  200. requiredApplicationStake: new ApplicationStakeRequirement(new u128(0)),
  201. requiredRoleStake: new RoleStakeRequirement(new u128(1213)),
  202. maxNumberOfApplications: 0,
  203. numberOfApplications: 0
  204. },
  205. defactoMinimumStake: new u128(0)
  206. },
  207. {
  208. _description: 'Two fixed stakes, no limit',
  209. applications: {
  210. requiredApplicationStake: new ApplicationStakeRequirement(new u128(10)),
  211. requiredRoleStake: new RoleStakeRequirement(new u128(10)),
  212. maxNumberOfApplications: 0,
  213. numberOfApplications: 0
  214. },
  215. defactoMinimumStake: new u128(0)
  216. },
  217. {
  218. _description: 'One fixed stake (application), 20 applicant limit',
  219. applications: {
  220. requiredApplicationStake: new ApplicationStakeRequirement(new u128(10)),
  221. requiredRoleStake: new RoleStakeRequirement(new u128(0)),
  222. maxNumberOfApplications: 20,
  223. numberOfApplications: 0
  224. },
  225. defactoMinimumStake: new u128(0)
  226. },
  227. {
  228. _description: 'One fixed stake (role), 20 applicant limit',
  229. applications: {
  230. requiredApplicationStake: new ApplicationStakeRequirement(new u128(456)),
  231. requiredRoleStake: new RoleStakeRequirement(new u128(0)),
  232. maxNumberOfApplications: 20,
  233. numberOfApplications: 0
  234. },
  235. defactoMinimumStake: new u128(0)
  236. },
  237. {
  238. _description: 'Two fixed stakes, 20 applicant limit',
  239. applications: {
  240. requiredApplicationStake: new ApplicationStakeRequirement(new u128(10)),
  241. requiredRoleStake: new RoleStakeRequirement(new u128(10)),
  242. maxNumberOfApplications: 20,
  243. numberOfApplications: 0
  244. },
  245. defactoMinimumStake: new u128(0)
  246. },
  247. {
  248. _description: 'One minimum stake (application), no limit',
  249. applications: {
  250. requiredApplicationStake: new ApplicationStakeRequirement(new u128(10), StakeType.AtLeast),
  251. requiredRoleStake: new RoleStakeRequirement(new u128(0)),
  252. maxNumberOfApplications: 0,
  253. numberOfApplications: 20
  254. },
  255. defactoMinimumStake: new u128(0)
  256. },
  257. {
  258. _description: 'One minimum stake (role), no limit',
  259. applications: {
  260. requiredApplicationStake: new ApplicationStakeRequirement(new u128(0)),
  261. requiredRoleStake: new RoleStakeRequirement(new u128(10), StakeType.AtLeast),
  262. maxNumberOfApplications: 0,
  263. numberOfApplications: 20
  264. },
  265. defactoMinimumStake: new u128(0)
  266. },
  267. {
  268. _description: 'Two minimum stakes, no limit',
  269. applications: {
  270. requiredApplicationStake: new ApplicationStakeRequirement(new u128(10), StakeType.AtLeast),
  271. requiredRoleStake: new RoleStakeRequirement(new u128(10), StakeType.AtLeast),
  272. maxNumberOfApplications: 0
  273. },
  274. defactoMinimumStake: new u128(0)
  275. },
  276. {
  277. _description: 'Minimum application stake, fixed role stake, no limit',
  278. applications: {
  279. requiredApplicationStake: new ApplicationStakeRequirement(new u128(10), StakeType.AtLeast),
  280. requiredRoleStake: new RoleStakeRequirement(new u128(10)),
  281. maxNumberOfApplications: 0
  282. },
  283. defactoMinimumStake: new u128(0)
  284. },
  285. {
  286. _description: 'Minimum role stake, fixed application stake, no limit',
  287. applications: {
  288. requiredApplicationStake: new ApplicationStakeRequirement(new u128(10)),
  289. requiredRoleStake: new RoleStakeRequirement(new u128(10), StakeType.AtLeast),
  290. maxNumberOfApplications: 0
  291. },
  292. defactoMinimumStake: new u128(0)
  293. },
  294. {
  295. _description: 'One minimum stake (application), 20 applicant limit',
  296. applications: {
  297. requiredApplicationStake: new ApplicationStakeRequirement(new u128(10), StakeType.AtLeast),
  298. requiredRoleStake: new RoleStakeRequirement(new u128(0)),
  299. maxNumberOfApplications: 0,
  300. numberOfApplications: 20
  301. },
  302. defactoMinimumStake: new u128(0)
  303. },
  304. {
  305. _description: 'One minimum stake (role), 20 applicant limit',
  306. applications: {
  307. requiredApplicationStake: new ApplicationStakeRequirement(new u128(0)),
  308. requiredRoleStake: new RoleStakeRequirement(new u128(10), StakeType.AtLeast),
  309. maxNumberOfApplications: 0,
  310. numberOfApplications: 20
  311. },
  312. defactoMinimumStake: new u128(0)
  313. },
  314. {
  315. _description: 'Two minimum stakes, 20 applicant limit',
  316. applications: {
  317. requiredApplicationStake: new ApplicationStakeRequirement(new u128(10), StakeType.AtLeast),
  318. requiredRoleStake: new RoleStakeRequirement(new u128(10), StakeType.AtLeast),
  319. maxNumberOfApplications: 20
  320. },
  321. defactoMinimumStake: new u128(0)
  322. },
  323. {
  324. _description: 'Minimum application stake, fixed role stake, 20 applicant limit',
  325. applications: {
  326. requiredApplicationStake: new ApplicationStakeRequirement(new u128(10), StakeType.AtLeast),
  327. requiredRoleStake: new RoleStakeRequirement(new u128(10)),
  328. maxNumberOfApplications: 0,
  329. numberOfApplications: 20
  330. },
  331. defactoMinimumStake: new u128(0)
  332. },
  333. {
  334. _description: 'Minimum role stake, fixed application stake, 20 applicant limit',
  335. applications: {
  336. requiredApplicationStake: new ApplicationStakeRequirement(new u128(10)),
  337. requiredRoleStake: new RoleStakeRequirement(new u128(10), StakeType.AtLeast),
  338. maxNumberOfApplications: 0,
  339. numberOfApplications: 20
  340. },
  341. defactoMinimumStake: new u128(0)
  342. }
  343. ];
  344. const keypairs = [
  345. {
  346. shortName: 'KP1',
  347. accountId: new GenericAccountId('5HZ6GtaeyxagLynPryM7ZnmLzoWFePKuDrkb4AT8rT4pU1fp'),
  348. balance: new u128(23342)
  349. },
  350. {
  351. shortName: 'KP2',
  352. accountId: new GenericAccountId('5DQqNWRFPruFs9YKheVMqxUbqoXeMzAWfVfcJgzuia7NA3D3'),
  353. balance: new u128(993342)
  354. },
  355. {
  356. shortName: 'KP3',
  357. accountId: new GenericAccountId('5DBaczGTDhcHgwsZzNE5qW15GrQxxdyros4pYkcKrSUovFQ9'),
  358. balance: new u128(242)
  359. }
  360. ];
  361. // List of the minimum stake required to beat each rank
  362. const slots: Balance[] = [];
  363. for (let i = 0; i < 20; i++) {
  364. slots.push(new u128((i * 100) + 10 + i + 1));
  365. }
  366. const renders = [];
  367. permutations.map((permutation, key) => {
  368. const [applicationStake, setApplicationStake] = useState(new u128(0));
  369. const [roleStake, setRoleStake] = useState<Balance>(new u128(0));
  370. const [stakeKeyAddress, setStakeKeyAddress] = useState<AccountId>(null);
  371. const [stakeKeyPassphrase, setStakeKeyPassphrase] = useState('');
  372. const [stake, setStake] = useState<Balance>(new u128(0));
  373. const stakeRankSelectorProps: StakeRankSelectorProps = {
  374. slots: slots,
  375. step: new u128(10)
  376. };
  377. renders.push(
  378. (
  379. <Container className='outer' key={key}>
  380. <h4>{key}. {permutation._description}</h4>
  381. <Card fluid>
  382. <ConfirmStakesStage {...permutation}
  383. {...stakeRankSelectorProps}
  384. keypairs={keypairs}
  385. selectedApplicationStake={applicationStake}
  386. setSelectedApplicationStake={setApplicationStake}
  387. selectedRoleStake={roleStake}
  388. setSelectedRoleStake={setRoleStake}
  389. keyAddress={stakeKeyAddress}
  390. setKeyAddress={setStakeKeyAddress}
  391. keyPassphrase={stakeKeyPassphrase}
  392. setKeyPassphrase={setStakeKeyPassphrase}
  393. />
  394. </Card>
  395. <Message info>
  396. A: {applicationStake.toString()}, R: {roleStake.toString()}
  397. </Message>
  398. </Container>
  399. )
  400. );
  401. });
  402. return (
  403. <Container className='apply-flow'>
  404. {renders.map((render, key) => (
  405. <div key={key}>{render}</div>
  406. ))}
  407. </Container>
  408. );
  409. }
  410. export function StageBApplicationDetails () {
  411. const [data, setData] = useState<object>({
  412. 'About you': {
  413. 'Your e-mail address': 'pre-filled'
  414. }
  415. });
  416. const props: ApplicationDetailsStageProps = {
  417. applicationDetails: object('JSON', {
  418. sections: [
  419. {
  420. title: 'About you',
  421. questions: [
  422. {
  423. title: 'Your name',
  424. type: 'text'
  425. },
  426. {
  427. title: 'Your e-mail address',
  428. type: 'text'
  429. }
  430. ]
  431. },
  432. {
  433. title: 'Your experience',
  434. questions: [
  435. {
  436. title: 'Why would you be good for this role?',
  437. type: 'text area'
  438. }
  439. ]
  440. }
  441. ]
  442. }, 'Application questions'),
  443. data: data,
  444. setData: setData,
  445. nextTransition: () => { /* do nothing */ }
  446. };
  447. return (
  448. <Container className='apply-flow'>
  449. <Card fluid>
  450. <Card.Content>
  451. <ApplicationDetailsStage {...props} />
  452. </Card.Content>
  453. <Message info>
  454. {JSON.stringify(data)}
  455. </Message>
  456. </Card>
  457. </Container>
  458. );
  459. }
  460. export function StageCSubmitApplication () {
  461. const props: SubmitApplicationStageProps = {
  462. nextTransition: () => { /* do nothing */ },
  463. applications: applications,
  464. transactionFee: new u128(number('Transaction fee', 500, moneySliderOptions, 'Application Tx')),
  465. transactionDetails: new Map<string, string>([
  466. ['Extrinsic hash', '0xae6d24d4d55020c645ddfe2e8d0faf93b1c0c9879f9bf2c439fb6514c6d1292e'],
  467. ['SOmething else', 'abc123']
  468. ]),
  469. keypairs: [
  470. {
  471. shortName: 'KP1',
  472. accountId: new GenericAccountId('5HZ6GtaeyxagLynPryM7ZnmLzoWFePKuDrkb4AT8rT4pU1fp'),
  473. balance: new u128(23342)
  474. },
  475. {
  476. shortName: 'KP2',
  477. accountId: new GenericAccountId('5F5SwL7zwfdDN4UifacVrYKQVVYzoNcoDoGzmhVkaPN2ef8F'),
  478. balance: new u128(993342)
  479. },
  480. {
  481. shortName: 'KP3',
  482. accountId: new GenericAccountId('5HmMiZSGnidr3AhUk7hhZa7wJrvYyKEiT8cneyavA1ALkfJc'),
  483. balance: new u128(242)
  484. }
  485. ]
  486. };
  487. return (
  488. <Container className='apply-flow'>
  489. <Card fluid>
  490. <Card.Content>
  491. <SubmitApplicationStage {...props} />
  492. </Card.Content>
  493. </Card>
  494. </Container>
  495. );
  496. }
  497. export function StageDDone () {
  498. const props: DoneStageProps = {
  499. applications: applications,
  500. roleKeyName: 'NEW_ROLE_KEY'
  501. };
  502. return (
  503. <Container className='apply-flow'>
  504. <Card fluid>
  505. <DoneStage {...props} />
  506. </Card>
  507. </Container>
  508. );
  509. }