Update thorin-core wagmi support & line-height

v3xlabs · Oct 29, 2024 · 17de40c · 17de40c
1 parent 6a0cecb
commit 17de40c
Show file tree

Hide file tree

Showing 8 changed files with 1,053 additions and 128 deletions.
diff --git a/packages/thorin-core/index.ts b/packages/thorin-core/index.ts
@@ -4,6 +4,7 @@ export * from './src/components/connect-modal/index.js';
 export * from './src/components/label/index.js';
 export * from './src/components/modal/index.js';
 export * from './src/components/tag/index.js';
+export * from './src/wagmi.js';
 import './index.js';
 
 export const hello = () => {

diff --git a/packages/thorin-core/package.json b/packages/thorin-core/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@ens-tools/thorin-core",
-    "version": "0.1.3",
+    "version": "0.1.4-1",
     "type": "module",
     "main": "./dist/esm/index.js",
     "types": "./dist/types/index.d.ts",
@@ -31,6 +31,7 @@
         "@rollup/plugin-json": "^6.1.0",
         "lit": "^3.1.2",
         "rollup-plugin-peer-deps-external": "^2.2.4",
+        "rxjs": "^7.8.1",
         "ts-pattern": "^5.5.0",
         "webcomponent-qr-code": "^1.2.0"
     },
@@ -48,6 +49,7 @@
     "peerDependencies": {
         "@wagmi/connectors": "^4.1.14",
         "@wagmi/core": "^2.6.5",
-        "viem": "2.x"
+        "viem": "2.x",
+        "wagmi": "^2.12.25"
     }
 }
diff --git a/packages/thorin-core/src/components/connect-modal/connected.ts b/packages/thorin-core/src/components/connect-modal/connected.ts
@@ -73,6 +73,7 @@ export class ThorinConnectModalConnected extends LitElement {
                 align-items: center;
                 gap: var(--thorin-spacing-4);
                 font-size: 1.1em;
+                line-height: 1.3;
             }
             .profile .row-1 .left {
                 display: flex;
@@ -90,6 +91,7 @@ export class ThorinConnectModalConnected extends LitElement {
             .profile .row-1 .subtext {
                 color: var(--thorin-text-secondary);
                 font-size: 0.75em;
+                line-height: 1.1;
             }
             .external-link-icon {
                 width: 16px;

diff --git a/packages/thorin-core/src/components/connect-modal/index.ts b/packages/thorin-core/src/components/connect-modal/index.ts
@@ -4,9 +4,7 @@
 import 'webcomponent-qr-code';
 import './connected';
 
-// import { walletConnect } from '@wagmi/connectors';
 import {
-    type Config,
     type Connection,
     type Connector,
     type ConnectorEventMap,
@@ -22,18 +20,7 @@ import { property, state } from 'lit/decorators.js';
 
 import { customElement } from '../../internal/component';
 import { styles } from '../../styles';
-
-let getWagmiConfig = () => ({} as Config);
-
-export const setupConfig = (config: Config | (() => Config)) => {
-    console.log(
-        '%c[Thorin Connect]',
-        'color: #3396ff',
-        'Setting up config',
-        config
-    );
-    getWagmiConfig = typeof config === 'function' ? config : () => config;
-};
+import { getWagmiConfig } from '../../wagmi.js';
 
 const wcLog = (event: string, ...data: (string | object)[]) => {
     console.log(
@@ -196,12 +183,17 @@ export class ThorinConnectModal extends LitElement {
         console.log('updated');
     }
 
+    override firstUpdated() {
+        window.addEventListener('wagmiConfigChangedThorin', () => {
+            this.updateWagmiState();
+        });
+    }
+
     override render() {
         const wagmiConfig = getWagmiConfig();
-        const account =
-            wagmiConfig && wagmiConfig?.state
-                ? getAccount(wagmiConfig)
-                : undefined;
+        const account = wagmiConfig // && wagmiConfig?.state
+            ? getAccount(wagmiConfig)
+            : undefined;
 
         const isWalletConnect = this.activeConnector?.type === 'walletConnect';
 
@@ -213,6 +205,8 @@ export class ThorinConnectModal extends LitElement {
 
         const connectors = getConnectors(wagmiConfig);
 
+        console.log({ account });
+
         return html`
             <thorin-modal
                 ?open="${this.open}"

diff --git a/packages/thorin-core/src/wagmi.ts b/packages/thorin-core/src/wagmi.ts
@@ -0,0 +1,26 @@
+import type { Config } from '@wagmi/core';
+
+const globalThing: {
+    config: Config | undefined;
+} = {
+    config: undefined,
+};
+
+export const getWagmiConfig = () => {
+    return globalThing.config;
+};
+
+export const THORIN_CONNECT_PREFIX = '%c[Thorin Connect]';
+
+export const setupConfig = (config: Config | (() => Config)) => {
+    console.log(
+        THORIN_CONNECT_PREFIX,
+        'color: #3396ff',
+        'Setting up config',
+        config
+    );
+    globalThing.config = typeof config === 'function' ? config() : config;
+    window.dispatchEvent(
+        new CustomEvent('wagmiConfigChangedThorin', { detail: config })
+    );
+};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/web/index.html b/web/index.html
@@ -97,6 +97,9 @@ <h2>Modals</h2>
                     <thorin-button onClick="openconnectmodal()"
                         >Open Connect Modal</thorin-button
                     >
+                    <thorin-button onClick="fakeconnect()"
+                        >Open Connect Modal</thorin-button
+                    >
                 </div>
             </div>
         </div>

diff --git a/web/index.ts b/web/index.ts
@@ -2,7 +2,7 @@ import { setupConfig } from '@ens-tools/thorin-core';
 import '@ens-tools/thorin-core/style.css';
 import 'webcomponent-qr-code';
 import { mainnet, sepolia } from 'wagmi/chains';
-import { createConfig, http, injected } from '@wagmi/core'
+import { createConfig, createStorage, http, injected } from '@wagmi/core'
 import { walletConnect } from '@wagmi/connectors';
 
 const config = createConfig(
@@ -17,6 +17,7 @@ const config = createConfig(
                 showQrModal: false,
             }),
         ],
+        storage: createStorage({ storage: window.localStorage }), 
         transports: {
             [mainnet.id]: http(),
             [sepolia.id]: http(),