Skip to content

Commit

Permalink
Firebase (firestore connection) (#9)
Browse files Browse the repository at this point in the history
  • Loading branch information
carletex authored Feb 3, 2024
1 parent b0cf9cd commit 8d19074
Show file tree
Hide file tree
Showing 9 changed files with 1,366 additions and 117 deletions.
6 changes: 6 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -11,3 +11,9 @@ node_modules
.eslintcache
.vscode/**
.DS_Store

.firebaserc
firebase-debug.log
firestore-debug.log
ui-debug.log
firebaseServiceAccountKey.json
60 changes: 19 additions & 41 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,21 +1,8 @@
# 🏗 Scaffold-ETH 2
# BuidlGuidl Grants

<h4 align="center">
<a href="https://docs.scaffoldeth.io">Documentation</a> |
<a href="https://scaffoldeth.io">Website</a>
</h4>
Grant platform for the BuidlGuidl community.

🧪 An open-source, up-to-date toolkit for building decentralized applications (dapps) on the Ethereum blockchain. It's designed to make it easier for developers to create and deploy smart contracts and build user interfaces that interact with those contracts.

⚙️ Built using NextJS, RainbowKit, Hardhat, Wagmi, Viem, and Typescript.

-**Contract Hot Reload**: Your frontend auto-adapts to your smart contract as you edit it.
- 🪝 **[Custom hooks](https://docs.scaffoldeth.io/hooks/)**: Collection of React hooks wrapper around [wagmi](https://wagmi.sh/) to simplify interactions with smart contracts with typescript autocompletion.
- 🧱 [**Components**](https://docs.scaffoldeth.io/components/): Collection of common web3 components to quickly build your frontend.
- 🔥 **Burner Wallet & Local Faucet**: Quickly test your application with a burner wallet and local faucet.
- 🔐 **Integration with Wallet Providers**: Connect to different wallet providers and interact with the Ethereum network.

![Debug Contracts tab](https://github.com/scaffold-eth/scaffold-eth-2/assets/55535804/1171422a-0ce4-4203-bcd4-d2d1941d198b)
⚙️ Built using 🏗 [Scaffold-ETH 2](https://github.com/scaffold-eth/scaffold-eth-2) crane emoji

## Requirements

Expand All @@ -25,27 +12,36 @@ Before you begin, you need to install the following tools:
- Yarn ([v1](https://classic.yarnpkg.com/en/docs/install/) or [v2+](https://yarnpkg.com/getting-started/install))
- [Git](https://git-scm.com/downloads)

## Quickstart
## Development Quickstart

To get started with Scaffold-ETH 2, follow the steps below:
To get started follow the steps below:

1. Clone this repo & install dependencies

```
git clone https://github.com/scaffold-eth/scaffold-eth-2.git
cd scaffold-eth-2
git clone https://github.com/BuidlGuidl/grants.buidlguidl.com.git
cd grants.buidlguidl.com
yarn install
```

2. Run a local network in the first terminal:
2. Set up your environment variables (and optionally, a local Firebase instance):
Copy the `packages/nextjs/.env.example` file to `packages/nextjs/.env.local` and fill in the required environment variables.

(Optional) Start the firebase emulators (vs set up a live Firebase instance). You will need to install the [firebase CLI](https://firebase.google.com/docs/cli#install_the_firebase_cli) and run the following command:
```bash
# You might need to add a real "--project <projectName>" (run firebase projects:list)
firebase emulators:start
```

3. Run a local network in the first terminal:

```
yarn chain
```

This command starts a local Ethereum network using Hardhat. The network runs on your local machine and can be used for testing and development. You can customize the network configuration in `hardhat.config.ts`.

3. On a second terminal, deploy the test contract:
4. On a second terminal, deploy the test contract:

```
yarn deploy
Expand All @@ -59,22 +55,4 @@ This command deploys a test smart contract to the local network. The contract is
yarn start
```

Visit your app on: `http://localhost:3000`. You can interact with your smart contract using the `Debug Contracts` page. You can tweak the app config in `packages/nextjs/scaffold.config.ts`.

Run smart contract test with `yarn hardhat:test`

- Edit your smart contract `YourContract.sol` in `packages/hardhat/contracts`
- Edit your frontend in `packages/nextjs/pages`
- Edit your deployment scripts in `packages/hardhat/deploy`

## Documentation

Visit our [docs](https://docs.scaffoldeth.io) to learn how to start building with Scaffold-ETH 2.

To know more about its features, check out our [website](https://scaffoldeth.io).

## Contributing to Scaffold-ETH 2

We welcome contributions to Scaffold-ETH 2!

Please see [CONTRIBUTING.MD](https://github.com/scaffold-eth/scaffold-eth-2/blob/main/CONTRIBUTING.md) for more information and guidelines for contributing to Scaffold-ETH 2.
Visit your app on: `http://localhost:3000`. You can interact with your smart contract using the `/debug` page. You can tweak the app config in `packages/nextjs/scaffold.config.ts`.
12 changes: 12 additions & 0 deletions firebase.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{
"emulators": {
"firestore": {
"port": 8080
},
"ui": {
"enabled": true,
"port": 4000
},
"singleProjectMode": true
}
}
19 changes: 8 additions & 11 deletions packages/nextjs/.env.example
Original file line number Diff line number Diff line change
@@ -1,13 +1,10 @@
# Template for NextJS environment variables.
# NEXT_PUBLIC_ALCHEMY_API_KEY=
# NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=

# For local development, copy this file, rename it to .env.local, and fill in the values.
# When deploying live, you'll need to store the vars in Vercel/System config.
# Firebase live vs local emulator.
# Important: Only one of the following lines should be uncommented at a time.

# If not set, we provide default values (check `scaffold.config.ts`) so developers can start prototyping out of the box,
# but we recommend getting your own API Keys for Production Apps.

# To access the values stored in this env file you can use: process.env.VARIABLENAME
# You'll need to prefix the variables names with NEXT_PUBLIC_ if you want to access them on the client side.
# More info: https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables
NEXT_PUBLIC_ALCHEMY_API_KEY=
NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=
# If you want to connecto to a live firebase project, you can use download the service account key json file and add the path here
GOOGLE_APPLICATION_CREDENTIALS="/<your>/<path>/<to>/firebaseServiceAccountKey.json"
# If you want to connect to the firebase emulator
FIRESTORE_EMULATOR_HOST=localhost:8080
61 changes: 15 additions & 46 deletions packages/nextjs/app/page.tsx
Original file line number Diff line number Diff line change
@@ -1,57 +1,26 @@
import Link from "next/link";
import type { NextPage } from "next";
import { BugAntIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
import { listCollections } from "~~/services/database/collections";

// revalidate the data at most every hour (just testing)
export const revalidate = 3600;

const Home = async () => {
// This happens on the server
const collections = await listCollections();

const Home: NextPage = () => {
return (
<>
<div className="flex items-center flex-col flex-grow pt-10">
<div className="px-5">
<h1 className="text-center mb-8">
<span className="block text-2xl mb-2">Welcome to</span>
<span className="block text-4xl font-bold">Scaffold-ETH 2</span>
<span className="block text-4xl font-bold">grants.buidlguidl.com</span>
</h1>
<p className="text-center text-lg">
Get started by editing{" "}
<code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block">
packages/nextjs/app/page.tsx
</code>
</p>
<p className="text-center text-lg">
Edit your smart contract{" "}
<code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block">
YourContract.sol
</code>{" "}
in{" "}
<code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block">
packages/hardhat/contracts
</code>
</p>
</div>

<div className="flex-grow bg-base-300 w-full mt-16 px-8 py-12">
<div className="flex justify-center items-center gap-12 flex-col sm:flex-row">
<div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
<BugAntIcon className="h-8 w-8 fill-secondary" />
<p>
Tinker with your smart contract using the{" "}
<Link href="/debug" passHref className="link">
Debug Contract
</Link>{" "}
tab.
</p>
</div>
<div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
<MagnifyingGlassIcon className="h-8 w-8 fill-secondary" />
<p>
Explore your local transactions with the{" "}
<Link href="/blockexplorer" passHref className="link">
Block Explorer
</Link>{" "}
tab.
</p>
</div>
</div>
<h2 className="font-bold">Collections:</h2>
<ul>
{collections.map(collection => (
<li key={collection.id}>{collection.id}</li>
))}
</ul>
</div>
</div>
</>
Expand Down
1 change: 1 addition & 0 deletions packages/nextjs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
"@uniswap/v2-sdk": "^3.0.1",
"blo": "^1.0.1",
"daisyui": "^4.4.19",
"firebase-admin": "^11.11.1",
"next": "^14.0.4",
"nprogress": "^0.2.0",
"qrcode.react": "^3.1.0",
Expand Down
20 changes: 20 additions & 0 deletions packages/nextjs/services/database/collections.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
// Just to test Firebase Functions.
import { firestore } from "firebase-admin";
import { getFirestoreConnector } from "~~/services/database/firestoreDB";

import CollectionReference = firestore.CollectionReference;

const listCollections = async () => {
const firestoreDB = getFirestoreConnector();
let collections: CollectionReference[] = [];

try {
collections = await firestoreDB.listCollections();
} catch (error) {
console.error("Error listing collections:", error);
}

return collections;
};

export { listCollections };
27 changes: 27 additions & 0 deletions packages/nextjs/services/database/firestoreDB.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { applicationDefault, getApps, initializeApp } from "firebase-admin/app";
import { getFirestore } from "firebase-admin/firestore";

const getFirestoreConnector = () => {
// Not sure if this is the best way to do this
// But if not, the app gives an error that the app has already been initialized.
if (getApps().length > 0) {
return getFirestore();
}

if (process.env.GOOGLE_APPLICATION_CREDENTIALS) {
console.log("Initializing LIVE Firestore");
initializeApp({
credential: applicationDefault(),
});
} else {
// ToDo. Something is not working. Getting "Error: Could not load the default credentials."
console.log("Initializing local Firestore instance");
initializeApp({
projectId: "buidlguidl-v3",
});
}

return getFirestore();
};

export { getFirestoreConnector };
Loading

0 comments on commit 8d19074

Please sign in to comment.