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}>
-            Discord
-          </Button>
+        {
+          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>
   )
 }