import { useWallet } from '@aptos-labs/wallet-adapter-react';

const displayInstalledWalletsDemo = () => {

  const { wallets } = useWallet();

  return (
    <div>
      {wallets.map(wallet => {
        return <p>{wallet.name}</p>
      })}
    </div>
  )
}

import { useWallet, groupAndSortWallets } from '@aptos-labs/wallet-adapter-react';

const displayAllWalletsDemo = () => {

  const { wallets = [], notDetectedWallets = [] } = useWallet();

  const { aptosConnectWallets, availableWallets, installableWallets } =
    groupAndSortWallets(
      [...wallets, ...notDetectedWallets]
    );

  return (
    <div>
      /** Wallets que usan el login social para crear una cuenta en la blockchain */
      {aptosConnectWallets.map((aptosConnectwallet) => (
        return <p>{aptosConnectwallet.name}</p>
      ))}
      /** Wallets que están actualmente instaladas o cargables. */
      {availableWallets.map((availableWallet) => (
        return <p>{availableWallet.name}</p>
      ))}
      /** Wallets que NO están actualmente instaladas o cargables. */
      {installableWallets.map((installableWallet) => (
        return <p>{installableWallet.name}</p>
      ))}
    </div>
  )
}

import React from 'react';
import { WalletName, useWallet } from '@aptos-labs/wallet-adapter-react';

const WalletConnectDemo = () => {
  const { connect, disconnect, account, connected } = useWallet();

  const handleConnect = async () => {
    try {
      // Cambia a continuación el nombre de la wallet deseado en lugar de "Petra"
      await connect("Petra" as WalletName<"Petra">);
      console.log('Conectado a la wallet:', account);
    } catch (error) {
      console.error('Error al conectar a la wallet:', error);
    }
  };

  const handleDisconnect = async () => {
    try {
      await disconnect();
      console.log('Desconectado de la wallet');
    } catch (error) {
      console.error('Error al desconectar de la wallet:', error);
    }
  };

  return (
    <div>
      <h1>Conexión de Wallet de Aptos</h1>
      <div>
        {connected ? (
          <div>
            <p>Conectado a: {account?.address}</p>
            <button onClick={handleDisconnect}>Desconectar</button>
          </div>
        ) : (
          <button onClick={handleConnect}>Conectar Wallet</button>
        )}
      </div>
    </div>
  );
};

export default WalletConnectDemo;

import React from 'react';
import { useWallet } from '@aptos-labs/wallet-adapter-react';
import { Aptos, AptosConfig, Network } from '@aptos-labs/ts-sdk';

const config = new AptosConfig({ network: Network.MAINNET });
const aptos = new Aptos(config);

