Update readmes (WalletConnect#582)

* Create dedicated readme asset folder

* Update github action pr check branch

* add lerna to prettierignore (it auto formats)

* Use env variable for example projectId, animation tweakes

* save progress

* Add some hooks readme

* add more readme documentation

* finalise hooks docs

* Add project id env variable

.github/workflows/pr_checks.yml

@@ -23,6 +23,8 @@ jobs:
  run: npm ci
  - name: build
  run: npm run build
+ env:
+ NEXT_PUBLIC_PROJECT_ID: ${{ secrets.NEXT_PUBLIC_PROJECT_ID }}
 
  code_style:
  runs-on: ubuntu-latest

.gitignore

@@ -6,3 +6,4 @@ node_modules/
 .next
 out
 lerna-debug.log
+.env.local

examples/react/src/pages/_app.tsx

@@ -7,10 +7,11 @@ import type { AppProps } from 'next/app'
 import '../styles.css'
 
 // Get projectID at https://cloud.walletconnect.com
-const WC_PROJECT_ID = 'YOUR_PROJECT_ID'
+if (!process.env.NEXT_PUBLIC_PROJECT_ID)
+ throw new Error('You need to provide NEXT_PUBLIC_PROJECT_ID env variable')
 
 // Configure chains and providers (rpc's)
-const { chains, provider } = configureChains([chain.mainnet], [publicProvider()])
+const { chains, provider } = configureChains([chain.mainnet, chain.arbitrum], [publicProvider()])
 
 // Create wagmi client
 const wagmiClient = createClient({
@@ -21,9 +22,9 @@ const wagmiClient = createClient({
 
 // Configure web3modal
 const modalConfig: ConfigOptions = {
- projectId: WC_PROJECT_ID,
+ projectId: process.env.NEXT_PUBLIC_PROJECT_ID,
  theme: 'dark',
- accentColor: 'orange'
+ accentColor: 'default'
 }
 
 export default function App({ Component, pageProps }: AppProps) {

examples/react/src/sections/SwitchChainSection.tsx

@@ -13,7 +13,6 @@ export default function AccountSection() {
  <select onChange={({ target }) => onSwithChainDemo(target.value)} disabled={isLoading}>
  <option value="eip155:1">Ethereum</option>
  <option value="eip155:42161">Arbitrum</option>
- <option value="eip155:43114">Avalanche</option>
  </select>
  </section>
  )

examples/react/src/styles.css

@@ -1,5 +1,5 @@
 body {
- background-color: black;
+ background-color: #000;
  color: #fff;
  display: flex;
  justify-content: center;