okto-trade-service-client-app

This is a sample app to test the Trade service and demo functionalities that a client can implement. This is created using a react template app

To start using it, clone the repo.

Update your trade service base url in vite.config.ts

Run the following commands (node version 22 and above works)

npm install

npm run dev

The application will be accessible from your browser. The URL will be the following if you have not altered any other settings. http://localhost:5173/

You might face issues with Okto wallet plugin that is installed on the browser. It will connect instead of Metamask.

The quickest way is to install Phantom Wallet. Phantom wallet overrides the default ethereum wallet with itself. So whenever any app tries to connect Phantom will be selected. But Phanotm Wallet provides a prompt asking do you want to connect to Metamask or Phantom. Select Metamask. DO NOT SAVE this setting. Saving this setting will make Okto Wallet your default wallet again and cause issues while testing.

You can also use incognito mode. But this might have some other issues.

Will be providing a future update where you will have the option to wallet connect your Okto wallet to test this instead of using a metamask wallet.

This application is also deployed at https://okto-trade-service-client-app.oktostage.com/

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default tseslint.config({
  extends: [
    // Remove ...tseslint.configs.recommended and replace with this
    ...tseslint.configs.recommendedTypeChecked,
    // Alternatively, use this for stricter rules
    ...tseslint.configs.strictTypeChecked,
    // Optionally, add this for stylistic rules
    ...tseslint.configs.stylisticTypeChecked,
  ],
  languageOptions: {
    // other options...
    parserOptions: {
      project: ["./tsconfig.node.json", "./tsconfig.app.json"],
      tsconfigRootDir: import.meta.dirname,
    },
  },
});

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from "eslint-plugin-react-x";
import reactDom from "eslint-plugin-react-dom";

export default tseslint.config({
  plugins: {
    // Add the react-x and react-dom plugins
    "react-x": reactX,
    "react-dom": reactDom,
  },
  rules: {
    // other rules...
    // Enable its recommended typescript rules
    ...reactX.configs["recommended-typescript"].rules,
    ...reactDom.configs.recommended.rules,
  },
});