Remove broken Storybook stories (#9690)

These two stories showcased components that used React context and
Redux state that was not made available in the stories themselves. They
both crashed with an error when rendered in Storybook.

Instead of going through a great deal of effort to setup mocks for the
global Redux state and context, they have been removed. They are
perhaps the wrong layer for us to showcase in Storybook. Storybook is
more well suited for individual components that contain just UI logic.
feature/default_network_editable
Mark Stacey 4 years ago committed by GitHub
parent 055f008c0d
commit 400881b1b1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 73
      ui/app/pages/swaps/awaiting-swap/awaiting-swap.stories.js
  2. 91
      ui/app/pages/swaps/loading-swaps-quotes/loading-swaps-quotes.stories.js

@ -1,73 +0,0 @@
import React from 'react'
import { number, text, select } from '@storybook/addon-knobs/react'
import {
QUOTES_EXPIRED_ERROR,
SWAP_FAILED_ERROR,
ERROR_FETCHING_QUOTES,
QUOTES_NOT_AVAILABLE_ERROR,
} from '../../../helpers/constants/swaps'
import AwaitingSwap from './awaiting-swap'
export default {
title: 'AwaitingSwap',
}
export const swapNotComplete = () => (
<div style={{ height: '528px', width: '357px', border: '1px solid grey' }}>
<AwaitingSwap
swapComplete={false}
errorKey={select('Error types', [
'',
QUOTES_EXPIRED_ERROR,
SWAP_FAILED_ERROR,
ERROR_FETCHING_QUOTES,
QUOTES_NOT_AVAILABLE_ERROR,
], '')}
estimatedTime="2 minutes"
networkId="1"
txHash="0xnotATx"
submittedTime={number('submittedTime', Date.now())}
transactionTimeRemaining={number('transactionTimeRemaining', 120000)}
rpcPrefs={{ blockExplorerUrl: text('blockExplorerUrl 1', 'http://example.com') }}
/>
</div>
)
export const swapComplete = () => (
<div style={{ height: '528px', width: '357px', border: '1px solid grey' }}>
<AwaitingSwap
swapComplete
errorKey={select('Error types', [
'',
QUOTES_EXPIRED_ERROR,
SWAP_FAILED_ERROR,
ERROR_FETCHING_QUOTES,
QUOTES_NOT_AVAILABLE_ERROR,
], '')}
estimatedTime={null}
tokensReceived={320.68}
networkId="1"
txHash="0xnotATx"
rpcPrefs={{ blockExplorerUrl: text('blockExplorerUrl 2', 'http://example.com') }}
/>
</div>
)
export const swapError = () => (
<div style={{ height: '528px', width: '357px', border: '1px solid grey' }}>
<AwaitingSwap
swapComplete={false}
errorKey={select('Error types', [
'',
QUOTES_EXPIRED_ERROR,
SWAP_FAILED_ERROR,
ERROR_FETCHING_QUOTES,
QUOTES_NOT_AVAILABLE_ERROR,
], '')}
estimatedTime={null}
networkId="1"
txHash="0xnotATx"
rpcPrefs={{ blockExplorerUrl: text('blockExplorerUrl 3', 'http://example.com') }}
/>
</div>
)

@ -1,91 +0,0 @@
import React, { useState, useEffect } from 'react'
import { storiesMetadata } from './loading-swaps-quotes-stories-metadata'
import LoadingSwapsQuotes from './loading-swaps-quotes'
export default {
title: 'LoadingSwapsQuotes',
}
export const FasterThanExpectedCompletion = () => {
const [loading, setLoading] = useState(false)
const [loadingComplete, setLoadingComplete] = useState(false)
const [done, setDone] = useState(false)
useEffect(() => {
if (!done && !loading) {
setLoading(true)
setTimeout(() => {
setLoading(false)
setLoadingComplete(true)
}, 3000)
}
}, [done, loading])
return (
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<div style={{ height: '600px', width: '357px', border: '1px solid grey' }}>
<LoadingSwapsQuotes
loadingComplete={loadingComplete}
onDone={() => setDone(true)}
aggregatorMetadata={storiesMetadata}
/>
</div>
</div>
)
}
export const SlowerThanExpectedCompletion = () => {
const [loading, setLoading] = useState(false)
const [loadingComplete, setLoadingComplete] = useState(false)
const [done, setDone] = useState(false)
useEffect(() => {
if (!done && !loading) {
setLoading(true)
setTimeout(() => {
setLoading(false)
setLoadingComplete(true)
}, 10000)
}
}, [done, loading])
return (
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<div style={{ height: '600px', width: '357px', border: '1px solid grey' }}>
<LoadingSwapsQuotes
loadingComplete={loadingComplete}
onDone={() => setDone(true)}
aggregatorMetadata={storiesMetadata}
/>
</div>
</div>
)
}
export const FasterThanExpectedCompletionWithError = () => {
const [loading, setLoading] = useState(false)
const [loadingComplete, setLoadingComplete] = useState(false)
const [done, setDone] = useState(false)
useEffect(() => {
if (!done && !loading) {
setLoading(true)
setTimeout(() => {
setLoading(false)
setLoadingComplete(true)
}, 3000)
}
}, [done, loading])
return (
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<div style={{ height: '600px', width: '357px', border: '1px solid grey' }}>
<LoadingSwapsQuotes
loadingComplete={loadingComplete}
onDone={() => setDone(true)}
aggregatorMetadata={storiesMetadata}
/>
</div>
</div>
)
}
Loading…
Cancel
Save