diff --git a/.prettierignore b/.prettierignore index 66d5c5d8b..ec34beb34 100644 --- a/.prettierignore +++ b/.prettierignore @@ -4,5 +4,4 @@ node_modules chains/eth/build/contracts coverage e2e/extensions -e2e/playwright -react-example/.next \ No newline at end of file +e2e/playwright \ No newline at end of file diff --git a/react-example/.eslintrc.js b/react-example/.eslintrc.js deleted file mode 100644 index 221174d44..000000000 --- a/react-example/.eslintrc.js +++ /dev/null @@ -1,19 +0,0 @@ -module.exports = { - env: { - browser: true, - es2021: true, - }, - extends: ["plugin:react/recommended", "standard", "prettier"], - parser: "@typescript-eslint/parser", - parserOptions: { - ecmaFeatures: { - jsx: true, - }, - ecmaVersion: 12, - sourceType: "module", - }, - plugins: ["react", "@typescript-eslint"], - rules: { - "react/prop-types": "off", - }, -}; diff --git a/react-example/.gitignore b/react-example/.gitignore deleted file mode 100644 index d451ff16c..000000000 --- a/react-example/.gitignore +++ /dev/null @@ -1,5 +0,0 @@ -node_modules -.DS_Store -dist -dist-ssr -*.local diff --git a/react-example/.prettierrc.js b/react-example/.prettierrc.js deleted file mode 100644 index dd1a77542..000000000 --- a/react-example/.prettierrc.js +++ /dev/null @@ -1,7 +0,0 @@ -// .prettierrc.js -module.exports = { - trailingComma: "all", - tabWidth: 2, - semi: true, - singleQuote: false, -}; diff --git a/react-example/README.md b/react-example/README.md deleted file mode 100644 index 730b33a5e..000000000 --- a/react-example/README.md +++ /dev/null @@ -1,51 +0,0 @@ -# vite-react-ts-tailwind-starter - -Starter using Vite + React + TypeScript + Tailwind. - -## Motivation - -Improve building your faster prototyping by using Vite, TypeScript, React, TailwindCSS. - -## Vite - -[Vite](https://github.com/vitejs/vite) is a fast frontend build tool. According to the [README](https://github.com/vitejs/vite/blob/main/README.md), it consists of two major parts: - -- A dev server that serves your source files over native ES modules, with rich built-in features and astonishingly fast Hot Module Replacement (HMR). -- A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production. - -## React - -[React](https://github.com/facebook/react) is a JavaScript library for building user interfaces. - -Due to its awesome renderer system, there are many [React Renderor](https://github.com/chentsulin/awesome-react-renderer). So React can be not used only Web, for example, used by [React Native](https://reactnative.dev/). - -Let's dive into React and Vite can use with React. - -## TypeScript - -[TypeScript](https://github.com/microsoft/TypeScript) is a superset of JavaScript. It is just one of NPM library, but it provides an original compiler. - -When you use TypeScript with React, you can write JSX with TypeScript, called TSX. Then you can develop views written by **Type-Safe** template. - -## Tailwind CSS - -[Tailwind CSS](https://tailwindcss.com/) is modern utility-first CSS framework. It provides many CSS rules, but these are purged when production builds. So developers do not worry about CSS asset size for performance optimization. - -In VSCode, I recommend to use [intellisense extension](https://tailwindcss.com/docs/intellisense). - -Frequently, React developers are worried about how to write CSS in TSX(JSX) template. You must choose from CSS Modules, [styled-components](https://styled-components.com/), [linaria](https://github.com/callstack/linaria), and so on. -Additionally, CSS architecture is difficult about scoping, e.g. BEM, FLOCSS. - -When you decide to use Tailwind, you only write utility-first CSS classes, you don't have to worry about them! - -## Formatter and Linter - -Already set up [ESLint](https://eslint.org/) and [Prettier](https://prettier.io/). You can customize the rules. - -NOTICE: The template does not use [eslint-plugin-prettier](https://github.com/prettier/eslint-plugin-prettier) and [prettier-eslint](https://github.com/prettier/prettier-eslint). So I recommend that running commands individually. e.g. `prettier && eslint`. - -Please read: https://prettier.io/docs/en/integrating-with-linters.html. - -# ToDo - -- [x] install and set up [TailwindCSS/JIT](https://github.com/tailwindlabs/tailwindcss-jit) see this [PR](https://github.com/TeXmeijin/vite-react-ts-tailwind-starter/pull/1) diff --git a/react-example/index.html b/react-example/index.html deleted file mode 100644 index 73cb4140e..000000000 --- a/react-example/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - Vite React TypeScript Tailwind Starter - - -
- - - diff --git a/react-example/package.json b/react-example/package.json deleted file mode 100644 index 37d99d0e7..000000000 --- a/react-example/package.json +++ /dev/null @@ -1,53 +0,0 @@ -{ - "name": "vite-react-ts-tailwind-starter", - "version": "0.0.1", - "private": true, - "license": "MIT", - "author": { - "name": "TeXmeijin" - }, - "workspaces": { - "nohoist": [ - "@types/react", - "@types/react-dom" - ] - }, - "scripts": { - "dev": "vite", - "build": "tsc && vite build", - "serve": "vite preview" - }, - "dependencies": { - "@sifchain/sdk": "workspace:*", - "@tippyjs/react": "^4.2.5", - "buffer": "^6.0.3", - "process": "^0.11.10", - "react": "^17.0.2", - "react-dom": "^17.0.2", - "react-router": "^5.2.1", - "react-router-dom": "^5.3.0", - "recoil": "^0.4.1", - "stream-browserify": "^3.0.0" - }, - "devDependencies": { - "@types/react": "^17.0.0", - "@types/react-dom": "^17.0.0", - "@types/react-router-dom": "^5.1.8", - "@typescript-eslint/eslint-plugin": "^4.28.4", - "@typescript-eslint/parser": "^4.28.4", - "@vitejs/plugin-react-refresh": "^1.3.5", - "autoprefixer": "^10.3.1", - "eslint": "^7.31.0", - "eslint-config-prettier": "^8.3.0", - "eslint-config-standard": "^16.0.3", - "eslint-plugin-import": "^2.23.4", - "eslint-plugin-node": "^11.1.0", - "eslint-plugin-promise": "^4.3.1", - "eslint-plugin-react": "^7.24.0", - "postcss": "^8.3.6", - "prettier": "^2.3.2", - "tailwindcss": "^2.2.7", - "typescript": "^4.3.5", - "vite": "^2.6.10" - } -} diff --git a/react-example/postcss.config.js b/react-example/postcss.config.js deleted file mode 100644 index 4a15258b0..000000000 --- a/react-example/postcss.config.js +++ /dev/null @@ -1,7 +0,0 @@ -// postcss.config.js -module.exports = { - plugins: { - tailwindcss: {}, - autoprefixer: {}, - }, -}; diff --git a/react-example/src/App.tsx b/react-example/src/App.tsx deleted file mode 100644 index 3998e3aff..000000000 --- a/react-example/src/App.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from "react"; -import SwapPage from "./pages/SwapPage/SwapPage"; -import { BrowserRouter, Redirect, Route, Switch } from "react-router-dom"; -import { SwapPageProvider } from "./pages/SwapPage/context"; -import { WalletProvider } from "./modules/Wallet/context"; - -function App() { - return ( - - - - - - - - - - - - - ); -} - -export default App; diff --git a/react-example/src/components/Layout.tsx b/react-example/src/components/Layout.tsx deleted file mode 100644 index a1dd69ea0..000000000 --- a/react-example/src/components/Layout.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import Tippy from "@tippyjs/react"; -import React from "react"; -import { NavLink } from "react-router-dom"; -import { useWalletContext } from "../modules/Wallet/context"; -import WalletPicker from "../modules/Wallet/WalletPicker"; - -export default function Layout(props: { children: any }) { - const { accountState } = useWalletContext(); - return ( -
-
-
-

