New wallet adapter interface

[hardsetting]

My proposal for a new interface of the Aptos Wallet Adapter.

Key objectives:

• prioritize newer features (keep interface as close as possible to wallet standard)
• stay backward compatible in a way that doesn't bloat the "happy path"
• reduce the amount of wrapper code
• ensure the state of the adapter stays consistent
• simplify the developer's life

Changes in core package:

• Defined AdaptedWallet class, that will take as an input a wallet interface with minimum required features and expose a unified and clean interface for accessing it. Internally, this class performs feature version negotiation, ensuring we're using the most up-to-date version or fallback to older but still compatible versions.
• Defined a structured way to access registered wallets (using WalletAdapter).
• This package will not deal with persisted state e.g. window.localStorage. This will be the responsibility of more specialized packages
• Create utility conversion function walletFromLegacyPlugin so that dapps that rely on legacy plugins can still use the new interface (all required features need to be supported)

Changes in react package:

• Provide "reactive" interface to aptos wallets.
• Define hooks that listen to events and keep values up-to-date at all times (ensures state consistency)
• Intended for web-based dapps (might extract web logic into separate package if there's value)
• Can be used to build custom wallet selectors
• Defines the concept of "active wallet" and the logic to persist its state
• The value returned by the hook useActiveWallet has different states. Union discrimination enables intuitive and expressive access to features based on the current state.

example:

function Navbar() {
  const wallet = useActiveWallet();
  return (
    <nav>
      <div>Logo</div>
      {wallet.isConnected ? <ActiveAccountNavItem wallet={wallet} /> : <WalletSelector />}
    </nav>
  );
}

// Requires connected wallet as input
export function ActiveAccountNavItem({ wallet }: { wallet: ConnectedWallet }) {
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);

  const onToggle = () => {
    setIsDropdownOpen((prev) => !prev);
  };

  const onDisconnect = async () => {
    // only available if the wallet is connected
    await wallet.disconnect();
  };

  return (
    <button onClick={onToggle}>
      <div>{wallet.activeAccount.address.toString()}</div>
      {isDropdownOpen ? (
        <ul>
          <li>Copy address</li>
          <li onClick={onDisconnect}>Disconnect</li>
        </ul>
      ) : null}
    </button>
  )
}

TODO:

• [ui] build on top of the react package and showcase it's expressivenesss
• [core] bring back analytics and formalize events
• [core] bring back opting out of certain wallets
• [react/ui] figure out how to approach "sdk" wallets. should we pass them during context providing? should we just register them at startup like extension wallets?
• [ui] bring back "opt-in" wallets and explore universal links