Fixed token symbol and decimals and page titles

commons-stack · Sep 9, 2020 · f42c0b2 · f42c0b2
1 parent 71e4bf3
commit f42c0b2
Show file tree

Hide file tree

Showing 10 changed files with 46 additions and 59 deletions.
diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/index.html b/public/index.html
@@ -5,8 +5,8 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta name="description" content="Aragon Conviction Funding Pilot" />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <meta name="description" content="Conviction Voting | Commons Stack" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/twitter-card-icon.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -21,34 +21,11 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Aragon Conviction Funding Pilot</title>
+    <title>Conviction Voting | Commons Stack</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <script type="text/javascript">
-      var Countly = Countly || {}
-      Countly.q = Countly.q || []
-      //provide countly initialization parameters
-      Countly.app_key = '5f46fd48e09eccfadce0399b90b62356f4bc7ecc'
-      Countly.url = 'https://analytics.aragon.org/'
-      Countly.inactivity_time = 10
-      Countly.q.push(['track_sessions'])
-      Countly.q.push(['track_pageview'])
-      Countly.q.push(['track_clicks'])
-      Countly.q.push(['track_errors'])
-      ;(function() {
-        var cly = document.createElement('script')
-        cly.type = 'text/javascript'
-        cly.async = true
-        cly.src = 'https://analytics.aragon.org/sdk/web/countly.min.js'
-        cly.onload = function() {
-          Countly.init()
-        }
-        var s = document.getElementsByTagName('script')[0]
-        s.parentNode.insertBefore(cly, s)
-      })()
-    </script>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/public/manifest.json b/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "Honeypot",
-  "name": "Honeypot",
+  "short_name": "Conviction Voting",
+  "name": "Conviction Voting",
   "icons": [
     {
       "src": "favicon.ico",

diff --git a/public/twitter-card-icon.png b/public/twitter-card-icon.png
diff --git a/src/components/ChangeSupportModal.js b/src/components/ChangeSupportModal.js
@@ -11,7 +11,8 @@ import {
   useTheme,
   GU,
 } from '@aragon/ui'
-import antLogo from '../assets/logo-ant.svg'
+import tokenLogo from '../assets/logo-cs.svg'
+import { useAppState } from '../providers/AppState'
 
 function ChangeSupportModal({
   accountBalance,
@@ -30,6 +31,7 @@ function ChangeSupportModal({
   const [buttonDisabled, setButtonDisabled] = useState(false)
   const theme = useTheme()
   const { below } = useViewport()
+  const { stakeToken } = useAppState()
 
   const compactMode = below('medium')
 
@@ -149,6 +151,11 @@ function ChangeSupportModal({
     tokensToStake,
   ])
 
+  const formatTokens = amount =>
+    TokenAmount.format(amount, stakeToken.decimals, {
+      symbol: stakeToken.symbol,
+    })
+
   return (
     <Modal visible={modalVisible} onClose={onModalClose}>
       <div
@@ -199,7 +206,7 @@ function ChangeSupportModal({
               `}
           `}
         >
-          <AntToken />
+          <TokenLogo />
           <div
             css={`
               flex-grow: 1;
@@ -232,11 +239,7 @@ function ChangeSupportModal({
               margin-left: ${1 * GU}px;
           `}
             >
-              (
-              {TokenAmount.format(tokensToStake.toFixed(0), 18, {
-                symbol: 'ANT',
-              })}
-              )
+              ({formatTokens(tokensToStake.toFixed(0))})
             </p>
           </div>
         </div>
@@ -245,16 +248,11 @@ function ChangeSupportModal({
             margin-top: ${4 * GU}px;
           `}
         >
-          You have{' '}
-          {TokenAmount.format(totalAvailableTokens.toFixed(0), 18, {
-            symbol: 'ANT',
-          })}{' '}
-          tokens ({percentageAvailable}% of your balance) available to support
-          this proposal. You are supporting other proposals with{' '}
-          {TokenAmount.format(amountInOtherProposals.toFixed(0), 18, {
-            symbol: 'ANT',
-          })}{' '}
-          locked tokens ({percentageStaked}% of your balance).
+          You have {formatTokens(totalAvailableTokens.toFixed(0))} tokens (
+          {percentageAvailable}% of your balance) available to support this
+          proposal. You are supporting other proposals with{' '}
+          {formatTokens(amountInOtherProposals.toFixed(0))} locked tokens (
+          {percentageStaked}% of your balance).
         </Info>
 
         <Button
@@ -273,7 +271,7 @@ function ChangeSupportModal({
   )
 }
 
-function AntToken() {
+function TokenLogo() {
   return (
     <div
       css={`
@@ -282,7 +280,7 @@ function AntToken() {
       `}
     >
       <img
-        src={antLogo}
+        src={tokenLogo}
         width="32px"
         css={`
           margin-bottom: ${1.25 * GU}px;
@@ -294,7 +292,7 @@ function AntToken() {
           margin-left: ${1 * GU}px;
         `}
       >
-        ANT
+        CSTK
       </p>
     </div>
   )

diff --git a/src/components/Metrics.js b/src/components/Metrics.js
@@ -51,12 +51,23 @@ const Metrics = React.memo(function Metrics({
 
   const carouselContent = useMemo(
     () => [
-      <CarouselBalance label="Total" amount={accountBalance} symbol="CSTK" />,
-      <CarouselBalance label="Active" amount={myActiveTokens} symbol="CSTK" />,
+      <CarouselBalance
+        label="Total"
+        amount={accountBalance}
+        symbol="CSTK"
+        decimals="0"
+      />,
+      <CarouselBalance
+        label="Active"
+        amount={myActiveTokens}
+        symbol="CSTK"
+        decimals="0"
+      />,
       <CarouselBalance
         label="Inactive"
         amount={inactiveTokens}
         symbol="CSTK"
+        decimals="0"
       />,
     ],
     [accountBalance, myActiveTokens, inactiveTokens]

diff --git a/src/components/ProposalSupported.js b/src/components/ProposalSupported.js
@@ -7,7 +7,10 @@ const LIGHT_INFO_SURFACE_COLOR = '#F8FDFE'
 
 function VoteCast({ amountOfTokens }) {
   const theme = useTheme()
-  const { appearance } = useAppState()
+  const {
+    appearance,
+    stakeToken: { decimals, symbol },
+  } = useAppState()
 
   return (
     <div
@@ -61,8 +64,8 @@ function VoteCast({ amountOfTokens }) {
           `}
           >
             You supported this proposal with{' '}
-            {TokenAmount.format(amountOfTokens.toFixed(), 18, {
-              symbol: 'ANT',
+            {TokenAmount.format(amountOfTokens.toFixed(), decimals, {
+              symbol,
             })}
           </div>
         </div>

diff --git a/src/components/Wallet.js b/src/components/Wallet.js
@@ -83,9 +83,9 @@ function Wallet() {
         <div>
           <Balance
             amount={accountBalance}
-            decimals={18}
+            decimals={stakeToken.decimals}
             label="Balance"
-            symbol="ANT"
+            symbol={stakeToken.symbol}
           />
           <LineSeparator border={theme.border} />
           <Balance

diff --git a/src/hooks/useOrgHooks.js b/src/hooks/useOrgHooks.js
@@ -189,7 +189,6 @@ export function useTokenBalances(account, token, timer = 3000) {
     }
 
     let cancelled = false
-    let timeoutId
 
     const fetchAccountStakeBalance = async () => {
       try {
@@ -220,7 +219,6 @@ export function useTokenBalances(account, token, timer = 3000) {
 
     return () => {
       cancelled = true
-      clearTimeout(timeoutId)
     }
   }, [account, balances, tokenContract, token.id])
 

diff --git a/src/screens/ProposalDetail.js b/src/screens/ProposalDetail.js
@@ -222,9 +222,9 @@ function ProposalDetail({
                         requestedAmount,
                         requestToken.decimals
                       )}{' '}
-                      ANT out of{' '}
+                      {requestToken.symbol} out of{' '}
                       {formatTokenAmount(vaultBalance, requestToken.decimals)}{' '}
-                      ANT currently in the common pool.
+                      {requestToken.symbol} currently in the common pool.
                     </p>
                   )}
                   <div