# BZZaar Interface

A Bonding-curve powered AMM for the buying and selling of BZZ tokens.

- App: [bzz.exchange](https://bzz.exchange/)
- Smart Contracts: [ethersphere/bzzaar-contracts](https://github.com/ethersphere/bzzaar-contracts)
- Swarm whitepaper: [whitepaper](https://www.ethswarm.org/swarm-whitepaper.pdf)
- Docs: [docs.ethswarm.org](https://docs.ethswarm.org/docs/)

### Starting App (development)

Follow these instructions for local development:

get environment variables:

cp .env.goerli .env

> Note: There is no alchemy API key included in `.env.example` for security purposes.Please remember to add your own (full URL, not just API key).

Your .env file should look something like this:

REACT_APP_TOKEN=0x4476dcFD4AFbB9da6598fAAF499B04F7685C8b37
REACT_APP_DAI=0x05F454b4C05d6B72D082a7304444A80b4CA29e4b
REACT_APP_CURVE=0x21A661D379AD6EC926c965295C563904F4ed3D2F
REACT_APP_ETHBROKER=0xC5036394fC89b9f2437D8F657cAeCC92361bE38e
REACT_APP_CHAIN_ID=5

REACT_APP_POLLING_INTERVAL=6000
REACT_APP_GRAPH_ENDPOINT=https: //api.thegraph.com/subgraphs/name/gundamdweeb/arrakis
REACT_APP_PORTIS_ID=f373e661-58c6-4781-b43a-77d85d53729e
REACT_APP_ALCHEMY_ENDPOINT=https://eth-goerli.alchemyapi.io/v2/<API_KEY>

install packages:

yarn install

start dev server:

yarn start

## Project structure

All main app logic is inside the src directory.

|-- README.md
|-- changelog.md
|-- package.json
|-- src
|   |-- App.tsx
|   |-- components
|   |   |-- [React Components]
|   |-- constants.ts
|   |-- containers
|   |   |-- [React component Containers]
|   |   |-- [custom hooks]
|   |-- interfaces
|   |   |-- [Contract ABIs]
|   |-- store
|   |   |-- services
|   |   |   `-- prices.ts
|   |   |-- themeContext
|   |   |   |-- ...
|   |   `-- types.ts
|   |-- transitions.ts
|   |-- utils.ts
|   `-- web3
|       |-- config.ts
|       |-- contractServices
|       |   |-- bzz.ts
|       |   |-- curve.ts
|       |   |-- dai.ts
|       |   |-- ethBroker.ts
|       |   `-- helpers.ts
|       |-- notifications
|       |   |-- eventTypes.ts
|       |   `-- helpers.ts
|       |-- utils.ts
|       `-- wallets.ts
|-- tests
    `-- tests.ts

## Project Details
> a breakdown of the project and its parts

### 1) Wallets & Web3 Logic

|-- src
|   `-- web3
|       |-- config.ts
|       |-- utils.ts
|       `-- wallets.ts

This App uses [useDapp](https://usedapp.io/) as the main web3 logic controller. find the docs [here](https://usedapp.readthedocs.io/en/latest/).
Under-the-hood useDapp makes use of the popular [Ethers.js](https://github.com/ethers-io/ethers.js/) package as well as [web3-react](https://github.com/NoahZinsmeister/web3-react).

`utils.ts` - Here we define somehelper functions to use in our project.

`config.ts` - This is an extremely important file. Here we define all relevent contract addresses, chainID, node url to be used in our dapp. We take all this info, combine it with our ABIs and we instantiate Ethers Interfaces & Contracts (classes) to be used when making transactions to the blockchain.

In this file we also define a `getConfig` function, the return of which is a config object that is passed to our DappProvider, like so:

import { DAppProvider } from '@usedapp/core'
mport { getConfig } from './web3/config'


const DappConfig = getConfig();
ReactDOM.render(
  <React.StrictMode>
        <DAppProvider config={DappConfig}>
          <App />
        </DAppProvider>
  </React.StrictMode>,
  document.getElementById('root'),
)

`wallets.ts` - Here we define all the "connectors" for each wallet we want to support. Each wallet provider has a different API so each one requires a different set of instructions for getting account info, signing transactions etc. If you want to add more connectors for more wallets, please find the relevent connector [here](https://github.com/NoahZinsmeister/web3-react/tree/v6/packages).

### 2) Contract Interactions

|-- src
|   `-- web3
|       |-- contractServices
|       |   |-- bzz.ts
|       |   |-- curve.ts
|       |   |-- dai.ts
|       |   |-- ethBroker.ts
|       |   `-- helpers.ts

`contractServices/[contract].ts` - Here we define ALL Read & Write contract functions. These are all hooks that wrap either `useContractCall()` or `useContractFunctions()` functions from useDapp (depending whether it's a read or write function). All functions inside these file are hooks to be called inside `src/containers/modalContainer.tsx`.

### 3) Notifications

|   `-- web3
|       |-- notifications
|       |   |-- eventTypes.ts
|       |   `-- helpers.ts

`eventTypes.ts` - Here we define all the return TYPES (interfaces) of our contract events. For example when we mint tokens, the curve contract emits an event called 'mintTokens' and here we define its interface:

export interface MintTokens {
  buyer: string // The address of the buyer
  amount: BigNumber // The amount of bonded tokens to mint
  pricePaid: BigNumber // The price in collateral tokens
  maxSpend: BigNumber // The max amount of collateral to spend
}    

Do this for every event you expect to parse.

`helpers.ts` - Here we define some helper functions we'll need to parse event logs and generate data to be shown inside notification popups when we receive a transction receipt (upon success or failure).

### 4) Where is it all used?

|-- src
|   |-- components
|   |   |-- ...
|   |-- containers
|   |   |-- ModalContainer.tsx

`ModalContainer.tsx` The app is split into Containers and Components. This container is where all contract 'reads' are being consumed and also where contract 'writes' are being called from.