Sifchain Provider

-
- - Balances - - - Swap - -
-
-
- } - > - - -
-
-
{props.children}
-
- ); -} diff --git a/react-example/src/index.css b/react-example/src/index.css deleted file mode 100644 index 3eb575868..000000000 --- a/react-example/src/index.css +++ /dev/null @@ -1,10 +0,0 @@ -@import 'tailwindcss/base'; - -@import 'tailwindcss/components'; - -@import 'tailwindcss/utilities'; - -body { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} diff --git a/react-example/src/index.tsx b/react-example/src/index.tsx deleted file mode 100644 index 854edd8ed..000000000 --- a/react-example/src/index.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from "react"; -import ReactDOM from "react-dom"; - -import "tippy.js/dist/tippy.css"; -import "./index.css"; - -import App from "./App"; - -ReactDOM.render( - - - , - document.getElementById("root"), -); diff --git a/react-example/src/modules/Wallet/Picker.tsx b/react-example/src/modules/Wallet/Picker.tsx deleted file mode 100644 index e69de29bb..000000000 diff --git a/react-example/src/modules/Wallet/WalletPicker.tsx b/react-example/src/modules/Wallet/WalletPicker.tsx deleted file mode 100644 index 6a903c541..000000000 --- a/react-example/src/modules/Wallet/WalletPicker.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from "react"; -import { sdk } from "../../sdk"; -import { useWalletContext } from "./context"; -import { keplrProvider, metamaskProvider } from "./providers"; - -export default function WalletPicker() { - const { accountState, connect } = useWalletContext(); - - return ( -
- {Object.values(sdk.chains).map((chain) => ( -
connect(chain)} - > - {chain.displayName} -
- {accountState[chain.network].connected - ? accountState[chain.network].address - : "Connect"} -
- ))} -
- ); -} diff --git a/react-example/src/modules/Wallet/context.tsx b/react-example/src/modules/Wallet/context.tsx deleted file mode 100644 index c9b6df39c..000000000 --- a/react-example/src/modules/Wallet/context.tsx +++ /dev/null @@ -1,115 +0,0 @@ -import { Chain, IAssetAmount, Network } from "@sifchain/sdk"; -import React, { createContext, useContext, useMemo, useState } from "react"; -import { sdk } from "../../sdk"; -import { keplrProvider, metamaskProvider } from "./providers"; - -type WalletState = { - address: string; - connected: boolean; - balances: IAssetAmount[]; - balanceLookup: Record; -}; - -const connectedKey = (chain: Chain) => "connected_" + chain.network; - -const useWalletData = () => { - const [accountState, setState] = useState( - Object.values(sdk.chains).reduce((acc, chain) => { - acc[chain.network] = { - address: "", - connected: false, - balances: [], - balanceLookup: {}, - }; - return acc; - }, {} as Record), - ); - - React.useEffect(() => { - Object.values(sdk.chains).forEach((chain) => { - if (localStorage[connectedKey(chain)]) { - connect(chain); - } - }); - }, []); - - React.useEffect(() => { - let timeoutId: NodeJS.Timeout; - if (accountState.sifchain.connected) { - (async function run() { - await updateBalances(sdk.chains.sifchain); - timeoutId = setTimeout(run, 5000); - })(); - } - return () => clearTimeout(timeoutId); - }, [accountState.sifchain.connected]); - - const connect = React.useCallback(async (chain: Chain) => { - const provider = - chain.chainConfig.chainType === "ibc" ? keplrProvider : metamaskProvider; - - const address = await provider.connect(chain); - localStorage[connectedKey(chain)] = true; - updateChainState(chain, { connected: true, address }); - return address; - }, []); - - const updateChainState = React.useCallback( - (chain: Chain, update: Partial) => { - setState((state) => ({ - ...state, - [chain.network]: { - ...state[chain.network], - ...update, - }, - })); - }, - [], - ); - - const updateBalances = React.useCallback( - async (chain: Chain) => { - if (!accountState[chain.network].connected) return; - const provider = - chain.chainConfig.chainType === "ibc" - ? keplrProvider - : metamaskProvider; - const balances = await provider.fetchBalances( - chain, - accountState[chain.network].address, - ); - updateChainState(chain, { - balances, - balanceLookup: balances.reduce((acc, balance) => { - acc[balance.symbol] = balance; - return acc; - }, {} as Record), - }); - return balances; - }, - [accountState], - ); - - const value = { - accountState, - connect, - updateBalances, - }; - - return useMemo(() => value, Object.values(value)); -}; - -// @ts-ignore -const WalletContext = createContext>({}); - -export const useWalletContext = () => React.useContext(WalletContext); - -export const WalletProvider = (props: { children: any }) => { - const data = useWalletData(); - - return ( - - {props.children} - - ); -}; diff --git a/react-example/src/modules/Wallet/providers.ts b/react-example/src/modules/Wallet/providers.ts deleted file mode 100644 index 3ade0accb..000000000 --- a/react-example/src/modules/Wallet/providers.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { KeplrWalletProvider } from "@sifchain/wallet-keplr"; -import { MetamaskWalletProvider } from "@sifchain/wallet-metamask"; -import { sdk } from "../../sdk"; - -export const keplrProvider = new KeplrWalletProvider(sdk.context); - -export const metamaskProvider = new MetamaskWalletProvider(sdk.context); - -if (typeof window !== "undefined") { - metamaskProvider.onChainChanged(() => window.location.reload()); - metamaskProvider.onAccountChanged(() => window.location.reload()); - keplrProvider.onAccountChanged(() => window.location.reload()); -} diff --git a/react-example/src/pages/SwapPage/SwapPage.tsx b/react-example/src/pages/SwapPage/SwapPage.tsx deleted file mode 100644 index 10b251bb2..000000000 --- a/react-example/src/pages/SwapPage/SwapPage.tsx +++ /dev/null @@ -1,283 +0,0 @@ -import React, { useState } from "react"; -import { AssetAmount, formatAssetAmount, toBaseUnits } from "@sifchain/sdk"; -import { KeplrWalletProvider } from "@sifchain/wallet-keplr"; - -import { sdk } from "../../sdk"; -import { useSwapContext } from "./context"; -import Layout from "../../components/Layout"; -import { useWalletContext } from "../../modules/Wallet/context"; - -export default function SwapPage() { - const { - fromAsset, - setFromAsset, - toAsset, - setToAsset, - fromAmount, - setFromAmount, - toAmount, - setToAmount, - fromToPool, - slippagePercent, - setSlippagePercent, - swapQuote, - setSwapQuote, - } = useSwapContext(); - - const { accountState } = useWalletContext(); - - const handleSwap = async () => { - const wallet = new KeplrWalletProvider(sdk.context); - const address = await wallet.connect(sdk.chains.sifchain); - - if (!swapQuote) throw new Error("no swap quote"); - - const draft = await sdk.liquidity.swap.prepareSwapTx({ - address, - fromAmount: AssetAmount(fromAsset, toBaseUnits(fromAmount, fromAsset)), - toAsset, - minimumReceived: swapQuote.minimumReceived, - }); - const signed = await wallet.sign(sdk.chains.sifchain, draft); - const res = await wallet.broadcast(sdk.chains.sifchain, signed); - }; - - const fromAmountInputRef = React.useRef(null); - const toAmountInputRef = React.useRef(null); - - const onInputChange = (key: "fromAmount" | "toAmount", amount: string) => { - amount = String(parseFloat(amount) || "0"); - - const matchingAsset = key === "fromAmount" ? fromAsset : toAsset; - - if (fromToPool?.fromPool && fromToPool?.toPool) { - const assetAmount = AssetAmount( - matchingAsset, - toBaseUnits(amount, matchingAsset), - ); - const quote = sdk.liquidity.swap.createSwapQuote( - key === "fromAmount" - ? { - ...fromToPool, - slippagePercent, - fromAmount: assetAmount, - } - : { - ...fromToPool, - slippagePercent, - toAmount: assetAmount, - }, - ); - - setFromAmount(formatAssetAmount(quote.fromAmount)); - setToAmount(formatAssetAmount(quote.toAmount)); - setSwapQuote(quote); - - const otherInput = - key === "fromAmount" - ? toAmountInputRef.current - : fromAmountInputRef.current; - const otherValue = formatAssetAmount( - key === "fromAmount" ? quote.toAmount : quote.fromAmount, - ); - if (otherInput) otherInput.value = +otherValue !== 0 ? otherValue : ""; - } - }; - - const validationError = - !swapQuote || - swapQuote.fromAmount.equalTo("0") || - swapQuote.toAmount.equalTo("0") - ? "Enter Amount" - : fromAsset.symbol === toAsset.symbol - ? "Enter different from and to tokens" - : swapQuote.flags.insufficientLiquidity - ? "Insufficient Liquidity" - : swapQuote.fromAmount.greaterThan( - accountState.sifchain.balanceLookup[swapQuote.fromAmount.symbol] || - AssetAmount(swapQuote.fromAmount, "0"), - ) - ? "Not Enough " + fromAsset.symbol.toUpperCase() - : null; - - // re-calculate amounts when assets or pools change - React.useEffect(() => { - if (!fromToPool) return; - // Don't recalculate from amount when pool changes if from is already focused. - const keyToChange = - document.activeElement === fromAmountInputRef.current - ? "toAmount" - : "fromAmount"; - onInputChange( - keyToChange, - keyToChange === "fromAmount" ? fromAmount : toAmount, - ); - }, [fromToPool, slippagePercent]); - - return ( - -
-

