Update and simplify browser tests

nemeos · Jul 25, 2024 · ee97149 · ee97149
1 parent 2fea754
commit ee97149
Show file tree

Hide file tree

Showing 7 changed files with 133 additions and 216 deletions.
diff --git a/README.md b/README.md
@@ -236,17 +236,7 @@ pnpm i --global parcel
 ```
 
 ```bash
-# Using ethers.js
-parcel tests/testEthersJs.html
-
-# Using window.ethereum
-parcel tests/testWindowEthereum.html
-```
-
-Then open a server, for example with [`serve`](https://github.com/vercel/serve)
-
-```bash
-serve dist/ -p 5555
+parcel tests/browser/index.html
 ```
 
 ## License

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nemeos-sdk",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "type": "module",
   "description": "Nemeos SDK to facilitate integration with the Nemeos platform",
   "license": "MIT",
@@ -40,6 +40,6 @@
     "ofetch": "^1.3.4"
   },
   "devDependencies": {
-    "typescript": "^5.5.3"
+    "typescript": "^5.5.4"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/tests/browser/index.html b/tests/browser/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <h1>Nemeos SDK Test</h1>
+
+    <div>
+      Is wallet connected?
+      <span id="isConnected">---</span>
+    </div>
+
+    <div>
+      <button id="connectWallet">Connect wallet</button>
+    </div>
+    <div>
+      <button id="startLoan">Start Loan for nftId 224 and 90 days</button>
+    </div>
+    <div>
+      <button id="retrieveLoan">Retrieve Loan for nftId 224</button>
+    </div>
+    <div>
+      <button id="payNextLoanStep">Pay Next Loan Step for nftId 224</button>
+    </div>
+
+    <script type="module" src="./script.ts"></script>
+  </body>
+</html>
diff --git a/tests/browser/script.ts b/tests/browser/script.ts
@@ -0,0 +1,90 @@
+import * as ethers from 'ethers'
+import { getBrowserProvider, NemeosSDK } from '../../src/index.js'
+
+declare global {
+  interface Window {
+    ethereum: any
+  }
+}
+
+let signer: ethers.Signer
+let nemeosSdk: NemeosSDK
+let nemeosPoolBuyOpenSeaClient: ReturnType<NemeosSDK['getNemeosPoolClient']>
+
+const nemeosPoolAddress = '0x812db15b8Bb43dBA89042eA8b919740C23aD48a3'
+const cyberKongzAddress = '0x15cd1cfCd48C06cfC44D433D66C7a9fE06b2C2c3'
+
+export async function isMetamaskConnected() {
+  if (!window.ethereum) return false
+
+  try {
+    const _provider = new ethers.BrowserProvider(window.ethereum)
+    const accounts = await _provider.send('eth_accounts', [])
+    const accounts2 = await window.ethereum.request({ method: 'eth_accounts' })
+
+    if (accounts.length !== accounts2.length || accounts[0] !== accounts2[0]) {
+      throw new Error('Metamask accounts are not the same when using ethers.js and window.ethereum.request')
+    }
+
+    console.log('[isMetamaskConnected] Metamask is connected', { accounts })
+    return accounts && accounts.length > 0
+  } catch (error) {
+    console.error('[isMetamaskConnected] There was an error while trying to connect to Metamask isMetamaskConnected()', { error })
+    return false
+  }
+}
+
+function setWalletConnected(bool: boolean) {
+  document.getElementById('isConnected')!.innerText = `${bool}`
+}
+
+async function connectWallet() {
+  const provider1 = new ethers.BrowserProvider(window.ethereum)
+  const signer1 = await provider1.getSigner()
+  const address1 = await signer1.getAddress()
+
+  const provider2 = getBrowserProvider(window.ethereum)
+  const signer2 = await provider2.getSigner()
+  const address2 = await signer2.getAddress()
+
+  if (address1 !== address2) {
+    throw new Error('Addresses are not the same when using ethers.js and window.ethereum.request')
+  }
+
+  signer = signer1
+  nemeosSdk = new NemeosSDK(signer)
+  nemeosPoolBuyOpenSeaClient = nemeosSdk.getNemeosPoolClient({
+    nemeosPoolAddress,
+    nftCollectionAddress: cyberKongzAddress,
+    nemeosPoolMode: NemeosSDK.NemeosPoolMode.BuyOpenSea,
+  })
+
+  setWalletConnected(true)
+}
+
+async function startLoan() {
+  await nemeosPoolBuyOpenSeaClient.startLoan(224, 90)
+}
+async function retrieveLoan() {
+  await nemeosPoolBuyOpenSeaClient.retrieveLoan(224)
+}
+async function payNextLoanStep() {
+  await nemeosPoolBuyOpenSeaClient.payNextLoanStep(224)
+}
+
+function addEventListeners() {
+  document.getElementById('connectWallet')!.addEventListener('click', connectWallet)
+  document.getElementById('startLoan')!.addEventListener('click', startLoan)
+  document.getElementById('retrieveLoan')!.addEventListener('click', retrieveLoan)
+  document.getElementById('payNextLoanStep')!.addEventListener('click', payNextLoanStep)
+}
+
+document.addEventListener('DOMContentLoaded', async () => {
+  addEventListeners()
+  if (await isMetamaskConnected()) {
+    setWalletConnected(true)
+    connectWallet()
+  } else {
+    setWalletConnected(false)
+  }
+})
diff --git a/tests/testEthersJs.html b/tests/testEthersJs.html
diff --git a/tests/testWindowEthereum.html b/tests/testWindowEthereum.html