aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-07-21 00:16:55 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-07-21 00:16:55 +0800
commitf27084ced46d88164b526ea5f281637ca87d0583 (patch)
treed0a6c9741e1c076c9705352bf749ddae17e9b0e2 /packages/website/ts
parentcdcf624e9e6fe671611b239f903c2f2cb3097e7c (diff)
downloaddexon-0x-contracts-f27084ced46d88164b526ea5f281637ca87d0583.tar.gz
dexon-0x-contracts-f27084ced46d88164b526ea5f281637ca87d0583.tar.zst
dexon-0x-contracts-f27084ced46d88164b526ea5f281637ca87d0583.zip
Add loading state
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/components/inputs/allowance_state_toggle.tsx2
-rw-r--r--packages/website/ts/components/ui/allowance_state_view.tsx3
-rw-r--r--packages/website/ts/components/wallet/wallet.tsx2
3 files changed, 4 insertions, 3 deletions
diff --git a/packages/website/ts/components/inputs/allowance_state_toggle.tsx b/packages/website/ts/components/inputs/allowance_state_toggle.tsx
index 7e8628e64..4a9c99ca7 100644
--- a/packages/website/ts/components/inputs/allowance_state_toggle.tsx
+++ b/packages/website/ts/components/inputs/allowance_state_toggle.tsx
@@ -6,5 +6,5 @@ export interface AllowanceStateToggleProps {}
const flip = () => Math.random() < 0.5;
export const AllowanceStateToggle: React.StatelessComponent<AllowanceStateToggleProps> = () => (
- <AllowanceStateView allowanceState={flip() ? 'locked' : 'unlocked'} />
+ <AllowanceStateView allowanceState={flip() ? 'locked' : 'loading'} />
);
diff --git a/packages/website/ts/components/ui/allowance_state_view.tsx b/packages/website/ts/components/ui/allowance_state_view.tsx
index 55ad3a889..fce06c664 100644
--- a/packages/website/ts/components/ui/allowance_state_view.tsx
+++ b/packages/website/ts/components/ui/allowance_state_view.tsx
@@ -1,4 +1,5 @@
import { colors } from '@0xproject/react-shared';
+import CircularProgress from 'material-ui/CircularProgress';
import * as React from 'react';
import { styled } from 'ts/style/theme';
@@ -15,7 +16,7 @@ export const AllowanceStateView: React.StatelessComponent<AllowanceStateViewProp
case 'unlocked':
return renderCheck();
case 'loading':
- return <div>'...'</div>;
+ return <CircularProgress size={15} thickness={2} />;
default:
return null;
}
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 84c091b5c..f5e054793 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -398,7 +398,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
// if we don't have a toggle, we still want some space to the right of the "wrap" button so that it aligns with
// the "unwrap" button in the row below
const toggle = (
- <Container width={NO_ALLOWANCE_TOGGLE_SPACE_WIDTH}>
+ <Container className="flex justify-center" width={NO_ALLOWANCE_TOGGLE_SPACE_WIDTH}>
{shouldShowToggle && this._renderAllowanceToggle(config.allowanceToggleConfig)}
</Container>
);