Integrate NDX

src/apollo/client.js

@@ -17,3 +17,11 @@ export const compoundClient = new ApolloClient({
   cache: new InMemoryCache(),
   shouldBatch: true
 })
+
+export const indexedClient = new ApolloClient({
+  link: new HttpLink({
+    uri: 'https://api.thegraph.com/subgraphs/name/indexed-finance/indexed-governance'
+  }),
+  cache: new InMemoryCache(),
+  shouldBatch: true
+})

src/components/governance/Dropdown.tsx

@@ -8,6 +8,7 @@ import { TYPE } from '../../theme'
 import { ChevronDown } from 'react-feather'
 import { SUPPORTED_PROTOCOLS } from '../../state/governance/reducer'
 import useOnClickOutside from '../../hooks/useClickOutside'
+import Column from '../Column'
 
 const Wrapper = styled.div<{ backgroundColor?: string; open: boolean }>`
   width: 100%;
@@ -26,20 +27,26 @@ const Wrapper = styled.div<{ backgroundColor?: string; open: boolean }>`
 
 // dont pass style props to DOM link element
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Flyout = styled(({ backgroundColor, ...props }) => <Link {...props} />)`
+const FlyoutContainer = styled(({ ...props }) => <Column {...props} />)`
   width: 100%;
-  padding: 1rem;
   position: absolute;
-  bottom: -68px;
+  top: 68px;
   left: 0px;
   border-bottom-left-radius: 20px;
   border-bottom-right-radius: 20px;
   box-shadow: 0 10px 34px rgb(236 236 236 / 16%), 0 5px 6px rgb(140 140 140 / 23%);
   background-color: white;
