feat: add light-client example

package.json

@@ -14,15 +14,18 @@
     "lint:ci": "rome ci ."
   },
   "dependencies": {
+    "@polkadot/api": "^10.9.1",
     "@polkadot/api-contract": "^10.9.1",
     "@polkadot/api-derive": "^10.9.1",
-    "@polkadot/api": "^10.9.1",
     "@polkadot/extension-dapp": "^0.46.5",
     "@polkadot/extension-inject": "^0.46.5",
+    "@polkadot/rpc-provider": "^10.9.1",
     "@polkadot/util": "^12.3.2",
+    "@substrate/connect": "^0.7.30",
     "@talismn/connect-wallets": "^1.2.3"
   },
   "devDependencies": {
+    "@types/node": "18.15.6",
     "rome": "12.1.3"
   },
   "packageManager": "[email protected]"

packages/useink/package.json

@@ -29,6 +29,7 @@
     "@changesets/cli": "^2.26.1",
     "@polkadot/types": "^10.9.1",
     "@polkadot/types-codec": "^10.9.1",
+    "@types/node": "18.15.6",
     "@types/react": "^18.2.7",
     "tsup": "^6.7.0",
     "typescript": "^5.0.4"

packages/useink/src/core/types/index.ts

@@ -2,6 +2,7 @@ export * from './api-contract.ts';
 export * from './array.ts';
 export * from './contracts.ts';
 export * from './result.ts';
+export * from './substrate-connect.ts';
 export * from './substrate.ts';
 export * from './talisman-connect-wallets.ts';
 export * from './unsub.ts';

packages/useink/src/core/types/substrate-connect.ts

@@ -0,0 +1,2 @@
+export { ScProvider } from '@polkadot/rpc-provider';
+export * as Sc from '@substrate/connect';

packages/useink/src/react/providers/api/model.ts

@@ -1,11 +1,26 @@
 import { ChainId } from '../../../chains/index';
-import { ApiPromise, WsProvider } from '../../../core/index';
+import { ApiPromise, ScProvider, WsProvider } from '../../../core/index';
 
-export interface IApiProvider {
-  api: ApiPromise;
+interface TrustedConnection {
+  connection: 'trusted';
   provider: WsProvider;
 }
 
+interface LightClientConnection {
+  connection: 'light-client';
+  provider: ScProvider;
+}
+
+export type ConnectionType =
+  | TrustedConnection['connection']
+  | LightClientConnection['connection'];
+
+export type ProviderConnection = TrustedConnection | LightClientConnection;
+
+export type IApiProvider = {
+  api: ApiPromise;
+} & ProviderConnection;
+
 export type IApiProviders = Partial<Record<ChainId, IApiProvider>>;
 
 export interface API {

packages/useink/src/react/providers/api/provider.tsx

@@ -1,30 +1,58 @@
-import { ApiPromise, WsProvider } from '../../../core/index';
+import { ChainId } from '../../../chains/types.ts';
+import { ApiPromise, Sc, ScProvider, WsProvider } from '../../../core/index';
 import { useChains } from '../../hooks/index';
-import { useConfig } from '../../index';
+import { ProviderConnection, useConfig } from '../../index';
+import { ProviderConnectionConfig } from '../config/index.ts';
 import { APIContext } from './context.ts';
 import { apiProvidersReducer } from './reducer.ts';
 import React, { useEffect, useReducer } from 'react';
 
+const isTrusted = (
+  chainId: ChainId,
+  apiConfig?: ProviderConnectionConfig,
+): boolean => {
+  const chainConfig = apiConfig?.[chainId];
+  if (chainConfig !== undefined) return chainConfig === 'trusted';
+
+  const defaultConfig = apiConfig?.default;
+  if (defaultConfig !== undefined) return defaultConfig === 'trusted';
+
+  return false;
+};
+
 export const APIProvider: React.FC<React.PropsWithChildren> = ({
   children,
 }) => {
   const chains = useChains();
-  const { chainRpcs } = useConfig();
+  const c = useConfig();
   const [apis, dispatch] = useReducer(apiProvidersReducer, {});
 
   useEffect(() => {
     chains.forEach((chain) => {
-      const provider = new WsProvider(chainRpcs[chain.id] || chain.rpcs[0]);
-
-      ApiPromise.create({ provider }).then((api) => {
-        dispatch({
-          type: 'ADD_API_PROVIDER',
-          chainId: chain.id,
-          apiProvider: { api, provider },
-        });
-      });
+      const connection: ProviderConnection = isTrusted(chain.id, c.api)
+        ? {
+            connection: 'trusted',
+            provider: new WsProvider(c.chainRpcs[chain.id] || chain.rpcs[0]),
+          }
+        : {
+            connection: 'light-client',
+            provider: new ScProvider(Sc, 'all'),
+          };
+
+      console.log('conn', connection);
+
+      ApiPromise.create({ provider: connection.provider })
+        .then((api) => {
+          console.log('api', api);
+          dispatch({
+            type: 'ADD_API_PROVIDER',
+            chainId: chain.id,
+            apiProvider: { api, ...connection },
+          });
+        })
+        .catch(console.error);
     });
-  }, [chains, chainRpcs]);
+  }, [chains, c.chainRpcs, c.api]);
 
   return <APIContext.Provider value={{ apis }}>{children}</APIContext.Provider>;
 };

packages/useink/src/react/providers/config/model.ts

@@ -1,17 +1,25 @@
 import { Chain, ChainId, RococoContractsTestnet } from '../../../chains/index';
 import { ArrayOneOrMore } from '../../../core/index';
 import { FIVE_SECONDS, HALF_A_SECOND } from '../../constants.ts';
+import { ConnectionType } from '../../providers/api/model.ts';
 
 export type ChainRPCs = Partial<Record<ChainId, string>>;
 
 export type CallerAddress = string;
 
+export type ProviderConnectionConfig = Partial<
+  Record<ChainId, ConnectionType>
+> & { default?: ConnectionType };
+
+export type DefaultCallerConfig = Partial<Record<ChainId, CallerAddress>> & {
+  default?: CallerAddress;
+};
+
 export type ConfigProps = {
   dappName?: string;
   chains: ArrayOneOrMore<Chain>;
-  caller?: {
-    default?: CallerAddress;
-  } & Partial<Record<ChainId, CallerAddress>>;
+  api?: ProviderConnectionConfig;
+  caller?: DefaultCallerConfig;
   events?: {
     expiration?: number;
     checkInterval?: number;

playground/src/pages/_app.tsx

@@ -34,6 +34,9 @@ function App({ Component, pageProps }: AppProps) {
         caller: {
           default: '5EyR7vEk7DtvEWeefGcXXMV6hKwB8Ex5uvjHufm466mbjJkR',
         },
+        api: {
+          default: 'light-client',
+        },
       }}
     >
       <NotificationsProvider>

playground/src/pages/index.tsx

@@ -5,8 +5,11 @@ export default function Index() {
   return (
     <>
       <Head>
-        <title>Playground</title>
-        <meta name='description' content='useink Kitchen Sink' />
+        <title>useink Playground</title>
+        <meta
+          name='description'
+          content='Playground is a sandbox for useink development and showing quick examples.'
+        />
         <meta name='viewport' content='width=device-width, initial-scale=1' />
         <link rel='icon' href='/squink.svg' />
       </Head>