Introduce Thorin ConnectModal (#184)

.github/workflows/deploy.yml

@@ -30,14 +30,6 @@ jobs:
         env:
           TALLY_API_KEY: ${{ secrets.TALLY_API_KEY }}
 
-      - name: Prepare tag
-        id: prepare_tag
-        if: startsWith(github.ref, 'refs/tags/')
-        run: |
-          TAG_NAME="${GITHUB_REF##refs/tags/}"
-          echo "::set-output name=tag_name::${TAG_NAME}"
-          echo "::set-output name=deploy_tag_name::deploy-${TAG_NAME}"
-
       - name: Edgeserver Upload
         uses: lvkdotsh/[email protected]
         with:

app/app/theme.tsx

@@ -1,20 +1,32 @@
 'use client';
 
-import '@ens-tools/thorin-core';
-
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ThemeProvider } from 'next-themes';
-import { goerli, mainnet, sepolia } from 'viem/chains';
+import { useEffect } from 'react';
+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: '3b205429cec06896f1d18c3b46dc5a68',
+            metadata: {
+                name: 'ENS Documentation',
+                description: 'Ethereum Name Service Documentation',
+                icons: ['https://docs.ens.domains/favicon.ico'],
+                url: 'https://docs.ens.domains',
+            },
+            showQrModal: false,
+        }),
+    ],
     transports: {
         [mainnet.id]: http(),
         [goerli.id]: http(),
         [sepolia.id]: http(),
+        [holesky.id]: http(),
     },
 });
 
@@ -27,6 +39,14 @@ declare module 'wagmi' {
 const queryClient = new QueryClient();
 
 export const Theme = ({ children }) => {
+    useEffect(() => {
+        (async () => {
+            const { setupConfig } = await import('@ens-tools/thorin-core');
+
+            setupConfig(() => config as any);
+        })();
+    }, []);
+
     return (
         <ThemeProvider attribute="class">
             <QueryClientProvider client={queryClient}>

app/package.json

@@ -12,8 +12,7 @@
     "browserslist": "defaults, not ie <= 11",
     "dependencies": {
         "@ens-tools/format": "^0.0.2",
-        "@ens-tools/thorin-core": "0.0.3",
-        "@ens-tools/thorin-react": "0.0.3",
+        "@ens-tools/thorin-core": "0.0.3-8",
         "@ensdomains/thorin": "^0.6.44",
         "@headlessui/react": "^1.7.18",
         "@mdx-js/loader": "^3.0.0",
@@ -59,6 +58,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)}

app/src/content/extras/tld-list/TLDList.tsx

@@ -101,8 +101,10 @@ export const TLDList = async () => {
 
     const chunks: string[][] = [];
 
-    for (let index = 0; index < TLDs.length; index += 100) {
-        chunks.push(TLDs.slice(index, index + 100));
+    const batch_size = 400;
+
+    for (let index = 0; index < TLDs.length; index += batch_size) {
+        chunks.push(TLDs.slice(index, index + batch_size));
     }
 
     const results: [string[], any][] = [];

app/src/layout/PageLayout.tsx

@@ -31,6 +31,8 @@ export const Layout: FC<{
         '@context': 'https://schema.org',
         '@type': 'Article',
         headline: mdxProperties.meta.title,
+        description: mdxProperties.meta.description,
+        // keywords
         // image: mdxProperties.meta.,
         author: mdxProperties.meta.contributors?.map((author) => ({
             '@type': 'Person',

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">