feat: add network config to every chain (#166)

* fix: term of service copy

* feat: add network config to every chain

* fix: ci/cd issues

.changeset/angry-cobras-impress.md

@@ -0,0 +1,5 @@
+---
+"@babylonlabs-io/bbn-wallet-connect": patch
+---
+
+add network config to every chain

src/components/Chains/container.tsx

@@ -13,7 +13,7 @@ interface ContainerProps {
   onDisconnectWallet?: (chainId: string) => void;
 }
 
-export default function ChainsContainer(props: ContainerProps) {
+export function ChainsContainer(props: ContainerProps) {
   const { chains, selectedWallets, displayWallets } = useWidgetState();
   const { selected } = useWalletConnect();
 

src/components/Chains/index.stories.ts

@@ -30,8 +30,9 @@ export const Default: Story = {
             label: "Installed",
           },
         ],
+        config: {},
       },
-      { id: "BBN", name: "Babylon Chain", icon: "/images/chains/babylon.jpeg", wallets: [] },
+      { id: "BBN", name: "Babylon Chain", icon: "/images/chains/babylon.jpeg", wallets: [], config: {} },
     ],
     selectedWallets: {
       BTC: {

src/components/Inscriptions/container.tsx

@@ -0,0 +1,14 @@
+import { useWidgetState } from "@/hooks/useWidgetState";
+
+import { Inscriptions } from ".";
+
+interface InscriptionsContainerProps {
+  className?: string;
+  onSubmit?: (value: boolean, showAgain: boolean) => void;
+}
+
+export function InscriptionsContainer({ className, onSubmit }: InscriptionsContainerProps) {
+  const { chains } = useWidgetState();
+
+  return <Inscriptions className={className} onSubmit={onSubmit} config={chains.BTC?.config} />;
+}

src/components/Inscriptions/index.tsx

@@ -3,10 +3,12 @@ import { useState } from "react";
 import { twMerge } from "tailwind-merge";
 
 import { FieldControl } from "@/components/FieldControl";
+import { BTCConfig } from "@/core/types";
 
 export interface Props {
   className?: string;
   onSubmit?: (value: boolean, showAgain: boolean) => void;
+  config?: BTCConfig;
 }
 
 export function Inscriptions({ className, onSubmit }: Props) {

src/components/TermsOfService/container.tsx

@@ -0,0 +1,15 @@
+import { useWidgetState } from "@/hooks/useWidgetState";
+
+import { TermsOfService } from ".";
+
+export interface TermsOfServiceContainerProps {
+  className?: string;
+  onClose?: () => void;
+  onSubmit?: () => void;
+}
+
+export function TermsOfServiceContainer(props: TermsOfServiceContainerProps) {
+  const { chains } = useWidgetState();
+
+  return <TermsOfService {...props} config={chains.BTC?.config} />;
+}

src/components/TermsOfService/index.tsx

@@ -3,9 +3,11 @@ import { useCallback, useMemo, useState } from "react";
 import { twMerge } from "tailwind-merge";
 
 import { FieldControl } from "@/components/FieldControl";
+import { BTCConfig } from "@/core/types";
 
 export interface Props {
   className?: string;
+  config?: BTCConfig;
   onClose?: () => void;
   onSubmit?: () => void;
 }
@@ -37,7 +39,7 @@ export function TermsOfService({ className, onClose, onSubmit }: Props) {
       <DialogBody>
         <FieldControl
           label={
-            <>
+            <div className="b-block">
               I certify that I have read and accept the updated{" "}
               <a
                 href="https://babylonlabs.io/terms-of-use"
@@ -57,7 +59,7 @@ export function TermsOfService({ className, onClose, onSubmit }: Props) {
                 Privacy Policy
               </a>
               .
-            </>
+            </div>
           }
           className="b-mb-8"
         >

src/components/WalletProvider/components/Screen.tsx

@@ -1,10 +1,10 @@
 import { type JSX } from "react";
 
-import Chains from "@/components/Chains/container";
-import { Inscriptions } from "@/components/Inscriptions";
+import { ChainsContainer as Chains } from "@/components/Chains/container";
+import { InscriptionsContainer as Inscriptions } from "@/components/Inscriptions/container";
 import { LoaderScreen } from "@/components/Loader";
-import { TermsOfService } from "@/components/TermsOfService";
-import Wallets from "@/components/Wallets/container";
+import { TermsOfServiceContainer as TermsOfService } from "@/components/TermsOfService/container";
+import { WalletsContainer as Wallets } from "@/components/Wallets/container";
 import type { Screen } from "@/context/State.context";
 import type { IChain, IWallet } from "@/core/types";
 

src/components/Wallets/container.tsx

@@ -13,7 +13,7 @@ interface WalletContainerProps {
   onSelectWallet?: (chain: IChain, wallet: IWallet) => void;
 }
 
-export default function WalletsContainer({ widgets = {}, ...props }: WalletContainerProps) {
+export function WalletsContainer({ widgets = {}, ...props }: WalletContainerProps) {
   const { chains, screen, displayChains } = useWidgetState();
   const chainId = screen.params?.chain ?? "";
   const currentChain = chains?.[chainId];

src/components/Wallets/index.stories.tsx

@@ -71,7 +71,7 @@ const wallets: IWallet[] = [
 export const Default: Story = {
   args: {
     className: "b-h-[600px]",
-    chain: { id: "BTC", name: "Bitcoin", icon: "/images/chains/bitcoin.png", wallets },
+    chain: { id: "BTC", name: "Bitcoin", icon: "/images/chains/bitcoin.png", config: {}, wallets },
     append: (
       <div className="b-sticky b-inset-x-0 b-bottom-0 b-bg-[#ffffff] b-pt-10">
         <Text className="b-mb-4">More wallets with Tomo Connect</Text>

src/context/Chain.context.tsx

@@ -28,8 +28,8 @@ interface ProviderProps {
 }
 
 export interface Connectors {
-  BTC: WalletConnector<"BTC", IBTCProvider> | null;
-  BBN: WalletConnector<"BBN", IBBNProvider> | null;
+  BTC: WalletConnector<"BTC", IBTCProvider, BTCConfig> | null;
+  BBN: WalletConnector<"BBN", IBBNProvider, BBNConfig> | null;
 }
 
 const defaultState: Connectors = {

src/core/WalletConnector.ts

@@ -10,7 +10,7 @@ export interface ConnectorEvents<P extends IProvider> {
   error: (error: Error) => void;
 }
 
-export class WalletConnector<N extends string, P extends IProvider> implements IConnector {
+export class WalletConnector<N extends string, P extends IProvider, C> implements IConnector<N, P, C> {
   private _connectedWallet: Wallet<P> | null = null;
   private _ee = createNanoEvents<ConnectorEvents<P>>();
 
@@ -19,6 +19,7 @@ export class WalletConnector<N extends string, P extends IProvider> implements I
     public readonly name: string,
     public readonly icon: string,
     public readonly wallets: Wallet<P>[],
+    public readonly config: C,
   ) {}
 
   get connectedWallet() {
@@ -53,7 +54,7 @@ export class WalletConnector<N extends string, P extends IProvider> implements I
   }
 
   clone() {
-    return new WalletConnector(this.id, this.name, this.icon, this.wallets);
+    return new WalletConnector(this.id, this.name, this.icon, this.wallets, this.config);
   }
 
   on<K extends keyof ConnectorEvents<P>>(name: K, handler: ConnectorEvents<P>[K]) {

src/core/index.ts

@@ -67,12 +67,12 @@ export const createWalletConnector = async <N extends string, P extends IProvide
   metadata: ChainMetadata<N, P, C>,
   context: any,
   config: C,
-): Promise<WalletConnector<N, P>> => {
+): Promise<WalletConnector<N, P, C>> => {
   const wallets: Wallet<P>[] = [];
 
   for (const walletMetadata of metadata.wallets) {
     wallets.push(await createWallet(walletMetadata, context, config));
   }
 
-  return new WalletConnector(metadata.chain, metadata.name, metadata.icon, wallets);
+  return new WalletConnector(metadata.chain, metadata.name, metadata.icon, wallets, config);
 };

src/core/types.ts

@@ -76,14 +76,16 @@ export interface IWallet<P extends IProvider = IProvider> {
   label: string;
 }
 
-export interface IChain<K extends string = string, P extends IProvider = IProvider> {
+export interface IChain<K extends string = string, P extends IProvider = IProvider, C = any> {
   id: K;
   name: string;
   icon: string;
   wallets: IWallet<P>[];
+  config: C;
 }
 
-export interface IConnector<K extends string = string, P extends IProvider = IProvider> extends IChain<K, P> {
+export interface IConnector<K extends string = string, P extends IProvider = IProvider, C = any>
+  extends IChain<K, P, C> {
   connect(wallet: string | IWallet<P>): Promise<IWallet<P> | null>;
   disconnect(): Promise<void>;
   on(event: string, cb: (wallet: IWallet<P>) => void): () => void;