chore: improved abi loader, setup- & build instructions

xtools-at · Oct 22, 2023 · 0337366 · 0337366
1 parent 28f365c
commit 0337366
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -46,6 +46,8 @@
   - [Specify contract's address](#specify-contracts-address)
   - [Setting function & arguments to call](#setting-function--arguments-to-call)
   - [URL params](#url-params)
+- [Setup and customize](#setup-and-customize)
+- [Build and publish](#build-and-publish)
 - [License](#license)
 
 ---
@@ -111,21 +113,37 @@ In the final step, you can choose which function you want to call, and specify i
 
 You can set all the above using url params and access any setup with a deeplink:
 
-| Param     | Description                                              | Example                                                                                 |
-| --------- | -------------------------------------------------------- | --------------------------------------------------------------------------------------- |
-| `json`    | Url to load ABI from                                     | `/uniswapV2Router.json`, `/weth.json`, `/erc20.json`, `/erc721.json`, `/erc1155.json`   |
-| `address` | Contract address                                         | `0xD51BFa777609213A653a2CD067c9A0132a2D316A`                                            |
-| `network` | Chain ID of blockchain network                           | `4337`, `13337`, `1`                                                                    |
-| `func`    | Contract method name                                     | `deposit`, `transfer`                                                                   |
-| `args`    | Arguments of function call, must match input name in ABI | `args.id=1`, `args.to=0x0000000000000000000000000000000000000B0b`, `args.amount=0.1e18` |
-| `eth`     | Amount of native token to transfer                       | `0.1e18`                                                                                |
+| Param     | Description                                                     | Example                                                                                                               |
+| :-------- | :-------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------- |
+| `json`    | Url to load ABI from, use `encodeURIComponent` for complex urls | `/uniswapV2Router.json`, `/weth.json`, `/erc20.json`, `/erc721.json`, `/erc1155.json`, `https://example.com/abi.json` |
+| `address` | Contract address                                                | `0xD51BFa777609213A653a2CD067c9A0132a2D316A`                                                                          |
+| `network` | Chain ID of blockchain network                                  | `4337`, `13337`, `1`                                                                                                  |
+| `func`    | Contract method name                                            | `deposit`, `transfer`                                                                                                 |
+| `args`    | Arguments of function call, must match input name in ABI        | `args.id=1`, `args.to=0x0000000000000000000000000000000000000B0b`, `args.amount=0.1e18`                               |
+| `eth`     | Amount of native token to transfer                              | `0.1e18`                                                                                                              |
 
 #### Examples
 
 - Check WMC <> USDC price on BeamSwap: [/?json=/uniswapV2Router.json&address=0x965B104e250648d01d4B3b72BaC751Cde809D29E&func=getAmountsIn&network=4337&args.amountOut=1e18&args.path=0x76BF5E7d2Bcb06b1444C0a2742780051D8D0E304,0xD51BFa777609213A653a2CD067c9A0132a2D316A](https://xtools-at.github.io/smartcontract-ui/?json=/uniswapV2Router.json&address=0x965B104e250648d01d4B3b72BaC751Cde809D29E&func=getAmountsIn&network=4337&args.amountOut=1e18&args.path=0x76BF5E7d2Bcb06b1444C0a2742780051D8D0E304,0xD51BFa777609213A653a2CD067c9A0132a2D316A)
 - Wrap 0.1 MC into WMC: [/?json=/weth.json&address=0xD51BFa777609213A653a2CD067c9A0132a2D316A&func=deposit&eth=0.1e18&network=4337](https://xtools-at.github.io/smartcontract-ui/?json=/weth.json&address=0xD51BFa777609213A653a2CD067c9A0132a2D316A&func=deposit&eth=0.1e18&network=4337)
 - Transfer 100 USDC: [/?json=/erc20.json&address=0x76BF5E7d2Bcb06b1444C0a2742780051D8D0E304&func=transfer&args.amount=100e6&network=4337](https://xtools-at.github.io/?json=/erc20.json&address=0x76BF5E7d2Bcb06b1444C0a2742780051D8D0E304&func=transfer&args.amount=100e6&network=4337)
 
+## Setup and customize
+
+- install node.js >= 16 and yarn
+- run `yarn` to install dependencies
+- update `config/app.js` and `public/manifest.json`
+- update images in `public/**`
+- add new ABIs as json file to `public`
+
+## Build and publish
+
+via Github Actions & Pages:
+
+- push to `main` to trigger a build in Github Actions
+- the build process pushes the build artifact to `main-build`
+- setup Github Pages to serve a static site from `main-build`
+
 ## **License**
 
 This project is licensed under the [GNU General Public License v3.0](https://opensource.org/licenses/gpl-3.0.html) - see the [`COPYING`](COPYING) file for details.
diff --git a/next.config.js b/next.config.js
@@ -3,5 +3,5 @@ const config = require("./config/app");
 module.exports = {
 	reactStrictMode: true,
 	assetPrefix: config.basePath ? `${config.basePath}/` : "",
-	basePath: config.basePath,
+	basePath: config.basePath || "/",
 };
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import Document, { Html, Head, Main, NextScript } from "next/document";
 import createEmotionServer from "@emotion/server/create-instance";
 import createEmotionCache from "utils/createEmotionCache";
-import { basePath } from "../config/app";
+import { basePath, host } from "../config/app";
 
 export default class MyDocument extends Document {
 	render() {
@@ -57,7 +57,7 @@ export default class MyDocument extends Document {
               {
                 '@context': 'https://schema.org',
                 '@type': 'WebSite',
-                'url': 'https://xtools-at.github.io/smartcontract-ui'
+                'url': '${host}${basePath || ""}'
               }`,
 						}}
 					></script>

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -287,8 +287,8 @@ export default function Page() {
 		if (url) {
 			(async () => {
 				const abiUrl = url.startsWith("/")
-					? `${basePath ? `${basePath}/` : ""}${url}`
-					: url;
+					? `${basePath || ""}${url}`
+					: decodeURIComponent(url);
 				try {
 					const jsonContent = await (await fetch(abiUrl)).json();