Try   HackMD

How to add new network support for DAOstar

1. Deploy smart contracts

Deploy Registration.sol and get three contract addresses

Reference folder:
https://github.com/metagov/daostar/tree/main/contracts/src

For example:

OP Mainnet

EIP4824Index
EIP4824Registration
EIP4824RegistrationSummoner

2. Add network to supgraph and deploy a new subgraph for that network

Prerequisites for this step:

  • Have your The Graph Auth Token initialized
  • Create a subgraph for the new netowork via The Graph Dashboard
  1. Add network and contract address of EIP4824Index in this file

Reference file:
https://github.com/metagov/daostar/blob/main/Implementations/Subgraph/daostar/networks.json

"optimism": {
        "EIP4824Index": {
            "address": "0x18CbB356cd64193b1a0CA49911fc72CB3D02a5E4",
            "startBlock": 109109991
        }
    }
  1. Add and run build commands
"build:optimism": "graph codegen && graph build --network optimism",
  1. Add and run deploy command
"deploy:optimism": "graph deploy --node https://api.thegraph.com/deploy/ crazyyuan/daostar-optimism",
  1. Get your https api query endpoint url

In this case,

https://api.thegraph.com/subgraphs/name/crazyyuan/daostar-optimism

3. Make the changes to the frontend, deploy and publish

  1. Add API URL

Reference file:
https://github.com/metagov/daostar/blob/main/daostar-website/src/index.js#L36

const client = new ApolloClient({
    link: ApolloLink.from([
        new MultiAPILink({
            endpoints: {
                goerli: `https://api.thegraph.com/subgraphs/name/ipatka/daostar-goerli`,
                optimismGoerli: `https://api.thegraph.com/subgraphs/name/rashmi-278/daostar-optimism-goerli`,
                mainnet: `https://api.thegraph.com/subgraphs/name/ipatka/daostar`,
                gnosis: `https://api.thegraph.com/subgraphs/name/rashmi-278/daostar-gnosis`,
                arbitrumGoerli: `https://api.thegraph.com/subgraphs/name/crazyyuan/daostar-arbitrum-goerli`,
                chapel:`https://api.thegraph.com/subgraphs/name/crazyyuan/daostar-bnb-bruno`,
                optimism: `https://api.thegraph.com/subgraphs/name/crazyyuan/daostar-optimism`

            },
            // defaultEndpoint: 'https://api.thegraph.com/subgraphs/name/ipatka/daostar',
            httpSuffix: "",
            createHttpLink: createHttpLink,
        }),
    ]),
    cache: new InMemoryCache({}),
});

  1. Set up queries

Reference file:
https://github.com/metagov/daostar/blob/main/daostar-website/src/App.js

const optimismRes = useQuery(queries.REGISTRATIONS, {
        context: { apiName: "optimism" },
        variables: { id: "optimism" },
    });
    
    
     const {
        loading: optimismLoading,
        error: optimismError,
        data: optimismData,
    } = optimismRes;
    
     if (error || goerliError || optimismGoerliError || arbitrumGoerliError || chapelError || optimismError ) {
        ...
        console.error("Optimism Error" + optimismError)
    };
    
        if (loading || goerliLoading || gnosisLoading || optimismGoerliLoading || arbitrumGoerliLoading || chapelLoading || optimismLoading) return "loading...";

const optimismRegistrations =
        optimismData?.registrationNetwork?.registrations || [];
        
         const allRegistrationInstances = mainnetRegistrations.concat(
       ...
        optimismRegistrations
    );
  1. Add RegistrationSummoner address here

Reference file:
https://github.com/metagov/daostar/blob/main/daostar-website/src/components/Register/RegistrationReceived/RegistrationReceived.js

 const factoryContracts = {
    ...
    optimism: `0x5C0340AD34f7284f9272E784FF76638E8dDb5dE4`,

  };
  1. Add network ID and labels

Reference file:
https://github.com/metagov/daostar/blob/main/daostar-website/src/components/Register/RegistrationForm/RegistrationForm.js#L13

https://github.com/metagov/daostar/blob/main/daostar-website/src/components/Register/RegistrationForm/RegistrationForm.js#L213

const networkIds = {
    ...
    optimism:10
}

 const EthNetworksSelect = (
        <HTMLSelect
            style={{ minWidth: 140 }}
            iconProps={{ icon: 'caret-down', color: '#fff' }}
            value={daoContractNetwork}
            onChange={onChangeDaoContractNetwork}
            options={[
                { label: 'Mainnet', value: 'mainnet' },
                { label: 'Optimism', value: 'optimism'},
               ...
            ]}
        />
    )
  1. Make sure build is successful
torch@torchablazed:~/Desktop/Work/MetaGov/daostar/daostar-website$ npm run build

Now you can commit and publish the changes!