# Evaluation of adoption PancakeSwap for GoodDollar Protocol needs

Repo to analyse: https://github.com/pancakeswap/pancake-swap-interface-v1

## Use fuse network (2 pt)

Chain connection: React hook [src/hooks/useAuth.ts](https://github.com/pancakeswap/pancake-swap-interface-v1/blob/master/src/hooks/useAuth.ts).

App hard-bounded to work with one chain defined in REACT_APP_CHAIN_ID [src/connectors/index.ts](https://github.com/pancakeswap/pancake-swap-interface-v1/blob/master/src/connectors/index.ts#L11) and addresses related to chain [src/hooks/useContract.ts]().
Tokens hardcoded for using wrapped BNB [src/hooks/useWrapCallback.ts](https://github.com/pancakeswap/pancake-swap-interface-v1/blob/master/src/hooks/useWrapCallback.ts).

Contracts and other chain interactions relies on [ethersproject](https://github.com/pancakeswap/pancake-swap-interface-v1/blob/6ffbc6ae1d16984772fc9859b63ac3dcc79afc29/src/utils/index.ts#L82) and [Web3React](https://github.com/pancakeswap/pancake-swap-interface-v1/blob/6ffbc6ae1d16984772fc9859b63ac3dcc79afc29/src/hooks/index.ts#L12).

Need to walk through app to unbound hooks and logic from BNB.

## Use GD contracts ABI (1 pt)

Just add ABI definitions [src/constants/abis](https://github.com/pancakeswap/pancake-swap-interface-v1/tree/master/src/constants/abis) or add `@gooddollar/goodcontracts` as dependency and invoke via `useContract` hook with appropriate config payload.

## Swap (4 pt)

Interestingly that Swap initially (at least render function) [was decomposed](https://github.com/pancakeswap/pancake-swap-interface-v1/blob/727d28941399b8ef20436babf8ea1d4a33971ce9/src/pages/Swap/index.js#L668) as we want to do in our ProtoUI, but then someone [refactored it](https://github.com/pancakeswap/pancake-swap-interface-v1/commit/e19e150f01077a8af26ed0b67928c2d0f98076f9#diff-3ac763163469bd6658b6eb71be59bef5c9f96c9dc2564184684f274d3b173e73), then after a year [rolled back](https://github.com/pancakeswap/pancake-swap-interface-v1/commit/095beae0c2219b2ddc20ffbaad395539e58b5691#diff-d2d2d34074b22ac06988a155c74cca892a97f5bb4e343d933a1a4f357d4bf888) and file starts acquire and more complicated cases and without good one original decomposition.

Nowadays it is sphaghetti one-filer component https://github.com/pancakeswap/pancake-swap-interface-v1/blob/master/src/pages/Swap/index.tsx
with a lot of problems:

1. render function as single return statement over 200 lines of code.
At least should split into smaller render function.

2. magic numbers even in translateable strings https://github.com/pancakeswap/pancake-swap-interface-v1/blob/master/src/pages/Swap/index.tsx#L380 and somewhere not translated at all https://github.com/pancakeswap/pancake-swap-interface-v1/blob/master/src/pages/Swap/index.tsx#L409

3. hack cases both in logic https://github.com/pancakeswap/pancake-swap-interface-v1/blob/master/src/pages/Swap/index.tsx#L296 and in markup https://github.com/pancakeswap/pancake-swap-interface-v1/blob/master/src/pages/Swap/index.tsx#L354

4. mixing logic with presentation https://github.com/pancakeswap/pancake-swap-interface-v1/blob/master/src/pages/Swap/index.tsx#L508

5. still declaring styled components inside business-logic components https://github.com/pancakeswap/pancake-swap-interface-v1/blob/master/src/pages/Swap/index.tsx#L42

6. other extras that we won't need:
https://github.com/pancakeswap/pancake-swap-interface-v1/blob/master/src/pages/Swap/index.tsx#L107

Actions needed:
1. Reduce 570 lines into ~200 after throwing out non-needed features and hacks.
2. Split render function into smaller blocks.
3. Debug resulting hooks as whole logic layered on React hooks.

## Display balance in G$ (1 pt)

Provide G$ balance address for resolving `balanceOf` inside [useTokenBalances hooks](https://github.com/pancakeswap/pancake-swap-interface-v1/blob/master/src/state/wallet/hooks.ts#L60).

`useInterval` used only on [token list updating](https://github.com/pancakeswap/pancake-swap-interface-v1/blob/master/src/state/lists/updater.ts#L29) with interval of 10m.

Need to implement own background balance updater.

## Claim UI and action (3 pt)

1. Compose layout based on available components https://github.com/pancakeswap/pancake-toolkit.

2. Create confirmation/error modal like [Confirm Swap](https://github.com/pancakeswap/pancake-swap-interface-v1/blob/master/src/components/swap/ConfirmSwapModal.tsx).

3. Write pre-claim and claim hooks, invoke with [useContract](https://github.com/pancakeswap/pancake-swap-interface-v1/blob/master/src/hooks/useContract.ts#L15).

5. Listen for event – does not found how to. [ApproveCallback](https://github.com/pancakeswap/pancake-swap-interface-v1/blob/master/src/hooks/useApproveCallback.ts) not seems relevant.

## In doubt

1. States based on react-redux [src/state](https://github.com/pancakeswap/pancake-swap-interface-v1/blob/master/src/state/index.ts). Luckily there are no saga, `yield`s and generators.

2. Business logic based on React hooks [src/hooks](https://github.com/pancakeswap/pancake-swap-interface-v1/tree/master/src/hooks). No pure js classes, binded with React forever.

3. Checking user logged state via [background hook](https://github.com/pancakeswap/pancake-swap-interface-v1/blob/master/src/hooks/index.ts#L53).

4. Drop unnecessary menu items [here](https://github.com/pancakeswap/pancake-swap-interface-v1/blob/master/src/components/Menu/config.ts).

Can not judge over rest of React code, but from my PoV:

1. codebase could be reduced on 30-40%;

2. mixing in-file css (like [this modal](https://github.com/pancakeswap/pancake-swap-interface-v1/blob/master/src/components/TokenWarningModal/index.tsx#L23) or [this input](https://github.com/pancakeswap/pancake-swap-interface-v1/blob/master/src/components/NumericalInput/index.tsx)) when pre-ready uikit exists indicates problems or in uikit (not every possible) or in code quality (reinventing invented and DRY);

3. in-file css not support adaptivity – potential problems on mobile;

4. strange and still not fixed [layout/scroll bugs](https://monosnap.com/file/IzIuqUgYNCF3EOyCLT3utdLnCkpQAB).

## Good points

1. Settled tests for blockchain interactions. Based on Cypress.
cypress/integration/remove-liquidity.test.ts.

2. Settled localisation workflow with Crowdin. But somewhere magic numbers in TranslateString instead of strings/t-wrappers as it done in [primary repo](https://github.com/pancakeswap/pancake-frontend/blob/develop/src/views/Home/components/CakeStats.tsx#L36).

3. Ready UI kit: https://github.com/pancakeswap/pancake-toolkit based on [React Storybook](https://storybook.js.org/docs/react/get-started/introduction). But not used in full.

4. Way clean file stucture. But [primary repo](https://github.com/pancakeswap/pancake-frontend/tree/develop/src/views/) got better organisation.