mahdtech / ic-wall Goto Github PK

Update 2021-09-03:

• Every user gets their own wall! Click on any username or address to filter the wall.
• Post timestamps displayed
• Project updated to use dfx 0.8.0 and js libs v0.10.0
• Switch of UI platform, from Next.js to Create React App

👉 👉 👉 https://rivyl-6aaaa-aaaaf-qaapq-cai.raw.ic0.app/

The Internet Computer by Dfinity Foundation promises to create "a limitless environment for smart contracts that run at web speed, serve web, scale, and reduce compute costs by a million times or more".

Ethereum apps that wants to deliver above and beyond of what is possible on chain often resorts to using regular centralised server solutions. Could off chain functionality instead run on the IC to create a mixed breed of Ethereum/IC apps - truly distributed, serverless and unstoppable?

The purpose with The Wall is to try out and showcase a few concepts with regards to building these crossover Ethereum/IC apps. A proof of concept, a demo and possibly a template to use as a starting point for more advanced apps.

1. Authentication: Use the Ethereum public key cryptography to generate a key and login to the IC.
2. Link eth adress to IC identity: The link between Ethereum address and IC facilitates the use of IC as a Layer 2 scaling solution and off chain application platform.

The functionality of the app is super simple. Connect Metamask wallet, sign a login message, select a username. Then write the wall! It's like Twitter on speed but the other way around - most functionality you love is missing. Plus it's slow.

Login details:

1. User signs a login message using Metamask. The login includes a hashed secret that for the purpose of this demo is set by the app. To add an extra layer of security this secret (password) coud instead be chosen by the user.
2. App generates the Ed25519KeyIdentity needed to authenticate with IC based on the signature hash.
3. Message hash and signature is sent to IC where the eth address used to sign the message is recovered and linked to the IC identity.

That's it! Now, the app can interact securely with IC, and IC has verified knowledge of which eth address the user controls.

Make sure you have the following installed:

node
npm
git

Download and install the DFINITY Canister SDK package by running the following command:

sh -ci "$(curl -fsSL https://sdk.dfinity.org/install.sh)"

The app backend is written in Rust. The commands below install Rust, the package manager Cargo, etc.

curl https://sh.rustup.rs -sSf | sh
rustup update
rustup target add wasm32-unknown-unknown
sudo apt-get -y install cmake
cargo install ic-cdk-optimizer --root target
export PATH="./target/bin:$PATH"

git clone https://github.com/kristoferlund/ic-wall.git
npm install

Start Internet Computer

dfx start

dfx deploy wall
dfx deploy profile

Make a copy of the .env.template file and name it .env.development. Update the file with canister IDs from the previous step. This is one time edit, any subsequent canister deploys will not change the IDs.

REACT_APP_IC_APP_NAME=ic-wall
REACT_APP_IC_HOST=http://127.0.0.1:8000/
REACT_APP_PROFILE_CANISTER_ID=(CANISTER ID HERE)
REACT_APP_WALL_CANISTER_ID=(CANISTER ID HERE)

Alt 1. Development mode with hot reload

npm run start

Access on http://localhost:3000

Alt 2. Production mode

Export static production version of frontend and let dfx serve the files.

npm run build
dfx deploy ui

Access on http://localhost:8000

In case you receive "Could not find Canister ID from Request":

• Get UI canister ID

dfx canister id ui

Access on http://localhost:8000/?canisterId={id received in previous step}

Kristofer Lund, [email protected]

Telegram: @kristoferkristofer

Yes, please! Raise an issue or post a pull request.

[ ] UI fixes to better handle the slow IC load speed that causes flickering components etc. [ ] Error handling all over! [ ] Refactor canisters - better structure, naming etc.

MIT