@lombard.finance/sdk-starknet 0.3.0-canary.2

package/src/stories/components/Button/Button.tsx

@@ -0,0 +1,52 @@
+import './Button.css';
+
+import React from 'react';
+
+import { Spinner } from '../Spinner';
+
+export interface ButtonProps {
+  disabled?: boolean;
+  children?: React.ReactNode;
+  actionName?: string;
+  primary?: boolean;
+  size?: 'small' | 'medium' | 'large';
+  isLoading?: boolean;
+  onClick?: () => void;
+}
+
+/**
+ * Execute action button
+ */
+export const Button = ({
+  primary = true,
+  size = 'medium',
+  actionName,
+  children,
+  isLoading,
+  ...props
+}: ButtonProps) => {
+  const label = actionName ? (
+    <span>
+      Execute: <span style={{ fontFamily: 'monospace' }}>{actionName}</span>
+    </span>
+  ) : (
+    children
+  );
+
+  return (
+    <button
+      type="button"
+      className={[
+        'btn',
+        size === 'small' ? 'btn-sm' : '',
+        size === 'large' ? 'btn-lg' : '',
+        'story-btn',
+      ].join(' ')}
+      {...props}
+    >
+      {label}
+
+      {isLoading && <Spinner color="text-primary" className="ms-2" />}
+    </button>
+  );
+};

package/src/stories/components/Button/index.ts

@@ -0,0 +1 @@
+export * from './Button';

package/src/stories/components/CodeBlock/CodeBlock.tsx

@@ -0,0 +1,38 @@
+import './CodeBlockStyles.css';
+
+interface ICodeBlockProps {
+  text?: unknown;
+  withFormatting?: boolean;
+}
+
+export function CodeBlock({
+  text,
+  withFormatting = true,
+}: ICodeBlockProps): JSX.Element | null {
+  if (text === undefined || text === null) {
+    return null;
+  }
+
+  const formattedCode: string = withFormatting
+    ? JSON.stringify(text, null, 2)
+    : String(text);
+
+  const isError = text instanceof Error;
+
+  return (
+    <pre
+      className="card my-3 code-block--max-height"
+      style={
+        isError
+          ? {
+              color: 'white',
+              background: 'red',
+              borderColor: 'darkred',
+            }
+          : undefined
+      }
+    >
+      <code className="card-body">{formattedCode}</code>
+    </pre>
+  );
+}

package/src/stories/components/CodeBlock/CodeBlockStyles.css

@@ -0,0 +1,3 @@
+.code-block--max-height {
+  max-height: 500px;
+}

package/src/stories/components/CodeBlock/index.ts

@@ -0,0 +1 @@
+export * from './CodeBlock';

package/src/stories/components/ConnectButton/connect-button.tsx

