yarn create react-app dm3-demo-app --template typescript
yarn add @dm3-org/dm3-messenger-widget
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
open src/App.tsx
// @ts-ignore
import { DM3 } from '@dm3-org/dm3-messenger-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>
.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;
For the embedded widget, several use-cases are possible:
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,
...
};
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>"
};