Update to use stellar-wallets-kit to support other wallets

[paulbellamy]

What problem does your feature solve?

The example dapp should use standard libraries to support many wallets, so that devs can learn best practices.

What would you like to see?

Instead of connecting directly to Freighter, the dapp should use https://github.com/Creit-Tech/Stellar-Wallets-Kit

What alternatives are there?

[esteblock]

Great! Will check this to include it in https://github.com/esteblock/soroban-react/issues/11

[esteblock]

Currently, @soroban-react uses "connectors" Each connector should be created first as a package @soroban-react/my-connector and then used like this:

...
import {futurenet, sandbox, standalone} from '@soroban-react/chains';
import {freighter} from '@soroban-react/freighter';
 ...   
const connectors: Connector[] = [freighter()];

  export default function ProviderExample({children}:{children: React.ReactNode}) {
    return (
      <SorobanReactProvider
        chains={chains}
        appName={"Example Stellar App"}
        connectors={connectors}>
          <SorobanEventsProvider>
          {children}
        </SorobanEventsProvider>
      </SorobanReactProvider>
    )
  }

A connector should just do:

export type Connector = {
  id: string;
  name: string;
  shortName?: string;
  iconUrl: string | (() => Promise<string>);
  iconBackground: string;
  installed?: boolean;
  downloadUrls?: {
    android?: string;
    ios?: string;
    browserExtension?: string;
    qrCode?: string;
  };
  isConnected: () => boolean;
  getNetworkDetails: () => Promise<NetworkDetails>;
  getPublicKey: () => Promise<string>;
  signTransaction: (xdr: string, opts?: { network?: string; networkPassphrase?: string; accountToSign?: string }) => Promise<string>;
};

[esteblock]

I see that Stellar-Wallet-Kit has a similar architecture: https://github.com/Creit-Tech/Stellar-Wallets-Kit/tree/main/src/lib