Skip to content

Instantly share code, notes, and snippets.

@steffenkux

steffenkux/dm3-embedded-react.md

Last active February 22, 2024 15:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save steffenkux/c93e65a9a5899d965bdadb3feb56e7a1 to your computer and use it in GitHub Desktop.
Save steffenkux/c93e65a9a5899d965bdadb3feb56e7a1 to your computer and use it in GitHub Desktop.
Download ZIP
Add dm3 embedded into an REACT app
Raw
dm3-embedded-react.md

Use your existing or create a new REACT app

yarn create react-app dm3-demo-app --template typescript

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

REACT_APP_ADDR_ENS_SUBDOMAIN=<ens subdomain for wallets aliasses>
REACT_APP_USER_ENS_SUBDOMAIN=<ens subdomain for local dm3 names> 
REACT_APP_BACKEND=<url to dm3 compatible backend>
REACT_APP_DEFAULT_DELIVERY_SERVICE=<ens name of the default delivery service>
REACT_APP_DEFAULT_SERVICE=<url to a dm3 service>
REACT_APP_PROFILE_BASE_URL=<url to a profile service>
REACT_APP_RESOLVER_BACKEND=h<url to the resolver>
REACT_APP_WALLET_CONNECT_PROJECT_ID=27b3e102adae76b4d4902a035da435e7
REACT_APP_MAINNET_PROVIDER_RPC=<rpc for ethereum mainnet>
REACT_APP_CHAIN_ID=<id of the chain>
RESOLVER_ADDR=<address of the resolver>

Example 1: dm3 config:

REACT_APP_ADDR_ENS_SUBDOMAIN=.addr.dm3.eth
REACT_APP_USER_ENS_SUBDOMAIN=.user.dm3.eth
REACT_APP_BACKEND=https://app.dm3.network/api
REACT_APP_DEFAULT_DELIVERY_SERVICE=ds.dm3.eth
REACT_APP_DEFAULT_SERVICE=https://app.dm3.network/api
REACT_APP_PROFILE_BASE_URL=https://app.dm3.network/api
REACT_APP_RESOLVER_BACKEND=https://app.dm3.network/resolver-handler
REACT_APP_WALLET_CONNECT_PROJECT_ID=27b3e102adae76b4d4902a035da435e7
REACT_APP_MAINNET_PROVIDER_RPC=https://eth-mainnet.g.alchemy.com/v2/<apikey>
REACT_APP_CHAIN_ID=1
RESOLVER_ADDR=0xae6646c22D8eE6479eE0a39Bf63B9bD9e57bAD9d

Example 2: dm3 test config (Goerli):

REACT_APP_ADDR_ENS_SUBDOMAIN=.beta-addr.dm3.eth
REACT_APP_USER_ENS_SUBDOMAIN=.beta-user.dm3.eth
REACT_APP_BACKEND=http://134.122.95.165/api
REACT_APP_DEFAULT_DELIVERY_SERVICE=beta-ds.dm3.eth
REACT_APP_DEFAULT_SERVICE=http://134.122.95.165/api
REACT_APP_PROFILE_BASE_URL=http://134.122.95.165/api
REACT_APP_RESOLVER_BACKEND=http://134.122.95.165/resolver-handler
REACT_APP_USER_ENS_SUBDOMAIN=.beta-user.dm3.eth
REACT_APP_WALLET_CONNECT_PROJECT_ID=27b3e102adae76b4d4902a035da435e7
REACT_APP_MAINNET_PROVIDER_RPC=https://eth-goerli.g.alchemy.com/v2/<apikey>
REACT_APP_CHAIN_ID=5
RESOLVER_ADDR=0xae6646c22D8eE6479eE0a39Bf63B9bD9e57bAD9d

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
};

...
<div className="dm3-container">
   <DM3 {...props} />
</div>

Add CSS definition

.dm3-container {
   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: React App

import React from 'react';
import logo from './logo.svg';
import './App.css';

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

  function App() {
    const props: any = {
        defaultContact: 'help.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
    };

    return (
        <div className="dm3-container">
              <DM3 {...props} />
        </div>
    );
}

export default App;

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',
};

Also, the image show at the loginscreen can be replaced:

const props: any = {
   ...
   loginInImage: "<url to the image>"
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment