chore: improve accounts modal

README.md

@@ -1,6 +1,7 @@
-## (2020-09-30)
+## (2020-10-01)
 
 - chore: add code of conduct ([6859555](https://github.com/Proof-Of-Humanity/proof-of-humanity-web/commit/6859555))
+- chore: add identicons ([45ddea1](https://github.com/Proof-Of-Humanity/proof-of-humanity-web/commit/45ddea1))
 - chore: add issue templates ([6adcbee](https://github.com/Proof-Of-Humanity/proof-of-humanity-web/commit/6adcbee))
 - chore: add more status icons ([3225e43](https://github.com/Proof-Of-Humanity/proof-of-humanity-web/commit/3225e43))
 - chore: add social icons and fix font rendering ([b8e09b5](https://github.com/Proof-Of-Humanity/proof-of-humanity-web/commit/b8e09b5))

_pages/index/app-query.js

@@ -0,0 +1,9 @@
+import { graphql } from "relay-hooks";
+
+export const appQuery = graphql`
+  query appQueryQuery($id: ID!) {
+    submission(id: $id) {
+      name
+    }
+  }
+`;

components/account-settings-popup.js

@@ -1,20 +1,26 @@
-import { Settings } from "@kleros/icons";
-import { Box } from "theme-ui";
+import { Dot, Settings } from "@kleros/icons";
+import { Box, Flex } from "theme-ui";
 
 import Button from "./button";
 import Divider from "./divider";
+import Identicon from "./identicon";
+import { NextETHLink } from "./next-router";
 import Popup from "./popup";
 import Tabs, { Tab, TabList, TabPanel } from "./tabs";
 import Text from "./text";
 import { useWeb3 } from "./web3-provider";
 
-export default function AccountSettingsPopup() {
+export default function AccountSettingsPopup({ name }) {
   const [accounts] = useWeb3("eth", "getAccounts");
   const { web3, connect } = useWeb3();
   return (
     <Popup
       contentStyle={{ width: 300 }}
-      trigger={Settings}
+      trigger={
+        <Button variant="secondary" sx={{ fontSize: 1, padding: 1 }}>
+          Account <Settings />
+        </Button>
+      }
       position="bottom right"
     >
       <Box
@@ -44,7 +50,19 @@ export default function AccountSettingsPopup() {
               }}
             >
               {accounts &&
-                (accounts.length === 0 ? "Connected to Infura" : accounts[0])}
+                (accounts.length === 0 ? (
+                  "Connected to Infura"
+                ) : (
+                  <Flex sx={{ alignItems: "center" }}>
+                    <Identicon address={accounts[0]} />
+                    <Box sx={{ marginLeft: 1 }}>
+                      {name && <Text sx={{ marginBottom: 1 }}>{name}</Text>}
+                      <NextETHLink address={accounts[0]}>
+                        {accounts[0]}
+                      </NextETHLink>
+                    </Box>
+                  </Flex>
+                ))}
             </Text>
             <Text
               sx={{
@@ -55,14 +73,17 @@ export default function AccountSettingsPopup() {
                 textAlign: "center",
               }}
             >
-              Network: {web3.ETHNet?.name}
+              <Dot size={8} /> {web3.ETHNet?.name}
             </Text>
             <Divider />
             <Button
+              variant="secondary"
               sx={{
                 display: "block",
+                fontSize: 1,
                 marginTop: -2,
                 marginX: "auto",
+                padding: 1,
               }}
               onClick={connect}
             >

icons/dot.js

@@ -0,0 +1,16 @@
+import { SVG } from "@kleros/components";
+
+export default function Dot({ size = 16, ...rest }) {
+  return (
+    <SVG
+      width={size}
+      height={size}
+      viewBox="0 0 7 7"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <circle cx="3.5" cy="3.5" r="3.5" fill="#00c42b" />
+    </SVG>
+  );
+}

icons/index.js

@@ -1,6 +1,7 @@
 export { default as Blog } from "./blog";
 export { default as Camera } from "./camera";
 export { default as Check } from "./check";
+export { default as Dot } from "./dot";
 export { default as DownArrow } from "./down-arrow";
 export { default as Ether } from "./ether";
 export { default as EtherscanLogo } from "./etherscan-logo";

pages/_app.js

@@ -1,5 +1,4 @@
 import {
-  AccountSettingsPopup,
   ArchonProvider,
   Layout,
   Link,
@@ -10,14 +9,17 @@ import {
   SocialIcons,
   ThemeProvider,
   Web3Provider,
+  AccountSettingsPopup as _AccountSettingsPopup,
   createWrapConnection,
   useWeb3,
 } from "@kleros/components";
 import { ProofOfHumanityLogo } from "@kleros/icons";
 import { useRouter } from "next/router";
 import { useCallback, useEffect, useMemo, useState } from "react";
+import { useQuery } from "relay-hooks";
 
 import { indexQuery } from "_pages/index";
+import { appQuery } from "_pages/index/app-query";
 import { IdQuery } from "_pages/profile/[id]";
 import { queryEnums } from "data";
 import KlerosLiquid from "subgraph/abis/kleros-liquid";
@@ -60,6 +62,15 @@ function MyProfileLink() {
     </NextLink>
   ) : null;
 }
+function AccountSettingsPopup() {
+  const [accounts] = useWeb3("eth", "getAccounts");
+  const { props } = useQuery(
+    appQuery,
+    { id: accounts?.[0]?.toLowerCase() },
+    { skip: !accounts?.[0] }
+  );
+  return <_AccountSettingsPopup name={props?.submission?.name} />;
+}
 const header = {
   left: (
     <>