Chores (#63)

* chore: make CoinInput work with BigNumbers * chore: format files with Prettier * chore: cleanup README * chore: upgrade to React 18 * chore: get rid of not-so-random genBytes32()
FuelLabs · Apr 26, 2022 · f53fbbd · f53fbbd
1 parent c100307
commit f53fbbd
Show file tree

Hide file tree

Showing 31 changed files with 8,039 additions and 8,148 deletions.
diff --git a/client/README.md b/client/README.md
@@ -5,11 +5,13 @@ SwaySwap is a decentralized sway application.
 ## Contributing
 
 ### Setup
-``shell
+
+```shell
 yarn install
-``
+```
 
 ### Development
+
 ```shell
 yarn start
 ```
@@ -21,15 +23,17 @@ The page will reload if you make edits.\
 You will also see any lint errors in the console.
 
 ### Build
+
 ```shell
 yarn build
 ```
 
 ### Test
+
 ```shell
 yarn test
 ```
 
 ## License
 
-The primary license for this repo is `Apache 2.0`, see [`LICENSE`](./LICENSE).
+The primary license for this repo is `Apache 2.0`, see [`LICENSE`](./LICENSE).
diff --git a/client/deploy-contracts/index.ts b/client/deploy-contracts/index.ts
@@ -4,67 +4,80 @@
 
 // TODO: Remove this file after `forc` enabled deploy a contract to a custom url
 // https://github.com/FuelLabs/sway/issues/1308
-import { hexlify, parseUnits } from "ethers/lib/utils";
-import { ContractFactory, NativeAssetId, ScriptTransactionRequest, Wallet, ZeroBytes32 } from "fuels";
-import path from "path";
-import fs from "fs";
+import { hexlify, parseUnits, randomBytes } from 'ethers/lib/utils';
+import {
+  ContractFactory,
+  NativeAssetId,
+  ScriptTransactionRequest,
+  Wallet,
+  ZeroBytes32,
+} from 'fuels';
+import path from 'path';
+import fs from 'fs';
 // @ts-ignore
 import { SwayswapContractAbi__factory, TokenContractAbi__factory } from '../src/types/contracts';
 
-const tokenPath = path.join(__dirname, '../../contracts/token_contract/out/debug/token_contract.bin');
-const contractPath = path.join(__dirname, '../../contracts/swayswap_contract/out/debug/swayswap_contract.bin');
+const tokenPath = path.join(
+  __dirname,
+  '../../contracts/token_contract/out/debug/token_contract.bin'
+);
+const contractPath = path.join(
+  __dirname,
+  '../../contracts/swayswap_contract/out/debug/swayswap_contract.bin'
+);
 const providerUrl = process.env.REACT_APP_FUEL_PROVIDER_URL || 'https://node.swayswap.io/graphql';
 
-const genBytes32 = () =>
-  hexlify(new Uint8Array(32).map(() => Math.floor(Math.random() * 256)));
-
 export const seedWallet = async (wallet: Wallet) => {
-    const transactionRequest = new ScriptTransactionRequest({
-      gasPrice: 0,
-      gasLimit: "0x0F4240",
-      script: "0x24400000",
-      scriptData: genBytes32()
-    });
-    // @ts-ignore
-    transactionRequest.addCoin({
-      id: "0x000000000000000000000000000000000000000000000000000000000000000000",
-      assetId: NativeAssetId,
-      amount: parseUnits(".5", 9),
-      owner: "0xf1e92c42b90934aa6372e30bc568a326f6e66a1a0288595e6e3fbd392a4f3e6e",
-    });
-    transactionRequest.addCoinOutput(wallet.address, parseUnits(".5", 9), NativeAssetId);
-    const submit = await wallet.sendTransaction(transactionRequest);
+  const transactionRequest = new ScriptTransactionRequest({
+    gasPrice: 0,
+    gasLimit: '0x0F4240',
+    script: '0x24400000',
+    scriptData: randomBytes(32),
+  });
+  // @ts-ignore
+  transactionRequest.addCoin({
+    id: '0x000000000000000000000000000000000000000000000000000000000000000000',
+    assetId: NativeAssetId,
+    amount: parseUnits('.5', 9),
+    owner: '0xf1e92c42b90934aa6372e30bc568a326f6e66a1a0288595e6e3fbd392a4f3e6e',
+  });
+  transactionRequest.addCoinOutput(wallet.address, parseUnits('.5', 9), NativeAssetId);
+  const submit = await wallet.sendTransaction(transactionRequest);
 
-    return submit.wait();
-}
+  return submit.wait();
+};
 
 export async function deployContract(contextLog: string, binaryPath: string, abi: any) {
-    console.log(contextLog, 'Create wallet...');
-    console.log(contextLog, 'connected to', providerUrl)
-    const wallet = Wallet.generate({ provider: providerUrl });
-    
-    console.log(contextLog, 'Funding wallet with some coins');
-    await seedWallet(wallet);
+  console.log(contextLog, 'Create wallet...');
+  console.log(contextLog, 'connected to', providerUrl);
+  const wallet = Wallet.generate({ provider: providerUrl });
+
+  console.log(contextLog, 'Funding wallet with some coins');
+  await seedWallet(wallet);
 
-    // Deploy
-    console.log(contextLog, 'Load contract binary...');
-    const bytecode = fs.readFileSync(binaryPath);
-    console.log(contextLog, 'Deploy contract...');
-    const factory = new ContractFactory(bytecode, abi, wallet);
-    const contract = await factory.deployContract(ZeroBytes32);
+  // Deploy
+  console.log(contextLog, 'Load contract binary...');
+  const bytecode = fs.readFileSync(binaryPath);
+  console.log(contextLog, 'Deploy contract...');
+  const factory = new ContractFactory(bytecode, abi, wallet);
+  const contract = await factory.deployContract(ZeroBytes32);
 
-    console.log(contextLog, 'Contract deployed...');
-    return contract;
+  console.log(contextLog, 'Contract deployed...');
+  return contract;
 }
 
 (async function () {
-    try {
-        const contract = await deployContract('SwaySwap', contractPath, SwayswapContractAbi__factory.abi);
-        const token = await deployContract('Token', tokenPath, TokenContractAbi__factory.abi);
+  try {
+    const contract = await deployContract(
+      'SwaySwap',
+      contractPath,
+      SwayswapContractAbi__factory.abi
+    );
+    const token = await deployContract('Token', tokenPath, TokenContractAbi__factory.abi);
 
-        console.log('SwaySwap Contract Id', contract.id);
-        console.log('Token Contract Id', token.id);
-    } catch (err) {
-        console.error(err);
-    }
-})();
+    console.log('SwaySwap Contract Id', contract.id);
+    console.log('Token Contract Id', token.id);
+  } catch (err) {
+    console.error(err);
+  }
+})();
diff --git a/client/deploy-contracts/tsconfig.json b/client/deploy-contracts/tsconfig.json
@@ -11,4 +11,4 @@
     "declarationMap": true
   },
   "include": ["./index.ts"]
