View on GitHub
File Changes
m
+1/-0

                      
### Features

                      
+
- Reorganized Storybook by domain ([PR 1537](https://github.com/input-output-hk/daedalus/pull/1537))
- Removed select dropdown arrow ([PR 1550](https://github.com/input-output-hk/daedalus/pull/1550))
- Implemented automated and manual update flows unification ([PR 1491](https://github.com/input-output-hk/daedalus/pull/1491))
- Updated behavior of system dialogs ([PR 1494](https://github.com/input-output-hk/daedalus/pull/1494))
type Props = {
  onContinue: Function,
  onClose: Function,
+
  isVideoWatched: boolean,
};

                      
export default class InstructionsDialog extends Component<Props> {
  render() {
-
    const { onContinue, onClose } = this.props;
+
    const { onContinue, onClose, isVideoWatched } = this.props;
    return (
      <WalletCreateDialog
        stepNumber={0}
        actions={[
          {
            primary: true,
-
            label: 'Skip video and continue',
+
            label: !isVideoWatched ? 'Skip video and continue' : 'Continue',
            onClick: onContinue,
          },
        ]}
+
import globalMessages from '../i18n/global-messages';
+

                      
+
export const LANGUAGE_OPTIONS = [
+
  { value: 'en-US', label: globalMessages.languageEnglish },
+
  { value: 'ja-JP', label: globalMessages.languageJapanese },
+
  // { value: 'zh-CN', label: globalMessages.languageChinese },
+
  // { value: 'ko-KR', label: globalMessages.languageKorean },
+
  // { value: 'de-DE', label: globalMessages.languageGerman },
+
  // { value: 'hr-HR', label: globalMessages.languageCroatian },
+
];
  static defaultProps = DefaultProps;

                      
  render() {
-
    const { onClose, onContinue } = this.props;
-
    return <InstructionsDialog onClose={onClose} onContinue={onContinue} />;
+
    const { onClose, onContinue, isVideoWatched } = this.props;
+
    return (
+
      <InstructionsDialog
+
        isVideoWatched={isVideoWatched}
+
        onClose={onClose}
+
        onContinue={onContinue}
+
      />
+
    );
  }
}
import { THEMES } from '../themes/index';
import { ROUTES } from '../routes-config';
import LocalizableError from '../i18n/LocalizableError';
-
import globalMessages from '../i18n/global-messages';
import { WalletSupportRequestLogsCompressError } from '../i18n/errors';
import { generateFileNameWithTimestamp } from '../../../common/utils/files';
import { formattedBytesToSize } from '../utils/formatters';
import { Logger } from '../utils/logging';
import { setStateSnapshotLogChannel } from '../ipc/setStateSnapshotLogChannel';
import { detectSystemLocaleChannel } from '../ipc/detect-system-locale';
import { LOCALES } from '../../../common/types/locales.types';
+
import { LANGUAGE_OPTIONS } from '../config/profileConfig';
import {
  compressLogsChannel,
  downloadLogsChannel,
const { ipcRenderer } = global;

                      
export default class ProfileStore extends Store {
-
  LANGUAGE_OPTIONS = [
-
    { value: 'en-US', label: globalMessages.languageEnglish },
-
    { value: 'ja-JP', label: globalMessages.languageJapanese },
-
    // { value: 'zh-CN', label: globalMessages.languageChinese },
-
    // { value: 'ko-KR', label: globalMessages.languageKorean },
-
    // { value: 'de-DE', label: globalMessages.languageGerman },
-
    // { value: 'hr-HR', label: globalMessages.languageCroatian },
-
  ];
+
  LANGUAGE_OPTIONS = LANGUAGE_OPTIONS;

                      
  @observable systemLocale: string = LOCALES.english;
  @observable bigNumberDecimalFormat = {
  stores: any | StoresMap,
  actions: any | ActionsMap,
  children: Node,
+
  isVideoWatched: boolean,
  onClose: Function,
  onContinue: Function,
  onBack: Function,
  actions: null,
  stores: null,
  children: null,
+
  isVideoWatch: false,
  onClose: () => {},
  onContinue: () => {},
  onBack: () => {},
import React, { Component } from 'react';
import { set } from 'lodash';
import styles from './DaedalusMenuStyles';
+
import {
+
  themeNames,
+
  localeNames,
+
  osNames,
+
  getInitialState,
+
} from '../../stories/_support/config';

                      
/* eslint-disable no-restricted-globals */

                      
};

                      
export type DaedalusMenuState = {
-
  localeNames: Array<string>,
-
  themeNames: Array<string>,
-
  osNames: Array<string>,
  themeName?: string,
  localeName?: string,
  osName?: string,
};

                      
class DaedalusMenu extends Component<Props, DaedalusMenuState> {
-
  state = {
-
    localeNames: [],
-
    themeNames: [],
-
    osNames: [],
-
    themeName: '',
-
    localeName: '',
-
    osName: '',
-
  };
+
  constructor(props: Props) {
+
    super(props);
+
    const { themeName, localeName, osName } = getInitialState();
+
    this.state = {
+
      themeName,
+
      localeName,
+
      osName,
+
    };
+
    this.props.api.on('daedalusMenu/paramUpdated', this.handleUpdateParam);
+
  }

                      
-
  componentDidMount() {
-
    const { api } = this.props;
-
    api.on('daedalusMenu/init', this.init);
-
    api.on('daedalusMenu/updateParam', this.updateParam);
+
  get params() {
+
    const { hash, search } = parent.window.location;
+
    const queries = hash || search;
+
    return new URLSearchParams(queries.slice(1));
  }

                      
  componentWillUnmount() {
-
    const { api } = this.props;
-
    api.on('daedalusMenu/init', this.init);
-
    api.on('daedalusMenu/updateParam', this.updateParam);
+
    this.props.api.off('daedalusMenu/paramUpdated', this.handleUpdateParam);
  }

                      
-
  init = (initialState: DaedalusMenuState) =>
-
    this.setState(
-
      currenState => ({
-
        ...currenState,
-
        ...initialState,
-
      }),
-
      () => {
-
        const { themeName, localeName, osName } = this.state;
-
        this.props.api.setQueryParams({ themeName, localeName, osName });
-
      }
-
    );
+
  sendUpdateParam = (param: string, value: string) => {
+
    this.props.api.emit('daedalusMenu/updateParam', { param, value });
+
  };

                      
-
  updateParam = (newParamState: Object) => this.setState(newParamState);
+
  handleUpdateParam = ({ param, value }: Object) => {
+
    const query = set({}, param, value);
+
    this.setState(query);
+
    this.setHashParam(param, value);
+
    sessionStorage.setItem(param, value);
+
    this.props.api.setQueryParams(query);
+
  };
+

                      
+
  setHashParam = (param: string, value: string) => {
+
    const hash = this.params;
+
    hash.delete('path');
+
    hash.set(param, value);
+
    parent.window.location.hash = hash;
+
  };

                      
  handleSetParam = (param: string, value: string) => {
-
    const { api } = this.props;
    const query = set({}, param, value);
-
    api.setQueryParams(query);
-
    api.emit('daedalusMenu/receiveParam', { param, value });
+
    this.setState(query);
+
    this.setHashParam(param, value);
+
    sessionStorage.setItem(param, value);
+
    // updateParam(query);
  };

                      
  render() {
-
    const {
-
      localeNames,
-
      themeNames,
-
      themeName,
-
      localeName,
-
      osNames,
-
      osName,
-
    } = this.state;
+
    const { themeName, localeName, osName } = this.state;

                      
    return (
      <div style={styles.component}>
          {localeNames.map(localeItem => (
            <button
              key={localeItem}
-
              onClick={() => this.handleSetParam('localeName', localeItem)}
+
              onClick={() => this.sendUpdateParam('localeName', localeItem)}
              style={{
                ...styles.button,
                ...(localeName === localeItem ? styles.selected : {}),
          {themeNames.map(themeItem => (
            <button
              key={themeItem}
-
              onClick={() => this.handleSetParam('themeName', themeItem)}
+
              onClick={() => this.sendUpdateParam('themeName', themeItem)}
              style={{
                ...styles.button,
                ...(themeName === themeItem ? styles.selected : {}),
          {osNames.map(osItem => (
            <button
              key={osItem}
-
              onClick={() => this.handleSetParam('osName', osItem)}
+
              onClick={() => this.sendUpdateParam('osName', osItem)}
              style={{
                ...styles.button,
                ...(osName === osItem ? styles.selected : {}),
// @flow
import addons from '@storybook/addons';
-
import type { DaedalusMenuState } from './DaedalusMenu';

                      
const channel = addons.getChannel();

                      
-
export const setInitialProps = (props: DaedalusMenuState) => {
-
  channel.emit('daedalusMenu/init', props);
-
};
+
export const setInitialState = (initialState: Object) =>
+
  Object.entries(initialState).forEach(([param, value]) =>
+
    updateParam({ param, value })
+
  );
+

                      
+
channel.on('daedalusMenu/updateParam', query => {
+
  channel.emit('daedalusMenu/paramUpdated', query);
+
});

                      
export const updateParam = (query: Object) =>
  channel.emit('daedalusMenu/updateParam', query);

                      
export const onReceiveParam = (cb: Function) =>
-
  channel.on('daedalusMenu/receiveParam', ({ param, value }) =>
-
    cb(param, value)
-
  );
+
  channel.on('daedalusMenu/updateParam', query => {
+
    cb(query);
+
  });
// @flow
import React from 'react';
import { configure, addDecorator } from '@storybook/react';
-
import StoryWrapper from './stories/support/StoryWrapper';
+
import StoryWrapper from './stories/_support/StoryWrapper';
import '!style-loader!css-loader!sass-loader!../source/renderer/app/themes/index.global.scss'; // eslint-disable-line

                      
addDecorator(story => {
-
// @flow
-
import React from 'react';
-
import { storiesOf } from '@storybook/react';
-
import { action } from '@storybook/addon-actions';
-
import wordlist from 'bip39/wordlists/english';
-
import StoryDecorator from './support/StoryDecorator';
-
import WalletAdd from '../../source/renderer/app/components/wallet/WalletAdd';
-
import WalletRestoreDialog from '../../source/renderer/app/components/wallet/WalletRestoreDialog';
-
import WalletFileImportDialog from '../../source/renderer/app/components/wallet/file-import/WalletFileImportDialog';
-

                      
-
storiesOf('AddWallet', module)
-
  .addDecorator(story => <StoryDecorator>{story()}</StoryDecorator>)
-

                      
-
  // ====== Stories ======
-

                      
-
  .add('WalletAdd', () => (
-
    <div>
-
      <WalletAdd
-
        onCreate={() => {}}
-
        onImportFile={() => {}}
-
        onRestore={() => {}}
-
        isRestoreActive={false}
-
        isMaxNumberOfWalletsReached={false}
-
      />
-
    </div>
-
  ))
-

                      
-
  .add('WalletRestoreDialog', () => (
-
    <div>
-
      <WalletRestoreDialog
-
        mnemonicValidator={() => {}}
-
        showCertificateRestore={false}
-
        isSubmitting={false}
-
        onSubmit={action('onSubmit')}
-
        onCancel={action('onClose')}
-
        suggestedMnemonics={wordlist}
-
        onChoiceChange={() => {}}
-
      />
-
    </div>
-
  ))
-

                      
-
  .add('WalletFileImportDialog', () => (
-
    <div>
-
      <WalletFileImportDialog
-
        isSubmitting={false}
-
        onSubmit={action('onSubmit')}
-
        onClose={action('onClose')}
-
        error={null}
-
      />
-
    </div>
-
  ));
-
// @flow
-
import React from 'react';
-
import { storiesOf } from '@storybook/react';
-
import { action } from '@storybook/addon-actions';
-
import StoryDecorator from './support/StoryDecorator';
-
import DeleteWalletConfirmationDialog from '../../source/renderer/app/components/wallet/settings/DeleteWalletConfirmationDialog';
-

                      
-
storiesOf('DeleteWalletConfirmationDialog', module)
-
  .addDecorator(story => <StoryDecorator>{story()}</StoryDecorator>)
-

                      
-
  // ====== Stories ======
-

                      
-
  .add('without funds & countdown', () => (
-
    <div>
-
      <DeleteWalletConfirmationDialog
-
        walletName="My Wallet"
-
        hasWalletFunds={false}
-
        countdownFn={() => 10}
-
        isBackupNoticeAccepted={false}
-
        confirmationValue="babushka"
-
        onAcceptBackupNotice={() => {}}
-
        onContinue={() => {}}
-
        onCancel={() => {}}
-
        onConfirmationValueChange={() => {}}
-
        isSubmitting={false}
-
      />
-
    </div>
-
  ))
-
  .add('without funds - not accepted', () => (
-
    <div>
-
      <DeleteWalletConfirmationDialog
-
        walletName="My Wallet"
-
        hasWalletFunds={false}
-
        countdownFn={() => 0}
-
        isBackupNoticeAccepted={false}
-
        confirmationValue="babushka"
-
        onAcceptBackupNotice={() => {}}
-
        onContinue={() => {}}
-
        onCancel={() => {}}
-
        onConfirmationValueChange={() => {}}
-
        isSubmitting={false}
-
      />
-
    </div>
-
  ))
-
  .add('without funds - accepted', () => (
-
    <div>
-
      <DeleteWalletConfirmationDialog
-
        walletName="My Wallet"
-
        hasWalletFunds={false}
-
        countdownFn={() => 0}
-
        isBackupNoticeAccepted
-
        confirmationValue="babushka"
-
        onAcceptBackupNotice={() => {}}
-
        onContinue={() => {}}
-
        onCancel={() => {}}
-
        onConfirmationValueChange={() => {}}
-
        isSubmitting={false}
-
      />
-
    </div>
-
  ))
-
  .add('funds & countdown', () => (
-
    <div>
-
      <DeleteWalletConfirmationDialog
-
        walletName="My Wallet"
-
        hasWalletFunds
-
        countdownFn={() => 10}
-
        isBackupNoticeAccepted={false}
-
        confirmationValue="babushka"
-
        onAcceptBackupNotice={() => {}}
-
        onContinue={() => {}}
-
        onCancel={() => {}}
-
        onConfirmationValueChange={() => {}}
-
        isSubmitting={false}
-
      />
-
    </div>
-
  ))
-
  .add('funds & accepted', () => (
-
    <div>
-
      <DeleteWalletConfirmationDialog
-
        walletName="My Wallet"
-
        hasWalletFunds
-
        countdownFn={() => 0}
-
        isBackupNoticeAccepted
-
        confirmationValue="babushka"
-
        onAcceptBackupNotice={() => {}}
-
        onContinue={() => {}}
-
        onCancel={() => {}}
-
        onConfirmationValueChange={() => {}}
-
        isSubmitting={false}
-
      />
-
    </div>
-
  ))
-
  .add('funds & accepted & filled', () => (
-
    <div>
-
      <DeleteWalletConfirmationDialog
-
        walletName="My Wallet"
-
        hasWalletFunds
-
        countdownFn={() => 0}
-
        isBackupNoticeAccepted
-
        confirmationValue="babushka"
-
        onAcceptBackupNotice={() => {}}
-
        onContinue={() => {}}
-
        onCancel={() => {}}
-
        onConfirmationValueChange={action('onRecoveryWordChange')}
-
        isSubmitting={false}
-
      />
-
    </div>
-
  ));
-
// @flow
-
import React from 'react';
-
import { storiesOf } from '@storybook/react';
-
import { action } from '@storybook/addon-actions';
-
import StoryDecorator from './support/StoryDecorator';
-
import ExportWalletToFileDialog from '../../source/renderer/app/components/wallet/settings/ExportWalletToFileDialog';
-

                      
-
storiesOf('ExportWalletToFileDialog', module)
-
  .addDecorator(story => <StoryDecorator>{story()}</StoryDecorator>)
-

                      
-
  // ====== Stories ======
-

                      
-
  .add('default', () => (
-
    <div>
-
      <ExportWalletToFileDialog
-
        walletName="Test Wallet"
-
        hasSpendingPassword={false}
-
        isSubmitting={false}
-
        onSubmit={action('onSubmit')}
-
        onClose={action('onClose')}
-
      />
-
    </div>
-
  ))
-

                      
-
  .add('submitting', () => (
-
    <div>
-
      <ExportWalletToFileDialog
-
        walletName="Test Wallet"
-
        hasSpendingPassword={false}
-
        isSubmitting
-
        onSubmit={action('onSubmit')}
-
        onClose={action('onClose')}
-
      />
-
    </div>
-
  ))
-

                      
-
  .add('spending password', () => (
-
    <div>
-
      <ExportWalletToFileDialog
-
        walletName="Test Wallet"
-
        hasSpendingPassword
-
        isSubmitting={false}
-
        onSubmit={action('onSubmit')}
-
        onClose={action('onClose')}
-
      />
-
    </div>
-
  ));
-
// @flow
-
import React from 'react';
-
import { storiesOf } from '@storybook/react';
-
import { withKnobs } from '@storybook/addon-knobs';
-

                      
-
// Assets and helpers
-
import StoryDecorator from './support/StoryDecorator';
-

                      
-
// Screens
-
import {
-
  DefaultSyncingConnectingStory,
-
  ConnectivityIssuesSyncingConnectingStory,
-
  SyncIssuesSyncingConnectingStory,
-
} from './Loading-SyncingConnecting.stories';
-
import { NoDiskSpaceErrorStory } from './Loading-NoDiskSpaceError.stories';
-
import { SystemTimeErrorStory } from './Loading-SystemTimeError.stories';
-
import { ManualUpdateStory } from './Loading-ManualUpdate.stories';
-
import { DataLayerMigrationStory } from './Loading-DataLayerMigration.stories';
-

                      
-
storiesOf('Loading', module)
-
  .addDecorator((story, context) => (
-
    <StoryDecorator>{withKnobs(story, context)}</StoryDecorator>
-
  ))
-

                      
-
  // ====== Stories ======
-

                      
-
  .add('SyncingConnecting - Default', DefaultSyncingConnectingStory)
-
  .add(
-
    'SyncingConnecting - Connectivity Issues',
-
    ConnectivityIssuesSyncingConnectingStory
-
  )
-
  .add('SyncingConnecting - Sync Issues', SyncIssuesSyncingConnectingStory)
-
  .add('NoDiskSpaceError', NoDiskSpaceErrorStory)
-
  .add('SystemTimeError', SystemTimeErrorStory)
-
  .add('ManualUpdate', ManualUpdateStory)
-
  .add('DataLayerMigrationStory', DataLayerMigrationStory);
-
// @flow
-
import React from 'react';
-
import { storiesOf } from '@storybook/react';
-
import { action } from '@storybook/addon-actions';
-

                      
-
// Assets and helpers
-
import StoryDecorator from './support/StoryDecorator';
-

                      
-
// Screens
-
import AutomaticUpdateNotification from '../../source/renderer/app/components/notifications/AutomaticUpdateNotification';
-

                      
-
storiesOf('Notifications', module)
-
  .addDecorator(story => <StoryDecorator>{story()}</StoryDecorator>)
-

                      
-
  // ====== Stories ======
-

                      
-
  .add('AutomaticUpdateNotification - with newer version number', () => (
-
    <AutomaticUpdateNotification
-
      currentAppVersion="0.12.0"
-
      nextUpdateVersion="0.14.0"
-
      onAccept={action('onAccept')}
-
      onPostpone={action('onPostpone')}
-
    />
-
  ))
-

                      
-
  .add('AutomaticUpdateNotification - without newer version number', () => (
-
    <AutomaticUpdateNotification
-
      currentAppVersion="0.12.0"
-
      nextUpdateVersion={null}
-
      onAccept={action('onAccept')}
-
      onPostpone={action('onPostpone')}
-
    />
-
  ));
-
// @flow
-
import React from 'react';
-
import { storiesOf } from '@storybook/react';
-
import { withKnobs, date, number } from '@storybook/addon-knobs';
-
import { linkTo } from '@storybook/addon-links';
-
import { action } from '@storybook/addon-actions';
-
import StoryLayout from './support/StoryLayout';
-
import StoryProvider from './support/StoryProvider';
-
import StoryDecorator from './support/StoryDecorator';
-

                      
-
import { CATEGORIES_BY_NAME } from '../../source/renderer/app/config/sidebarConfig';
-

                      
-
import StakingWithNavigation from '../../source/renderer/app/components/staking/layouts/StakingWithNavigation';
-
import StakingCountdown from '../../source/renderer/app/components/staking/countdown/StakingCountdown';
-
import StakingInfo from '../../source/renderer/app/components/staking/info/StakingInfo';
-
import DelegationStepsIntroDialog from '../../source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsIntroDialog';
-
import DelegationStepsChooseWalletDialog from '../../source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseWalletDialog';
-
import DelegationStepsChooseStakePoolDialog from '../../source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog';
-
import DelegationStepsNotAvailableDialog from '../../source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsNotAvailableDialog';
-
import DelegationStepsConfirmationDialog from '../../source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsConfirmationDialog';
-
import DelegationStepsActivationDialog from '../../source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsActivationDialog';
-
import DelegationCenterNoWallets from '../../source/renderer/app/components/staking/delegation-center/DelegationCenterNoWallets';
-

                      
-
import { StakePoolsStory } from './Staking-StakePools.stories';
-
import { StakingRewardsStory } from './Staking-Rewards.stories';
-
import { StakingDelegationCenterStory } from './Staking-DelegationCenter.stories';
-
import { StakingEpochsStory } from './Staking-Epochs.stories';
-

                      
-
import translations from '../../source/renderer/app/i18n/translations';
-
import STAKE_POOLS from '../../source/renderer/app/config/stakingStakePools.dummy.json';
-

                      
-
const defaultPercentage = 10;
-
const defaultStartDateTime = new Date('2019-09-26');
-
const startDateTimeKnob = (name, defaultValue) => {
-
  const stringTimestamp = date(name, defaultValue);
-

                      
-
  return new Date(stringTimestamp).toISOString();
-
};
-

                      
-
const pageNames = {
-
  countdown: 'Staking Countdown',
-
  'delegation-center': 'Delegation Center',
-
  'stake-pools': 'Stake Pools',
-
  'stake-pools-tooltip': 'Tooltip',
-
  rewards: 'Rewards',
-
  epochs: 'Epochs',
-
  info: 'Info',
-
};
-

                      
-
const WALLETS = [
-
  {
-
    id: '1',
-
    value: '1 ADA',
-
    label: 'First Wallet',
-
    isAcceptableSetupWallet: true,
-
    hasPassword: true,
-
  },
-
  {
-
    id: '2',
-
    value: '2 ADA',
-
    label: 'Second Wallet',
-
    isAcceptableSetupWallet: true,
-
    hasPassword: true,
-
  },
-
  {
-
    id: '3',
-
    value: '0.0001 ADA',
-
    label: 'Third Wallet',
-
    isAcceptableSetupWallet: false,
-
    hasPassword: true,
-
  },
-
];
-

                      
-
const locales = {
-
  English: 'en-US',
-
  Japanese: 'ja-JP',
-
};
-

                      
-
// Delegation steps labels are translated outside components and we need to determine correct translations
-
const locale = sessionStorage.getItem('localeName') || 'English';
-
const currentTheme = sessionStorage.getItem('themeName') || 'light-blue';
-
const translationIndex = locales[locale];
-

                      
-
// @TODO - improve locales GET once [DDW-711](https://github.com/input-output-hk/daedalus/pull/1426) is merged
-
const DELEGATION_WIZARD_STEPS_LIST = [
-
  translations[translationIndex]['staking.delegationSetup.steps.step.1.label'],
-
  translations[translationIndex]['staking.delegationSetup.steps.step.2.label'],
-
  translations[translationIndex]['staking.delegationSetup.steps.step.3.label'],
-
  translations[translationIndex]['staking.delegationSetup.steps.step.4.label'],
-
];
-

                      
-
storiesOf('Staking', module)
-
  .addDecorator((story, context) => {
-
    const storyWithKnobs = withKnobs(story, context);
-
    const getItemFromContext = () => context.parameters.id;
-
    let activeSidebarCategory = null;
-

                      
-
    if (
-
      context.parameters.id === 'countdown' ||
-
      context.parameters.id === 'stake-pools-tooltip'
-
    ) {
-
      activeSidebarCategory =
-
        CATEGORIES_BY_NAME.STAKING_DELEGATION_COUNTDOWN.route;
-
    } else {
-
      activeSidebarCategory = CATEGORIES_BY_NAME.STAKING.route;
-
    }
-

                      
-
    return (
-
      <StoryDecorator>
-
        <StoryProvider>
-
          <StoryLayout
-
            activeSidebarCategory={activeSidebarCategory}
-
            storyName={context.story}
-
          >
-
            {context.parameters.id === 'countdown' ? (
-
              storyWithKnobs
-
            ) : (
-
              <StakingWithNavigation
-
                isActiveNavItem={item => item === getItemFromContext()}
-
                activeItem={getItemFromContext()}
-
                onNavItemClick={linkTo('Staking', item => pageNames[item])}
-
              >
-
                {storyWithKnobs}
-
              </StakingWithNavigation>
-
            )}
-
          </StoryLayout>
-
        </StoryProvider>
-
      </StoryDecorator>
-
    );
-
  })
-
  // ====== Stories ======
-

                      
-
  .add(
-
    pageNames.countdown,
-
    () => (
-
      <div>
-
        <StakingCountdown
-
          startDateTime={startDateTimeKnob(
-
            'Decentralization Start DateTime',
-
            defaultStartDateTime
-
          )}
-
          onLearnMoreClick={action('onLearnMoreClick')}
-
        />
-
      </div>
-
    ),
-
    { id: 'countdown' }
-
  )
-

                      
-
  .add(pageNames['delegation-center'], StakingDelegationCenterStory, {
-
    id: 'delegation-center',
-
  })
-

                      
-
  .add('Delegation Center - No Wallets', () => (
-
    <DelegationCenterNoWallets
-
      onGoToCreateWalletClick={action('onGoToCreateWalletClick')}
-
    />
-
  ))
-

                      
-
  .add(pageNames['stake-pools'], StakePoolsStory, { id: 'stake-pools' })
-

                      
-
  .add(pageNames.rewards, StakingRewardsStory, { id: 'rewards' })
-

                      
-
  .add(pageNames.epochs, StakingEpochsStory, { id: 'epochs' })
-

                      
-
  .add(
-
    pageNames.info,
-
    () => (
-
      <StakingInfo
-
        percentage={number('Percentage', defaultPercentage, {
-
          min: 0,
-
          max: 100,
-
          step: 1,
-
          range: true,
-
        })}
-
        onLearnMoreClick={action('onLearnMoreClick')}
-
      />
-
    ),
-
    {
-
      id: 'info',
-
    }
-
  )
-

                      
-
  .add('DelegationStepsIntroDialog', () => (
-
    <DelegationStepsIntroDialog
-
      onClose={action('onClose')}
-
      onContinue={action('onContinue')}
-
      onLearnMoreClick={action('onLearnMoreClick')}
-
    />
-
  ))
-

                      
-
  .add('DelegationStepsChooseWalletDialog', () => (
-
    <DelegationStepsChooseWalletDialog
-
      stepsList={DELEGATION_WIZARD_STEPS_LIST}
-
      onClose={action('onClose')}
-
      onSelectWallet={action('onSelectWallet')}
-
      onBack={action('onBack')}
-
      wallets={WALLETS}
-
      minDelegationFunds={1}
-
      selectedWallet={null}
-
// @flow
-
import React from 'react';
-
import { text, boolean, number } from '@storybook/addon-knobs';
-
import { action } from '@storybook/addon-actions';
-
import moment from 'moment';
-

                      
-
// Screens
-
import WalletSettings from '../../source/renderer/app/components/wallet/settings/WalletSettings';
-
import { WalletAssuranceModeOptions } from '../../source/renderer/app/domains/Wallet';
-
import ChangeSpendingPasswordDialog from '../../source/renderer/app/components/wallet/settings/ChangeSpendingPasswordDialog';
-
import DeleteWalletConfirmationDialog from '../../source/renderer/app/components/wallet/settings/DeleteWalletConfirmationDialog';
-
import ExportWalletToFileDialog from '../../source/renderer/app/components/wallet/settings/ExportWalletToFileDialog';
-

                      
-
/* eslint-disable react/display-name  */
-

                      
-
export default () => (
-
  <WalletSettings
-
    activeField={null}
-
    assuranceLevels={[
-
      {
-
        value: WalletAssuranceModeOptions.NORMAL,
-
        label: {
-
          id: 'global.assuranceLevel.normal',
-
          defaultMessage: '!!!Normal',
-
          description: '',
-
        },
-
      },
-
      {
-
        value: WalletAssuranceModeOptions.STRICT,
-
        label: {
-
          id: 'global.assuranceLevel.strict',
-
          defaultMessage: '!!!Strict',
-
          description: '',
-
        },
-
      },
-
    ]}
-
    isDialogOpen={dialog => {
-
      if (dialog === ChangeSpendingPasswordDialog) {
-
        return boolean('Change Password - Show dialog', false);
-
      }
-
      if (dialog === DeleteWalletConfirmationDialog) {
-
        return boolean('Delete Wallet - Show dialog', false);
-
      }
-
      if (dialog === ExportWalletToFileDialog) {
-
        return boolean('Export Wallet - Show dialog', false);
-
      }
-
      return false;
-
    }}
-
    isInvalid={false}
-
    isSubmitting={false}
-
    isSpendingPasswordSet={boolean('isSpendingPasswordSet', false)}
-
    lastUpdatedField={null}
-
    nameValidator={() => true}
-
    onCancelEditing={() => {}}
-
    onFieldValueChange={() => {}}
-
    onStartEditing={() => {}}
-
    onStopEditing={() => {}}
-
    openDialogAction={() => {}}
-
    walletAssurance={WalletAssuranceModeOptions.NORMAL}
-
    walletName={text('Wallet Name', 'Wallet Name')}
-
    spendingPasswordUpdateDate={moment()
-
      .subtract(1, 'month')
-
      .toDate()}
-
    changeSpendingPasswordDialog={
-
      <ChangeSpendingPasswordDialog
-
        currentPasswordValue="current"
-
        newPasswordValue="new"
-
        repeatedPasswordValue="new"
-
        isSpendingPasswordSet={boolean('isSpendingPasswordSet', false)}
-
        onSave={action('Change Password - onSave')}
-
        onCancel={action('Change Password - onCancel')}
-
        onPasswordSwitchToggle={action(
-
          'Change Password - onPasswordSwitchToggle'
-
        )}
-
        onDataChange={action('Change Password - onDataChange')}
-
        isSubmitting={boolean('Change Password - isSubmitting', false)}
-
        error={null}
-
      />
-
    }
-
    deleteWalletDialogContainer={
-
      <DeleteWalletConfirmationDialog
-
        walletName={text(
-
          'DeleteWalletConfirmationDialog: Wallet Name',
-
          'Wallet To Delete'
-
        )}
-
        hasWalletFunds={boolean('hasWalletFunds', false)}
-
        countdownFn={() => number('Delete Wallet Countdown', 9)}
-
        isBackupNoticeAccepted={boolean('isBackupNoticeAccepted', false)}
-
        onAcceptBackupNotice={action('Delete Wallet - onAcceptBackupNotice')}
-
        onContinue={action('Delete Wallet - onContinue')}
-
        onCancel={action('Delete Wallet - onCancel')}
-
        confirmationValue={text('Delete Wallet Confirmation Value')}
-
        onConfirmationValueChange={action(
-
          'Delete Wallet - onConfirmationValueChange'
-
        )}
-
        isSubmitting={boolean('Delete Wallet - isSubmitting', false)}
-
      />
-
    }
-
    exportWalletDialogContainer={
-
      <ExportWalletToFileDialog
-
        walletName={text('Wallet Name', 'Wallet Name')}
-
        hasSpendingPassword={boolean('isSpendingPasswordSet', false)}
-
        isSubmitting={boolean('Export Wallet - isSubmitting', false)}
-
        onSubmit={action('Export Wallet - onSubmit')}
-
        onClose={action('Export Wallet - onClose')}
-
      />
-
    }
-
  />
-
);
-
// @flow
-
import React from 'react';
-
import { storiesOf } from '@storybook/react';
-
import { action } from '@storybook/addon-actions';
-
import { linkTo } from '@storybook/addon-links';
-
import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';
-
import BigNumber from 'bignumber.js';
-
import moment from 'moment';
-
import faker from 'faker';
-
import startCase from 'lodash/startCase';
-

                      
-
// Assets and helpers
-
import StoryLayout from './support/StoryLayout';
-
import StoryProvider from './support/StoryProvider';
-
import StoryDecorator from './support/StoryDecorator';
-
import VerticalFlexContainer from '../../source/renderer/app/components/layout/VerticalFlexContainer';
-
import {
-
  generateWallet,
-
  generateTransaction,
-
  generateAddress,
-
  promise,
-
} from './support/utils';
-
import { formattedWalletAmount } from '../../source/renderer/app/utils/formatters';
-
import { transactionTypes } from '../../source/renderer/app/domains/WalletTransaction';
-
import WalletWithNavigation from '../../source/renderer/app/components/wallet/layouts/WalletWithNavigation';
-

                      
-
// Screens
-
import WalletAdd from '../../source/renderer/app/components/wallet/WalletAdd';
-
import WalletSummary from '../../source/renderer/app/components/wallet/summary/WalletSummary';
-
import WalletSendForm from '../../source/renderer/app/components/wallet/WalletSendForm';
-
import WalletReceive from '../../source/renderer/app/components/wallet/receive/WalletReceive';
-
import WalletTransactionsList from '../../source/renderer/app/components/wallet/transactions/WalletTransactionsList';
-
import WalletScreensCreateWallet from './WalletScreens-Create-Wallet.stories';
-
import WalletScreensSettings from './WalletScreens-Settings.stories';
-
import WalletScreensUtxo from './WalletScreens-Utxo.stories';
-

                      
-
/* eslint-disable consistent-return */
-
storiesOf('WalletScreens', module)
-
  .addDecorator((story, context) => {
-
    const storyWithKnobs = withKnobs(story, context);
-

                      
-
    const getItemFromContext = () =>
-
      context.story
-
        .replace('Wallet UTXO distribution', 'utxo')
-
        .toLocaleLowerCase();
-

                      
-
    return (
-
      <StoryDecorator>
-
        <StoryProvider>
-
          <StoryLayout
-
            activeSidebarCategory="/wallets"
-
            storyName={context.story}
-
          >
-
            {context.story !== 'Empty' && context.story !== 'Wallet Add' ? (
-
              <WalletWithNavigation
-
                isActiveScreen={item => item === getItemFromContext()}
-
                onWalletNavItemClick={linkTo('WalletScreens', item =>
-
                  item === 'utxo' ? 'Wallet UTXO distribution' : startCase(item)
-
                )}
-
                activeItem={getItemFromContext()}
-
              >
-
                {storyWithKnobs}
-
              </WalletWithNavigation>
-
            ) : (
-
              storyWithKnobs
-
            )}
-
          </StoryLayout>
-
        </StoryProvider>
-
      </StoryDecorator>
-
    );
-
  })
-

                      
-
  // ====== Stories ======
-

                      
-
  .add('Empty', () => null)
-

                      
-
  .add('Wallet Navigation', () => <div>&nbsp;</div>)
-

                      
-
  .add('Wallet Add', () => (
-
    <WalletAdd
-
      onCreate={() => {}}
-
      onRestore={() => {}}
-
      onImportFile={() => {}}
-
      isRestoreActive={boolean('isRestoreActive', false)}
-
      isMainnet={boolean('isMainnet', false)}
-
      isTestnet={boolean('isTestnet', false)}
-
      isMaxNumberOfWalletsReached={boolean(
-
        'isMaxNumberOfWalletsReached',
-
        false
-
      )}
-
    />
-
  ))
-

                      
-
  .add('Wallet Create', () => <WalletScreensCreateWallet />)
-

                      
-
  .add('Summary', () => (
-
    <WalletSummary
-
      wallet={generateWallet('Wallet name', '45119903750165')}
-
      pendingAmount={{
-
        incoming: new BigNumber(number('Incoming', 1)),
-
        outgoing: new BigNumber(number('Outgoing', 2)),
-
        total: new BigNumber(3),
-
      }}
-
      numberOfTransactions={number('Number of transactions', 100)}
-
      numberOfRecentTransactions={number('Number of Recent transactions', 100)}
-
      isLoadingTransactions={boolean('isLoadingTransactions', false)}
-
      isRestoreActive={boolean('isRestoreActive', false)}
-
    />
-
  ))
-

                      
-
  .add('Send', () => (
-
    <WalletSendForm
-
      currencyUnit="Ada"
-
      currencyMaxFractionalDigits={6}
-
      currencyMaxIntegerDigits={11}
-
      validateAmount={promise(true)}
-
      calculateTransactionFee={promise(true)}
-
      addressValidator={action('addressValidator')}
-
      openDialogAction={action('openDialogAction')}
-
      isDialogOpen={() => boolean('isDialogOpen', false)}
-
      isRestoreActive={boolean('isRestoreActive', false)}
-
    />
-
  ))
-

                      
-
  .add('Receive', () => (
-
    <VerticalFlexContainer>
-
      <WalletReceive
-
        walletAddress={text(
-
          'Wallet address',
-
          'DdzFFzCqrhsg9ngNRhHEa49se7qEMKyubT9tcE13Fkvh8QC82trpTDsNvdQV7mg9SCZiuENkf77zrtwPXrTyGMNznUsSinPC1gb2ZCqK'
-
        )}
-
        isWalletAddressUsed={boolean('isWalletAddressUsed', false)}
-
        walletAddresses={[
-
          ...Array.from(Array(number('Addresses', 10))).map(() =>
-
            generateAddress()
-
          ),
-
          ...Array.from(Array(number('Addresses (used)', 10))).map(() =>
-
            generateAddress(true)
-
          ),
-
        ]}
-
        onGenerateAddress={action('onGenerateAddress')}
-
        onCopyAddress={action('onGenerateAddress')}
-
        isSidebarExpanded={boolean('isSidebarExpanded', true)}
-
        walletHasPassword={boolean('walletHasPassword', false)}
-
        isSubmitting={boolean('isSubmitting', false)}
-
      />
-
    </VerticalFlexContainer>
-
  ))
-

                      
-
  .add('Transactions', () => (
-
    <WalletTransactionsList
-
      transactions={[
-
        ...Array.from(Array(number('Transactions Sent', 1))).map((x, i) =>
-
          generateTransaction(
-
            transactionTypes.EXPEND,
-
            moment()
-
              .subtract(i, 'days')
-
              .toDate(),
-
            new BigNumber(faker.random.number(5))
-
          )
-
        ),
-
        ...Array.from(Array(number('Transactions Received', 1))).map((x, i) =>
-
          generateTransaction(
-
            transactionTypes.INCOME,
-
            moment()
-
              .subtract(i, 'days')
-
              .toDate(),
-
            new BigNumber(faker.random.number(5))
-
          )
-
        ),
-
      ]}
-
      isLoadingTransactions={boolean('isLoadingTransactions', false)}
-
      isRestoreActive={boolean('isRestoreActive', false)}
-
      hasMoreToLoad={false}
-
      assuranceMode={{ low: 1, medium: 2 }}
-
      walletId="test-wallet"
-
      formattedWalletAmount={formattedWalletAmount}
-
      totalAvailable={
-
        number('Transactions Sent', 1) + number('Transactions Received', 1)
-
      }
-
    />
-
  ))
-

                      
-
  .add('Settings', WalletScreensSettings)
-
  .add('Wallet UTXO distribution', WalletScreensUtxo);
-
// @flow
-
import React from 'react';
-
import { storiesOf } from '@storybook/react';
-
import BigNumber from 'bignumber.js';
-
import StoryDecorator from './support/StoryDecorator';
-
import { generateWallet } from './support/utils';
-
import WalletSummary from '../../source/renderer/app/components/wallet/summary/WalletSummary';
-

                      
-
storiesOf('WalletSummary', module)
-
  .addDecorator(story => <StoryDecorator>{story()}</StoryDecorator>)
-

                      
-
  // ====== Stories ======
-

                      
-
  .add('default', () => (
-
    <div>
-
      <WalletSummary
-
        wallet={generateWallet('Shopping wallet', '45119903750165')}
-
        pendingAmount={{
-
          total: new BigNumber(3),
-
          incoming: new BigNumber(1),
-
          outgoing: new BigNumber(2),
-
        }}
-
        numberOfTransactions={20303585}
-
        numberOfRecentTransactions={50}
-
        isLoadingTransactions={false}
-
        isRestoreActive={false}
-
      />
-
    </div>
-
  ));
-
// @flow
-
import React from 'react';
-
import { storiesOf } from '@storybook/react';
-
import moment from 'moment';
-
import BigNumber from 'bignumber.js';
-
import StoryDecorator from './support/StoryDecorator';
-
import {
-
  generateMultipleTransactions,
-
  generateTransaction,
-
} from './support/utils';
-
import WalletTransactionsList from '../../source/renderer/app/components/wallet/transactions/WalletTransactionsList';
-
import {
-
  transactionStates,
-
  transactionTypes,
-
} from '../../source/renderer/app/domains/WalletTransaction';
-
import { formattedWalletAmount } from '../../source/renderer/app/utils/formatters';
-

                      
-
storiesOf('WalletTransactionsList', module)
-
  .addDecorator(story => <StoryDecorator>{story()}</StoryDecorator>)
-

                      
-
  // ====== Stories ======
-

                      
-
  .add('transactions grouped by days', () => (
-
    <WalletTransactionsList
-
      transactions={[
-
        generateTransaction(
-
          transactionTypes.INCOME,
-
          new Date(),
-
          new BigNumber(1)
-
        ),
-
        generateTransaction(
-
          transactionTypes.INCOME,
-
          moment()
-
            .subtract(1, 'days')
-
            .toDate(),
-
          new BigNumber(1)
-
        ),
-
        generateTransaction(
-
          transactionTypes.INCOME,
-
          new Date(),
-
          new BigNumber(1)
-
        ),
-
        generateTransaction(
-
          transactionTypes.INCOME,
-
          moment()
-
            .subtract(2, 'days')
-
            .toDate(),
-
          new BigNumber(1)
-
        ),
-
        generateTransaction(
-
          transactionTypes.INCOME,
-
          moment()
-
            .subtract(1, 'days')
-
            .toDate(),
-
          new BigNumber(1)
-
        ),
-
      ]}
-
      isRestoreActive={false}
-
      isLoadingTransactions={false}
-
      hasMoreToLoad={false}
-
      assuranceMode={{ low: 1, medium: 2 }}
-
      walletId="test-wallet"
-
      formattedWalletAmount={formattedWalletAmount}
-
      totalAvailable={5}
-
    />
-
  ))
-

                      
-
  .add('failed and pending transactions', () => (
-
    <WalletTransactionsList
-
      transactions={[
-
        generateTransaction(
-
          transactionTypes.INCOME,
-
          new Date(),
-
          new BigNumber(1),
-
          1,
-
          transactionStates.OK
-
        ),
-
        generateTransaction(
-
          transactionTypes.INCOME,
-
          new Date(),
-
          new BigNumber(1),
-
          0,
-
          transactionStates.PENDING
-
        ),
-
        generateTransaction(
-
          transactionTypes.INCOME,
-
          new Date(),
-
          new BigNumber(1),
-
          0,
-
          transactionStates.FAILED
-
        ),
-
      ]}
-
      isRestoreActive={false}
-
      isLoadingTransactions={false}
-
      hasMoreToLoad={false}
-
      assuranceMode={{ low: 1, medium: 2 }}
-
      walletId="test-wallet"
-
      formattedWalletAmount={formattedWalletAmount}
-
      totalAvailable={3}
-
    />
-
  ))
-

                      
-
  .add('rendering many transactions', () => (
-
    <WalletTransactionsList
-
      isRenderingAsVirtualList
-
      isRestoreActive={false}
-
      transactions={generateMultipleTransactions(500)}
-
      isLoadingTransactions={false}
-
      hasMoreToLoad={false}
-
      assuranceMode={{ low: 1, medium: 2 }}
-
      walletId="test-wallet"
-
      formattedWalletAmount={formattedWalletAmount}
-
      totalAvailable={500}
-
    />
-
  ));