Swap

-
-
-
- From - -
-
- - Available:{" "} - {formatAssetAmount( - accountState.sifchain.balanceLookup[fromAsset.symbol] || - AssetAmount(fromAsset, "0"), - )} - - onInputChange("fromAmount", e.target.value)} - /> -
- -
- To - -
-
- - Available:{" "} - {formatAssetAmount( - accountState.sifchain.balanceLookup[toAsset.symbol] || - AssetAmount(toAsset, "0"), - )} - - onInputChange("toAmount", e.target.value)} - /> -
-
-
- Slippage: - - - -
- {!!swapQuote && ( -
    -
  • - Price: {swapQuote.fromToRatio}{" "} - {fromAsset.displaySymbol.toUpperCase()} per{" "} - {toAsset.displaySymbol.toUpperCase()} -
    • -
  • - Minimum received: {formatAssetAmount(swapQuote.minimumReceived)}{" "} - {swapQuote.minimumReceived.displaySymbol.toUpperCase()} -
    • -
  • Price impact: {swapQuote.priceImpact}%
    • -
  • - Liquidity Provider Fee: {formatAssetAmount(swapQuote.providerFee)}{" "} - {swapQuote.providerFee.displaySymbol.toUpperCase()} -
    • -
- )} -
- -
- - ); -} diff --git a/react-example/src/pages/SwapPage/context.tsx b/react-example/src/pages/SwapPage/context.tsx deleted file mode 100644 index 9cc56f31f..000000000 --- a/react-example/src/pages/SwapPage/context.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import React from "react"; -import { IAsset, Pool } from "@sifchain/sdk"; -import { DEFAULT_SWAP_SLIPPAGE_PERCENT } from "@sifchain/sdk/src/clients/liquidity/SwapClient"; -import { createContext, useContext, useEffect, useMemo, useState } from "react"; -import { useLocation } from "react-router"; -import { sdk } from "../../sdk"; - -// @ts-ignore -const SwapContext = createContext>({}); - -export const useSwapContext = () => useContext(SwapContext); - -const defaultFromAsset = - sdk.chains.sifchain.lookupAsset("uatom") || - sdk.chains.sifchain.lookupAsset("uphoton") || - sdk.chains.sifchain.lookupAssetOrThrow("ceth"); - -const defaultToAsset = sdk.chains.sifchain.lookupAssetOrThrow("rowan"); - -const useSwapPageData = () => { - const [fromAsset, setFromAsset] = useState(defaultFromAsset); - const [toAsset, setToAsset] = useState(defaultToAsset); - const [fromAmount, setFromAmount] = useState("0"); - const [toAmount, setToAmount] = useState("0"); - const [pools, setPools] = useState([]); - const [fromToPool, setFromToPool] = useState<{ - fromPool: Pool; - toPool: Pool; - } | null>(null); - const [slippagePercent, setSlippagePercent] = useState( - DEFAULT_SWAP_SLIPPAGE_PERCENT, - ); - const [swapQuote, setSwapQuote] = useState | null>(null); - - useEffect(() => { - setFromToPool( - sdk.liquidity.swap.findSwapFromToPool({ fromAsset, toAsset, pools }), - ); - }, [pools, fromAsset, toAsset]); - - const value = { - fromAsset, - setFromAsset, - toAsset, - setToAsset, - fromAmount, - setFromAmount, - toAmount, - setToAmount, - slippagePercent, - setSlippagePercent, - fromToPool, - swapQuote, - setSwapQuote, - setPools, - }; - return useMemo(() => value, Object.values(value)); -}; - -export const SwapPageProvider = (props: { children: any }) => { - const data = useSwapPageData(); - const location = useLocation(); - - const locationKey = location.key; - const setPools = data.setPools; - useEffect(() => { - let timeoutId: NodeJS.Timeout; - if (true || location.pathname.startsWith("/swap")) { - (async function run() { - data.setPools(await sdk.liquidity.fetchAllPools()); - timeoutId = setTimeout(run, 10_000); - })(); - } - return () => clearTimeout(timeoutId); - }, [locationKey, setPools]); - - return ( - {props.children} - ); -}; diff --git a/react-example/src/sdk.tsx b/react-example/src/sdk.tsx deleted file mode 100644 index 8195fdd4b..000000000 --- a/react-example/src/sdk.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { NetworkEnv, createSdk } from "@sifchain/sdk"; - -export const sdk = createSdk({ - environment: NetworkEnv.DEVNET, -}); diff --git a/react-example/tailwind.config.js b/react-example/tailwind.config.js deleted file mode 100644 index 3d9768c9a..000000000 --- a/react-example/tailwind.config.js +++ /dev/null @@ -1,23 +0,0 @@ -module.exports = { - mode: "jit", - purge: { - enabled: process.env.NODE_ENV === "production", - safeList: [], - content: ["./index.html", "./src/**/*.tsx", "./src/**/*.ts"], - }, - theme: { - minWidth: { - 40: "10rem", - 60: "15rem", - 80: "20rem", - 100: "25rem", - }, - maxWidth: { - 120: "30rem", - 160: "40rem", - 200: "50rem", - }, - }, - variants: {}, - plugins: [], -}; diff --git a/react-example/tsconfig.json b/react-example/tsconfig.json deleted file mode 100644 index 51efd413c..000000000 --- a/react-example/tsconfig.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "compilerOptions": { - "target": "ESNext", - "lib": ["DOM", "DOM.Iterable", "ESNext"], - "types": ["vite/client"], - "allowJs": false, - "skipLibCheck": false, - "esModuleInterop": false, - "allowSyntheticDefaultImports": true, - "strict": true, - "forceConsistentCasingInFileNames": true, - "module": "ESNext", - "moduleResolution": "Node", - "resolveJsonModule": true, - "isolatedModules": true, - "noEmit": true, - "jsx": "react" - }, - "include": ["./src"] -} diff --git a/react-example/vite.config.ts b/react-example/vite.config.ts deleted file mode 100644 index 62f5982a3..000000000 --- a/react-example/vite.config.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { vitePolyfills } from "../app/scripts/vite-polyfills"; -import reactRefresh from "@vitejs/plugin-react-refresh"; -import path from "path"; - -// https://vitejs.dev/config/ -export default { - plugins: [vitePolyfills(), reactRefresh()], - optimizeDeps: { - include: ["buffer", "process"], - }, - resolve: { - alias: { - "@": path.resolve(__dirname, "/src"), - stream: "stream-browserify", - }, - }, -};