Fix/footer explorer link

package.json

@@ -23,7 +23,6 @@
     "@kleros/erc-792": "^4.0.1",
     "@kleros/gtcr-encoder": "^1.6.1",
     "@kleros/kleros": "^0.1.5",
-    "@kleros/react-components": "^1.0.0",
     "@kleros/tcr": "^2.0.0",
     "@loadable/component": "^5.10.1",
     "@walletconnect/qrcode-modal": "^1.0.0-beta.35",

src/bootstrap/app.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { BrowserRouter } from 'react-router-dom'
 import { Helmet } from 'react-helmet'
-import { Footer } from '@kleros/react-components'
+import Footer from '../components/footer.tsx'
 import styled from 'styled-components/macro'
 import Web3Provider from 'web3-react'
 import { Layout } from 'antd'
@@ -93,7 +93,7 @@ const App = () => {
               </Layout>
             </StyledLayout>
             <FooterWrapper>
-              <Footer appName="Kleros · Curate" />
+              <Footer />
             </FooterWrapper>
             <WalletModal connectors={connectors} />
             <WelcomeModal />

src/components/contract-explorer-url.tsx

@@ -0,0 +1,72 @@
+import React from 'react'
+import styled from 'styled-components/macro'
+import { getAddressPage } from 'utils/network-utils'
+
+const StyledIcon = styled.svg`
+  height: 1.2rem;
+  width: auto;
+  vertical-align: text-bottom;
+  margin-left: 0.3rem;
+
+  .main-stop {
+    stop-color: #863fe5d9;
+  }
+  .alt-stop {
+    stop-color: #4d00b4d9;
+  }
+  path {
+    fill: url(#gradient);
+  }
+`
+
+const StyledLink = styled.a`
+  margin-left: 1rem;
+  display: flex;
+  align-items: center;
+`
+
+const ContractExplorerUrl: React.FC<{
+  networkId: number
+  contractAddress: string
+}> = ({ networkId, contractAddress }) => {
+  const url = `${getAddressPage({
+    networkId,
+    address: contractAddress
+  })}#code`
+  return (
+    <StyledLink
+      href={url}
+      style={{ textDecoration: 'underline', color: '#4d00b473' }}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <StyledIcon
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 293.775 293.667"
+      >
+        <linearGradient id="gradient">
+          <stop className="main-stop" offset="0%" />
+          <stop className="alt-stop" offset="100%" />
+        </linearGradient>
+        <g
+          id="etherscan-logo-light-circle"
+          transform="translate(-219.378 -213.333)"
+        >
+          <path
+            id="Path_1"
+            data-name="Path 1"
+            d="M280.433,353.152A12.45,12.45,0,0,1,292.941,340.7l20.737.068a12.467,12.467,0,0,1,12.467,12.467v78.414c2.336-.692,5.332-1.43,8.614-2.2a10.389,10.389,0,0,0,8.009-10.11V322.073a12.469,12.469,0,0,1,12.467-12.47h20.779a12.47,12.47,0,0,1,12.467,12.47v90.276s5.2-2.106,10.269-4.245a10.408,10.408,0,0,0,6.353-9.577V290.9a12.466,12.466,0,0,1,12.465-12.467h20.779A12.468,12.468,0,0,1,450.815,290.9v88.625c18.014-13.055,36.271-28.758,50.759-47.639a20.926,20.926,0,0,0,3.185-19.537,146.6,146.6,0,0,0-136.644-99.006c-81.439-1.094-148.744,65.385-148.736,146.834a146.371,146.371,0,0,0,19.5,73.45,18.56,18.56,0,0,0,17.707,9.173c3.931-.346,8.825-.835,14.643-1.518a10.383,10.383,0,0,0,9.209-10.306V353.152"
+            transform="translate(0 0)"
+          />
+          <path
+            id="Path_2"
+            data-name="Path 2"
+            d="M244.417,398.641A146.808,146.808,0,0,0,477.589,279.9c0-3.381-.157-6.724-.383-10.049-53.642,80-152.686,117.405-232.79,128.793"
+            transform="translate(35.564 80.269)"
+          />
+        </g>
+      </StyledIcon>
+    </StyledLink>
+  )
+}
+export default ContractExplorerUrl

src/components/footer.tsx

@@ -0,0 +1,120 @@
+import React from 'react'
+import styled from 'styled-components'
+import icons from './social-icons'
+
+const SOCIAL_NAV = [
+  {
+    icon: icons.github,
+    href: 'https://github.com/kleros'
+  },
+  {
+    icon: icons.slack,
+    href: 'https://slack.kleros.io/'
+  },
+  {
+    icon: icons.reddit,
+    href: 'https://reddit.com/r/Kleros/'
+  },
+  {
+    icon: icons.twitter,
+    href: 'https://twitter.com/kleros_io?'
+  },
+  {
+    icon: icons.blog,
+    href: 'https://blog.kleros.io/'
+  },
+  {
+    icon: icons.telegram,
+    href: 'https://t.me/kleros'
+  },
+  {
+    icon: icons.linkedin,
+    href: 'https://www.linkedin.com/company/kleros/'
+  }
+]
+
+const Footer = () => (
+  <StyledFooter>
+    <a
+      href="https://kleros.io"
+      className="g-kleros_footer__anchor"
+      style={{ display: 'flex', alignItems: 'center' }}
+    >
+      {icons.securedByKleros}
+    </a>
+    <div className="g-kleros_footer__help">
+      <SocialLink href="https://t.me/kleros">
+        I need help {icons.help}
+      </SocialLink>
+    </div>
+    <div className="g-kleros_footer__social">
+      {SOCIAL_NAV.map(item => (
+        <SocialLink href={item.href}>{item.icon}</SocialLink>
+      ))}
+    </div>
+  </StyledFooter>
+)
+
+export default Footer
+
+const SocialLink: React.FC<{
+  children: React.ReactNode
+  href: string
+}> = ({ children, href }) => (
+  <a
+    className="g-kleros_footer__anchor"
+    href={href}
+    rel="noopener noreferrer"
+    target="_blank"
+  >
+    {children}
+  </a>
+)
+
+const StyledFooter = styled.footer`
+  font-family: Roboto, sans-serif;
+  font-size: 1rem;
+  width: 100%;
+  height: 4rem;
+  display: grid;
+  background: #4d00b4;
+  grid: 1fr / [footer-start] 1fr [banner] 18fr [help] 12fr 1fr [footer-end];
+  align-items: center;
+  justify-items: center;
+
+  .g-kleros_footer__anchor {
+    color: white;
+    text-decoration: none;
+    margin-left: 1rem;
+  }
+
+  .g-kleros_footer__help {
+    display: grid;
+    grid-column: help;
+    justify-self: end;
+    color: white;
+  }
+
+  .g-kleros_footer__social {
+    display: none;
+    grid: 1fr / 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+    grid-column: social;
+    justify-self: stretch;
+    align-items: center;
+    text-align: center;
+  }
+  @media (min-width: 992px) {
+    .g-kleros_footer {
+      grid: 1fr / [footer-start] 1fr [banner] 20fr [title] 20fr [help] 8fr 2fr [social] 10fr 1fr [footer-end];
+    }
+
+    .g-kleros_footer__title {
+      display: initial;
+    }
+
+    .g-kleros_footer__social {
+      display: grid;
+      margin-right: 1.8rem;
+    }
+  }
+`