aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant
diff options
context:
space:
mode:
authorSteve Klebanoff <steve.klebanoff@gmail.com>2018-10-31 23:14:44 +0800
committerSteve Klebanoff <steve.klebanoff@gmail.com>2018-10-31 23:14:44 +0800
commit9a5b52036b8765a6de464d8c6294b46ebcfd604e (patch)
tree4745283f70e390404283bc7cdb604dd16b47a220 /packages/instant
parent229f11f164ce5109b771295d9aee8ebb74314181 (diff)
downloaddexon-sol-tools-9a5b52036b8765a6de464d8c6294b46ebcfd604e.tar
dexon-sol-tools-9a5b52036b8765a6de464d8c6294b46ebcfd604e.tar.gz
dexon-sol-tools-9a5b52036b8765a6de464d8c6294b46ebcfd604e.tar.bz2
dexon-sol-tools-9a5b52036b8765a6de464d8c6294b46ebcfd604e.tar.lz
dexon-sol-tools-9a5b52036b8765a6de464d8c6294b46ebcfd604e.tar.xz
dexon-sol-tools-9a5b52036b8765a6de464d8c6294b46ebcfd604e.tar.zst
dexon-sol-tools-9a5b52036b8765a6de464d8c6294b46ebcfd604e.zip
Tick less often, and let CSS style the transition
Diffstat (limited to 'packages/instant')
-rw-r--r--packages/instant/src/components/simulated_progress_bar.tsx26
-rw-r--r--packages/instant/src/constants.ts2
2 files changed, 24 insertions, 4 deletions
diff --git a/packages/instant/src/components/simulated_progress_bar.tsx b/packages/instant/src/components/simulated_progress_bar.tsx
index e4b08db8c..067f4093e 100644
--- a/packages/instant/src/components/simulated_progress_bar.tsx
+++ b/packages/instant/src/components/simulated_progress_bar.tsx
@@ -2,7 +2,7 @@ import * as _ from 'lodash';
import * as React from 'react';
import { PROGRESS_STALL_AT_PERCENTAGE, PROGRESS_TICK_INTERVAL_MS } from '../constants';
-import { ColorOption } from '../style/theme';
+import { ColorOption, styled } from '../style/theme';
import { timeUtil } from '../util/time';
import { Container } from './ui/container';
@@ -109,11 +109,12 @@ export class SimulatedProgressBar extends React.Component<SimulatedProgressBarPr
</Flex>
</Container>
<Container width="100%" backgroundColor={ColorOption.lightGrey} borderRadius="6px">
- <Container
- width={`${this.state.percentageDone}%`}
+ <InnerProgressBarElement
+ percentageDone={this.state.percentageDone}
backgroundColor={ColorOption.primaryColor}
borderRadius="6px"
height="6px"
+ transitionTimeMs={200}
/>
</Container>
</Container>
@@ -172,3 +173,22 @@ export class SimulatedProgressBar extends React.Component<SimulatedProgressBarPr
return percentageDone;
}
}
+
+interface InnerProgressBarElementProps {
+ percentageDone: number;
+ backgroundColor: ColorOption;
+ borderRadius: string;
+ height: string;
+ transitionTimeMs: number;
+}
+
+export const InnerProgressBarElement =
+ styled.div <
+ InnerProgressBarElementProps >
+ `
+ width: ${props => props.percentageDone}%;
+ background-color: ${props => props.theme[props.backgroundColor]};
+ border-radius: ${props => props.borderRadius};
+ height: ${props => props.height};
+ transition: width ${props => props.transitionTimeMs}ms ease-in-out;
+ `;
diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts
index 12e592ae8..3b320ed36 100644
--- a/packages/instant/src/constants.ts
+++ b/packages/instant/src/constants.ts
@@ -8,5 +8,5 @@ export const DEFAULT_GAS_PRICE = GWEI_IN_WEI.mul(6);
export const DEFAULT_ESTIMATED_TRANSACTION_TIME_MS = 2 * 60 * 1000; // 2 minutes
export const ETH_GAS_STATION_API_BASE_URL = 'https://ethgasstation.info';
export const COINBASE_API_BASE_URL = 'https://api.coinbase.com/v2';
-export const PROGRESS_TICK_INTERVAL_MS = 100;
+export const PROGRESS_TICK_INTERVAL_MS = 250;
export const PROGRESS_STALL_AT_PERCENTAGE = 95;