Feature/dao 27

src/App.js

@@ -4,7 +4,7 @@ import { Spring, animated } from 'react-spring'
 import { useTheme } from '@aragon/ui'
 import { EthereumAddressType, ClientThemeType } from './prop-types'
 import { useWallet } from './wallet'
-import { network, web3Providers } from './environment'
+import { network, web3Providers, enableMigrateBanner } from './environment'
 import { useClientTheme } from './client-theme'
 import { useRouting } from './routing'
 import initWrapper, { pollConnectivity } from './aragonjs-wrapper'
@@ -22,6 +22,7 @@ import CustomToast from './components/CustomToast/CustomToast'
 import OrgView from './components/OrgView/OrgView'
 
 import { isKnownRepo } from './repo-utils'
+
 import {
   APPS_STATUS_ERROR,
   APPS_STATUS_READY,
@@ -33,6 +34,13 @@ import {
   DAO_STATUS_UNLOADED,
 } from './symbols'
 
+const MIGRATION_BANNER_HIDE = 'MIGRATION_BANNER_HIDE&'
+const MIGRATION_LAST_DATE_ELIGIBLE_TIMESTAMP = new Date(
+  '2021-05-14T15:43:08Z'
+).getTime()
+
+const getMigrateBannerKey = address => `${MIGRATION_BANNER_HIDE}${address}`
+
 const INITIAL_DAO_STATE = {
   apps: [],
   appIdentifiers: {},
@@ -42,6 +50,7 @@ const INITIAL_DAO_STATE = {
   permissions: {},
   permissionsLoading: true,
   repos: [],
+  showMigrateBanner: false,
 }
 
 const SELECTOR_NETWORKS = [
@@ -141,10 +150,19 @@ class App extends React.Component {
       },
       provider: web3Providers.default,
       walletAccount,
-      onDaoAddress: ({ address, domain }) => {
+      onDaoAddress: ({ address, domain, createdAt }) => {
         log('dao address', address)
         log('dao domain', domain)
+        log('dao createdAt', createdAt)
+        const hideMigrateBanner = getMigrateBannerKey(address)
+        const showMigrateBanner =
+          enableMigrateBanner &&
+          createdAt &&
+          !localStorage.getItem(hideMigrateBanner) &&
+          createdAt < MIGRATION_LAST_DATE_ELIGIBLE_TIMESTAMP
+
         this.setState({
+          showMigrateBanner,
           daoStatus: DAO_STATUS_READY,
           daoAddress: { address, domain },
         })
@@ -246,6 +264,11 @@ class App extends React.Component {
       })
   }
 
+  closeMigrateBanner = address => {
+    this.setState({ showMigrateBanner: false })
+    localStorage.setItem(getMigrateBannerKey(address), String(true))
+  }
+
   handleIdentityCancel = () => {
     const { identityIntent } = this.state
     identityIntent.reject(new Error('Identity modification cancelled'))
@@ -308,6 +331,7 @@ class App extends React.Component {
       signatureBag,
       web3,
       wrapper,
+      showMigrateBanner,
     } = this.state
 
     const { address: intentAddress = null, label: intentLabel = '' } =
@@ -388,6 +412,10 @@ class App extends React.Component {
                               visible={routing.mode.name === 'org'}
                               web3={web3}
                               wrapper={wrapper}
+                              showMigrateBanner={showMigrateBanner}
+                              closeMigrateBanner={() =>
+                                this.closeMigrateBanner(daoAddress.address)
+                              }
                             />
                           </div>
                         </PermissionsProvider>

src/aragonjs-wrapper.js

@@ -25,6 +25,7 @@ import {
 } from './web3-utils'
 import SandboxedWorker from './worker/SandboxedWorker'
 import WorkerSubscriptionPool from './worker/WorkerSubscriptionPool'
+import { getOrganizationByAddress } from './services/gql'
 
 const POLL_DELAY_CONNECTIVITY = 2000
 
@@ -267,7 +268,18 @@ const initWrapper = async (
     throw new DAONotFound(dao)
   }
 
-  onDaoAddress({ address: daoAddress, domain: dao })
+  const daoData = {
+    address: daoAddress,
+    domain: dao,
+  }
+
+  const data = await getOrganizationByAddress(daoAddress)
+  if (data?.createdAt) {
+    // transform into ml seconds
+    daoData.createdAt = parseInt(data.createdAt) * 1000
+  }
+
+  onDaoAddress(daoData)
 
   const wrapper = new Aragon(daoAddress, {
     provider,

src/components/Banner/Banner.js

@@ -1,21 +1,30 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { GU } from '@aragon/ui'
+import { ButtonIcon, IconCross, GU } from '@aragon/ui'
 
 export const BANNER_HEIGHT = 38
 
-function Banner({ text, textColor, button, color }) {
+function Banner({ text, textColor, button, color, height, compact, onClose }) {
   return (
     <div
       color={color}
       css={`
         display: flex;
-        flex-wrap: nowrap;
-        align-items: center;
-        justify-content: center;
-        height: ${BANNER_HEIGHT}px;
-        padding: ${0.5 * GU}px ${1 * GU}px;
-        background-color: ${({ color }) => color};
+        height: ${height}px;
+        background: ${({ color }) => color};
+        ${compact
+          ? `
+            flex-flow: column nowrap;
+            align-items: flex-start;
+            justify-content: flex-start;
+            padding: ${0.5 * GU}px ${2 * GU}px;
+          `
+          : `
+            flex-wrap: nowrap;
+            align-items: center;
+            justify-content: center;
+            padding: ${0.5 * GU}px ${1 * GU}px;
+        `};
       `}
     >
       <div
@@ -29,12 +38,33 @@ function Banner({ text, textColor, button, color }) {
       <div
         css={`
           display: flex;
-          justify-content: center;
-          margin-left: ${1 * GU}px;
+          ${compact
+            ? `
+              justify-content: flex-start;
+            `
+            : `
+              justify-content: center;
+              margin-left: ${1 * GU}px;
+          `};
         `}
       >
         {button}
       </div>
+      {onClose && (
+        <ButtonIcon
+          label="Close"
+          onClick={onClose}
+          css={`
+            position: absolute;
+            z-index: 2;
+            top: ${0.5 * GU}px;
+            right: ${2 * GU}px;
+            color: #f6f9fc;
+          `}
+        >
+          <IconCross />
+        </ButtonIcon>
+      )}
     </div>
   )
 }
@@ -44,6 +74,14 @@ Banner.propTypes = {
   color: PropTypes.string,
   text: PropTypes.node,
   textColor: PropTypes.string,
+  height: PropTypes.number,
+  compact: PropTypes.bool,
+  onClose: PropTypes.func,
+}
+
+Banner.defaultProps = {
+  height: BANNER_HEIGHT,
+  compact: false,
 }
 
 export default Banner

src/components/Migrate/MigrateBanner.js

@@ -0,0 +1,64 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Transition, animated } from 'react-spring'
+import { Button, springs, useViewport } from '@aragon/ui'
+import Banner, { BANNER_HEIGHT } from '../Banner/Banner'
+
+const MIGRATE_REWARD_URL =
+  'https://help.aragon.org/article/99-aragon-govern-migration-reward-program'
+
+const BANNER_TEXT = {
+  large: 'Your DAO is eligible for the migration reward program.',
+  compact: 'Migration Reward Program.',
+}
+
+const MigrateBanner = React.memo(({ visible, onClose }) => {
+  const { width } = useViewport()
+  const compact = width < 570
+  const bannerHeight = compact ? 70 : BANNER_HEIGHT
+
+  return (
+    <React.Fragment>
+      <Transition
+        items={visible}
+        from={{ height: 0 }}
+        enter={{ height: bannerHeight }}
+        leave={{ height: 0 }}
+        config={springs.smooth}
+        native
+      >
+        {visible =>
+          visible &&
+          /* eslint-disable react/prop-types */
+          (({ height }) => (
+            <animated.div style={{ overflow: 'hidden', height }}>
+              <Banner
+                text={compact ? BANNER_TEXT.compact : BANNER_TEXT.large}
+                button={
+                  <Button href={MIGRATE_REWARD_URL} mode="normal" size="small">
+                    <span style={{ color: '#00C2FF', fontWeight: 'bold' }}>
+                      Apply Now!
+                    </span>
+                  </Button>
+                }
+                color="linear-gradient(107.79deg, #00ace2 1.46%, #02dfed 100%)"
+                textColor="#FFFFFF"
+                compact={compact}
+                height={bannerHeight}
+                onClose={onClose}
+              />
+            </animated.div>
+          ))
+        /* eslint-enable react/prop-types */
+        }
+      </Transition>
+    </React.Fragment>
+  )
+})
+
+MigrateBanner.propTypes = {
+  onClose: PropTypes.func.isRequired,
+  visible: PropTypes.bool,
+}
+
+export default MigrateBanner

src/components/OrgView/OrgView.js

@@ -32,6 +32,7 @@ import SignerPanel from '../SignerPanel/SignerPanel'
 import UpgradeBanner from '../Upgrade/UpgradeBanner'
 import UpgradeModal from '../Upgrade/UpgradeModal'
 import UpgradeOrganizationPanel from '../Upgrade/UpgradeOrganizationPanel'
+import MigrateBanner from '../Migrate/MigrateBanner'
 
 // Remaining viewport width after the menu panel is factored in
 const AppWidthContext = React.createContext(0)
@@ -52,6 +53,8 @@ function OrgView({
   visible,
   web3,
   wrapper,
+  showMigrateBanner,
+  closeMigrateBanner,
 }) {
   const theme = useTheme()
   const routing = useRouting()
@@ -186,6 +189,12 @@ function OrgView({
           flex-shrink: 0;
         `}
       >
+        {showMigrateBanner && (
+          <MigrateBanner
+            visible={showMigrateBanner}
+            onClose={closeMigrateBanner}
+          />
+        )}
         <UpgradeBanner
           visible={canUpgradeOrg}
           onMoreInfo={handleUpgradeModalOpen}
@@ -402,6 +411,8 @@ OrgView.propTypes = {
   visible: PropTypes.bool.isRequired,
   web3: PropTypes.object,
   wrapper: AragonType,
+  showMigrateBanner: PropTypes.bool,
+  closeMigrateBanner: PropTypes.func.isRequired,
 }
 
 OrgView.defaultProps = {

src/environment.js

@@ -74,6 +74,8 @@ export const ipfsDefaultConf = {
 const networkConfig = getNetworkConfig(networkType)
 export const network = networkConfig.settings
 export const providers = networkConfig.providers
+export const connectGraphEndpoint = networkConfig.connectGraphEndpoint
+export const enableMigrateBanner = networkConfig.enableMigrateBanner || false
 
 export const contractAddresses = {
   ensRegistry: networkConfig.addresses.ensRegistry,