@@ -0,0 +1,112 @@
+import { useEffect, useState } from 'react';
+
+import { StarknetChainId } from '../../../utils/chains';
+import { useConnection } from '../../hooks/use-connection';
+
+export type ConnectButtonProps = {
+  desiredChainId?: StarknetChainId;
+  label?: string;
+};
+
+export function ConnectButton({ desiredChainId, label }: ConnectButtonProps) {
+  const [chainId, setChainId] = useState<StarknetChainId | undefined>(
+    undefined,
+  );
+  const { account, connect, disconnect } = useConnection();
+
+  useEffect(() => {
+    if (!account) {
+      if (!chainId) setChainId(undefined);
+      return;
+    }
+
+    async () => {
+      const connectedChainId = (await account.getChainId()) as StarknetChainId;
+
+      if (chainId !== connectedChainId) {
+        setChainId(connectedChainId);
+      }
+    };
+  }, [account, chainId]);
+
+  if (account) {
+    return (
+      <div
+        style={{
+          display: 'inline-flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: '5px',
+          border: '1px solid var(--bs-gray-900)',
+          borderRadius: '5px',
+          padding: '5px',
+          height: '38px',
+        }}
+      >
+        <span
+          style={{
+            background: 'var(--bs-green)',
+            color: '#ffffff',
+            borderRadius: '5px',
+            padding: '2px',
+            fontSize: '0.8em',
+          }}
+        >
+          connected
+        </span>
+
+        <span
+          style={{
+            background: 'var(--bs-gray-100)',
+            borderRadius: '5px',
+            padding: '2px',
+            fontSize: '0.8em',
+          }}
+        >
+          {account.address}
+        </span>
+
+        <span
+          style={{
+            background: chainId ? 'var(--bs-gray-200)' : 'var(--bs-red)',
+            color: chainId ? 'var(--bs-black)' : 'var(--bs-white)',
+            borderRadius: '5px',
+            padding: '2px',
+            fontSize: '0.8em',
+          }}
+        >
+          {chainId}
+        </span>
+
+        <button
+          type="button"
+          style={{
+            background: 'var(--bs-danger)',
+            color: 'var(--bs-white)',
+            border: '0',
+            borderRadius: '5px',
+            padding: '2px',
+            fontSize: '0.8em',
+            cursor: 'pointer',
+          }}
+          onClick={() => disconnect()}
+        >
+          Disconnect
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <button
+      className="btn"
+      style={{
+        border: '1px solid var(--bs-gray-900)',
+      }}
+      type="button"
+      onClick={() => connect(desiredChainId)}
+    >
+      {label || 'Connect wallet'}
+    </button>
+  );
+}

package/src/stories/components/ConnectButton/index.ts

@@ -0,0 +1 @@
+export { ConnectButton, type ConnectButtonProps } from './connect-button';

package/src/stories/components/Spinner/Spinner.tsx

@@ -0,0 +1,24 @@
+interface ISpinnerProps {
+  color?: 'text-primary' | 'text-light';
+  size?: 'sm' | 'md';
+  className?: string;
+}
+
+export function Spinner({
+  color = 'text-primary',
+  size = 'sm',
+  className,
+}: ISpinnerProps): JSX.Element {
+  return (
+    <output
+      className={[
+        'spinner-border',
+        color,
+        size === 'sm' ? 'spinner-border-sm' : '',
+        className || '',
+      ].join(' ')}
+    >
+      <span className="visually-hidden">Loading...</span>
+    </output>
+  );
+}

package/src/stories/components/Spinner/index.ts

@@ -0,0 +1 @@
+export * from './Spinner';

package/src/stories/components/decorators/function-type.tsx

@@ -0,0 +1,66 @@
+type FuncType = 'api-get' | 'api-post' | 'read' | 'write' | 'flow';
+
+export const functionType =
+  (type: FuncType) => (Story: React.ComponentType) => {
+    return (
+      <div
+        style={{
+          display: 'flex',
+          gap: '5px',
+          flexDirection: 'column',
+          border: `1px solid ${colors[type]}`,
+          borderRadius: '5px',
+          overflow: 'hidden',
+        }}
+      >
+        <div
+          style={{
+            display: 'inline-flex',
+            flexDirection: 'row',
+            gap: '5px',
+            fontSize: '0.8em',
+            background: colors[type],
+            color: 'var(--bs-white)',
+            padding: '2px 5px',
+            //   borderRadius: '5px',
+          }}
+        >
+          <span style={{ fontWeight: '800 ' }}>{labels[type]}</span>
+          <span style={{ opacity: '0.8' }}>{descriptions[type]}</span>
+        </div>
+
+        <div
+          style={{
+            padding: '20px',
+          }}
+        >
+          <Story />
+        </div>
+      </div>
+    );
+  };
+
+const labels: Record<FuncType, string> = {
+  'api-get': 'API (get)',
+  'api-post': 'API (post)',
+  read: 'READ',
+  write: 'WRITE',
+  flow: 'FLOW',
+};
+
+const descriptions: Record<FuncType, string> = {
+  'api-get': 'The function gets data from the Lombard API(s)',
+  'api-post': 'The function posts data to the Lombard API(s)',
+  read: 'The function reads data from the contract(s)',
+  write:
+    'The function writes data to the contract(s) or performs a wallet action.',
+  flow: '',
+};
+
+const colors: Record<FuncType, string> = {
+  'api-get': 'rgb(100 100 255)',
+  'api-post': 'rgb(100 0 255)',
+  read: 'rgb(200 100 255)',
+  write: 'rgb(200 0 255)',
+  flow: 'rgb(0 155 255)',
+};

package/src/stories/components/decorators/index.ts

@@ -0,0 +1 @@
+export { functionType } from './function-type';

package/src/stories/components/decorators/starknet-context.tsx

@@ -0,0 +1,21 @@
+import { useState } from 'react';
+import { WalletAccount } from 'starknet';
+
+import { StarknetContext } from '../../hooks/use-connection';
+
+export const starknetContext = () => (Story: React.ComponentType) => {
+  const [walletAccount, setWalletAccount] = useState<WalletAccount | undefined>(
+    undefined,
+  );
+
+  return (
+    <StarknetContext.Provider
+      value={{
+        walletAccount,
+        setWalletAccount,
+      }}
+    >
+      <Story />
+    </StarknetContext.Provider>
+  );
+};

package/src/stories/components/error-block.tsx

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+
+export const ErrorBlock = ({ children }: { children: ReactNode }) =>
+  children && (
+    <div
+      style={{
+        margin: '20px 0',
+        padding: '10px 0',
+        paddingLeft: '20px',
+        borderLeft: '3px solid var(--bs-red)',
+        whiteSpace: 'pre-wrap',
+        fontSize: '0.8em',
+        color: 'var(--bs-red)',
+        background: '#fef5f6',
+        overflow: 'hidden',
+        borderRadius: '5px',
+      }}
+    >
+      {children}
+    </div>
+  );

package/src/stories/hooks/use-connection.ts

@@ -0,0 +1,70 @@
+import {
+  connect as starknet_connect,
+  disconnect as starknet_disconnect,
+} from '@starknet-io/get-starknet';
+import { createContext, useCallback, useContext } from 'react';
+import { defaultProvider,RpcProvider, WalletAccount } from 'starknet';
+
+import { StarknetChainId } from '../../utils/chains';
+import { ERR_NO_STARKNET_WINDOW_OBJECT } from '../../utils/err';
+import { getRpcProvider } from '../../utils/rpc-providers';
+
+const connectStarknet = async (rpcProvider?: RpcProvider) => {
+  const starknetWindowObject = await starknet_connect({
+    modalMode: 'alwaysAsk',
+    modalTheme: 'light',
+  });
+  if (!starknetWindowObject) {
+    throw ERR_NO_STARKNET_WINDOW_OBJECT;
+  }
+
+  const walletAccount = await WalletAccount.connect(
+    rpcProvider || defaultProvider,
+    starknetWindowObject,
+  );
+
+  return walletAccount;
+};
+
+export function useConnection() {
+  const { walletAccount, setWalletAccount } = useContext(StarknetContext);
+
+  const connect = useCallback(
+    async (chainId?: StarknetChainId) => {
+      console.info('Connecting starknet to', chainId);
+      try {
+        const walletAccount = await connectStarknet(
+          getRpcProvider(chainId || StarknetChainId.SN_SEPOLIA),
+        );
+        setWalletAccount(walletAccount);
+      } catch (err) {
+        console.info('Could not connect to Starknet.', err);
+      }
+    },
+    [setWalletAccount],
+  );
+
+  const disconnect = useCallback(async () => {
+    console.info('disconnecting starknet');
+    setWalletAccount(undefined);
+    await starknet_disconnect();
+  }, [setWalletAccount]);
+
+  return {
+    account: walletAccount,
+    connect,
+    disconnect,
+  };
+}
+
+export const StarknetContext = createContext<{
+  walletAccount: WalletAccount | undefined;
+  setWalletAccount: (walletAccount: WalletAccount | undefined) => void;
+}>({
+  walletAccount: undefined,
+  setWalletAccount: () => {
+    throw new Error(
+      'Do not use directly, use with the `starknetContext` decorator',
+    );
+  },
+});

package/src/stories/hooks/use-query.ts

@@ -0,0 +1,56 @@
+import { extractErrorMessage } from '@lombard.finance/sdk-common/utils/err';
+import { useCallback, useEffect, useState } from 'react';
+
+type QueryFn<T> = () => Promise<T>;
+
+interface UseQueryResult<T> {
+  data: T | undefined;
+  error: string | undefined;
+  isLoading: boolean;
+  refetch: () => void;
+}
+
+/**
+ * Custom hook for making a query and managing the query state.
+ *
+ * @template T - The type of data returned by the query.
+ * @param queryFn The function that performs the query.
+ * @param dependencies The dependencies that trigger a re-fetch of the query.
+ * @param shouldFetch Determines whether the query should be fetched initially. Defaults to true.
+ * @returns The query result object containing the data, error, loading state, and a refetch function.
+ */
+export function useQuery<T>(
+  queryFn: QueryFn<T>,
+  dependencies: unknown[] = [],
+  shouldFetch = true,
+): UseQueryResult<T> {
+  const [data, setData] = useState<T | undefined>(undefined);
+  const [error, setError] = useState<string | undefined>(undefined);
+  const [isLoading, setLoading] = useState<boolean>(false);
+
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    setError(undefined);
+    setData(undefined);
+    try {
+      const result = await queryFn();
+      setData(result);
+    } catch (err) {
+      console.error(err);
+      const errorMsg = extractErrorMessage(err);
+      setError(errorMsg);
+    } finally {
+      setLoading(false);
+    }
+  }, [queryFn, ...dependencies]);
+
+  useEffect(() => {
+    if (shouldFetch) {
+      void fetchData();
+    }
+  }, [shouldFetch, fetchData, ...dependencies]);
+
+  return { data, error, isLoading, refetch: fetchData };
+}
+
+export default useQuery;