@tonconnect/ui-react 0.0.5 → 0.0.7

package/README.md

@@ -144,3 +144,49 @@ export const Settings = () => {
     );
 };
 ```
+
+
+## Add connect request parameters (ton_proof)
+Pass `getConnectParameters` async function to the `TonConnectUIProvider`. This callback will be called after `connectWallet` method call or `Connect Button` click before wallets list render.
+
+In other words, if `getConnectParameters` is passed, there will be a following steps:
+1. User clicks to the 'Connect Wallet' button, or `connectWallet` method is called
+2. Wallets modal opens
+3. Loader renders in the center of the modal
+4. TonConnectUI calls `getConnectParameters` and waits while it resolves
+5. Wallets list renders in the center of the modal
+
+Note that there is no any caching for `getConnectParameters` -- every time wallets modal opens there will be the 5 steps above.
+
+If you have to make a http-request to your backend it this case, it is better to do it after app initialization (if possible) and return (probably completed) promise from the `getConnectParameters` to reduce loading time for the user.
+
+```tsx
+const tonProofPayloadPromise = getTonProofFromYourBackend(); // will be executed during app initialization
+                                                             // don't forget to manage to refetch payload from your backend if needed
+<TonConnectUIProvider
+    manifestUrl="https://<YOUR_APP_URL>/tonconnect-manifest.json"
+    getConnectParameters={async () => {
+        const tonProof = await tonProofPayloadPromise; // will be executed every time when wallets modal is opened. It is recommended to make an http-request in advance
+        return {
+            tonProof
+        };
+    }}
+>
+    { /* Your app */ }
+</TonConnectUIProvider>
+```
+
+You can find `ton_proof` result in the `wallet` object when wallet will be connected:
+
+```ts
+import {useEffect} from "react";
+
+const wallet = useTonWallet();
+
+useEffect(() => {
+    if (wallet && wallet.connectItems?.tonProof && 'proof' in wallet.connectItems.tonProof) {
+        checkProofInYourBackend(wallet.connectItems.tonProof.proof);
+    }
+}, [wallet]);
+```
+

package/lib/components/TonConnectUIProvider.d.ts

@@ -1,7 +1,5 @@
-import { Locales, Theme, TonConnectUI } from '@tonconnect/ui';
-import { ITonConnect } from '@tonconnect/sdk';
-import type * as CSS from 'csstype';
-declare type Color = CSS.Property.Color;
+import { ActionConfiguration, Locales, Theme, TonConnectUI, UIPreferences, WalletsListConfiguration } from '@tonconnect/ui';
+import type { ConnectAdditionalRequest, ITonConnect } from '@tonconnect/sdk';
 export declare const TonConnectUIContext: import("react").Context<TonConnectUI | null>;
 export declare type TonConnectUIProviderProps = {
     children: JSX.Element;
@@ -30,11 +28,6 @@ export interface TonConnectUIProviderPropsBase {
      * @default SYSTEM theme.
      */
     theme: Theme;
-    /**
-     * Accent color for the UI elements.
-     * @default #31A6F5 (blue).
-     */
-    accentColor: Color;
     /**
      * Language for the phrases it the UI elements.
      * @default system
@@ -46,9 +39,29 @@ export interface TonConnectUIProviderPropsBase {
      */
     widgetRootId: string;
     /**
-     * @deprecated Don't use it
+     * UI elements configuration.
+     */
+    uiPreferences?: UIPreferences;
+    /**
+     * Configuration for the wallets list in the connect wallet modal.
+     */
+    walletsList?: WalletsListConfiguration;
+    /**
+     * Configuration for action-period (e.g. sendTransaction) UI elements: modals and notifications.
+     */
+    actionsConfiguration?: ActionConfiguration;
+    /**
+     * Redefine wallets list source URL. Must be a link to a json file with [following structure]{@link https://github.com/ton-connect/wallets-list}
+     * @default https://raw.githubusercontent.com/ton-connect/wallets-list/main/wallets.json
+     * @
+     */
+    walletsListSource?: string;
+    /**
+     * Use it to customize ConnectRequest and add `tonProof` payload.
+     * The function will be called after wallets modal opens, and wallets selection will be blocked until it's resolved.
+     * If you have to make a http-request to your backend, it is better to do it after app initialization (if possible) and return (probably completed) promise to reduce loading time for the user.
      */
-    walletsListSource: string;
+    getConnectParameters?: () => Promise<ConnectAdditionalRequest>;
 }
 declare const _default: import("react").NamedExoticComponent<TonConnectUIProviderProps>;
 export default _default;

package/lib/components/index.d.ts

@@ -1,2 +1,2 @@
-export { default as TonConnectButton } from './TonConnectButton';
-export { default as TonConnectUIProvider } from './TonConnectUIProvider';
+export { default as TonConnectButton, type TonConnectButtonProps } from './TonConnectButton';
+export { default as TonConnectUIProvider, type TonConnectUIProviderProps, type TonConnectUIProviderPropsBase, type TonConnectUIProviderPropsWithConnector, type TonConnectUIProviderPropsWithManifest, TonConnectUIContext } from './TonConnectUIProvider';

package/lib/index.d.ts

@@ -1,4 +1,2 @@
-export * from './components';
-export * from './errors';
-export * from './hooks';
+export * from './library';
 export * from '@tonconnect/ui';