---
# System prepended metadata

title: DH Protocol tooling v.0.2.0 upgrade
tags: [' v3', ' Product Maintenance', ' connect wallet']

---


Current version is alpha only for all npm packages: **0.2.0-alpha.0**

## Upgrade path

**1. Install**
- Update @daohaus/** npm packages to newest version and install

```json
"dependencies": {
    "@daohaus/abis": "^0.2.0-alpha.0",
    "@daohaus/connect": "^0.2.0-alpha.0",
    "@daohaus/connect-context": "^0.2.0-alpha.0",
    "@daohaus/contract-utils": "^0.2.0-alpha.0",
    "@daohaus/form-builder": "^0.2.0-alpha.0",
    "@daohaus/form-builder-base": "^0.2.0-alpha.0",
    "@daohaus/keychain-utils": "^0.2.0-alpha.0",
    "@daohaus/moloch-v3-data": "^0.2.0-alpha.0",
    "@daohaus/moloch-v3-fields": "^0.2.0-alpha.0",
    "@daohaus/moloch-v3-hooks": "^0.2.0-alpha.0",
    "@daohaus/moloch-v3-legos": "^0.2.0-alpha.0",
    "@daohaus/moloch-v3-macro-ui": "^0.2.0-alpha.0",
    "@daohaus/profile-data": "^0.2.0-alpha.0",
    "@daohaus/tx-builder": "^0.2.0-alpha.0",
    "@daohaus/ui": "^0.2.0-alpha.0",
    "@daohaus/utils": "^0.2.0-alpha.0",
}
```

**2. ENV updates**
- Add wallet connect id
    - get one [here](https://walletconnect.com/) 
    - VITE_WALLET_CONNECT_ID=
    
- Add any alchemy backup env if you are using that (not required)
    - VITE_OPTIMISM_ALCHEMY_KEY=
    - VITE_ARBITRUM_ALCHEMY_KEY=
    
**3. Update env mappings in vite.config.ts**
```ts
  return defineConfig({
    plugins: [react()],
    define: {
      "process.env": {
        NX_RIVET_KEY: process.env.VITE_RIVET_KEY,
        NX_GRAPH_API_KEY_MAINNET: process.env.VITE_GRAPH_API_KEY_MAINNET,
        NX_INFURA_PROJECT_ID: process.env.VITE_INFURA_PROJECT_ID,
        NX_ETHERSCAN_KEY: process.env.VITE_ETHERSCAN_KEY,
        NX_WALLET_CONNECT_ID: process.env.VITE_WALLET_CONNECT_ID,
        NX_OPTIMISM_ALCHEMY_KEY: process.env.VITE_OPTIMISM_ALCHEMY_KEY,
        NX_ARBITRUM_ALCHEMY_KEY: process.env.VITE_ARBITRUM_ALCHEMY_KEY,
      },
    },
  });
```

**4. Update build target if using vite**
- viem uses BigInt - a syntax only avalable in modern borwsers. The vite starter will need to be told to compile to es2020 

vite.config.ts
```ts
  return defineConfig({
    ...
    optimizeDeps: {
      esbuildOptions: {
        target: "es2020",
        define: {
          global: "globalThis",
        },
        supported: {
          bigint: true,
        },
      },
    },

    build: {
      target: ["es2020"],
    },
  });
```
    
**5. Remove usage of 'provider' from useDHConnect**
- provider is no longer available.
- you can remove that and will need to change any custom tx's you might be firing with that and ethers.js
- dhconnect now exports publicClient

before:
```ts
const { provider } = useDHConnect();
```

after:
```ts=
const { publicClient } = useDHConnect();
```
    
[Reference](https://viem.sh/docs/ethers-migration.html#provider-%E2%86%92-client)


**6. TXBuilder now takes the `publicClient` prop instead of `provider`**

```ts
<TXBuilder provider={provider} />
```
```ts=
<TXBuilder publicClient={publicClient} />
```

**7. createContract is deprecated**
- Migrate to createViemClient for contract reads

before
```ts
  const SharesContract = createContract({
    address: sharesAddress,
    abi: DaoTokenAbi,
    chainId,
    rpcs,
  });

    const sharesAt: string = await SharesContract.balanceOfAt(
      userAddress,
      sharesSnapshot
    );

```

after

```ts
  const client = createViemClient({
    chainId,
  });

    const balance = (await client.readContract({
      abi: LOCAL_ABI.ERC20,
      address: tokenAddress,
      functionName: 'balanceOf',
      args: [userAddress],
    })) as bigint;

```

**8. Ensure you are using the required version of typescript**
- Viem types currently require using TypeScript v5.0.4 or greater.

package.json devDependencies
```json 
"devDependencies": {
   ...
    "typescript": "^5.0.4"
   ... 
}

```

**9. Updates needed for styled-components upgrade**

This introduced a few breaking changes. Most notably Sudo Selectors and Variables passed to the DOM.

**Sudo selectors**:
BEFORE:
Originally we targeted the hover state inside of our components:
```
export const StyledButton = styled.button`
  align-items: center;
  ...rest
  :hover {
  background-color: ${({ theme, $color }) =>
      theme.button[`${$color}`].solid.bg};
      ...rest
  }

`
```
![Screenshot 2023-07-12 at 8 31 23 AM](https://github.com/HausDAO/monorepo/assets/22626267/ad605b95-4f8b-4eeb-a13b-89801fdfb354)
<img width="237" alt="Screenshot 2023-08-10 at 7 53 13 AM" src="https://github.com/HausDAO/monorepo/assets/22626267/ff0f05da-faab-4864-a162-95f63999c12d">

FIX:
Originally we targeted the hover state inside of our components:
```
export const StyledButton = styled.button`
  align-items: center;
  ...rest
  &:hover {
  background-color: ${({ theme, $color }) =>
      theme.button[`${$color}`].solid.bg};
      ...rest
  }

`
```
<img width="240" alt="image" src="https://github.com/HausDAO/monorepo/assets/22626267/660524ac-7784-4126-abd3-d1ddecc5c1ab">

**Variables in the DOM**
BEFORE:
Originally we needed to pass conditional logic or variables to our styles we would do it like this:
```
export const StyledButton = styled.button<{
  justify: ButtonJustifyContent;
  color: ButtonColor;
}>`
    background-color: ${({ theme, color }) =>
      theme.button[`${$color}`].solid.bg};
    border: 0.1rem solid
      ${({ theme, color }) => theme.button[`${color}`].solid.border};
    color: ${({ theme, color }) => theme.button[`${color}`].solid.text};

`
```
Styled components would try to add those variables to the DOM. Not a big deal if it is something that naturally exists on the element but can cause issues if it isn't. In this example there is no justify for a button element and was throwing errors.
![Screenshot 2023-08-09 at 8 59 49 AM](https://github.com/HausDAO/monorepo/assets/22626267/6a5e54e9-663f-4b56-a5b1-b9ca06bda263)

FIX: 
```
export const StyledButton = styled.button<{
  $justify: ButtonJustifyContent;
  $color: ButtonColor;
}>`
    background-color: ${({ theme, $color }) =>
      theme.button[`${$color}`].solid.bg};
    border: 0.1rem solid
      ${({ theme, $color }) => theme.button[`${$color}`].solid.border};
    color: ${({ theme, $color }) => theme.button[`${$color}`].solid.text};
```
![Screenshot 2023-08-09 at 9 00 21 AM](https://github.com/HausDAO/monorepo/assets/22626267/51bc03cf-7954-4b13-8f6c-4897462ae9e1)
    
    
**10. Spinner is now Loading in the ui library**

before:
```ts
import { Spinner } from '@daohaus/ui';

...

<Spinner size="2rem" strokeWidth=".2rem" />
```

after:
```ts=
import { Loading } from '@daohaus/ui';

...

<Loading size={20} />
```
**11. Border is not loinger a theme element**
Radius config is on many of the theme atoms now.

before
```ts=
import { border } from '@daohaus/ui'

...


border-radius: ${border.radius};
```

after
```ts=
border-radius: ${({ theme }) => theme.card.radius};
```

**12. Theme type is deprecated**
We no longer need to re-declare the type. Its inferred all the way down from the provider and the DefaultTheme.
 
before
```ts=
border-top: 1px ${({ theme: Theme }) => theme.secondary.step6} 
```

after
```ts=
border-top: 1px ${({ theme }) => theme.secondary.step6} 
```

    
## Resources

[Ethers.js to Viem upgrade guide](https://viem.sh/docs/ethers-migration.html)
    
[Example in DH starter](https://github.com/HausDAO/dao-app-starter-vite/pull/12/files)