Skip to main content
The useBlinkMobileDeposit hook wraps MobileDeposit with reactive React state. It manages the instance lifecycle and cleans up on unmount. 
import { useBlinkMobileDeposit } from '@swype-org/deposit-mobile/react-native';

​
Usage

import { useBlinkMobileDeposit } from '@swype-org/deposit-mobile/react-native';
import * as Linking from 'expo-linking';
import * as WebBrowser from 'expo-web-browser';

function DepositButton() {
  const { status, result, error, displayMessage, requestDeposit, handleDeepLink } =
    useBlinkMobileDeposit({
      signer: 'https://api.merchant.com/sign-payment',
      callbackScheme: 'myapp',
      openUrl: (url) => WebBrowser.openBrowserAsync(url).then(() => {}),
    });

  useEffect(() => {
    const sub = Linking.addEventListener('url', ({ url }) => handleDeepLink(url));
    return () => sub.remove();
  }, [handleDeepLink]);

  return (
    <>
      <Button
        title={status === 'signer-loading' ? 'Preparing...' : 'Deposit $50'}
        disabled={status === 'signer-loading'}
        onPress={() =>
          requestDeposit({
            amount: 50,
            chainId: 8453,
            address: '0x...',
            token: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913',
          })
        }
      />
      {error && <Text>{displayMessage}</Text>}
      {result && <Text>Transfer {result.transfer.id} complete!</Text>}
    </>
  );
}

​
Parameters

The hook accepts a single MobileDepositConfig object. See MobileDeposit Class for the full config reference.
PropertyTypeRequiredDescription
signerstring | SignerFunctionYesSigner endpoint URL or custom async function.
callbackSchemestringYesCustom URL scheme for deep link callbacks.
openUrl(url: string) => Promise<void>YesFunction to open a URL in an in-app browser.
webviewBaseUrlstringNoBase URL of the hosted payment app.
callbackPathstringNoPath for the callback deep link.
signerTimeoutMsnumberNoMax ms to wait for signer response.
flowTimeoutMsnumberNoMax ms for entire flow.
debugbooleanNoEnable debug logging.

​
Return value

PropertyTypeDescription
statusMobileDepositStatusCurrent flow phase: 'idle', 'signer-loading', 'browser-active', 'completed', or 'error'.
resultDepositResult | nullLast successful result, or null.
errorDepositError | nullLast error, or null.
displayMessagestring | nullUser-friendly error message from getDisplayMessage(error), or null.
isActivebooleantrue during signer-loading or browser-active.
requestDeposit(request: DepositRequest) => Promise<DepositResult>Start a deposit flow.
handleDeepLink(url: string) => booleanPass an incoming deep link URL to the SDK. Returns true if handled.
close() => voidCancel the current flow and reset to idle.
The hook does not set up deep link listeners — this keeps it platform-agnostic. Use handleDeepLink in your app’s deep link handler: 
useEffect(() => {
  const sub = Linking.addEventListener('url', ({ url }) => handleDeepLink(url));
  return () => sub.remove();
}, [handleDeepLink]);

​
Error handling

The hook provides displayMessage as a convenience for showing user-friendly error text: 
const { error, displayMessage } = useBlinkMobileDeposit({ /* config */ });

{error && <Text style={styles.error}>{displayMessage}</Text>}
See Mobile Error Codes for the full reference.