importSharedState

Usage

connect() must be called and WalletConnect session must be initiated.

createSharedState() must be called for another account and the seed passed either onchain or offchain and present in the other user’s application session.

Take a look at this repo to see how we’re doing this in our Where’s Alex game.

The importSharedState() function imports a shared state account within the user’s wallet and returns the imported account’s seed and address.

See Shared State for an overview.

import { importSharedState } from '@puzzlehq/sdk-core';
import { useState } from 'react';

export const Page = () => {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | undefined>();
  const [sharedStateAccount, setSharedStateAccount] = useState<{ seed: string, address: string} | undefined>();

  /// note: these need to be communicated from the `CreateSharedStateResponse`
  const inputs = { seed: 'asdf1234', address: 'aleo1asdf' };

  const onClick = async () => {
    setLoading(true);
    setError(undefined);
    try {
      const response: ImportSharedStateResponse = await importSharedState();
      if (response.data) setSharedStateAccount(response.data);
      else if (response.error) setError(response.error);
    } catch (e) {
      setError((e as Error).message);
    } finally {
      setLoading(false);
    }
  }

  return (
    <div>
      <button
        onClick={ onClick }
        disabled={ loading }
      >
        import shared state
      </button>
      { sharedStateAccount && (
        <div>
          <p>{'seed: ' + sharedStateAccount.seed}</p>
          <p>{'address: ' + sharedStateAccount.address}</p>
        </div>
      )}
      { error && <p>error importing shared state: {error}</p> }
    </div>
  )
}

Types

type ImportSharedStateResponse = {
  data?: {
    seed: string;
    address: string;
  };
  error?: string;
};