header & fast btc fixes

DistributedCollective · Nov 6, 2020 · 8b77f0a · 8b77f0a
1 parent 3566cf0
commit 8b77f0a
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 21 deletions.
diff --git a/src/app/components/Header/index.tsx b/src/app/components/Header/index.tsx
@@ -51,11 +51,11 @@ export function Header() {
       <header>
         <Container className="d-flex justify-content-between align-items-center mt-4 mb-5">
           <div className="d-xl-none">
-            <StyledMenuButton>
+            <button className="hamburger" type="button">
               <Popover content={<Menu>{dropDownMenu}</Menu>}>
                 <Icon icon="menu" />
               </Popover>
-            </StyledMenuButton>
+            </button>
           </div>
           <div className="mr-3">
             <Link to="/">
@@ -100,15 +100,3 @@ const StyledLogo = styled.img.attrs(_ => ({
   margin: 0 15px 0 0;
   `}
 `;
-
-const StyledMenuButton = styled.button.attrs(_ => ({
-  type: 'button',
-}))`
-  width: 48px;
-  height: 48px;
-  text-align: left;
-  padding-left: 0;
-  color: var(--white);
-  background: none;
-  border: none;
-`;
diff --git a/src/app/containers/FastBtcForm/index.tsx b/src/app/containers/FastBtcForm/index.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React, { useEffect } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector, useDispatch } from 'react-redux';
 import QRCode from 'qrcode.react';
@@ -19,7 +19,7 @@ import { selectFastBtcForm } from './selectors';
 import { fastBtcFormSaga } from './saga';
 import { FieldGroup } from '../../components/FieldGroup';
 import { InputField } from '../../components/InputField';
-import { useAccount } from '../../hooks/useAccount';
+import { useAccount, useIsConnected } from '../../hooks/useAccount';
 import { DummyField } from '../../components/DummyField';
 import { SkeletonRow } from '../../components/Skeleton/SkeletonRow';
 import { weiTo4, weiToFixed } from '../../../utils/blockchain/math-helpers';
@@ -34,6 +34,7 @@ export function FastBtcForm(props: Props) {
   useInjectReducer({ key: sliceKey, reducer: reducer });
   useInjectSaga({ key: sliceKey, saga: fastBtcFormSaga });
 
+  const isConnected = useIsConnected();
   const state = useSelector(selectFastBtcForm);
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const dispatch = useDispatch();
@@ -44,9 +45,18 @@ export function FastBtcForm(props: Props) {
   const address = useAccount();
 
   useEffect(() => {
-    dispatch(actions.changeReceiverAddress(address));
+    if (address && address.length) {
+      dispatch(actions.changeReceiverAddress(address));
+    }
   }, [address, dispatch]);
 
+  const handleInputChange = useCallback(
+    e => {
+      dispatch(actions.changeReceiverAddress(e.currentTarget.value));
+    },
+    [dispatch],
+  );
+
   return (
     <>
       <div className="row">
@@ -55,11 +65,10 @@ export function FastBtcForm(props: Props) {
           <div className="sovryn-border p-3">
             <FieldGroup label={'Your RSK Wallet'}>
               <InputField
+                placeholder="Your RSK Wallet"
                 invalid={!state.isReceiverAddressValid}
                 value={state.receiverAddress}
-                onChange={e =>
-                  dispatch(actions.changeReceiverAddress(e.currentTarget.value))
-                }
+                onChange={handleInputChange}
                 rightElement={
                   state.isReceiverAddressValidating && (
                     <>
@@ -70,6 +79,13 @@ export function FastBtcForm(props: Props) {
               />
             </FieldGroup>
 
+            {!isConnected && (
+              <p>
+                Connect to your wallet or just enter wallet address above
+                yourself.
+              </p>
+            )}
+
             {state.depositError && (
               <div className="alert alert-warning">{state.depositError}</div>
             )}
@@ -150,7 +166,15 @@ export function FastBtcForm(props: Props) {
             {!state.history.length && !state.isHistoryLoading && (
               <p className="mb-0">{t(s.history.empty)}</p>
             )}
-            {state.isHistoryLoading && !state.history.length && <SkeletonRow />}
+            {state.isHistoryLoading && !state.history.length && (
+              <SkeletonRow
+                loadingText={
+                  !state.receiverAddress || !state.isReceiverAddressValid
+                    ? 'Enter your RSK wallet address to see history.'
+                    : 'Loading...'
+                }
+              />
+            )}
             {state.history.map(item => (
               <div
                 className="d-flex flex-row justify-content-between w-100"

diff --git a/src/styles/sass/new-design.scss b/src/styles/sass/new-design.scss
@@ -244,3 +244,16 @@ input {
   @extend .sovryn-border;
   @extend .font-family-work-sans;
 }
+
+
+header {
+  .hamburger {
+    width: 48px;
+    height: 48px;
+    text-align: left;
+    padding-left: 0;
+    color: var(--white);
+    background: none;
+    border: none;
+  }
+}