Fix reject messages on popup close #271

ThibautBremand · 2023-09-09T14:17:48Z

Fixed a bug that occurred sporadically when the user closes the popup before completing the transaction. Because, it would sometimes not send the reject message to the api user.
Now it will all the times thanks to a new event listener right in the bgscript

Also fixed the 'badRequest' error handling in multiple views. Now if some params are missing, the api will throw a gem_badrequest error instead of a rejection message. To test, modify index.html with the following content and try the following endpoints:

Transaction (send payment)
CancelOffer
AcceptNFTOffer
submitTransaction
settrustline
signTransaction
burnNFT
cancelNFTOffer
createNFTOffer
createOffer
mintNFT
setAccount
submitBulkTx

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>GemWallet API</title>
  </head>

  <body>
    <div id="wrapper">
      <button onclick="handlePayment()">Pay XRP</button>
      <button onclick="handlePayment('ETH', 'rnm76Qgz4G9G4gZBJVuXVvkbt7gVD7szey')">Pay ETH</button>
      <button onclick="handleTrustline()">Add trustline (ETH)</button>
      <button onclick="handleGetNFT()">Get NFTs (check the console)</button>
      <button onclick="handleMintNFT()">Mint NFTs (check the console)</button>
      <button onclick="handleCreateNFTOffer()">Create NFT offer (check the console)</button>
      <button onclick="handleAcceptNFTOffer()">Accept NFT offer (check the console)</button>
      <button onclick="handleCancelNFTOffer()">Cancel NFT offer (check the console)</button>
      <button onclick="handleBurnNFT()">Burn NFT (check the console)</button>
      <button onclick="handlePublicKey()">Get Public Key (check the console)</button>
      <button onclick="handleGetAddress()">Get Address (check the console)</button>
      <button onclick="handleGetNetwork()">Get Network (check the console)</button>
      <button onclick="handleSignMessage()">Sign message</button>
      <button onclick="handleSetAccount()">Set Account (check the console)</button>
      <button onclick="handleCreateOffer()">Create Offer (check the console)</button>
      <button onclick="handleCancelOffer()">Cancel Offer (check the console)</button>
      <button onclick="handleSubmitTransaction()">Submit transaction (check the console)</button>
      <button onclick="handleSignTransaction()">Sign transaction (check the console)</button>
      <button onclick="handlesubmitBulkTransactions()">
        Submit transactions (Bulk) (check the console)
      </button>
      <button onclick="handleEvents()">Activate events (check the console)</button>
      <div id="address"></div>
    </div>
  </body>
</html>

