diff --git a/README.md b/README.md index 49964db..7a465b1 100644 --- a/README.md +++ b/README.md @@ -1,34 +1,49 @@ - - > This project was bootstrpped with the [!inkathon template](/SETUP.md) - +> This project was bootstrpped with the [!inkathon template](/SETUP.md) --- +[![Whisper cover photo](/frontend/public/images/whisper-banner.png)](https://youtube.com) + ### Whisper -Whisper is an app where privacy focused individuals can have ephemeral conversations that disappears almost like a whisper, right after they leave. +Whisper is an app where the privacy focused can have ephemeral conversations almost like whispering. [Live Demo](https://blue-whisper.vercel.app/) - +[Video Demo](https://youtube.com/) ## How it works +![Contract flow chart](/frontend/public/images/whisper-user-flow-chart.png) + 1. Get some test tokens for Aleph Zero or Accurast 2. Install a wallet([Talisman](https://talisman.xyz/) is a good option) -4. Create or join a chatroom -5. Invite your friends (if you created) -6. Talk and talk -7. Delete chatroom and all messages +3. Create or join a chatroom +4. Invite your friends (if you created) +5. Talk and talk +6. Delete chatroom and all messages + +## Usage + +![Whisper cover photo](/frontend/public/images/whisper-send-message.gif) -[![Whisper cover photo](https://images.unsplash.com/photo-1576769267415-9642010aa962?q=80&w=1886&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)](https://youtube.com) +## Components -## Screenshots +Whisper is built for the Polkadot substrate ecosystem, it uses the ink! smart contract language for it's main functionality and a web UI & Talismann wallet for user's interaction with the application. -Lorem ipsum... +Other critical components are: -## Future work +1. !Inkathon: a fullstack boilerplate to build dApps with ink! and on polkadot. I created a [`chatroom` smart contract](/contracts/src/chatroom/lib.rs) which stores the core functionality of the dApp, it was deployed to [Aleph Zero testnet](https://alephzero-testnet.subscan.io/account/5GpiEYmPMVqMcJaR3eeDm4z8a5qZBsAmshYYSCBtuHYa96Bk?tab=transfer) & developer Acurast network. + +2. Acurast: users' can create chatrooms that are deployed to the Acurast network. I used the Acurast SDK, created [a hook](/frontend/src/deployments/use-accurast.tsx) that I used to interact with the instance of chatroom on Acurast. The chatoom contract was deployed with the [Acurast console](https://console.acurast.com/job-creation/39) + +3. NextJS & useInk: the combination of NextJS and the react library useInk made it trivial [to interact](/frontend/src/context/app-context.tsx) with the chatroom contract. + +4. Ink smart contract: I built and tested the chatroom contract with !ink. +![Contract flow chart](/frontend/public/images/whisper-smart-contract-components.png) + + +## Future Work Integrate azero.id to have a better UX when sharing messages with each other Implement e2e encryption - diff --git a/frontend/public/images/whisper-banner.png b/frontend/public/images/whisper-banner.png new file mode 100644 index 0000000..19f3a1d Binary files /dev/null and b/frontend/public/images/whisper-banner.png differ diff --git a/frontend/public/images/whisper-send-message.gif b/frontend/public/images/whisper-send-message.gif new file mode 100644 index 0000000..e77a51b Binary files /dev/null and b/frontend/public/images/whisper-send-message.gif differ diff --git a/frontend/public/images/whisper-send-message.gif:Zone.Identifier b/frontend/public/images/whisper-send-message.gif:Zone.Identifier new file mode 100644 index 0000000..3215561 --- /dev/null +++ b/frontend/public/images/whisper-send-message.gif:Zone.Identifier @@ -0,0 +1,3 @@ +[ZoneTransfer] +ZoneId=3 +HostUrl=https://app.clipchamp.com/ diff --git a/frontend/public/images/whisper-smart-contract-components.png b/frontend/public/images/whisper-smart-contract-components.png new file mode 100644 index 0000000..81025d4 Binary files /dev/null and b/frontend/public/images/whisper-smart-contract-components.png differ diff --git a/frontend/public/images/whisper-user-flow-chart.png b/frontend/public/images/whisper-user-flow-chart.png new file mode 100644 index 0000000..b34686e Binary files /dev/null and b/frontend/public/images/whisper-user-flow-chart.png differ