chore: add share buttons to appeals

README.md

@@ -43,6 +43,7 @@
 - chore: implement voting history module ([a79cd53](https://github.com/Proof-Of-Humanity/proof-of-humanity-web/commit/a79cd53))
 - chore: implement vouching ([9ca0ff4](https://github.com/Proof-Of-Humanity/proof-of-humanity-web/commit/9ca0ff4))
 - chore: improve accounts modal ([1b88466](https://github.com/Proof-Of-Humanity/proof-of-humanity-web/commit/1b88466))
+- chore: improve appeal cards ([02cedba](https://github.com/Proof-Of-Humanity/proof-of-humanity-web/commit/02cedba))
 - chore: improve button states ([35d8527](https://github.com/Proof-Of-Humanity/proof-of-humanity-web/commit/35d8527))
 - chore: improve buttons and button API ([e5bc20d](https://github.com/Proof-Of-Humanity/proof-of-humanity-web/commit/e5bc20d))
 - chore: improve ETH network API ([a497b47](https://github.com/Proof-Of-Humanity/proof-of-humanity-web/commit/a497b47))

components/appeal.js

@@ -1,5 +1,13 @@
 import { useMemo } from "react";
-import { Box } from "theme-ui";
+import {
+  RedditIcon,
+  RedditShareButton,
+  TelegramIcon,
+  TelegramShareButton,
+  TwitterIcon,
+  TwitterShareButton,
+} from "react-share";
+import { Box, Flex } from "theme-ui";
 
 import Alert from "./alert";
 import Card from "./card";
@@ -181,14 +189,15 @@ function AppealTabPanel({
     ])
   );
   currentRuling = currentRuling?.toNumber();
+  const shareTitle = `Crowdfunding Appeal Fees for ${party1} vs ${party2}.`;
   return (
     <>
       <Text sx={{ marginBottom: 2 }}>
         Help fund a side’s appeal fees to win part of the other side’s deposit
         when your side ultimately wins. If only one side manages to fund their
         fees, it automatically wins.
       </Text>
-      <Grid gap={2} columns={2}>
+      <Grid sx={{ marginBottom: 3 }} gap={2} columns={2}>
         <AppealTabPanelCard
           address={party1}
           {...[undecided, winner, loser][currentRuling]}
@@ -206,6 +215,22 @@ function AppealTabPanel({
           args={[...args, id, 2]}
         />
       </Grid>
+      <Flex sx={{ justifyContent: "center" }}>
+        <RedditShareButton url={location.href} title={shareTitle}>
+          <RedditIcon size={32} />
+        </RedditShareButton>
+        <TelegramShareButton url={location.href} title={shareTitle}>
+          <TelegramIcon size={32} />
+        </TelegramShareButton>
+        <TwitterShareButton
+          url={location.href}
+          title={shareTitle}
+          via="Kleros_io"
+          hashtags={["kleros", "appeals"]}
+        >
+          <TwitterIcon size={32} />
+        </TwitterShareButton>
+      </Flex>
     </>
   );
 }

package.json

@@ -61,6 +61,7 @@
     "react-relay-network-modern": "^4.7.4",
     "react-ripples": "^2.2.1",
     "react-scroll-to": "^3.0.0-beta.6",
+    "react-share": "^4.3.0",
     "react-spinners": "^0.9.0",
     "react-storage-hooks": "^4.0.1",
     "react-tabs": "^3.1.1",