const SignAndSubmit = () => {
  const { account, signAndSubmitTransaction } = useWallet();

  const onSignAndSubmitTransaction = async () => {
    if(account == null) {
        throw new Error("No se pudo encontrar la cuenta para firmar la transacción")
    }
    const response = await signAndSubmitTransaction({
      sender: account.address,
      data: {
        function: "0x1::aptos_account::transfer",
        functionArguments: [account.address, 1],
      },
    });
    // si quieres esperar a la transacción
    try {
      await aptos.waitForTransaction({ transactionHash: response.hash });
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <button onClick={onSignAndSubmitTransaction}>
      Firmar y enviar transacción
    </button>
  );
};

export default SignAndSubmit;

import React, { useState } from 'react';
import { useWallet } from '@aptos-labs/wallet-adapter-react';

const SignMessageDemo = () => {
  const { signMessage, signMessageAndVerify, connected, account } = useWallet();
  const [message, setMessage] = useState<string>('');
  const [nonce, setNonce] = useState<string>('');
  const [signedMessage, setSignedMessage] = useState<any>(null);
  const [verificationResult, setVerificationResult] = useState<boolean | null>(null);
  const [error, setError] = useState<string | null>(null);

  const handleSignMessage = async () => {
    setError(null);
    try {
      const response = await signMessage({ message, nonce });
      setSignedMessage(response);
    } catch (err: any) {
      setError(`Error al firmar el mensaje: ${err.message}`);
    }
  };

  const handleVerifyMessage = async () => {
    setError(null);
    try {
      const result = await signMessageAndVerify({ message, nonce });
      setVerificationResult(result);
    } catch (err: any) {
      setError(`Error al verificar el mensaje: ${err.message}`);
    }
  };

  return (
    <div>
      <h1>Firma y Verifica Mensaje de Aptos</h1>
      <div>
        {connected ? (
          <div>
            <p>Conectado a: {account?.address}</p>
            <div className="flex flex-col gap-4">
              <textarea
                value={message}
                onChange={(e) => setMessage(e.target.value)}
                placeholder="Introduce tu mensaje aquí"
                className="border rounded p-2"
              />
              <input
                type="text"
                value={nonce}
                onChange={(e) => setNonce(e.target.value)}
                placeholder="Introduce el nonce (cadena aleatoria) aquí"
                className="border rounded p-2 mt-2"
              />
              <button onClick={handleSignMessage} className="bg-blue-500 text-white rounded p-2 mt-2">
                Firmar Mensaje
              </button>
              {signedMessage && (
                <div>
                  <h4>Mensaje Firmado</h4>
                  <pre>{JSON.stringify(signedMessage, null, 2)}</pre>
                  <button onClick={handleVerifyMessage} className="bg-green-500 text-white rounded p-2 mt-2">
                    Verificar Mensaje
                  </button>
                </div>
              )}
              {verificationResult !== null && (
                <div>
                  <h4>Resultado de Verificación</h4>
                  <p>{verificationResult ? 'El mensaje está verificado!' : 'No se pudo verificar el mensaje.'}</p>
                </div>
              )}
              {error && (
                <div className="text-red-600">
                  <p>{error}</p>
                </div>
              )}
            </div>
          </div>
        ) : (
          <p>Por favor, conecta tu wallet para firmar y verificar mensajes.</p>
        )}
      </div>
    </div>
  );
};

export default SignMessageDemo;

import React from 'react';
import { useWallet } from '@aptos-labs/wallet-adapter-react';
import { Network } from '@aptos-labs/ts-sdk';

const ChangeNetworkDemo = () => {
  const { network, changeNetwork, wallet } = useWallet();
  const isNetworkChangeSupported = wallet?.name === "Nightly";

  const isValidNetworkName = () => {
    return network && Object.values<string>(Network).includes(network.name);
  };

  return (
    <div>
      <h4>Información de Red</h4>
      <div>
        <div><strong>Nombre de Red</strong></div>
        <div>
          <span style={{ color: isValidNetworkName() ? 'green' : 'red' }}>
            {network?.name ?? 'No Presente'}
          </span>
          {` (Esperado: ${Object.values<string>(Network).join(', ')})`}
        </div>
        <div><strong>URL</strong></div>
        <div>
          {network?.url ? (
            <a href={network.url} target="_blank" rel="noreferrer">
              {network.url}
            </a>
          ) : (
            'No Presente'
          )}
        </div>
        <div><strong>ID de Cadena</strong></div>
        <div>{network?.chainId ?? 'No Presente'}</div>
      </div>
      <div>
        <h4>Cambiar Red</h4>
        <div>
          <label>
            <input
              type="radio"
              name="network"
              value={Network.DEVNET}
              checked={network?.name === Network.DEVNET}
              onChange={() => changeNetwork(Network.DEVNET)}
              disabled={!isNetworkChangeSupported}
            />
            Devnet
          </label>
          <label>
            <input
              type="radio"
              name="network"
              value={Network.TESTNET}
              checked={network?.name === Network.TESTNET}
              onChange={() => changeNetwork(Network.TESTNET)}
              disabled={!isNetworkChangeSupported}
            />
            Testnet
          </label>
          <label>
            <input
              type="radio"
              name="network"
              value={Network.MAINNET}
              checked={network?.name === Network.MAINNET}
              onChange={() => changeNetwork(Network.MAINNET)}
              disabled={!isNetworkChangeSupported}
            />
            Mainnet
          </label>
        </div>
        {!isNetworkChangeSupported && (
          <div>
            * {wallet?.name ?? 'Esta wallet'} no soporta solicitudes de cambio de red
          </div>
        )}
      </div>
    </div>
  );
};

export default ChangeNetworkDemo;

const onSignAndSubmitBCSTransaction = async () => {
  const response = await signAndSubmitTransaction({
    sender: account.address,
    data: {
      function: "0x1::aptos_account::transfer",
      functionArguments: [AccountAddress.from(account.address), new U64(1)],
    },
  });
  // si quieres esperar a la transacción
  try {
    await aptos.waitForTransaction({ transactionHash: response.hash });
  } catch (error) {
    console.error(error);
  }
};

<button onClick={onSignAndSubmitTransaction}>
  Firmar y enviar transacción BCS
</button>;

{
  name: "Petra",
  url: "https://chromewebstore.google.com/detail/petra-aptos-wallet/ejjladinnckdgjemekebdpeokbikhfci?hl=en",
  icon: "data:image/png;base64,iVBOR...QmCC",
  readyState: WalletReadyState.NotDetected,
  isAIP62Standard: true,
  deeplinkProvider: "https://petra.app/explore?link=",
}