Skip to content

Latest commit

 

History

History
178 lines (129 loc) · 7.31 KB

README.md

File metadata and controls

178 lines (129 loc) · 7.31 KB
Raw

RentSpace

RentSpace is a decentralized application that allows users to rent out their spaces to other users. The application is built using React Native and Dfinity SDK. As an innovative startup, we combine the advantages of blockchain, cryptocurrency payments, and TikTok-style video content to transform the user experience.

Crypto and Fiat Flexibility: RentSpace enables tenants to pay rental deposits, fees and rent in either cryptocurrency or traditional money. We meet users where they are while expanding access to crypto’s advantages.

Collaborative Booking: Our smart contracts allow both individual and group bookings. Friends, families, or co-workers can transparently pool funds and formally share rental responsibility.

Rewards Programs: RentSpace will have an integrated actions-based rewards system. Users earn crypto rewards for rent paid, reviews written, referrals sent, and other platform contributions.

Our reward system includes points, levels and badges.

  • create and connect Internet Identity - 50 points
  • register and verify identity - 100 points
  • connect socials and follow RentSpace (twitter, telegram, discord) - 25 points per social profile
  • first time rent via RentSpace - 500 points with a multiplier 5x
  • first time host via RentSpace - 1000 points with a multiplier 5x
  • mint RentSpace Identity NFT - 200 points
  • daily check in transaction in ICP or Solana - 10 points per day

RentSpace App Setup

Versions Used :

  • JDK version 11.0.0.1
  • React 18.2.0
  • React native 0.72.7
  • compileSDK and targetSdk 31
  • minSdkVersion 21
  • buildToolVersion 31.0.0
  • Node v18.16.1
  • @reduxjs/toolkit ^2.0.1

Setting up and running the project

Use npm i --force if npm i gives errors

Also make sure to run 'adb reverse tcp:4943 tcp:4943' for accessing and making canister calls from you device used for launching the project.

  • Clone the project using git clone < repo link >
  • install the packages using npm i and mops i commands
  • Complete upcoming steps simultaneously, after completing them you will be able to run the project.
  • for running frontend:

  1. fixing the 'ViewPropTypes will be removed' err before starting the frontend :

    i)npm i --force deprecated-react-native-prop-types
    ii) Inside node_modules find node_modules/react-native/index.js file.
    iii) Go to line 383 and replace the methods given there with :

       // Deprecated Prop Types
   get ColorPropType(): $FlowFixMe {
    
      return require('deprecated-react-native-prop-types').ColorPropType;
    
   },
    

   get EdgeInsetsPropType(): $FlowFixMe {
    
      return require('deprecated-react-native-prop-types').EdgeInsetsPropType;
    
   },
    

   get PointPropType(): $FlowFixMe {
    
      return require('deprecated-react-native-prop-types').PointPropType;
    
   },
    

   get ViewPropTypes(): $FlowFixMe {
    
      return require('deprecated-react-native-prop-types').ViewPropTypes;
    
   },

  2. Follow this doc to make necessary changes inside agent package to run the project.

  3. run npm start -- --reset-cache command to start the frontend and then choose a to run it on android. You can also simply run npm start but the first command is suggested because sometimes react-native gives unnecessary warnings and errors which are fixed by clearing the cache by that command on running.

  • for starting dfx :

  1. dfx start

  2. dfx generate

    after the declarations are generated inside src folder replace code inside index.js where we export the actor at the end with the code given in following example, e.g. for backend you will export it as :

       export const backend = createActor(canisterId, {
      agentOptions: {
         fetchOptions: {
            reactNative: {
             __nativeResponseType: 'base64',
            },
         },
         callOptions: {
         reactNative: {
            textStreaming: true,
         },
      },
         blsVerify: () => true,
         host: 'http://127.0.0.1:4943',
      },
   });

    Similarly add the createActor function inside the declaration of other canisters , just change the backend to the name of that canister. Do the same for User, hotel and LoginWeb declarations' index.js.
    Also, around line 34 of every declaration above createActor function, we are returning Actor.createActor function. Pass 'bls_verify:true' as the third argument of that function like shown below :

          return Actor.createActor(idlFactory, {
         agent,
         canisterId,
         blsVerify: () => true,
         ...options.actorOptions,
      });

  3. dfx deps install

  4. dfx deps deploy internet_identity

  5. dfx deploy backend

    After deploying thes backend canister we will get its canister ID, which we have to place inside the index.js folder of the backend declaration like :
    export const canisterId ="bkyz2-fmaaa-aaaaa-qaaaq-cai"

  6. dfx deploy LoginWeb

    inside the src/app/Main.js folder place the complete link of the deployed LoginWeb canister on line 96 like : 

    const url = `http://127.0.0.1:4943/?canisterId=be2us-64aaa-aaaaa-qaabq-cai&publicKey=${toHex(middleKeyIdentity.getPublicKey().toDer())}`;

    replace all the url before '&publicKey' with your LoginWeb canister deployed link. Also in line 158 where createActor method is called pass your backend canister instead you the one given.

  7. dfx canister call backend createNewUserCanister user

  8. dfx canister call backend createNewHotelCanister hotel

    On making the above two canister calls you will get the respective canister IDs for newly created user and hotel canisters(You can change the names of the canisters if you want).
    Copy those IDs and place them inside the index.js of their respective declarations like we did for backend declaration in step 5 of deploying dfx like: export const canisterId ="br5f7-7uaaa-aaaaa-qaaca-cai"

    Then inside src/app/Main.js replace the canister IDs passed while initializing actorUser and actorHotel on line 161 and 162 with the canister ID we got after deploying the canisters user and hotel respectively :

    let actorUser=createActor('br5f7-7uaaa-aaaaa-qaaca-cai',{agent})
    let actorHotel=createActor('bw4dl-smaaa-aaaaa-qaacq-cai'{agent})

Global crypto not found solution

Note : These libraries are dependent on each other. Do not skip any of them. If you are using react-native <=0.60 make sure to link them using react-native link < Library Name >. For versions more than 0.60, link an unlink commands are not needed.

Libraries to be installed :

  1. react-native-webview-crypto

Command

npm i react-native-webview-crypto


  1. webview-crypt

Command

npm i webview-crypto

Steps to follow :

  • Import PolyfillCrypto in your Root Component

    import PolyfillCrypto from 'react-native-webview-crypto'

  • Place the PolyfillsCrypto inside the root component

const Component=()=>{
   < >
      < PolyfillCrypto />
   < />
}