VotePanelContent: add identity badge component

aragon · Jan 17, 2019 · fc12ae1 · fc12ae1
1 parent 65ad44e
commit fc12ae1
Showing 1 changed file with 16 additions and 18 deletions.
diff --git a/apps/voting/app/src/components/VotePanelContent.js b/apps/voting/app/src/components/VotePanelContent.js
@@ -4,13 +4,15 @@ import styled from 'styled-components'
 import Blockies from 'react-blockies'
 import {
   Button,
+  IdentityBadge,
   Info,
   SafeLink,
   SidePanelSplit,
   SidePanelSeparator,
   Countdown,
   Text,
   theme,
+  BreakPoint,
 } from '@aragon/ui'
 import provideNetwork from '../utils/provideNetwork'
 import { VOTE_NAY, VOTE_YEA } from '../vote-types'
@@ -135,6 +137,7 @@ class VotePanelContent extends React.Component {
       network: { etherscanBaseUrl },
       vote,
       ready,
+      shorten,
       tokenSymbol,
       tokenDecimals,
     } = this.props
@@ -220,23 +223,7 @@ class VotePanelContent extends React.Component {
             <Label>Created By</Label>
           </h2>
           <Creator>
-            <CreatorImg>
-              <Blockies seed={creator} size={8} />
-            </CreatorImg>
-            <div>
-              <p>
-                {etherscanBaseUrl ? (
-                  <SafeLink
-                    href={`${etherscanBaseUrl}/address/${creator}`}
-                    target="_blank"
-                  >
-                    {creator}
-                  </SafeLink>
-                ) : (
-                  creator
-                )}
-              </p>
-            </div>
+            <IdentityBadge entity={creator} shorten={shorten} />
           </Creator>
         </Part>
         <SidePanelSeparator />
@@ -340,6 +327,17 @@ class VotePanelContent extends React.Component {
   }
 }
 
+const ResponsiveVotePanelContent = props => (
+  <React.Fragment>
+    <BreakPoint to="medium">
+      <VotePanelContent {...props} shorten />
+    </BreakPoint>
+    <BreakPoint from="medium">
+      <VotePanelContent {...props} />
+    </BreakPoint>
+  </React.Fragment>
+)
+
 const Label = styled(Text).attrs({
   smallcaps: true,
   color: theme.textSecondary,
@@ -404,4 +402,4 @@ const VotingButton = styled(Button)`
   }
 `
 
-export default provideNetwork(VotePanelContent)
+export default provideNetwork(ResponsiveVotePanelContent)