Init project

.gitignore

@@ -0,0 +1,11 @@
+.DS_Store
+
+package-lock.json
+
+node_modules/
+
+keystore*
+
+configs/.env
+
+build

README.md

@@ -0,0 +1,55 @@
+# Klaytn Online Toolkit
+Klaytn online toolkit provides code examples and github page to help to utilize the Klaytn SDK(caver-js) easily.
+You can test library on: https://klaytn.github.io/klaytn-online-toolkit
+
+## Web3Modal Example
+On github page, you can see web3modal demo which is derived from [web3modal/example](https://github.com/WalletConnect/web3modal/tree/master/example) and modified to add Kaikas wallet and Klip wallet. You can add support for multiple providers including Kaikas provider and Klip wallet provider by using [@klaytn/web3modal](https://github.com/klaytn/klaytn-web3modal). We have created a PR in web3modal repo, which is still under review. So we temporarily provide @klaytn/web3modal package.
+
+### Kaikas wallet 
+Download [@klaytn/kaikas-web3-provider](https://github.com/klaytn/kaikas-web3-provider) package. The following code is how to configure their provider options:
+
+```javascript
+import Web3 from "web3";
+import Web3Modal from "web3modal";
+import { KaikasWeb3Provider } from "@klaytn/kaikas-web3-provider"
+
+const providerOptions = {
+  kaikas: {
+    package: KaikasWeb3Provider // required
+  }
+};
+
+const web3Modal = new Web3Modal({
+    providerOptions: providerOptions //required
+});
+
+const provider = await web3Modal.connect();
+
+const web3 = new Web3(provider);
+```
+
+### Klip wallet 
+Download [@klaytn/klip-web3-provider](https://github.com/klaytn/klip-web3-provider) package first. Then you can easily integrate Klip wallet as below:
+```javascript
+import Web3 from "web3";
+import Web3Modal from "web3modal";
+import { KlipWeb3Provider } from "@klaytn/klip-web3-provider"
+
+const providerOptions = {
+    klip: {
+        package: KlipWeb3Provider, //required
+        options: {
+            bappName: "web3Modal Example App", //required
+            rpcUrl: "RPC URL" //required
+        }
+    }
+};
+
+const web3Modal = new Web3Modal({
+    providerOptions: providerOptions //required
+});
+
+const provider = await web3Modal.connect();
+
+const web3 = new Web3(provider);
+```

package.json

@@ -0,0 +1,77 @@
+{
+  "name": "klaytn-online-toolkit",
+  "version": "0.1.0",
+  "private": true,
+  "homepage": "https://klaytn.github.io/klaytn-online-toolkit",
+  "dependencies": {
+    "@klaytn/kaikas-web3-provider": "^1.0.3",
+    "@klaytn/klip-web3-provider": "^1.0.2",
+    "@klaytn/web3modal": "^1.1.0",
+    "@tabler/icons": "^1.107.0",
+    "@walletconnect/utils": "^1.8.0",
+    "axios": "^0.27.2",
+    "bignumber.js": "^9.1.0",
+    "caver-js": "^1.6.8",
+    "ethereumjs-util": "^7.1.5",
+    "lodash": "^4.17.21",
+    "prism-react-renderer": "^1.3.5",
+    "react": "^17.0.2",
+    "react-copy-to-clipboard": "^5.1.0",
+    "react-dom": "^17.0.2",
+    "react-query": "^3.39.2",
+    "react-router-dom": "^6.4.2",
+    "react-scripts": "^4.0.3",
+    "react-toastify": "^8.2.0",
+    "reactstrap": "^9.1.4",
+    "styled-components": "^5.3.5",
+    "typescript": "^4.8.3",
+    "web-vitals": "^2.1.4",
+    "web3": "^1.8.0"
+  },
+  "devDependencies": {
+    "@types/ethereumjs-util": "^6.1.0",
+    "@types/jest": "^27.5.2",
+    "@types/lodash": "^4.14.185",
+    "@types/node": "^16.11.59",
+    "@types/react": "^18.0.20",
+    "@types/react-copy-to-clipboard": "^5.0.4",
+    "@types/react-dom": "^18.0.6",
+    "@types/styled-components": "^5.1.26",
+    "gh-pages": "^4.0.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build",
+    "lint": "eslint --fix src/**/*.{jsx,ts,tsx}",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app"
+    ],
+    "rules": {
+      "@typescript-eslint/explicit-function-return-type": "error",
+      "@typescript-eslint/no-unused-vars": "error",
+      "import/no-anonymous-default-export": "off",
+      "react-hooks/exhaustive-deps": "off"
+    }
+  },
+  "prettier": {
+    "singleQuote": true,
+    "semi": false
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

public/404.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Klaytn Online Toolkit</title>
+    <script type="text/javascript">
+      // Single Page Apps for GitHub Pages
+      // MIT License
+      // https://github.com/rafgraph/spa-github-pages
+      // This script takes the current url and converts the path and query
+      // string into just a query string, and then redirects the browser
+      // to the new url with only a query string and hash fragment,
+      // e.g. https://www.foo.tld/one/two?a=b&c=d#qwe, becomes
+      // https://www.foo.tld/?/one/two&a=b~and~c=d#qwe
+      // Note: this 404.html file must be at least 512 bytes for it to work
+      // with Internet Explorer (it is currently > 512 bytes)
+
+      // If you're creating a Project Pages site and NOT using a custom domain,
+      // then set pathSegmentsToKeep to 1 (enterprise users may need to set it to > 1).
+      // This way the code will only replace the route part of the path, and not
+      // the real directory in which the app resides, for example:
+      // https://username.github.io/repo-name/one/two?a=b&c=d#qwe becomes
+      // https://username.github.io/repo-name/?/one/two&a=b~and~c=d#qwe
+      // Otherwise, leave pathSegmentsToKeep as 0.
+      var pathSegmentsToKeep = 1;
+
+      var l = window.location;
+      l.replace(
+        l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
+        l.pathname.split('/').slice(0, 1 + pathSegmentsToKeep).join('/') + '/?/' +
+        l.pathname.slice(1).split('/').slice(pathSegmentsToKeep).join('/').replace(/&/g, '~and~') +
+        (l.search ? '&' + l.search.slice(1).replace(/&/g, '~and~') : '') +
+        l.hash
+      );
+
+    </script>
+  </head>
+  <body>
+  </body>
+</html>

public/index.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <link
+      href="https://fonts.googleapis.com/css?family=Poppins"
+      rel="stylesheet"
+    />
+    <title>Klaytn Online Toolkit</title>
+    <!-- Start Single Page Apps for GitHub Pages -->
+    <script type="text/javascript">
+      // Single Page Apps for GitHub Pages
+      // MIT License
+      // https://github.com/rafgraph/spa-github-pages
+      // This script checks to see if a redirect is present in the query string,
+      // converts it back into the correct url and adds it to the
+      // browser's history using window.history.replaceState(...),
+      // which won't cause the browser to attempt to load the new url.
+      // When the single page app is loaded further down in this file,
+      // the correct url will be waiting in the browser's history for
+      // the single page app to route accordingly.
+      ;(function (l) {
+        if (l.search[1] === '/') {
+          var decoded = l.search
+            .slice(1)
+            .split('&')
+            .map(function (s) {
+              return s.replace(/~and~/g, '&')
+            })
+            .join('?')
+          window.history.replaceState(
+            null,
+            null,
+            l.pathname.slice(0, -1) + decoded + l.hash
+          )
+        }
+      })(window.location)
+    </script>
+    <!-- End Single Page Apps for GitHub Pages -->
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

src/App/Navbar.tsx

@@ -0,0 +1,81 @@
+import { ReactElement, useState } from 'react'
+import {
+  Collapse,
+  Navbar,
+  NavbarToggler,
+  Nav,
+  Dropdown,
+  DropdownToggle,
+  DropdownMenu,
+  DropdownItem,
+  NavLink,
+  Form,
+} from 'reactstrap'
+import githubIcon from 'images/GitHub-Mark-Light-64px.png'
+import routes from '../routes'
+import { RouteType } from 'types'
+
+const RouteItem = ({ route }: { route: RouteType }): ReactElement => {
+  const [isOpen, setIsOpen] = useState(false)
+  return (
+    <Dropdown
+      tag="nav"
+      isOpen={isOpen}
+      onMouseOver={(): void => setIsOpen(true)}
+      onMouseLeave={(): void => setIsOpen(false)}
+      toggle={(): void => setIsOpen(!isOpen)}
+    >
+      <DropdownToggle caret={false} nav>
+        {route.name}
+      </DropdownToggle>
+      <DropdownMenu>
+        {route.items.map((item, j) => {
+          return (
+            <DropdownItem
+              key={`${item.name}-${j}`}
+              href={'/klaytn-online-toolkit' + route.path + item.path}
+            >
+              {item.name}
+            </DropdownItem>
+          )
+        })}
+      </DropdownMenu>
+    </Dropdown>
+  )
+}
+
+const Navigator = (): ReactElement => {
+  const [isOpen, setIsOpen] = useState(false)
+  const toggle = (): void => {
+    setIsOpen(!isOpen)
+  }
+
+  return (
+    <Navbar expand="lg" color="dark">
+      <NavbarToggler onClick={toggle}>
+        <span className="navbar-toggler-bar navbar-kebab"></span>
+        <span className="navbar-toggler-bar navbar-kebab"></span>
+        <span className="navbar-toggler-bar navbar-kebab"></span>
+      </NavbarToggler>
+      <Collapse isOpen={isOpen} navbar>
+        <Nav navbar>
+          <NavLink href="/klaytn-online-toolkit"> Home </NavLink>
+          {routes.map((route, key) => (
+            <RouteItem key={key} route={route} />
+          ))}
+        </Nav>
+        <Form className="ml-auto">
+          <NavLink href="https://github.com/klaytn/klaytn-online-toolkit">
+            <img
+              src={githubIcon}
+              style={{ height: '25px', width: '25px' }}
+              alt=""
+            />
+          </NavLink>
+        </Form>
+      </Collapse>
+    </Navbar>
+  )
+}
+
+export default Navigator