NearFrens

Decentralised map to meet nearby crypto-native frens, sharing the same passion and interests. Users can connect with their wallet to access the app and can see what other locations users have logged in with NFT collections in common. Users can check in with a new location to get to meet other crypto users. The app supports a web3 native way of exchanging messages “wallet to wallet”. Hence, based on held NFTs and geolocation provided by users, the platform will suggest for persons to connect and meet in person. As their data is entirely managed by the blockchain, users own it at any time.

The product allows users to check in on a map using their favorite crypto wallet. Once connected, users share their position using their favorite NFT collection(s). They can then connect/m with other users in the surroundings that share similar collections.

The Dapp will automatically display the users on the map that share at least one NFT collection in common. The position data is stored on the blockchain and handled by a smart contract. Every time a user does a new check-in, it will check out the previous position to keep up-to-date data on the blockchain. We implemented a feed with the list of users around and their status. By clicking on a user’s icon in the feed, it will show you the exact position on the map. It will also offer you the possibility of starting a discussion with the user. The messaging feature is powered by XMTP.

Polygon: We deployed our Dapp on Polygon as it’s the best fit for our use case. Users should be able to share their locations and update their status multiple times per day, hence it’s important to have low transaction costs and fast execution. Polygon is also integrated with a lot of other protocols such as EPNS, XMTP and Lens we are using.

EPNS: When a user checks in on the map, it will send a notification via EPNS to other users around. The notification will display the wallet and the status of the user that checked in. We are using broadcast transactions for now but want to integrate subsets in the future to send notifications based on a check-in in a specific zone.

XMTP: The messaging feature of the app is a central component. Once users check-in, they can communicate with users that share similar collections and that are nearby. They can hereby decide to meet up for instance. The Integration of XMTP was not straightforward as we used React V5 and not V4 as recommended. So we struggled a bit to get it first working. The messaging architecture is inspired from the example-chat-react github repo. I had to connect wagmi.sh hook ‘useSigner’ in the ‘XmtpProvider’ file. The hooks were also useful to connect the service to the view components. I had to do some modifications to handle error state in ‘useConversation’. One thing I would like to try is not having to reconnect to the XMTP client on each browser reload which makes the UX a bit heavy.

ENS: For each user, we try to load the ENS name if we detect that a user has indeed one ENS name. For that purpose, we use the wagmi hook ‘useEnsName’ that makes that integration easier. So, for each user Popup, Userview or Messaging component, if the user has an ENS name it will be displayed instead of the 0x address.