social links fixed

Front/src/coinDetails/coinChart.tsx

@@ -123,7 +123,7 @@ const CoinChart = (props: ICoinChartProps): JSX.Element => {
     >
       {
         data && <>
-          <Grid container justifyContent="flex-start" style={{ marginTop: 0 }}>
+          <Grid container justifyContent="flex-start" style={{ marginBottom: 20 }}>
             <ButtonGroup variant="contained" aria-label="outlined primary button group">
               {
                 durationOptions.map(item => <Button
@@ -135,8 +135,7 @@ const CoinChart = (props: ICoinChartProps): JSX.Element => {
               }
             </ButtonGroup>
           </Grid>
-          <div id="chart" className="chart-container" style={{ position: "relative", height: "auto", width: "80vw" }}>
-            <Line
+          <div id="chart" className="chart-container" style={{ position: "relative", height: "auto" }}>            <Line
               options={chartOptions}
               redraw={redraw}
               updateMode="resize"

Front/src/coinDetails/coinInfo.tsx

@@ -23,15 +23,12 @@ const CoinInfo = (props: ICoinInfoProps): JSX.Element => {
         <Grid item xs={12}>
           Rank: #{data.market_cap_rank}
         </Grid>
-
         <Grid item xs={12} style={{ marginTop: 20 }}>
           Current price: ${data.tickers[0].converted_last.usd}
         </Grid>
-
         <Grid item xs={12} style={{ marginTop: 20 }}>
           Homepage: <a target="_blank" href={data.links.homepage}>{data.links.homepage}</a>
         </Grid>
-
         <Grid item style={{ marginTop: 20 }}>
           Votes: {data.sentiment_votes_up_percentage}%
           <ThumbUpIcon style={{ color: '#4eaf0a', fontSize: 16, margin: '0 5' }} />
@@ -39,8 +36,7 @@ const CoinInfo = (props: ICoinInfoProps): JSX.Element => {
           {data.sentiment_votes_down_percentage}%
         </Grid>
       </Grid>
-
-      {/* <Grid container justifyContent="flex-start" style={{ marginTop: 30 }}>
+      <Grid container justifyContent="flex-start" style={{ marginTop: 30, marginBottom: 30 }}>
         {data.links.subreddit_url &&
           <Button style={{ marginRight: 10 }} variant="outlined" startIcon={<RedditIcon />} href={data.links.subreddit_url}>
             Reddit
@@ -51,12 +47,21 @@ const CoinInfo = (props: ICoinInfoProps): JSX.Element => {
             Twitter
           </Button>
         }
-        {data.links.chat_url &&
-          <Button style={{ marginRight: 10 }} variant="outlined" startIcon={<LinkIcon />} href={data.links.chat_url}>
+        {
+          Object.entries(data.links.chat_url).map(
+            ([key, value]) => Boolean(value)
+                && <Button
+                  key={key}
+                  style={{ marginRight: 10 }}
+                  variant="outlined"
+                  href={String(value)}
+                  startIcon={<LinkIcon />}
+                  >
                     Discord
                   </Button>
+          )
         }
-      </Grid> */}
+      </Grid>
     </div>
   )
 }

README.md

@@ -5,6 +5,43 @@ tech stack
 - Redux Toolkit
 - Material UI
 
-## Back
+![Screenshot](./screenshot.png)
 
-## Front
+
+## What's inside
+
+- **Frontend:** Typescript using React, Redux-Toolkit, Bootstrap, react-financial-charts
+- **Backend:** Javascript using Express
+
+
+## Download
+
+```bash
+git clone https://github.com/vaidis/Crypto-Assets-Monitor.git
+```
+
+## Install
+
+```bash
+cd Crypto-Assets-Monitor
+
+# Back-end
+cd Back
+npm install
+
+# Front-end
+cd Front
+npm install
+```
+
+## Run
+
+```bash
+# Back-end
+cd Back
+npm start
+
+# Front-end
+cd Front
+npm start
+```