NearOracle dApp frontend 👀 🧞 ⚡

In this Repo

This is the client side repo for NearOracle, made with the developer experience in mind: Next.js, TypeScript, ESLint, Prettier, Lint-Staged, VSCode, PostCSS, Tailwind CSS. The dApp fetches the user's financial history, passes it to the algorithm, (see the codebase of the NearOracle credit score algorithm at near-oracle-algorithm),which executes and returns a score via a Rust smart contract (see codebase at near-oracle-contract).

Continue to read these docs to clone this project and spin it up locally.

---

Features

Developer experience first:

• 🔥 Next.js for a Server Side Rendered Static Site
• 🎨 Integrated with Tailwind CSS & Ant Design
• 🎉 Type checking TypeScript
• ✏️ Linter with ESLint (default NextJS, NextJS Core Web Vitals and Airbnb configuration)
• 💡 Absolute Imports
• 🛠 Code Formatter with Prettier
• 🚫 Lint-staged for running linters on Git staged files
• 🗂 VSCode configuration: Debug, Settings, Tasks and extension for PostCSS, ESLint, Prettier, TypeScript
• 🤖 SEO metadata, JSON-LD and Open Graph tags with Next SEO

Requirements

• Node.js and npm or yarn

Getting started

Run the following command on your local environment:

git clone  ... my-project-name
cd my-project-name
git checkout develop
yarn install

Folder Structure

near-oracle-client
├── README.md
├── next-env.d.ts
├── next.config.js
├── package.json
├── pages
│   ├── _app.tsx
│   ├── _document.tsx
│   ├── api
│   │   └── coinbase.ts              # api calls to the coinbase validator
│   │   └── covalent.ts              # api calls to the covalent validator
│   │   └── plaid.ts                 # api calls to the plaid validator
│   ├── applicant
│   ├── index.tsx
│   ├── learn
│   ├── provider
│   └── start
├── postcss.config.js
├── public
│   └── images
├── src
│   ├── components
│   │   └── ...
│   │   └── Covalent                 # MetaMask SDK Integration
│   │   └── Plaid                    # Plaid Link SDK Integration
│   │   └── Coinbase                 # Coinbase OAuth Integration
│   ├── constants
│   ├── context                      # where the NEAR connection & wallet are initiated
│   ├── services
│   ├── types
│   └── utils
├── styles
│   └── styles.css
├── tailwind.config.js
├── tsconfig.json
├── tsconfig.tsbuildinfo
├── yarn-error.log
└── yarn.lock

Credentials Required

You will need the credentials & accounts listed below to get started:

1. NEAR Wallet account (testnet or mainnet)
2. API keys and credentials from data providers

• CoinMarketCap API key → follow the Developers guide here
• Plaid client_id and secret_key → create a Plaid account here, then retrieve your Plaid keys
• Coinbase API Key → create a Coinbase account here, then retrieve your Coinbase keys
  To generate a new set of API keys follow this flow: Coinbase -> settings -> API -> New API Key.
• Covalent API key → register here

3. NFT.Storage API key where you can upload off-chain NFT data for free. → register here
4. NEAR wallet account id where your contracts have been deployed

Create a .env.local file in your root folder:

NEXT_BASE_URL=http://localhost:3000

COINBASE_CLIENT_ID=your_client_Id
COINBASE_CLIENT_SECRET=your_client_secret
COINBASE_AUTHORIZE_URL=https://www.coinbase.com/oauth/authorize
COINBASE_TOKEN_URL=https://api.coinbase.com/oauth/token

PLAID_CLIENT_ID=your_client_id
PLAID_URL=sandbox.plaid.com
PLAID_SECRET_KEY=your_sandbox_key

BACKEND_BASE_URL=https://dev-near-oracle-backend.herokuapp.com
COINMARKET_KEY=your_coinmarketcapapikey

COVALENT_KEY=your_covalent_api_key

NFT_STORAGE_KEY=your_nft_storage_key

CONTRACT_OWNER_ID=wallet_id_of_the_contract_owner  
CONTRACT_OWNER_PRIVATE_KEY=private_key_of_the_contract_owner
SCORE_CONTRACT_NAME=name_of_the_contract_for_storing_a_score
NFT_CONTRACT_NAME=name_of_the_contract_for_minting_an_NFT

ENV_CONFIG=testnet | mainnet

Then, you can run locally in development mode with live reload. Ensure you run this command after cd into the local folder where you cloned the repo.

Helpful Docs & Links

• NEAR JavaScript API Quick Reference: https://docs.near.org/tools/near-api-js/quick-reference

• NEAR Type Docs: https://near.github.io/near-api-js/

• Coinbase OAuth Docs: https://docs.cloud.coinbase.com/sign-in-with-coinbase/docs/sign-in-withpcoinbase-integration

• Plaid Sandbox Docs: https://plaid.com/docs/sandbox/

• Plaid Token Endpoints Docs: https://plaid.com/docs/api/tokens/#linktokencreate