Slice frontend application.
- Mainnet: https://slice.so
- Goerli: https://testnet.slice.so
- Development (staging branch): https://dev.slice.so
-
Create a fork of this repository.
-
Clone your fork and navigate to the root directory.
-
Install project dependencies.
npm install
-
Create a
.env
file in the root directory which mirrors the.example.env
file. Learn how to define each field in the.env
file in Setup.
Slice-interface
relies on a number of services for development. A separate set of contracts on Goerli was appositely created for development purposes.
The following sections describe how to set up each service for local development.
A shared staging environment has also been set up on https://dev.slice.so. The shared environment uses the same contracts and subgraphs as the ones used for local development, so the slicers and products created locally will also appear there.
Slice uses Alchemy to connect to an Ethereum network (mainnet, or one of the testnets).
Follow these steps to create an Alchemy key:
- Create an account on Alchemy
- Create a new App, specifying Goerli as network
- Enter the app and click on View Key
- Copy the HTTP key and paste it into the NEXT_PUBLIC_NETWORK_URL in your
.env
file
Slice uses Pinata to store products metadata.
Follow these steps to create a Pinata key
- Create or log into your account on Pinata by clicking on Login
- On the top left corner, open the user menu and click on API Keys
- Create a new API key with admin permissions and copy the JWT secret access token into PINATA_JWT in your
.env
file
Slice uses Web3Storage to store encrypted product metadata.
Follow these steps to create a web3Storage key
- Create or log into your account on Web3Storage by clicking on Login
- Create an API token and copy it in WEB3STORAGE_KEY in your
.env
file
Slice uses Supabase as its database and storage solution. The database is used for optimizing performance and to store slicers metadata, product metadata, list reverted products, as well as to support interface-only features.
The database represents the source of truth when it comes to slicer metadata.
Follow these steps to set up your db and storage:
- Create or log into your account on Supabase by clicking on Start your project
- Create an organization and create a New project (take note of the password you choose)
- Copy the following values into your
.env
fileanon key
->ANON_SUPABASE_KEY
secret key
->BACKEND_SUPABASE_KEY
project configuration url
->NEXT_PUBLIC_SUPABASE_URL
- Create a storage
- Click on storage on the left sidebar and click on create a new bucket
- (Important) Name it slicer-images and make it public
- Click on policies in the left menu and create a new policy from scratch for the new bucket. You can name it "allow anon users to upload to slicer-images"
- Check
INSERT
as the allowed operations and paste the following snippet in the policy definition
((bucket_id = 'slicer-images'::text) AND (role() = 'anon'::text))
-
Link the database to your app
- Click on settings on the left sidebar and select database under project settings
- Copy the
connection string
at the bottom of the page and paste it into DATABASE_URL in your.env
, and add the string?pgbouncer=true
at the end - Substitute [YOUR-PASSWORD] in the string with your project password
-
Navigate to the root directory and run the following command in your terminal to initiate your db
npx prisma generate && npx prisma migrate deploy
The interface uses incremental static regeneration to populate the db, so once you start the app you will see any slicer that other devs have created in their own local environments, but without their images or metadata.
Slice uses CoinMarketCap API to get and store currencies prices.
Follow these steps to create a Coin Market Cap API key
- Create or log into your account on CoinMarketCap by clicking on Login
- Create an API token and copy it in COIN_MARKET_CAP_KEY in your
.env
file
-
Start the app.
npm run dev
If you use a different port than 3000 for local development, update the NEXT_PUBLIC_APP_URL in your
.env
file accordingly
Frontend application(s) is hosted on Vercel and new versions are automatically deployed when pushed to master
, testnet
or staging
.