-}
+}
diff --git a/client/package.json b/client/package.json
@@ -10,18 +10,18 @@
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.4.0",
     "@types/node": "^16.11.22",
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^18.0.7",
+    "@types/react-dom": "^18.0.0",
     "classnames": "^2.3.1",
     "ethers": "^5.5.4",
     "fuels": "^0.0.0-master-0bbed84",
     "prettier": "^2.5.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-icons": "^4.3.1",
     "react-number-format": "^4.9.1",
     "react-router-dom": "6",
-    "react-scripts": "5.0.0",
+    "react-scripts": "5.0.1",
     "typescript": "^4.5.5",
     "url-join": "^4.0.1",
     "web-vitals": "^2.1.4"

diff --git a/client/postcss.config.js b/client/postcss.config.js
@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/client/public/index.html b/client/public/index.html
@@ -5,10 +5,7 @@
     <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="SwaySwap Application"
-    />
+    <meta name="description" content="SwaySwap Application" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a

diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -23,10 +23,22 @@ function App() {
           path={Pages.assets}
           element={<RequireWallet children={<Assets />} />}
         />
-        <Route path={Pages.swap} element={<RequireWallet children={<Swap />} />} />
-        <Route path={Pages.pool} element={<RequireWallet children={<Pool />} />} />
-        <Route path={Pages.mintToken} element={<RequireWallet children={<MintToken />} />} />
-        <Route path={Pages.removeLiquidity} element={<RequireWallet children={<RemoveLiquidity />} />} />
+        <Route
+          path={Pages.swap}
+          element={<RequireWallet children={<Swap />} />}
+        />
+        <Route
+          path={Pages.pool}
+          element={<RequireWallet children={<Pool />} />}
+        />
+        <Route
+          path={Pages.mintToken}
+          element={<RequireWallet children={<MintToken />} />}
+        />
+        <Route
+          path={Pages.removeLiquidity}
+          element={<RequireWallet children={<RemoveLiquidity />} />}
+        />
       </Route>
     </Router>
   );