-  text-decoration: none;
   z-index: 3;
 `
 
+// dont pass style props to DOM link element
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Flyout = styled(({ backgroundColor, ...props }) => <Link {...props} />)`
+  width: 100%;
+  padding: 1rem;
+  text-decoration: none;
+`
+
 export default function Dropdown() {
   const [activeProtocol] = useActiveProtocol()
 
@@ -57,26 +64,28 @@ export default function Dropdown() {
         </RowFixed>
         <ChevronDown stroke={activeProtocol?.primaryColor} />
       </RowBetween>
-      {open &&
-        activeProtocol &&
-        Object.keys(SUPPORTED_PROTOCOLS)
-          .filter(k => SUPPORTED_PROTOCOLS[k].name !== activeProtocol.name)
-          .map((k, i) => (
-            <Flyout
-              key={i}
-              backgroundColor={SUPPORTED_PROTOCOLS[k].secondaryColor}
-              to={`/delegates/${SUPPORTED_PROTOCOLS[k].id}`}
-            >
-              <RowBetween>
-                <RowFixed style={{ gap: '16px' }}>
-                  <WrappedListLogo src={SUPPORTED_PROTOCOLS[k]?.logo} />
-                  <TYPE.mediumHeader color={SUPPORTED_PROTOCOLS[k]?.primaryColor}>
-                    {SUPPORTED_PROTOCOLS[k].name}
-                  </TYPE.mediumHeader>
-                </RowFixed>
-              </RowBetween>
-            </Flyout>
-          ))}
+      {open && activeProtocol && (
+        <FlyoutContainer>
+          {Object.keys(SUPPORTED_PROTOCOLS)
+            .filter(k => SUPPORTED_PROTOCOLS[k].name !== activeProtocol.name)
+            .map((k, i) => (
+              <Flyout
+                key={i}
+                backgroundColor={SUPPORTED_PROTOCOLS[k].secondaryColor}
+                to={`/delegates/${SUPPORTED_PROTOCOLS[k].id}`}
+              >
+                <RowBetween>
+                  <RowFixed style={{ gap: '16px' }}>
+                    <WrappedListLogo src={SUPPORTED_PROTOCOLS[k]?.logo} />
+                    <TYPE.mediumHeader color={SUPPORTED_PROTOCOLS[k]?.primaryColor}>
+                      {SUPPORTED_PROTOCOLS[k].name}
+                    </TYPE.mediumHeader>
+                  </RowFixed>
+                </RowBetween>
+              </Flyout>
+            ))}
+        </FlyoutContainer>
+      )}
     </Wrapper>
   )
 }

src/data/governance.ts

@@ -217,7 +217,7 @@ export async function fetchProposals(client: any, key: string): Promise<Proposal
             const description = PRELOADED_PROPOSALS.get(res.data.proposals.length - i - 1) || p.description
             return {
               id: p.id,
-              title: description?.split(/# |\n/g)[1] || 'Untitled',
+              title: description?.split(/# |\n/g)[1] || description?.split(/# |\n/g)[2] || 'Untitled',
               description: description || 'No description.',
               proposer: p.proposer.id,
               status: undefined, // initialize as 0

src/state/application/hooks.ts

@@ -4,8 +4,8 @@ import { useActiveWeb3React } from '../../hooks'
 import { AppDispatch, AppState } from '../index'
 import { addPopup, ApplicationModal, PopupContent, removePopup, setOpenModal, setModalDelegatee } from './actions'
 import { useActiveProtocol } from '../governance/hooks'
-import { UNISWAP_GOVERNANCE, COMPOUND_GOVERNANCE } from '../governance/reducer'
-import { uniswapClient, compoundClient } from '../../apollo/client'
+import { UNISWAP_GOVERNANCE, COMPOUND_GOVERNANCE, INDEXED_GOVERNANCE } from '../governance/reducer'
+import { uniswapClient, compoundClient, indexedClient } from '../../apollo/client'
 
 export function useBlockNumber(): number | undefined {
   const { chainId } = useActiveWeb3React()
@@ -88,5 +88,9 @@ export function useSubgraphClient() {
     return compoundClient
   }
 
+  if (activeProtocol?.id === INDEXED_GOVERNANCE.id) {
+    return indexedClient
+  }
+
   return undefined
 }

src/state/governance/reducer.ts

@@ -12,6 +12,7 @@ import {
 import { createReducer } from '@reduxjs/toolkit'
 import UniLogo from '../../assets/images/uni-logo.png'
 import CompLogo from '../../assets/images/compLogo.png'
+import NdxLogo from '../../assets/images/ndxLogo.png'
 import { serializeToken } from '../user/hooks'
 
 export interface GovernanceInfo {
@@ -44,6 +45,10 @@ export const COMP_GOVERNANCE_ADDRESS = '0xc0dA01a04C3f3E0be433606045bB7017A7323E
 export const COMP_ADDRESS = '0xc00e94cb662c3520282e6f5717214004a7f26888'
 const COMP = new Token(ChainId.MAINNET, COMP_ADDRESS, 18, 'COMP', 'Compound Governance Token')
 
+export const NDX_GOVERNANCE_ADDRESS = '0x95129751769f99CC39824a0793eF4933DD8Bb74B'
+export const NDX_ADDRESS = '0x86772b1409b61c639EaAc9Ba0AcfBb6E238e5F83'
+const NDX = new Token(ChainId.MAINNET, NDX_ADDRESS, 18, 'NDX', 'Indexed')
+
 export const UNISWAP_GOVERNANCE: GovernanceInfo = {
   id: 'uniswap',
   name: 'Uniswap Governance',
@@ -68,10 +73,23 @@ export const COMPOUND_GOVERNANCE: GovernanceInfo = {
   emoji: '🏦'
 }
 
+export const INDEXED_GOVERNANCE: GovernanceInfo = {
+  id: 'indexed',
+  name: 'Indexed Governance',
+  logo: NdxLogo,
+  primaryColor: '#111111',
+  secondaryColor: '#f2f2f2',
+  token: serializeToken(NDX),
+  governanceAddress: NDX_GOVERNANCE_ADDRESS,
+  social: '@ndxfi',
+  emoji: '🏦'
+}
+
 // mapping for routing
 export const SUPPORTED_PROTOCOLS: { [id: string]: GovernanceInfo } = {
   uniswap: UNISWAP_GOVERNANCE,
-  compound: COMPOUND_GOVERNANCE
+  compound: COMPOUND_GOVERNANCE,
+  indexed: INDEXED_GOVERNANCE
 }
 
 export const FETCHING_INTERVAL = 50