<script>
  function formatAmount(value, currency, issuer) {
    if (currency && issuer) {
      return {
        currency,
        issuer,
        value: `${value}`
      };
    }

    // If the currency or issuer is not provided, the amount needs to be in drops
    return `${value * 1000000}`;
  }

  function handlePayment(currency, issuer) {
    GemWalletApi.isInstalled()
      .then(({ result }) => {
        if (result.isInstalled) {
          const payment = {
            amount: formatAmount(0.2, currency, issuer),
            destination: issuer || 'rNvFCZXpDtGeQ3bVas95wGLN6N2stGmA9o',
            memos: [
              {
                memo: {
                  memoType: '4465736372697074696f6e',
                  memoData: '54657374206d656d6f'
                }
              }
            ],
            destinationTag: 12,
            fee: '199',
            flags: {
              tfNoDirectRipple: false,
              tfPartialPayment: false,
              tfLimitQuality: false
            }
          };
          const addressContainer = document.getElementById('address');
          GemWalletApi.sendPayment(payment)
            .then((res) => {
              addressContainer.insertAdjacentText(
                'afterbegin',
                `Received object: ${JSON.stringify(res)}`
              );
            })
            .catch((e) => {
              addressContainer.insertAdjacentText(
                'afterbegin',
                `Received error: ${e.message} ${e.stack} ${e.name}`
              );
              console.error('Cannot proceed the payment: ', e);
            });
        }
      })
      .catch((e) => {
        console.error('GemWallet is not connected: ', e);
      });
  }
  function handleTrustline() {
    GemWalletApi.isInstalled()
      .then(({ result }) => {
        if (result.isInstalled) {
          const transaction = {
            memos: [
              {
                memo: {
                  memoType: '4465736372697074696f6e',
                  memoData: '54657374206d656d6f'
                }
              }
            ],
            fee: '199',
            flags: {
              tfClearFreeze: false,
              tfClearNoRipple: false,
              tfSetFreeze: true,
              tfSetNoRipple: true,
              tfSetfAuth: false
            }
          };
          GemWalletApi.setTrustline(transaction)
            .then((res) => {
              const addressContainer = document.getElementById('address');
              addressContainer.insertAdjacentText(
                'afterbegin',
                `Received object: ${JSON.stringify(res)}`
              );
            })
            .catch((e) => {
              console.error('Cannot proceed the transaction: ', e);
            });
        }
      })
      .catch((e) => {
        console.error('GemWallet is not connected: ', e);
      });
  }
  function handleGetNFT() {
    GemWalletApi.isInstalled()
      .then(({ result }) => {
        if (result.isInstalled) {
          const props = {
            limit: 1
          };
          GemWalletApi.getNFT(props)
            .then((nfts) => {
              console.log('Here are your NFTs: ', nfts);
            })
            .catch((e) => {
              console.error('Something went wrong: ', e);
            });
        }
      })
      .catch((e) => {
        console.error('GemWallet is not connected: ', e);
      });
  }
  function handlePublicKey() {
    GemWalletApi.isInstalled()
      .then(({ result }) => {
        if (result.isInstalled) {
          GemWalletApi.getPublicKey()
            .then((pbk) => {
              console.log('Here is your Public Key: ', pbk);
            })
            .catch((e) => {
              console.error('Something went wrong: ', e);
            });
        }
      })
      .catch((e) => {
        console.error('GemWallet is not connected: ', e);
      });
  }
  function handleGetAddress() {
    GemWalletApi.isInstalled()
      .then(({ result }) => {
        if (result.isInstalled) {
          GemWalletApi.getAddress()
            .then((address) => {
              console.log('Here is your address: ', address);
            })
            .catch((e) => {
              console.error('Something went wrong: ', e);
            });
        }
      })
      .catch((e) => {
        console.error('GemWallet is not connected: ', e);
      });
  }
  function handleGetNetwork() {
    GemWalletApi.isInstalled().then(({ result }) => {
      if (result.isInstalled) {
        GemWalletApi.getNetwork()
          .then((network) => {
            console.log('Here is your network: ', network);
          })
          .catch((e) => {
            console.error('Something went wrong: ', e);
          });
      }
    });
  }
  function handleSignMessage() {
    GemWalletApi.isInstalled()
      .then(({ result }) => {
        if (result.isInstalled) {
          const message = 'Hello World!';
          GemWalletApi.signMessage()
            .then((signature) => {
              console.log('Here is your signature: ', signature);
            })
            .catch((e) => {
              console.error('Something went wrong: ', e);
            });
        }
      })
      .catch((e) => {
        console.error('GemWallet is not connected: ', e);
      });
  }
  function handleMintNFT() {
    GemWalletApi.isInstalled()
      .then(({ result }) => {
        if (result.isInstalled) {
          const transaction = {
            memos: [
              {
                memo: {
                  memoType: '4465736372697074696f6e',
                  memoData: '54657374206d656d6f'
                }
              }
            ]
          };

          GemWalletApi.mintNFT(transaction)
            .then((res) => {
              console.log('Received response: ', res);
            })
            .catch((e) => {
              console.error('Cannot proceed the transaction: ', e);
            });
        }
      })
      .catch((e) => {
        console.error('GemWallet is not connected: ', e);
      });
  }
  function handleCreateNFTOffer() {
    GemWalletApi.isInstalled()
      .then(({ result }) => {
        if (result.isInstalled) {
          const transaction = {
            amount: 50000000, // 50 XRP
            fee: '199',
            flags: {
              tfSellNFToken: true // If enabled, indicates that the offer is a sell offer. Otherwise, it is a buy offer.
            },
            memos: [
              {
                memo: {
                  memoType: '4465736372697074696f6e',
                  memoData: '54657374206d656d6f'
                }
              }
            ]
          };

          GemWalletApi.createNFTOffer(transaction)
            .then((res) => {
              console.log('Received response: ', res);
            })
            .catch((e) => {
              console.error('Cannot proceed the transaction: ', e);
            });
        }
      })
      .catch((e) => {
        console.error('GemWallet is not connected: ', e);
      });
  }
  function handleAcceptNFTOffer() {
    GemWalletApi.isInstalled()
      .then(({ result }) => {
        if (result.isInstalled) {
          const transaction = {
            fee: '199',
            memos: [
              {
                memo: {
                  memoType: '4465736372697074696f6e',
                  memoData: '54657374206d656d6f'
                }
              }
            ]
          };

          GemWalletApi.acceptNFTOffer(transaction)
            .then((res) => {
              console.log('Received response: ', res);
            })
            .catch((e) => {
              console.error('Cannot proceed the transaction: ', e);
            });
        }
      })
      .catch((e) => {
        console.error('GemWallet is not connected: ', e);
      });
  }
  function handleCancelNFTOffer() {
    GemWalletApi.isInstalled()
      .then(({ result }) => {
        if (result.isInstalled) {
          const transaction = {
            fee: '199',
            memos: [
              {
                memo: {
                  memoType: '4465736372697074696f6e',
                  memoData: '54657374206d656d6f'
                }
              }
            ]
          };

          GemWalletApi.cancelNFTOffer(transaction)
            .then((res) => {
              console.log('Received response: ', res);
            })
            .catch((e) => {
              console.error('Cannot proceed the transaction: ', e);
            });
        }
      })
      .catch((e) => {
        console.error('GemWallet is not connected: ', e);
      });
  }
  function handleBurnNFT() {
    GemWalletApi.isInstalled()
      .then(({ result }) => {
        if (result.isInstalled) {
          const transaction = {
            fee: '199',
            memos: [
              {
                memo: {
                  memoType: '4465736372697074696f6e',
                  memoData: '54657374206d656d6f'
                }
              }
            ]
          };

          GemWalletApi.burnNFT(transaction)
            .then((res) => {
              console.log('Received response: ', res);
            })
            .catch((e) => {
              console.error('Cannot proceed the transaction: ', e);
            });
        }
      })
      .catch((e) => {
        console.error('GemWallet is not connected: ', e);
      });
  }
  function handleSetAccount() {
    GemWalletApi.isInstalled()
      .then(({ result }) => {
        if (result.isInstalled) {
          const transaction = {
            memos: [
              {
                memo: {
                  memoType: '4465736372697074696f6e',
                  memoData: '54657374206d656d6f'
                }
              }
            ]
          };

          GemWalletApi.setAccount(transaction)
            .then((res) => {
              console.log('Received response: ', res);
            })
            .catch((e) => {
              console.error('Cannot proceed the transaction: ', e);
            });
        }
      })
      .catch((e) => {
        console.error('GemWallet is not connected: ', e);
      });
  }
  function handleCreateOffer() {
    GemWalletApi.isInstalled()
      .then(({ result }) => {
        if (result.isInstalled) {
          const transaction = {
            flags: {
              tfPassive: true
            },
            fee: '199',
            memos: [
              {
                memo: {
                  memoType: '4465736372697074696f6e',
                  memoData: '54657374206d656d6f'
                }
              }
            ]
          };

          GemWalletApi.createOffer(transaction)
            .then((res) => {
              console.log('Received response: ', res);
            })
            .catch((e) => {
              console.error('Cannot proceed the transaction: ', e);
            });
        }
      })
      .catch((e) => {
        console.error('GemWallet is not connected: ', e);
      });
  }
  function handleCancelOffer() {
    GemWalletApi.isInstalled()
      .then(({ result }) => {
        if (result.isInstalled) {
          const transaction = {
            offerSequence: 0, // Replace me!
            fee: '199',
            memos: [
              {
                memo: {
                  memoType: '4465736372697074696f6e',
                  memoData: '54657374206d656d6f'
                }
              }
            ]
          };

          GemWalletApi.cancelOffer(transaction)
            .then((res) => {
              console.log('Received response: ', res);
            })
            .catch((e) => {
              console.error('Cannot proceed the transaction: ', e);
            });
        }
      })
      .catch((e) => {
        console.error('GemWallet is not connected: ', e);
      });
  }
  function handleSubmitTransaction() {
    GemWalletApi.isInstalled()
      .then(({ result }) => {
        if (result.isInstalled) {
          const tx = {
            TransactionType: 'Payment',
            Destination: 'rhikRdkFw28csKw9z7fVoBjWncz1HSoQij',
            Amount: '100000',
            Memos: [
              {
                Memo: {
                  MemoData: '54657374206D656D6F',
                  MemoType: '4465736372697074696F6E'
                }
              }
            ]
          };
          const payload = {
          };
          GemWalletApi.submitTransaction(payload)
            .then((res) => {
              console.log('Received response: ', res);
            })
            .catch((e) => {
              console.error('Something went wrong: ', e);
            });
        }
      })
      .catch((e) => {
        console.error('GemWallet is not connected: ', e);
      });
  }
  function handleSignTransaction() {
    GemWalletApi.isInstalled()
      .then(({ result }) => {
        if (result.isInstalled) {
          const tx = {
            TransactionType: 'Payment',
            Destination: 'rhikRdkFw28csKw9z7fVoBjWncz1HSoQij',
            Amount: '100000',
            Memos: [
              {
                Memo: {
                  MemoData: '54657374206D656D6F',
                  MemoType: '4465736372697074696F6E'
                }
              }
            ]
          };
          const payload = {
          };
          GemWalletApi.signTransaction(payload)
            .then((res) => {
              console.log('Received response: ', res);
            })
            .catch((e) => {
              console.error('Something went wrong: ', e);
            });
        }
      })
      .catch((e) => {
        console.error('GemWallet is not connected: ', e);
      });
  }
  function handlesubmitBulkTransactions() {
    GemWalletApi.isInstalled()
      .then(({ result }) => {
        if (result.isInstalled) {
          const transactions = [
            ...[
              {
                ID: '001',
                TransactionType: 'TrustSet',
                LimitAmount: {
                  currency: 'ETH',
                  issuer: 'rnm76Qgz4G9G4gZBJVuXVvkbt7gVD7szey',
                  value: '10000000'
                },
                Memos: [
                  {
                    Memo: {
                      MemoType: '4465736372697074696f6e',
                      MemoData: '54657374206d656d6f'
                    }
                  }
                ],
                Fee: '199'
              },
              {
                ID: '002',
                TransactionType: 'NFTokenMint',
                URI: '516D6654463665756E47726A57597642666A72614B486D765572354444566D525351424373513252564D71764A72',
                NFTokenTaxon: 0
              }
            ],
            ...Array.from({ length: 48 }, (_, index) => ({
              ID: String(index + 1).padStart(3, '3'),
              TransactionType: 'Payment',
              Destination: 'rhikRdkFw28csKw9z7fVoBjWncz1HSoQij',
              Amount: '100000',
              Memos: [
                {
                  Memo: {
                    MemoData: '54657374206D656D6F',
                    MemoType: '4465736372697074696F6E'
                  }
                }
              ]
            }))
          ];
          GemWalletApi.submitBulkTransactions({
            onError: 'abort',
            waitForHashes: false
          })
            .then((res) => {
              console.log('Received response: ', res);
            })
            .catch((e) => {
              console.error('Something went wrong: ', e);
            });
        }
      })
      .catch((e) => {
        console.error('GemWallet is not connected: ', e);
      });
  }
  function handleEvents() {
    GemWalletApi.isInstalled()
      .then(({ result }) => {
        if (result.isInstalled) {
          GemWalletApi.on('networkChanged', (network) => {
            console.log('New network: ', network);
          });
          GemWalletApi.on('walletChanged', (wallet) => {
            console.log('New wallet: ', wallet);
          });
          GemWalletApi.on('login', (login) => {
            console.log('Login: ', login);
          });
          GemWalletApi.on('logout', (login) => {
            console.log('Logout: ', login);
          });
        }
      })
      .catch((e) => {
        console.error('GemWallet is not connected: ', e);
      });
  }