diff --git a/client/src/components/CoinInput.tsx b/client/src/components/CoinInput.tsx
@@ -1,5 +1,7 @@
 import { Menu, Transition } from "@headlessui/react";
 import classNames from "classnames";
+import { formatUnits, parseUnits } from "ethers/lib/utils";
+import { BigNumber } from "fuels";
 import { useCallback } from "react";
 import { useEffect } from "react";
 import { Fragment, useState } from "react";
@@ -27,7 +29,7 @@ export interface Coin {
   assetId: string;
   name?: string;
   img?: string;
-};
+}
 
 export function CoinSelector({
   value,
@@ -109,9 +111,9 @@ export function CoinSelector({
                       >
                         {coin && coin.img && (
                           <div className="flex flex-wrap justify-center">
-                            <div className="w-6/12 sm:w-4/12 px-4">
+                            <div className="w-6/12 px-4 sm:w-4/12">
                               <img
-                                className="shadow-lg rounded max-w-full h-auto align-middle border-none"
+                                className="h-auto max-w-full rounded border-none align-middle shadow-lg"
                                 src={urlJoin(PUBLIC_URL, coin.img)}
                                 alt="eth"
                                 height={24}
@@ -144,21 +146,21 @@ export function CoinInput({
   onChangeAmount,
   onChangeCoin,
 }: {
-  disabled?: boolean,
-  amount?: number | string | null;
+  disabled?: boolean;
+  amount?: BigNumber | null;
   coin?: Coin | null;
   coins?: Coin[];
-  onChangeAmount?: (value: string | null) => void;
+  onChangeAmount?: (value: BigNumber | null) => void;
   onChangeCoin?: (value: Coin) => void;
 }) {
   return (
     <div className={style.transferPropContainer}>
       <div className="flex-1">
         <NumberFormat
           placeholder="0.0"
-          value={amount}
-          displayType={disabled ? 'text' : 'input'}
-          onValueChange={(e) => onChangeAmount?.(e.value)}
+          value={amount && formatUnits(amount, 9)}
+          displayType={disabled ? "text" : "input"}
+          onValueChange={(e) => onChangeAmount?.(parseUnits(e.value, 9))}
           className={style.transferPropInput}
           thousandSeparator={false}
         />

diff --git a/client/src/components/Header.tsx b/client/src/components/Header.tsx
@@ -61,7 +61,8 @@ const Header = () => {
             <div
               onClick={() => navigate(Pages.removeLiquidity)}
               className={`${style.navItem} ${
-                location.pathname === Pages.removeLiquidity && style.activeNavItem
+                location.pathname === Pages.removeLiquidity &&
+                style.activeNavItem
               }`}
             >
               Remove

diff --git a/client/src/components/NumberInput.tsx b/client/src/components/NumberInput.tsx
@@ -1,32 +1,32 @@
 import NumberFormat from "react-number-format";
 
 const style = {
-    transferPropContainer: `bg-[#20242A] rounded-2xl p-4 text-3xl border border-[#20242A] 
+  transferPropContainer: `bg-[#20242A] rounded-2xl p-4 text-3xl border border-[#20242A] 
         flex justify-between`,
-    transferPropInput: `bg-transparent placeholder:text-[#B2B9D2] outline-none w-full text-2xl`
+  transferPropInput: `bg-transparent placeholder:text-[#B2B9D2] outline-none w-full text-2xl`,
 };
 
 export function NumberInput({
-    value,
-    onChange,
-    disabled,
+  value,
+  onChange,
+  disabled,
 }: {
-    disabled?: boolean,
-    value?: number | string | null;
-    onChange?: (value: string) => void;
+  disabled?: boolean;
+  value?: number | string | null;
+  onChange?: (value: string) => void;
 }) {
-return (
+  return (
     <div className={style.transferPropContainer}>
-        <div className="flex-1">
-            <NumberFormat
-                placeholder="0"
-                value={value}
-                displayType={disabled ? 'text' : 'input'}
-                onValueChange={(e) => onChange?.(e.value)}
-                className={style.transferPropInput}
-                thousandSeparator={false}
-            />
-        </div>
+      <div className="flex-1">
+        <NumberFormat
+          placeholder="0"
+          value={value}
+          displayType={disabled ? "text" : "input"}
+          onValueChange={(e) => onChange?.(e.value)}
+          className={style.transferPropInput}
+          thousandSeparator={false}
+        />
+      </div>
     </div>
-);
-}
+  );
+}
diff --git a/client/src/components/RequireWallet.tsx b/client/src/components/RequireWallet.tsx
@@ -11,4 +11,4 @@ export const RequireWallet = ({ children }: { children: JSX.Element }) => {
   }
 
   return children;
-};
+};