Merge pull request #90 from enabledao/responsive-transaction-buttons

Responsive transaction buttons
enabledao · Sep 28, 2019 · 0ff2a3e · 0ff2a3e
2 parents ca83844 + 4e05fbb
commit 0ff2a3e
Show file tree

Hide file tree

Showing 8 changed files with 88 additions and 3 deletions.
diff --git a/src/components/lib/index.tsx b/src/components/lib/index.tsx
@@ -6,6 +6,7 @@ import Button from "./button";
 import Checkbox from "./checkbox";
 import TextField from "./textfield";
 import Progress from "./progress";
+import Spinner from "./spinner";
 import ShowModal from "./modal";
 import { Row, Col } from "./grid";
 import FieldError from "./feedback/fieldError";
@@ -16,6 +17,7 @@ export {
   Badge,
   Checkbox,
   Progress,
+  Spinner,
   Row,
   Col,
   Button,

diff --git a/src/components/lib/spinner/index.tsx b/src/components/lib/spinner/index.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { StyledSpinner } from "./styled";
+
+const Spinner: React.FC<{ size?: string, color?: string }> = ({ size, color }) => (
+    <span style={{margin: "0px 4px"}}>
+      <StyledSpinner viewBox={`0 0 ${size} ${size}`} size={size} color={color}>
+        <circle
+          className="path"
+          cx={Math.floor(+size * .5)}
+          cy={Math.floor(+size * .5)}
+          r={Math.floor(+size * .4)}
+          fill="none"
+          strokeWidth="2"
+        />
+      </StyledSpinner>
+    </span>
+  );
+
+Spinner.defaultProps ={
+    size: "50",
+    color: "#ffffff"
+};
+
+export default Spinner;
diff --git a/src/components/lib/spinner/styled.tsx b/src/components/lib/spinner/styled.tsx
@@ -0,0 +1,36 @@
+import styled from "styled-components";
+
+const StyledSpinner = styled.svg<{ size: string, color: string }>`
+  animation: rotate 1s linear infinite;
+  margin: 0px;
+  width: ${props => props.size}px;
+  height: ${props => props.size}px;
+
+  & .path {
+    stroke: ${props => props.color};
+    stroke-linecap: round;
+    animation: dash 1.7s ease-in-out infinite;
+  }
+
+  @keyframes rotate {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes dash {
+    0% {
+      stroke-dasharray: 1, 150;
+      stroke-dashoffset: 0;
+    }
+    50% {
+      stroke-dasharray: 90, 150;
+      stroke-dashoffset: -35;
+    }
+    100% {
+      stroke-dasharray: 90, 150;
+      stroke-dashoffset: -124;
+    }
+  }
+`;
+
+export { StyledSpinner };
diff --git a/src/components/lib/youtube/index.tsx b/src/components/lib/youtube/index.tsx
@@ -7,6 +7,7 @@ import React from "react";
 export default ({ youtubeId }) => {
     return (
         <iframe
+            title={youtubeId}
             style={{
                 position: "absolute",
                 top: 0,

diff --git a/src/components/pages/faucet/component.tsx b/src/components/pages/faucet/component.tsx
@@ -4,7 +4,7 @@ import walletIcon from '../../../images/icons/wallet.svg'
 import { RouteComponentProps, withRouter } from 'react-router-dom'
 import { Container } from '../../../styles/bases'
 import { Margin, Padding } from '../../../styles/utils'
-import { Row, Col, Button } from '../../lib'
+import { Row, Col, Button, Spinner } from '../../lib'
 import { FaucetActionMobile, FaucetBox, FaucetWrapper } from './styled'
 import contractAddresses from '../../../config/ines.fund.js'
 import { prepBigNumber } from '../../../utils/web3Utils'
@@ -164,6 +164,9 @@ class Faucet extends React.Component<FaucetProps, FaucetState> {
                                                         onClick={this.onRequest}
                                                     >
                                                         Request
+                                                        {transacting &&
+                                                            <Spinner size="16"/>
+                                                        }
                                                     </Button>
                                                 </Col>
                                             </Row>
@@ -175,6 +178,9 @@ class Faucet extends React.Component<FaucetProps, FaucetState> {
                                                 onClick={this.onRequest}
                                             >
                                                 Request
+                                                {transacting &&
+                                                    <Spinner size="16"/>
+                                                }
                                             </Button>
                                         </FaucetActionMobile>
                                     </Col>

diff --git a/src/components/pages/loanOffer/loanAmount/index.tsx b/src/components/pages/loanOffer/loanAmount/index.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import { Form, Field } from 'react-final-form'
 import { Container } from '../../../../styles/bases'
 import { Margin, Padding } from '../../../../styles/utils'
+import { Spinner } from '../../../lib';
 import { RouteComponentProps, withRouter } from 'react-router-dom'
 import { AppPath } from '../../../../constant/appPath'
 import {
@@ -437,6 +438,9 @@ class LoanAmount extends React.Component<LoanAmountProps, LoanAmountState> {
                                                         disabled={transacting || !this.state.crowdloanInstance}
                                                     >
                                                         Submit
+                                                        {transacting &&
+                                                            <Spinner size="16"/>
+                                                        }
                                                     </Button>
                                                 </Margin>
                                             </Col>

diff --git a/src/components/pages/myLoan/borrowerActions/index.tsx b/src/components/pages/myLoan/borrowerActions/index.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { Margin } from "../../../../styles/utils";
-import { Row, Col, Button } from "../../../lib";
+import { Row, Col, Button, Spinner } from "../../../lib";
 import { BorrowerActionBox } from "./styled";
 import{ LoanStatuses } from "../../../../config/constants";
 
@@ -28,6 +28,9 @@ const BorrowerAction: any = ({
             <Col lg={6} md={12}>
               <Button color="green" onClick={onstartcrowdfund} disabled={transacting}>
                 Start Crowdfund
+                {transacting &&
+                    <Spinner size="16"/>
+                }
               </Button>
             </Col>
           </Row>
@@ -36,6 +39,9 @@ const BorrowerAction: any = ({
           <Col lg={6} md={12}>
             <Button color="green" onClick={onborrowerwithdraw} disabled={transacting}>
               Withdraw Principal
+              {transacting &&
+                  <Spinner size="16"/>
+              }
             </Button>
           </Col>
         </Row>
@@ -44,6 +50,9 @@ const BorrowerAction: any = ({
             <Col lg={6} md={12}>
               <Button color="green" onClick={onrepay} disabled={transacting}>
                 Repay
+                {transacting &&
+                    <Spinner size="16"/>
+                }
               </Button>
             </Col>
           </Row>

diff --git a/src/components/pages/myLoan/withdrawals/index.tsx b/src/components/pages/myLoan/withdrawals/index.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { Margin, Padding } from "../../../../styles/utils";
-import { Row, Col, Button } from "../../../lib";
+import { Row, Col, Button, Spinner } from "../../../lib";
 import { WithdrawalBox } from "./styled";
 import FileIcon from "../../../../images/fileIcon.png";
 import {
@@ -33,6 +33,9 @@ const Withdrawal: any = ({
           <Col lg={6} md={12}>
             <Button color="green" onClick={onWithdraw} disabled={transacting}>
               Withdraw
+              {transacting &&
+                  <Spinner size="16"/>
+              }
             </Button>
           </Col>
         </Row>