</script>

ThibautBremand · 2023-09-09T16:11:21Z

@FlorianBouron I did not test with api v2 maybe we can test together

ThibautBremand · 2023-09-12T19:36:59Z

@FlorianBouron api v2 fixed

ThibautBremand added the bugfix Fix for something which is not working label Sep 9, 2023

ThibautBremand self-assigned this Sep 9, 2023

ThibautBremand force-pushed the fix/reject-messages branch from 07d5019 to 36f6846 Compare September 9, 2023 14:19

ThibautBremand requested a review from FlorianBouron September 9, 2023 15:56

ThibautBremand added 3 commits September 12, 2023 20:50

Fix reject messages on popup close

56b63f5

Improve sendToActiveTabs logic

f16d53f

Fix badRequest error handling is multiple views

4cd64e5

ThibautBremand force-pushed the fix/reject-messages branch 2 times, most recently from d0a5e50 to 27cdb5f Compare September 12, 2023 19:35

Fix API v2 messages

0ffcdf8

ThibautBremand force-pushed the fix/reject-messages branch from 27cdb5f to 0ffcdf8 Compare September 12, 2023 19:38

FlorianBouron approved these changes Sep 12, 2023

View reviewed changes

FlorianBouron added 2 commits September 12, 2023 22:14

Remove gem_BAD_REQUEST from extension constants

b4119d6

Rename bulkTx within the html playground

49ed720

FlorianBouron approved these changes Sep 12, 2023

View reviewed changes

FlorianBouron merged commit 462d0fd into master Sep 12, 2023
3 checks passed

FlorianBouron deleted the fix/reject-messages branch September 12, 2023 20:40

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix reject messages on popup close #271

Fix reject messages on popup close #271

ThibautBremand commented Sep 9, 2023 •

edited

ThibautBremand commented Sep 9, 2023

ThibautBremand commented Sep 12, 2023

Fix reject messages on popup close #271

Fix reject messages on popup close #271

Conversation

ThibautBremand commented Sep 9, 2023 • edited

ThibautBremand commented Sep 9, 2023

ThibautBremand commented Sep 12, 2023

ThibautBremand commented Sep 9, 2023 •

edited