---
tags: Product
---

# Bank UI Code Review

### UI example
https://app.daohaus.club/dao/0x64/0x27ff866544bdef14071533439f8b1a8a469a80fb/vaults
https://app.daohaus.club/dao/0x64/0x27ff866544bdef14071533439f8b1a8a469a80fb/vaults/treasury
http://localhost:3000/dao/0x64/0x27ff866544bdef14071533439f8b1a8a469a80fb/vaults/minion/0x7aaa3a5e9b7dc46c6bebb78a69bcbad03b4de657

### Data fetching/context

Getting the data from a new vault data endpoint and loading into dao context:

https://github.com/HausDAO/daohaus-app/blob/develop/src/contexts/DaoContext.jsx#L84
https://github.com/HausDAO/daohaus-app/blob/develop/src/utils/theGraph.js#L134

### Pages

#### Vaults
https://github.com/HausDAO/daohaus-app/blob/develop/src/pages/Vaults.jsx

bank chart now works with minion vault data. the parent component passes it a chunk of vault data to toggle vaults (single or combines data sources).
- used on vaults/treasury/minionvaults pages
- our data cache layer formats the data identical to treasury data
https://github.com/HausDAO/daohaus-app/blob/develop/src/components/bankChart.jsx

https://github.com/HausDAO/daohaus-app/blob/develop/src/components/vaultCard.jsx
https://github.com/HausDAO/daohaus-app/blob/develop/src/components/vaultCardTokenList.jsx
- this displays up to 3 token icons and a count after that

#### Treasury
https://github.com/HausDAO/daohaus-app/blob/develop/src/pages/Treasury.jsx

balanceList/balanceCard components now work for guildbank tokens, erc20s and native/network token
https://github.com/HausDAO/daohaus-app/blob/develop/src/components/balanceList.jsx
https://github.com/HausDAO/daohaus-app/blob/develop/src/components/balanceCard.jsx
= treasury loads withdraw and sync tokenbutton components with new lego-d forms/transactions

#### MinionVault
https://github.com/HausDAO/daohaus-app/blob/develop/src/pages/MinionVault.jsx

if a minion vault the balanceCard loads a minionTransfer component:
https://github.com/HausDAO/daohaus-app/blob/develop/src/components/minionTransfer.jsx

### nftcard with some lego-ing
https://github.com/HausDAO/daohaus-app/blob/96fab888a5b38879e4bfad6480b40eb6116a9b49/src/components/nftCard.jsx

https://github.com/HausDAO/daohaus-app/blob/develop/src/utils/nftVaults.js#L25

- this config lego hydrates the nft data with display values and actions specific to the nft platform
- has defaults as well
- the config tells the hydrate function how to get display fields with a function and adds actions that are menu items that open new form legos
- example:

const nftConfig = {
  '0xcf964c89f509a8c0ac36391c5460df94b91daba5': {
    platform: 'nifty ink',
    fields: {
      creator: 'getNiftyCreator',
    },
    actions: {
      ...defaultConfig.actions,
      sellNifty: {
        menuLabel: 'Sell Nifty',
        tooltTipLabel:
          'Make a proposal to set the price of the nft on nifty.ink',
        modalName: 'sellNifty',
        formLego: FORM.MINION_SELL_NIFTY,
        localValues: ['tokenId', 'contractAddress'],
      },
    },
  },
};

### Other components

Reworked minion execute with txlegos and contract calls with single contract service:
https://github.com/HausDAO/daohaus-app/blob/develop/src/components/minionExecute.jsx

Reworkes the cross dao internal balance list and card - used in the hub and in the minion vault - and added a menu for the withdraw tx:
https://github.com/HausDAO/daohaus-app/blob/96fab888a5b38879e4bfad6480b40eb6116a9b49/src/components/crossDaoInternalBalanceListCard.jsx
https://github.com/HausDAO/daohaus-app/blob/96fab888a5b38879e4bfad6480b40eb6116a9b49/src/components/minionInternalBalanceActionMenu.jsx

### Forms and tx legos
https://github.com/HausDAO/daohaus-app/blob/develop/src/data/forms.js#L148
https://github.com/HausDAO/daohaus-app/blob/develop/src/data/forms.js#L158
https://github.com/HausDAO/daohaus-app/blob/develop/src/data/forms.js#L168
https://github.com/HausDAO/daohaus-app/blob/develop/src/data/forms.js#L178

https://github.com/HausDAO/daohaus-app/blob/develop/src/data/fields.js#L174
- nft price field

https://github.com/HausDAO/daohaus-app/blob/develop/src/data/contractTX.js#L359
https://github.com/HausDAO/daohaus-app/blob/develop/src/data/contractTX.js#L377
https://github.com/HausDAO/daohaus-app/blob/develop/src/data/contractTX.js#L404
https://github.com/HausDAO/daohaus-app/blob/develop/src/data/contractTX.js#L427
https://github.com/HausDAO/daohaus-app/blob/develop/src/data/contractTX.js#L436
https://github.com/HausDAO/daohaus-app/blob/develop/src/data/contractTX.js#L445