Skip to content

Instantly share code, notes, and snippets.

@steffenkux

steffenkux/dm3-embedded-nextjs.md

Last active February 22, 2024 15:49
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save steffenkux/a49e574e192779010132691e4a5e7240 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save steffenkux/a49e574e192779010132691e4a5e7240 to your computer and use it in GitHub Desktop.
Download ZIP
Add dm3 embedded into a next.js app
Raw
dm3-embedded-nextjs.md

Use your existing or create a new next.js app

yarn create next-app

It will prompt a few options to choose for the next app configuration. Follow the below options selected below

  • What is your project named? … dm3-app
  • Would you like to use TypeScript? … Yes
  • Would you like to use ESLint? … Yes
  • Would you like to use Tailwind CSS? … No
  • Would you like to use src/ directory? … No
  • Would you like to use App Router? (recommended) … Yes
  • Would you like to customize the default import alias (@/*)? … No

Include dm3 package

yarn add @dm3-org/dm3-messenger-widget

Create .env file

create this file in the root of the project or use existing

NEXT_APP_ADDR_ENS_SUBDOMAIN=<ens subdomain for wallets aliasses>
NEXT_APP_USER_ENS_SUBDOMAIN=<ens subdomain for local dm3 names> 
NEXT_APP_BACKEND=<url to dm3 compatible backend>
NEXT_APP_DEFAULT_DELIVERY_SERVICE=<ens name of the default delivery service>
NEXT_APP_DEFAULT_SERVICE=<url to a dm3 service>
NEXT_APP_PROFILE_BASE_URL=<url to a profile service>
NEXT_APP_RESOLVER_BACKEND=h<url to the resolver>
NEXT_APP_WALLET_CONNECT_PROJECT_ID=27b3e102adae76b4d4902a035da435e7
NEXT_APP_MAINNET_PROVIDER_RPC=<rpc for ethereum mainnet>
NEXT_APP_CHAIN_ID=<id of the chain>
RESOLVER_ADDR=<address of the resolver>

Example 1: dm3 config:

NEXT_APP_ADDR_ENS_SUBDOMAIN=.addr.dm3.eth
NEXT_APP_USER_ENS_SUBDOMAIN=.user.dm3.eth
NEXT_APP_BACKEND=https://app.dm3.network/api
NEXT_APP_DEFAULT_DELIVERY_SERVICE=ds.dm3.eth
NEXT_APP_DEFAULT_SERVICE=https://app.dm3.network/api
NEXT_APP_PROFILE_BASE_URL=https://app.dm3.network/api
NEXT_APP_RESOLVER_BACKEND=https://app.dm3.network/resolver-handler
NEXT_APP_WALLET_CONNECT_PROJECT_ID=27b3e102adae76b4d4902a035da435e7
NEXT_APP_MAINNET_PROVIDER_RPC=https://eth-mainnet.g.alchemy.com/v2/<apikey>
NEXT_APP_CHAIN_ID=1
RESOLVER_ADDR=0xae6646c22D8eE6479eE0a39Bf63B9bD9e57bAD9d

Example 2: dm3 test config (Goerli):

NEXT_APP_ADDR_ENS_SUBDOMAIN=.beta-addr.dm3.eth
NEXT_APP_USER_ENS_SUBDOMAIN=.beta-user.dm3.eth
NEXT_APP_BACKEND=http://134.122.95.165/api
NEXT_APP_DEFAULT_DELIVERY_SERVICE=beta-ds.dm3.eth
NEXT_APP_DEFAULT_SERVICE=http://134.122.95.165/api
NEXT_APP_PROFILE_BASE_URL=http://134.122.95.165/api
NEXT_APP_RESOLVER_BACKEND=http://134.122.95.165/resolver-handler
NEXT_APP_USER_ENS_SUBDOMAIN=.beta-user.dm3.eth
NEXT_APP_WALLET_CONNECT_PROJECT_ID=27b3e102adae76b4d4902a035da435e7
NEXT_APP_MAINNET_PROVIDER_RPC=https://eth-goerli.g.alchemy.com/v2/<apikey>
NEXT_APP_CHAIN_ID=5
RESOLVER_ADDR=0xae6646c22D8eE6479eE0a39Bf63B9bD9e57bAD9d

Update he next.config.mjs

/** @type {import('next').NextConfig} */

const nextConfig = {
 experimental: {
   esmExternals: "loose",
 },
 env: {
   REACT_APP_ADDR_ENS_SUBDOMAIN: process.env.NEXT_PUBLIC_ADDR_ENS_SUBDOMAIN,
   REACT_APP_USER_ENS_SUBDOMAIN: process.env.NEXT_PUBLIC_USER_ENS_SUBDOMAIN,
   REACT_APP_BACKEND: process.env.NEXT_PUBLIC_BACKEND,
   REACT_APP_DEFAULT_DELIVERY_SERVICE: process.env.NEXT_PUBLIC_DEFAULT_DELIVERY_SERVICE,
   REACT_APP_DEFAULT_SERVICE: process.env.NEXT_PUBLIC_DEFAULT_SERVICE,
   REACT_APP_PROFILE_BASE_URL: process.env.NEXT_PUBLIC_PROFILE_BASE_URL,
   REACT_APP_RESOLVER_BACKEND: process.env.NEXT_PUBLIC_RESOLVER_BACKEND,
   REACT_APP_USER_ENS_SUBDOMAIN: process.env.NEXT_PUBLIC_USER_ENS_SUBDOMAIN,
   REACT_APP_WALLET_CONNECT_PROJECT_ID: process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID,
   REACT_APP_CHAIN_ID: process.env.NEXT_PUBLIC_CHAIN_ID,
   REACT_APP_MAINNET_PROVIDER_RPC: process.env.NEXT_PUBLIC_MAINNET_PROVIDER_RPC,
   RESOLVER_ADDR: process.env.NEXT_PUBLIC_RESOLVER_ADDR,
 },
};

export default nextConfig;

Import dm3 pack into app

open src/App.tsx

// @ts-ignore
import { DM3 } from '@dm3-org/dm3-messenger-widget';

Add dm3 widget

const props: any = {
   defaultContact: 'contact.dm3.eth',
   defaultServiceUrl: process.env.REACT_APP_DEFAULT_SERVICE,
   ethereumProvider: process.env.REACT_APP_MAINNET_PROVIDER_RPC,
   walletConnectProjectId: process.env.REACT_APP_WALLET_CONNECT_PROJECT_ID,
   hideFunction: "attachments", // OPTINAL PARAMETER : 'attachments,edit,delete' or undefined
   showContacts: true, // true for all contacts / false for default contact
   theme: undefined, // OPTINAL PARAMETER : undefined/themeColors
   signInImage: undefined, // OPTIONAL PARAMETER : string URL of image
};

...
   <main className={styles.dm3Container}>
     <DM3 {...props} />
   </main>

Add CSS definition

.dm3Container {
   border-radius: 25px;  /* Optional property */
   overflow: hidden;  /* Optional property only if wanted set border radius */
   height: 100vh; /* If the container has no height, then it is mandatory to set some height*/
   width: 100vw; /* If the container has no width, then it is mandatory to set some width */
}

Example: Next App

'use client';


import styles from "./page.module.css";


//@ts-ignore
import { DM3 } from '@dm3-org/dm3-messenger-widget';


export default function Home() {


 const props: any = {
   defaultContact: 'contact.dm3.eth',
   defaultServiceUrl: process.env.REACT_APP_DEFAULT_SERVICE,
   ethereumProvider: process.env.REACT_APP_MAINNET_PROVIDER_RPC,
   walletConnectProjectId: process.env.REACT_APP_WALLET_CONNECT_PROJECT_ID,
   showContacts: true, // true for all contacts / false for default contact
   hideFunction: undefined, // OPTIONAL PARAMETER : 'attachments,edit,delete' or undefined
   theme: undefined, // OPTIONAL PARAMETER : undefined/themeColors
   signInImage: undefined, // OPTIONAL PARAMETER : string URL of image
 };


 return (
   <main className={styles.dm3Container}>
     <DM3 {...props} />
   </main>
 );
}

Use Cases

For the embedded widget, several use-cases are possible:

Build/integrate a messaging app which involves several conversations

Here, the component shows the contact list and the messenger. New contacts can be added, an optional default contact can be defined. The property showContacts is set to true.

const props: any = {
   ...
   showContacts: true, 
   ...
};

Build/integrate a messaging field to contact a specific person (example: to contact a contact person on a website)

Here, the component shows only the messenger, the contact list is hidden. New contacts can't be added. The default contact needs to be defined because it is the receiver of the message. The property showContacts is set to false.

const props: any = {
   ...    
   defaultContact: 'the_contact_person.eth',
   showContacts: false, 
   ...
};

Customizing/Skinning

Color themes can be set by adding the theme object. So, all colors of the widget can be set to the embedded apps look-and-feel. In future versions this will be possible by CSS as well.

const props: any = {
   ...
   theme: themeColors
};

The object themeColors is being used to define all colors:

const themeColors = {
   backgroundColor: '#eeeeee',
   buttonBorderColor: '#dddddd',
   configBoxBorderColor: 'red',
   buttonColor: '#ffffee',
   hoverButtonColor: 'chocolate',
   inactiveButtonColor: 'sieena',
   primaryTextColor: 'black',
   secondaryTextColor: 'black',
   activeContactBackgroundColor: 'white',
   configurationBoxBackgroundColor: 'darkgrey',
   configurationBoxBorderColor: '#666876',
   chatBakgroundColor: 'white',
   disabledButtonTextColor: 'burlywood',
   errorTextColor: '#C30F1A',
   errorBackgroundColor: '#830B12',
   attachmentBackgroundColor: '#202129',
   selectedContactBorderColor: 'orange',
   profileConfigurationTextColor: 'pink',
   receivedMessageBackgroundColor: 'pink',
   receivedMessageTextColor: 'white',
   sentMessageBackgroundColor: 'blue',
   sentMessageTextColor: 'white',
   infoBoxBackgroundColor: 'green',
   infoBoxTextColor: 'yellow',
   buttonShadow: '#000000',
   msgCounterBackgroundColor: 'yellow',
   msgCounterTextColor: 'white',
   scrollbarBackgroundColor: 'lightGray',
   scrollbarScrollerColor: 'gray',
   inputFieldBackgroundColor: '#ffffdd',
   inputFieldTextColor: 'black',
   inputFieldBorderColor: '#81828D',
   emojiModalBackgroundColor: '262, 240, 283', // It must be in RGB format EX: 240,248,255
   emojiModalTextColor: '102, 51, 153', // It must be in RGB format EX: 240,248,255
   emojiModalAccentColor: '255, 105, 180', // It must be in RGB format EX: 240,248,255
   rainbowConnectBtnBackgroundColor: 'blue',
   rainbowConnectBtnTextColor: 'white',
   rainbowAccentColor: 'orange',
   rainbowAccentForegroundColor: 'pink',
   rainbowModalTextColor: 'white',
   rainbowModalTextSecondaryColor: 'yellow',
   rainbowModalWalletHoverColor: 'green',
   rainbowModalBackgroundColor: 'blue',
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment