remove buttons and add code syntax for tabs

keiko-pixel · Jan 17, 2023 · c7e48dc · c7e48dc
1 parent bce30ed
commit c7e48dc
Show file tree

Hide file tree

Showing 3 changed files with 206 additions and 199 deletions.
diff --git a/docs/api-sdk/get-started/access-account.md b/docs/api-sdk/get-started/access-account.md
@@ -33,24 +33,26 @@ ethereum.request({ method: 'eth_requestAccounts' });
 
 **Example:**
 
-<EthConnectButton />
-
 <Tabs>
-  <TabItem value="html" label="HTML" default>
+<TabItem value="html" label="HTML" default>
 
-    <button class="enableEthereumButton">Enable Ethereum</button>
+```html
+<button class="enableEthereumButton">Enable Ethereum</button>
+```
 
-  </TabItem>
-  <TabItem value="javascript" label="JavaScript">
+</TabItem>
+<TabItem value="javascript" label="JavaScript">
 
-    const ethereumButton = document.querySelector('.enableEthereumButton');
+```javascript
+const ethereumButton = document.querySelector('.enableEthereumButton');
 
-    ethereumButton.addEventListener('click', () => {
-      //Will Start the metamask extension
-      ethereum.request({ method: 'eth_requestAccounts' });
-    });
+ethereumButton.addEventListener('click', () => {
+  //Will Start the metamask extension
+  ethereum.request({ method: 'eth_requestAccounts' });
+});
+```
 
-  </TabItem>
+</TabItem>
 </Tabs>
 
 This promise-returning function resolves with an array of hex-prefixed Ethereum addresses, which can
@@ -70,41 +72,40 @@ const account = accounts[0];
 
 **Example:**
 
-<EthAsyncConnectButton />
-
 <Tabs>
-  <TabItem value="html" label="HTML" default>
-
-    <button class="enableEthereumButton">Enable Ethereum</button>
-    <h2>Account: <span class="showAccount"></span></h2>
-
-  </TabItem>
-  <TabItem value="javascript" label="JavaScript">
-
-    const ethereumButton = document.querySelector('.enableEthereumButton');
-    const showAccount = document.querySelector('.showAccount');
-
-    ethereumButton.addEventListener('click', () => {
-      getAccount();
-    });
-
-    async function getAccount() {
-      const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
-      const account = accounts[0];
-      showAccount.innerHTML = account;
-    }
-
-  </TabItem>
+<TabItem value="html" label="HTML" default>
+
+```html
+<button class="enableEthereumButton">Enable Ethereum</button>
+<h2>Account: <span class="showAccount"></span></h2>
+```
+
+</TabItem>
+<TabItem value="javascript" label="JavaScript">
+
+```javascript
+const ethereumButton = document.querySelector('.enableEthereumButton');
+const showAccount = document.querySelector('.showAccount');
+
+ethereumButton.addEventListener('click', () => {
+  getAccount();
+});
+
+async function getAccount() {
+  const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
+  const account = accounts[0];
+  showAccount.innerHTML = account;
+}
+```
+
+</TabItem>
 </Tabs>
 
 ## Re-check an account
 
 Once you've connected to a user, you can always re-check the current account by checking
 `ethereum.selectedAddress`.
 
-**Example:**
-<ChangeAccount />
-
 If you'd like to be notified when the address changes, we have an event you can subscribe to:
 
 ```javascript

diff --git a/docs/api-sdk/how-to/send-transactions.md b/docs/api-sdk/how-to/send-transactions.md
@@ -35,50 +35,52 @@ const txHash = await ethereum.request({
 
 ## Example
 
-<SendTransaction />
-
 <Tabs>
-  <TabItem value="html" label="HTML" default>
-
-    <button class="enableEthereumButton btn">Enable Ethereum</button>
-    <button class="sendEthButton btn">Send Eth</button>
-
-  </TabItem>
-  <TabItem value="javascript" label="JavaScript">
-
-    const ethereumButton = document.querySelector('.enableEthereumButton');
-    const sendEthButton = document.querySelector('.sendEthButton');
-
-    let accounts = [];
-
-    //Sending Ethereum to an address
-    sendEthButton.addEventListener('click', () => {
-      ethereum
-        .request({
-          method: 'eth_sendTransaction',
-          params: [
-            {
-              from: accounts[0],
-              to: '0x2f318C334780961FB129D2a6c30D0763d9a5C970',
-              value: '0x29a2241af62c0000',
-              gasPrice: '0x09184e72a000',
-              gas: '0x2710',
-            },
-          ],
-        })
-        .then((txHash) => console.log(txHash))
-        .catch((error) => console.error);
-    });
-
-    ethereumButton.addEventListener('click', () => {
-      getAccount();
-    });
-
-    async function getAccount() {
-      accounts = await ethereum.request({ method: 'eth_requestAccounts' });
-    }
-
-  </TabItem>
+<TabItem value="html" label="HTML" default>
+
+```html
+<button class="enableEthereumButton btn">Enable Ethereum</button>
+<button class="sendEthButton btn">Send Eth</button>
+```
+
+</TabItem>
+<TabItem value="javascript" label="JavaScript">
+
+```javascript
+const ethereumButton = document.querySelector('.enableEthereumButton');
+const sendEthButton = document.querySelector('.sendEthButton');
+
+let accounts = [];
+
+//Sending Ethereum to an address
+sendEthButton.addEventListener('click', () => {
+  ethereum
+    .request({
+      method: 'eth_sendTransaction',
+      params: [
+        {
+          from: accounts[0],
+          to: '0x2f318C334780961FB129D2a6c30D0763d9a5C970',
+          value: '0x29a2241af62c0000',
+          gasPrice: '0x09184e72a000',
+          gas: '0x2710',
+        },
+      ],
+    })
+    .then((txHash) => console.log(txHash))
+    .catch((error) => console.error);
+});
+
+ethereumButton.addEventListener('click', () => {
+  getAccount();
+});
+
+async function getAccount() {
+  accounts = await ethereum.request({ method: 'eth_requestAccounts' });
+}
+```
+
+</TabItem>
 </Tabs>
 
 ## Transaction parameters