metamask-extension/ui/pages/permissions-connect/permissions-connect.stories.js

import React from 'react';
import { action } from '@storybook/addon-actions';
import { PermissionPageContainerContent } from '../../components/app/permission-page-container';
import PermissionsConnectFooter from '../../components/app/permissions-connect-footer';
import { PageContainerFooter } from '../../components/ui/page-container';
import ChooseAccount from './choose-account';

export default {
  title: 'Permissions Connect',
  id: __filename,
};

export const ChooseAccountComponent = () => {
  return (
    <ChooseAccount
      selectAccounts={action('Account(s) Selected')}
      selectedAccountAddresses={
        new Set([
          '0xcb47e5e29f925e7482d1712297fb6b268f412344',
          '0xf68a4b64162906eff0ff6ae34e2bb1cd42fef62d',
          '0xbe0eb53f46cd790cd13851d5eff43d12404d33e8',
        ])
      }
      targetDomainMetadata={{
        host: 'gnosis-safe.io',
        icon: './gnosis.svg',
        lastUpdated: 1627423550860,
        name: 'Gnosis - Manage Digital Assets',
        origin: 'https://gnosis-safe.io',
      }}
      accounts={[
        {
          address: '0xcb47e5e29f925e7482d1712297fb6b268f412344',
          addressLabel: 'Account 1 (...2344)',
          balance: '0x176e5b6f173ebe66',
          label: 'Account 1',
        },
        {
          address: '0xf68a4b64162906eff0ff6ae34e2bb1cd42fef62d',
          addressLabel: 'Account 2 (...f62d)',
          balance: '0x176e5b6f173e',
          label: 'Account 2',
        },
        {
          address: '0xbe0eb53f46cd790cd13851d5eff43d12404d33e8',
          addressLabel: 'Account 3 (...33e8)',
          balance: '0x176e5b6f173ebe',
          label: 'Account 3',
        },
      ]}
    />
  );
};

export const PermissionPageContainerComponent = () => {
  return (
    <div className="page-container permission-approval-container">
      <PermissionPageContainerContent
        domainMetadata={{
          extensionId: '1',
          host: 'gnosis-safe.io',
          icon: './gnosis.svg',
          lastUpdated: 1627423550860,
          name: 'Gnosis - Manage Digital Assets',
          origin: 'https://gnosis-safe.io',
        }}
        selectedPermissions={{
          eth_accounts: true,
        }}
      />
      <div className="permission-approval-container__footers">
        <PermissionsConnectFooter />
        <PageContainerFooter
          cancelButtonType="default"
          onSubmit={action('Account(s) Connected')}
          submitText="connect"
          submitButtonType="confirm"
          buttonSizeLarge={false}
        />
      </div>
    </div>
  );
};