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
}
`
```
<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.
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};
```
**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)
Sign in with Wallet
Connect another wallet