chore: add sponsor

Author: tmm

README.md

@@ -23,10 +23,6 @@
 
 <br>
 
-> **Note**
->
-> wagmi is participating in [Gitcoin Grant Round 15](https://wagmi.sh/gitcoin) until September 22. Contributions are matched with [Quadratic Funding](https://finematics.com/quadratic-funding-explained/) (e.g. $1 turns into $27). If you find wagmi useful, please consider supporting development [here](https://wagmi.sh/gitcoin). Thank you 🙏
-
 ## Features
 
 - 🚀 20+ hooks for working with wallets, ENS, contracts, transactions, signing, etc.
@@ -135,6 +131,12 @@ If you find wagmi useful, please consider supporting development. Thank you 🙏
     <img alt="context logo" src="https://raw.githubusercontent.com/wagmi-dev/.github/main/content/sponsors/context-light.svg" width="auto" height="50">
   </picture>
 </a>
+<a href="https://walletconnect.com">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/wagmi-dev/.github/main/content/sponsors/walletconnect-dark.svg">
+    <img alt="WalletConnect logo" src="https://raw.githubusercontent.com/wagmi-dev/.github/main/content/sponsors/walletconnect-light.svg" width="auto" height="50">
+  </picture>
+</a>
 
 ## Contributing
 

docs/components/docs/Sponsors.tsx

@@ -1,43 +1,55 @@
 import { useTheme } from 'next-themes'
 
-const sponsors = {
-  family: {
-    dark: 'https://raw.githubusercontent.com/wagmi-dev/.github/main/content/sponsors/family-dark.svg',
-    light:
-      'https://raw.githubusercontent.com/wagmi-dev/.github/main/content/sponsors/family-light.svg',
+const sponsors = [
+  {
+    id: 'family',
+    name: 'Family',
+    href: 'https://twitter.com/family',
+    logo: {
+      dark: 'https://raw.githubusercontent.com/wagmi-dev/.github/main/content/sponsors/family-dark.svg',
+      light:
+        'https://raw.githubusercontent.com/wagmi-dev/.github/main/content/sponsors/family-light.svg',
+    },
   },
-  context: {
-    dark: 'https://raw.githubusercontent.com/wagmi-dev/.github/main/content/sponsors/context-dark.svg',
-    light:
-      'https://raw.githubusercontent.com/wagmi-dev/.github/main/content/sponsors/context-light.svg',
+  {
+    id: 'context',
+    name: 'Context',
+    href: 'https://twitter.com/context',
+    logo: {
+      dark: 'https://raw.githubusercontent.com/wagmi-dev/.github/main/content/sponsors/context-dark.svg',
+      light:
+        'https://raw.githubusercontent.com/wagmi-dev/.github/main/content/sponsors/context-light.svg',
+    },
   },
-} as const
+  {
+    id: 'walletconnect',
+    name: 'WalletConnect',
+    href: 'https://walletconnect.com',
+    logo: {
+      dark: 'https://raw.githubusercontent.com/wagmi-dev/.github/main/content/sponsors/walletconnect-dark.svg',
+      light:
+        'https://raw.githubusercontent.com/wagmi-dev/.github/main/content/sponsors/walletconnect-light.svg',
+    },
+  },
+] as const
 
 export function Sponsors() {
   const { resolvedTheme } = useTheme()
   const mode = (resolvedTheme ?? 'dark') as 'dark' | 'light'
   return (
     <div className="flex my-5 gap-2">
-      <a href="https://twitter.com/family">
-        <picture>
-          <img
-            alt="family logo"
-            src={sponsors.family[mode]}
-            width="auto"
-            className="h-12"
-          />
-        </picture>
-      </a>
-      <a href="https://twitter.com/context">
-        <picture>
-          <img
-            alt="context logo"
-            src={sponsors.context[mode]}
-            width="auto"
-            className="h-12"
-          />
-        </picture>
-      </a>
+      {sponsors.map((sponsor) => (
+        <a href={sponsor.href} key={sponsor.id}>
+          <picture>
+            <img
+              alt={sponsor.name}
+              src={sponsor.logo[mode]}
+              width="auto"
+              className="h-12"
+            />
+          </picture>
+        </a>
+      ))}
     </div>
   )
 }