better mobile support

fundingrate · Apr 4, 2020 · 37fdcda · 37fdcda
1 parent d1dc8ab
commit 37fdcda
Show file tree

Hide file tree

Showing 14 changed files with 180 additions and 98 deletions.
diff --git a/src/components/Banners.js b/src/components/Banners.js
@@ -3,7 +3,7 @@ import { Container, Flex, Box, Text, Banner } from "../primitives";
 // import banner01 from "../assets/images/banner01.png";
 import Utils from "./Utils";
 
-const Welcome = props => {
+const Template = props => {
   return (
     <Banner src={'https://cdn.chips.gg/images/phone_stocks01.jpeg'} {...props} minHeight={['300px', '400px', '500px']}>
       <Flex
@@ -13,14 +13,22 @@ const Welcome = props => {
         justifyContent="center"
         ml={[2, "20%"]}
       >
-        <Welcome.Text />
-        <Welcome.Summary />
         {props.children}
       </Flex>
     </Banner>
   );
 };
 
+const Welcome = props => {
+  return (
+    <Template>
+      <Welcome.Text />
+      <Welcome.Summary />
+      {props.children}
+    </Template>
+  );
+};
+
 Welcome.Text = () => {
   return (
     <Flex mb={2}>

diff --git a/src/components/Buttons.js b/src/components/Buttons.js
@@ -256,6 +256,46 @@ Button.setAutoCloseDisabled = ({ providerid, ...p }) => {
   );
 };
 
+Button.Archive = ({ providerid, ...p }) => {
+  const [state, dispatch] = useWiring(["me"]);
+  const [loading, setLoading] = useState(false);
+
+  const onClick = async s => {
+    setLoading(true);
+
+    await state.actions.provider("archive", {
+      providerid
+    });
+    setLoading(false);
+  };
+
+  return (
+    <Button {...p} disabled={loading} onClick={onClick} type="warning">
+      {loading ? <Utils.Loading /> : "Archive"}
+    </Button>
+  );
+};
+
+Button.Restore = ({ providerid, ...p }) => {
+  const [state, dispatch] = useWiring(["me"]);
+  const [loading, setLoading] = useState(false);
+
+  const onClick = async s => {
+    setLoading(true);
+
+    await state.actions.provider("restore", {
+      providerid
+    });
+    setLoading(false);
+  };
+
+  return (
+    <Button {...p} disabled={loading} onClick={onClick} type="success">
+      {loading ? <Utils.Loading /> : "Restore"}
+    </Button>
+  );
+};
+
 Button.SetPublic = ({ isPublic, id }) => {
   return isPublic ? (
     <Button.setProviderPrivate providerid={id} />

diff --git a/src/components/Graphs.js b/src/components/Graphs.js
@@ -244,9 +244,8 @@ const LineGraph = ({ listTrades = async x => x }) => {
     }}
   >
     {props => {
-      if(loading) return <Utils.LoadingPage />
       return <Box height="300px" width={1}>
-        <RenderLineGraph data={state} />
+        { loading ? <Utils.LoadingPage /> : <RenderLineGraph data={state} /> }
       </Box>
     }}
   </VizSensor>

diff --git a/src/components/Inputs.js b/src/components/Inputs.js
@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from "react";
-import { Button, Input } from "../primitives";
+import { Button, Input, Box } from "../primitives";
 import copy from "clipboard-copy";
 import Utils from "./Utils";
 import Buttons from "./Buttons.js";
 
-Input.Copy = ({ value, ...p }) => {
+Input.Copy = ({ children, value, ...p }) => {
   const [state, setState] = useState(false);
 
   const CopyValue = p => {
@@ -15,7 +15,8 @@ Input.Copy = ({ value, ...p }) => {
 
   return (
     <Input {...p} disabled value={value}>
-      <Button onClick={e => CopyValue(value)} type="simple">
+      {children && <Box mr={2}>{children}</Box> }
+      <Button onClick={e => CopyValue(value)} type="success">
         {state ? "Copied!" : "Copy"}
       </Button>
     </Input>

diff --git a/src/pages/Authenticate.js b/src/pages/Authenticate.js
@@ -215,6 +215,7 @@ export default p => {
 const r = p => {
   const [state, dispatch] = useWiring(['userid'])
 
+
   return (
     <Register
       {...p}
@@ -242,23 +243,25 @@ const Home = p => {
   return (
     <Flex.Row justifyContent="center" height="100%" width={1}>
       <Button
-        as={Flex}
+        fontSize={4}
+        as={Flex.Row}
         alignItems="center"
         type="card"
         onClick={e => setPage('/authenticate/login')}
       >
-        <Assets.Icons.Login mr={3} /> Login
+        <Assets.Icons.Login mr={3} size={32} /> Login
       </Button>
-      <Text mx={2} color="subtext" fontSize={1}>
+      <Text mx={4} color="subtext" fontSize={1}>
         OR
       </Text>
       <Button
-        as={Flex}
+        fontSize={4}
+        as={Flex.Row}
         alignItems="center"
         type="card"
         onClick={e => setPage('/authenticate/signup')}
       >
-        <Assets.Icons.Signup mr={3} /> Signup
+        <Assets.Icons.Signup mr={3} size={32} /> Signup
       </Button>
     </Flex.Row>
   )

diff --git a/src/pages/Home.js b/src/pages/Home.js
@@ -30,7 +30,7 @@ export default p => {
       <Banners.Welcome/>
 
       <Box>
-      <Flex.Row justifyContent="space-between" mx={[4, 6]} my={5} flexWrap={['wrap', 'nowrap']}>
+        <Flex.Row justifyContent="space-between" m={'8%'} flexWrap={['wrap', 'nowrap']}>
         <Utils.RenderObject.Prop as={Card} width={[1,1,1, 'auto']} fontSize={[2,4]} label="Alerts Processed:" value={123456789} type="number" />
         <Utils.RenderObject.Prop as={Card} width={[1,1,1, 'auto']} fontSize={[2,4]} label="Trades Executed:" value={123456789} type="number" />
         <Utils.RenderObject.Prop as={Card} width={[1,1,1, 'auto']} fontSize={[2,4]} label="Realized Profit:" value={123456789} type="money" color={'lime'} />
@@ -39,14 +39,13 @@ export default p => {
 
 
       <Box 
-        mx={[4,6,8]} 
-        my={[4,8]}
+        m={'12%'}
       >
         <Text.Heading color="primary" fontSize={[6,8]}>Automated Trading</Text.Heading>
         <Text color="subtext" wrap fontSize={[3,5]}>Automate trading at FTX, BitMEX, Deribit, Bybit, Bitfinex & Coinbase Pro from your alerts.</Text>
         <Divider my={2}/>
 
-        <Flex.Row flexWrap="wrap" my={4}>
+        <Flex.Row flexWrap="wrap" my='5%'>
           <Box width={[1,1,1, 1/2]}>
             <Box p={[3, 4]}>
               <Text.Heading fontSize={[3,4]}>Historical Timeseries Data</Text.Heading>

diff --git a/src/pages/Marketplace.js b/src/pages/Marketplace.js
@@ -27,34 +27,39 @@ export default p => {
       </Flex.Row>
       <Divider m={2} bg="card" />
 
-      <Flex.Column alignItems="center" width={1}>
+      <Flex.Row justifyContent="center" flexWrap="wrap" alignItems="center" width={1}>
         {list.length > 0 ? (
           list
+            .filter(p => p.stats.totalTrades > 5)
             .sort((a, b) => a.stats.profit < b.stats.profit ? 1 : -1)
+            //.sort((a, b) => (a.stats.totalTrades < b.stats.totalTrades ? 1 : -1))
             .map(p => {
               return (
                 <Card
                   as={Flex.Column}
                   key={p.id}
-                  my={4}
-                  p={0}
-                  width={[1,1,1, 2 / 3]}
+                  m={'1%'}
+                  //p={0}
+                  //flex={1}
+                  width={[1,1,1,1/3]}
+                  maxWidth={'640px'}
+                  minWidth={'400px'}
                 >
                   <ProviderHeading
                     title={p.name}
                     subtitle={p.id}
                     created={p.created}
                     user={p.user}
                   />
+                  <Box m={2} />
                   <TradeHistory providerid={p.id}/>
-                  <Flex.Column m={3}>
-                    <RenderStats stats={p.stats} mt={0} />
-                    <Box m={1} />
-                    <Flex.Row flexWrap="wrap">
+                  <Box my={'2%'} />
+                  <Flex.Column>
+                    <RenderStats stats={p.stats} />
+                    <Flex.Row>
                       <Text fontSize={3} my={1}>
                         Running Since:
                       </Text>
-                      <Box mx={1} />
                       <Text color="subtext">
                         {Utils.renderProp(p.created, "time")}
                       </Text>
@@ -68,7 +73,7 @@ export default p => {
             No providers, Why not create one?
           </Text.Heading>
         )}
-      </Flex.Column>
+      </Flex.Row>
     </Box>
   );
 };
@@ -118,10 +123,10 @@ const RenderStats = ({ stats, ...p }) => {
 const ProviderHeading = ({ title, subtitle, user }) => {
   return (
     <Flex.Row
-      p={2}
-      bg="backing"
-      borderBottom="1px solid rgba(0, 0, 0, 0.5)"
-      boxShadow="0px 0px 4px 0px rgba(0, 0, 0, 0.2)"
+      //p={2}
+      //bg="backing"
+      //borderBottom="1px solid rgba(0, 0, 0, 0.5)"
+      //boxShadow="0px 0px 4px 0px rgba(0, 0, 0, 0.2)"
     >
       <Text.Heading mx={2} fontSize={[2, 6]}>{title}</Text.Heading>
       <Box mx={'auto'} />
@@ -141,14 +146,17 @@ const ProviderHeading = ({ title, subtitle, user }) => {
 
 const TradeHistory = React.memo(({ providerid }) => {
   const [state, dispatch] = useWiring(["myProviders", "providerAlerts"]);
+  // TODO: should be using realtime state here...
 
   return (
+    <Well>
     <Graphs.LineGraph
       listTrades={e =>
           state.actions.provider("listTrades", {
           providerid
         })
       }
     />
+    </Well>
   );
 });
diff --git a/src/pages/Profile.js b/src/pages/Profile.js
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 import {
+  Well,
   Card,
   Button,
   Flex,
@@ -48,29 +49,22 @@ export default ({ actions, location, token, history }) => {
       <Card as={Flex.Column}  my={4} mx="auto">
         <Flex my={2} flexDirection="column">
           <Flex.Row flexWrap="wrap">
-            <Text.Heading fontSize={[3,4]}>Available Tokens</Text.Heading>
+            <Text.Heading fontSize={[3,4]}>Available Tokens ({availableTokens.length})</Text.Heading>
             <Box mx="auto" />
             <Button.GenerateToken />
           </Flex.Row>
 
-          <Box my={2} />
+          <Box my={'1%'} />
           <Divider bg="primary" />
         </Flex>
         {!Object.values(gState.myTokens).length ? (
           <Utils.Loading m={2} />
         ) : availableTokens.length ? (
           availableTokens.map(t => {
             return (
-              <Flex.Row
-                key={t.id}
-                // flexWrap="wrap"
-                my={2}
-                justifyContent="center"
-              >
-                <Button.DeleteToken tokenid={t.id} />
-                <Box m={2} />
-                <Inputs.Copy label="ID: " value={t.id} width={1} />
-              </Flex.Row>
+                <Inputs.Copy label="ID: " value={t.id} width={1} my={'1%'}>
+                  <Button.DeleteToken tokenid={t.id} ml={2} />
+                </Inputs.Copy>
             );
           })
         ) : (