Introduce Thorin ConnectModal

app/app/theme.tsx

@@ -2,22 +2,32 @@
 
 import '@ens-tools/thorin-core';
 
+import { setupConfig } from '@ens-tools/thorin-core';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ThemeProvider } from 'next-themes';
-import { goerli, mainnet, sepolia } from 'viem/chains';
+import { goerli, holesky, mainnet, sepolia } from 'viem/chains';
 import { createConfig, http, WagmiProvider } from 'wagmi';
-import { injected } from 'wagmi/connectors';
+import { injected, walletConnect } from 'wagmi/connectors';
 
 const config = createConfig({
-    chains: [mainnet, goerli, sepolia],
-    connectors: [injected({})],
+    chains: [mainnet, goerli, sepolia, holesky],
+    connectors: [
+        injected({}),
+        walletConnect({
+            projectId: 'b451d5ff25d61b3fde7b30f167a5a957',
+            showQrModal: false,
+        }),
+    ],
     transports: {
         [mainnet.id]: http(),
         [goerli.id]: http(),
         [sepolia.id]: http(),
+        [holesky.id]: http(),
     },
 });
 
+setupConfig(config as any);
+
 declare module 'wagmi' {
     interface Register {
         config: typeof config;

app/package.json

@@ -12,7 +12,7 @@
     "browserslist": "defaults, not ie <= 11",
     "dependencies": {
         "@ens-tools/format": "^0.0.2",
-        "@ens-tools/thorin-core": "0.0.3",
+        "@ens-tools/thorin-core": "0.0.3-3",
         "@ens-tools/thorin-react": "0.0.3",
         "@ensdomains/thorin": "^0.6.44",
         "@headlessui/react": "^1.7.18",
@@ -59,6 +59,7 @@
         "use-debounce": "^10.0.0",
         "viem": "^2.7.8",
         "wagmi": "^2.5.6",
+        "webcomponent-qr-code": "^1.2.0",
         "zod": "^3.22.4",
         "zustand": "^4.5.0"
     },

app/src/content/demos/border/BorderConnection.tsx

@@ -1,26 +1,47 @@
 'use client';
 
-import { FC, useState } from 'react';
+import { FC, useLayoutEffect, useRef, useState } from 'react';
 import { FaWallet } from 'react-icons/fa6';
 import { useAccount } from 'wagmi';
 
 import { Button } from '@/components/Button';
-import { ConnectModal } from '@/wallet/ConnectModal';
 
 import { ChainSwitcher } from './ChainSwitcher';
 
 export const BorderConnection: FC<{ chains?: Set<number> }> = ({ chains }) => {
-    const { isConnected } = useAccount();
+    const { isConnected, address, connector } = useAccount();
     const [isOpen, setIsOpen] = useState(false);
+    const connectModalReference = useRef(null);
+
+    useLayoutEffect(() => {
+        connectModalReference?.current?.addEventListener('onClose', () => {
+            setIsOpen(false);
+        });
+    }, [connectModalReference]);
 
     return (
         <div>
-            <ConnectModal isOpen={isOpen} onClose={() => setIsOpen(false)} />
+            {/* <ConnectModal isOpen={isOpen} onClose={() => setIsOpen(false)} /> */}
             {!isConnected && (
                 <Button onClick={() => setIsOpen(true)}>Connect Wallet</Button>
             )}
+
+            {/* @ts-ignore */}
+            <thorin-connect-modal
+                open={isOpen ? true : undefined}
+                ref={connectModalReference}
+            >
+                {/* @ts-ignore */}
+            </thorin-connect-modal>
+
             {isConnected && (
                 <div className="flex items-stretch gap-2">
+                    <div>
+                        <div className="text-sm text-gray-400">
+                            {connector.name}
+                        </div>
+                        <div className="text-sm font-bold">{address}</div>
+                    </div>
                     <ChainSwitcher available={chains} />
                     <Button
                         onClick={() => setIsOpen(true)}

docs/dao/stewards.mdx

@@ -1,6 +1,6 @@
 {/** @type {import('@/lib/mdxPageProps').MdxMetaProps} */}
 export const meta = {
-    description: '',
+    description: 'Overview of the current governance stewards',
     emoji: '',
     contributors: [
         // 'avsa'

docs/ensip/15.mdx

@@ -14,7 +14,6 @@ export const meta = {
 
 # ENSIP-15: ENS Name Normalization Standard
 
-
 ## Abstract
 
 This ENSIP standardizes Ethereum Name Service (ENS) name normalization process outlined in [ENSIP-1 § Name Syntax](./ensip-1-ens.md#name-syntax).

docs/learn/deployments.mdx

@@ -1,6 +1,6 @@
 {/** @type {import('@/lib/mdxPageProps').MdxMetaProps} */}
 export const meta = {
-    description: '',
+    description: 'ENS is multichain, but it all starts with Ethereum Mainnet. This page contains common addresses for ENS contracts.',
     emoji: '📰',
     contributors: [
         'lucemans'

docs/registry/eth.mdx

@@ -15,14 +15,14 @@ The ETH Registrar is a special registrar. It allows for trustless on-chain name
 
 ## BaseRegistrar vs Controller
 
-The ETH Registrar is split into two contracts. The [BaseRegistrar](#todo) and the [ETHRegistrarController](#todo).
+The ETH Registrar is split into two contracts. The [BaseRegistrar](https://github.com/ensdomains/ens-contracts/blob/staging/contracts/ethregistrar/BaseRegistrarImplementation.sol) and the [ETHRegistrarController](https://github.com/ensdomains/ens-contracts/blob/staging/contracts/ethregistrar/ETHRegistrarController.sol).
 The BaseRegistrar is responsible for name ownership, transfers, etc (ownership related),
 while the Controller is responsible for registration & renewal (pricing related).
 This separation is done to reduce the attack surface of the registrar, and provides users with the guarantees of continued ownership of a name so long as the registrar is in place.
 
 ### Controllers
 
-The [ETHRegistrarController](#todo) is the main controller for the ETH Registrar, and provides a straightforward registration and renewal mechanism.
+The [ETHRegistrarController](https://github.com/ensdomains/ens-contracts/blob/staging/contracts/ethregistrar/ETHRegistrarController.sol) is the main controller for the ETH Registrar, and provides a straightforward registration and renewal mechanism.
 
 ## Pricing Structure
 

docs/resolution/index.mdx

@@ -23,7 +23,7 @@ Here is a little peak at what happens under the hood of your favourite library w
 
 ### 1. Find the Resolver
 
-Every name has a "resolver". A resolver is simply a contract that implements the [resolver specification](#todo) and can be queried for information about a name.
+Every name has a "resolver". A resolver is simply a contract that implements the [resolver specification](/resolvers/quickstart) and can be queried for information about a name.
 To get the resolver responsible for a name you can query [The Registry](/registry/ens) for the `resolver` of a name.
 
 <CodeGroup title="Get the resolver">