Components for managing rentals and zustand `state` properties implemented

[anilhelvaci]

Closes #7 #10

What's new?

We've 5 new components in the form of buttons for executing following actions;

• withdraw utility
• withdraw collateral
• withdraw rental fee
• update rental config
• return utility

There components accept a prop called rental and it is expected to have the following form:

const sampleOwnedRental =  {
  "id": '"create-rental-agoric1cjua9sp5adzyee38nnj77gft3e3yprryeusu4w-1694682960779"',
  "configuration": {
    "collateralAmount": {
      "brand": {},
      "value": "33333"
    },
    "gracePeriodDuration": "600",
    "maxRentingDurationUnits": "10",
    "minRentingDurationUnits": "1",
    "rentalFeePerUnitAmount": {
      "brand": {},
      "value": "1212"
    },
    "rentingDurationUnit": "minute",
    "rentingTier": "Ad-Hoc",
    "utilityAmount": {
      "brand": {},
      "value": [
        {
          "accessKeyHash": "bf34q7hiufb3",
          "address": "Sesame Street n123456",
          "id": "1694682821775",
          "imagePath": "https://sesameworkshop.org/wp-content/uploads/2023/03/SesameStreetShow_small.png",
          "organization": "Airbnb rental"
        }
      ]
    },
    "utilityDescription": "Test Description",
    "utilityTitle": "Test Title"
  },
  "gracePeriod": {
    "gracePeriodEnd": {
      "absValue": "1694683682",
      "timerBrand": {}
    },
    "gracePeriodStart": {
      "absValue": "1694683082",
      "timerBrand": {}
    }
  },
  "phase": "gracePeriod"
}

How to consume?

We use getter methods for consuming rental data. There are two types of rental data:

• ownedRentals
• borrowedRentals

Above data will be consumed from Owned and Borrowed tabs respectively. For example in the Owned tab, data can be consumed like:

const Owned = props => {
  const getOwnedRentals = useStore(state => state.getOwnedRentals);
  const ownedRentals = getOwnedRentals();

  return (
    <div>
    {ownedRentals.map(rental => // Do something)} 
    </div>
  )
}

Notice that rental in the above map callback has the data structure as sampleOwnedRental as the section above. So we should not forget that ownedRentals = [sampleOwnedRental, ...].

See TestComponent for how to the same for borrowedRentals

[anilhelvaci]

const controllers = {
  snackbar: console.log, 
  modal: onModalClose,
};

// Button uses this controller as below
const { onStatusChange } = makeGenericOnStatusUpdate(controllers.snackbar, controllers.modal);