# Integrating using our SDK

As the CNS server will push the alerts and notifications to the wallet address and the dapp will need to integrate the compound React Component packages for showing the notifications to users, we need to provide a easy out-of-the-box React Component for dapp to integrate and save their time focus on the dapp features. And we should give the information of the React Component's workflow.

## Integration

<details>

<summary>Parameters</summary>

To use the CNS notification service must need to connect the `Wallet` and `Sign a signature` to log in the CNS service. The user must sign a signature and set the header for the later API requests. If the user doesn't connect to a wallet and log in, you cannot do anything with CNS notifications, it is just a connect wallet tip.

So it will need to pass the

`userAddress` : identify the user and send notifications to this user

`signMessage` : the function to sign a message for CNS service and sign a message for subscribing or unsubscribing a channel

And there will be a `env` and `chainId`

`env` : `Production` or `Staging`

`chainId` : the number of the blockchain, a decimal number

Please know that the `env` is relative to the `chainId`. Eg. if the `env` is `Production` and the `chainId` is the `MainNet chainId`, if the `env` is `Staging` and the `chainId` is the `TestNet chainId`.

If you wanna the user bind the Telegram bot to receive the notifications, should pass `tgInfo`

`tgInfo` : it is an object variable<br>

```html
{
  botName: "your_tg_bot_name",
  cornerRadius: 8,
}
```

***Note:** If don't pass the tgInfo then it will don't have the tg bind flow in the SDK.*

The `botName` is your tg bot name and the `cornerRadius` is the Telegram Login Widget button corner radius style.

And there is a `isMobile` param, which is the something customize desktop and mobile style param. `true` or `false`, it is an optional param, the default is `false`.

</details>

<details>

<summary>Optional and Mandatory Parameters</summary>

The mandatory parameters contain: `userAddress`, `signMessage`, `env` and `chainId`.

The optional parameters contain: `tgInfo` and `isMobile`.

### Code Example

The demo code includes three component `Notification`, `Entry` and `Modal`.

The `Notification` component

```jsx
import { NotifiContext, SignMethod } from "@cronosid/react-bell";

const account = "0x1234...";
const provider = currentWallet.useProvider(); // your provider

<NotifiContext
  channelId="0xa2c4605bff800d59e680da598c53ee8a4ce02f66495932608478f6dd63c44a70"
  env="Staging"
  chainId={338}
  userAddress={account ?? ""}
  signMessage={async (message: string, signMethod: SignMethod) => {
    const signer = provider?.getSigner();
    const signerAddress = await signer?.getAddress();
    const params = [signerAddress, message];
    const signature: string = await provider?.send(signMethod, params);
    return signature;
  }}
  // tgInfo={{
  //   botName: "your_tg_bot_name",
  //   cornerRadius: 20,
  // }}
  // isMobile={false}
>
  <Entry />
  <Modal />
</NotifiContext>;
```

The `Entry` component

```jsx
import { BellButton } from "@cronosid/react-bell";

export const Entry = () => {
  return (
    <BellButton />
  );

```

The `Modal` component

```jsx
import {
  useNotifiContext,
  NotificationContainer,
  Header,
  CloseButton,
  NotificationContent,
  ErrorTipContent,
  ConnectWallet,
  WalletIcon,
  ConnectWalletTip,
  ConnectWalletButton,
  Login,
  Subscribe,
  Loading,
  MessageContent,
  MessageStatus,
  NoMessage,
  MessageList,
  Footer,
} from "@cronosid/react-bell";

export const Modal = () => {
  const { isMobile, modalVisible } = useNotifiContext();

  return (
    <>
      {modalVisible ? (
        <div
          {/* add a className for the Modal */}
          className="cns"
          style={{
            maxWidth: isMobile ? undefined : "368px",
            width: "100%",
            height: isMobile ? "100vh" : "640px",
            position: isMobile ? "fixed" : "absolute",
            left: 0,
            top: isMobile ? 0 : "110px",
          }}
        >
          <NotificationContainer>
            <Header />
            <CloseButton />
            <NotificationContent>
              <ErrorTipContent />
              <ConnectWallet>
                <WalletIcon />
                <ConnectWalletTip />
                <ConnectWalletButton
                  connectWallet={async () => {
                    // the function to connect the wallet
                    await currentWallet.connect();
                  }}
                />
              </ConnectWallet>
              <Login />
              <Subscribe />
              <Loading />
              <MessageContent>
                {/* the tg bind tip, if don't pass the tgInfo, it doesn't display even you pass it */}
                {/* <ConnectTgTip /> */}
                <MessageStatus />
                <NoMessage />
                <MessageList />
              </MessageContent>
            </NotificationContent>
            <Footer />
          </NotificationContainer>
        </div>
      ) : null}
    </>
  );
};
```

*The above 👆 demo is the simple version and does not require customization. If wanna customize the SDK, please go ahead.*

</details>

## Customization

The SDK is the Compound React Components, we can combine the components at will.

So we can do the customized component as we want. If a component has a `children` props, we can pass the `component` or `string` to customize it. If we don't pass  `children` it will have the `default component`.

<details>

<summary>Customization Demos</summary>

Customize the `BellButton` Icon

```jsx
<BellButton>
  <YourIcon />
</BellButton>
```

Customize the `CloseButton` Icon

```jsx
<CloseButton>
  <YourIcon />
</CloseButton>
```

Customize the `ErrorTipContent` tip

```jsx
<ErrorTipContent>
  <YourErrorTip />
</ErrorTipContent>
```

Customize the `NoMessage` tip

```jsx
<NoMessage>
  <NoMessageTip>
    <Text color={"#999"}>No notifications yet</Text>
  </NoMessageTip>
</NoMessage>
```

Customize the `ConnectWallet` tip

```jsx
<ConnectWallet>
  <YourWalletIcon />
  <YourConnectWalletTip />
  {/* or */}
  {/* <ConnectWalletTip>
    Your connect tip here
  </ConnectWalletTip> */}
  <ConnectWalletButton
    connectWallet={async () => {
      // the function to connect the wallet
      await currentWallet.connect();
    }}
  />
</ConnectWallet>
```

Customize the `MessageStatus` tip.

Here we just wanna customize a `SettingIcon` but we should pass all the `children` components. If we don't do that, the missing component won't display.

```jsx
<MessageStatus>
  <HasUnreadMessages />
  <NoUnreadMessages />
  {/* the setting icon */}
  <SettingButton>
    <SettingIcon />
  </SettingButton>
</MessageStatus>
```

Customize the success tip for `ConnectTgTip` and `TgBind`, please know we should pass all the `children` component.

```jsx
const tgBindBtn = (
  <>
    <TgBindButton>
      <TgUnbindTip />
      <TgBindSuccess>
        <YourTgBoundTip>
          <Icon />
          <Text ml={"2px"}>Account Bound</Text>
        </YourTgBoundTip>
      </TgBindSuccess>
      <TgBindErrorTip />
    </TgBindButton>
  </>
);

<ConnectTgTip>
  <ConnectTgTipBody>
    <ConnectTgTipTitle />
    {tgBindBtn}
  </ConnectTgTipBody>
  <ConnectTgTipCloseIcon />
</ConnectTgTip>;
```

```jsx
<TgBind>
  <TgBindTitle />
  <TgBindBody>
    <TgBindInfo>
      <TgBindSubTitle />
      <TgBindDescription />
    </TgBindInfo>
    <TgBindButtonAlignRight>{tgBindBtn}</TgBindButtonAlignRight>
  </TgBindBody>
</TgBind>
```

</details>

<details>

<summary>Code Example</summary>

There is a full demo for customization

```jsx
import {
  Box,
  Drawer,
  DrawerContent,
  DrawerOverlay,
  Text,
} from "@chakra-ui/react";
import {
  Header,
  Footer,
  CloseButton,
  MessageStatus,
  ConnectTgTip,
  ConnectTgTipBody,
  ConnectTgTipTitle,
  ConnectTgTipCloseIcon,
  SettingButton,
  MessageContent,
  NotificationContainer,
  NotificationContent,
  NoMessage,
  ConnectWallet,
  Login,
  Subscribe,
  MessageList,
  useNotifiContext,
  Loading,
  SettingContent,
  TgBind,
  TgBindTitle,
  TgBindBody,
  TgBindInfo,
  TgBindSubTitle,
  TgBindDescription,
  TgBindButtonAlignRight,
  TgBindButton,
  TgUnbindTip,
  TgBindErrorTip,
  TgBindSuccess,
  UnsubscribeChannel,
  ErrorTipContent,
  ConnectWalletTip,
  ConnectWalletButton,
  LoginButton,
  LoginTip,
  MessagesPlaceholder,
  SubscribeAction,
  SubscribeTip,
  SubscribeButton,
  NoMessageTip,
  HasUnreadMessages,
  NoUnreadMessages,
  LoadingAnimation,
  LoadingTip,
} from "@cronos-labs/react-bell";

const tgBindBtn = (
  <>
    <TgBindButton>
      <TgUnbindTip />
      <TgBindSuccess>
        <YourTgBoundTip>
          <Icon />
          <Text ml={"2px"}>Account Bound</Text>
      </YourTgBoundTip>
      </TgBindSuccess>
      <TgBindErrorTip />
    </TgBindButton>
  </>
);

export const ModalDrawer = () => {
  const { isMobile, modalVisible, setModalVisible } = useNotifiContext();

  return (
    <>
      <Drawer
        isOpen={modalVisible}
        onClose={() => setModalVisible(false)}
        placement="right"
        autoFocus={false}
        size={"sm"}
      >
        <DrawerOverlay />
        <DrawerContent>
          <div
          {/* add a className */}
            className="cns"
            style={{
              width: "100%",
              height: "100vh",
            }}
          >
            <NotificationContainer>
              <Header />
              <CloseButton>
                <YourIcon />
              </CloseButton>
              <NotificationContent>
                <ErrorTipContent>
                  <YourErrorTip />
                </ErrorTipContent>
                <ConnectWallet>
                {/* <YourWalletIcon /> */}
                  <ConnectWalletTip />
                  <ConnectWalletButton
                    connectWallet={async () => {
                      await currentWallet.connect();
                    }}
                  />
                </ConnectWallet>
                <Login>
                  {/* <YourBellIcon /> */}
                  <LoginTip>
                    Please review and accept the{" "}
                    <Text as="span" color={"#00D5D1"}>
                      <Link
                        href={
                          "https://docs.cronosid.xyz/what-is-cronos-id/cronos-id-notifications/terms-and-conditions"
                        }
                        target="_blank"
                        rel="noopener noreferrer"
                      >
                        terms
                      </Link>{" "}
                    </Text>
                    to start using our notification service.
                  </LoginTip>
                  <LoginButton>Accept the Terms</LoginButton>
                </Login>
                <Subscribe>
                  <MessagesPlaceholder>
                    {[0, 1, 2].map((i) => (
                      <Box px={4} py={2} key={i}>
                        a lot of messages
                      </Box>
                    ))}
                  </MessagesPlaceholder>
                  <SubscribeAction>
                    <SubscribeTip>
                      Subscribe to this channel so you don&apos;t miss important
                      updates of the protocol, your trades, and more!
                    </SubscribeTip>
                    <SubscribeButton />
                  </SubscribeAction>
                </Subscribe>
                <Loading>
                  {/* if wanna customize the loading content, pass the conte to it, if don't just ignore it */}
                  {/*
                    <YourLoadingAnimation />
                    <YourLoadingTip />
                  */}
                </Loading>
                <MessageContent>
                  <ConnectTgTip>
                    <ConnectTgTipBody>
                      <ConnectTgTipTitle />
                      {tgBindBtn}
                    </ConnectTgTipBody>
                    <ConnectTgTipCloseIcon />
                  </ConnectTgTip>
                  <MessageStatus>
                    <HasUnreadMessages />
                    <NoUnreadMessages />
                    {/* the setting icon */}
                    <SettingButton>
                      <SettingIcon />
                    </SettingButton>
                  </MessageStatus>
                  <NoMessage>
                    <NoMessageTip>
                      <Text color={"#999"}>No notifications yet</Text>
                    </NoMessageTip>
                  </NoMessage>
                  <MessageList
                    renderItem={(message: Message. index?: number, messageLength?: number) => {
                      return (
                        <div
                          key={message.id}
                          style={{
                            padding: "10px",
                            backgroundColor: "#11101B",
                            borderRadius: "12px",
                            margin: "8px 0",
                          }}
                        >
                          <p>{message.is_read ? "" : "unread"}</p>
                          <h3>{message.title}</h3>
                          <p>{message.body}</p>
                        </div>
                      );
                    }}
                  />
                </MessageContent>
                <SettingContent>
                  <TgBind>
                    <TgBindTitle />
                    <TgBindBody>
                      <TgBindInfo>
                        <TgBindSubTitle />
                        <TgBindDescription />
                      </TgBindInfo>
                      <TgBindButtonAlignRight>
                        {tgBindBtn}
                      </TgBindButtonAlignRight>
                    </TgBindBody>
                  </TgBind>
                  <UnsubscribeChannel />
                </SettingContent>
              </NotificationContent>
              <Footer />
            </NotificationContainer>
          </div>
        </DrawerContent>
      </Drawer>
    </>
  );
};
```

</details>

## The CSS Style Override

If you wanna change the UI design and the styling should be consistent with your current UI. We can change the CSS style by overriding the CSS.

Importing a CSS file into your code

<details>

<summary>CSS Style Example</summary>

<pre class="language-css"><code class="lang-css"><strong>.cns .cns-container {
</strong>  background: #0c0c0c;
  border-radius: 0;
}
.cns .header {
  padding: 20px 16px;
}
.cns .header h4 {
  font-size: 16px;
  line-height: 24px;
}
.cns .footer {
  background: #0c0c0c;
}

.cns .subscribe-action {
  background: linear-gradient(
    180deg,
    rgba(12, 12, 12, 0.7) 0%,
    rgba(12, 12, 12, 1) 100%
  );
  padding-bottom: 50%;
}

.cns .btn {
  min-width: auto;
  background: #574be8;
  border-radius: 8px;
  padding: 16px 12px;
}
.cns .btn:not(:disabled):hover {
  background: #fff;
  color: #000;
}

.cns .message-status {
  margin-top: 8px;
  background-color: #11101b;
  border: none;
  border-radius: 12px;
  font-size: 12px;
}
.cns .message-status .mark-all-read {
  color: #8c82ff;
  font-size: 14px;
}

.cns .connect-tg-tip-title {
  font-size: 12px;
  font-weight: 600;
}
.cns .tg-bind-success,
.cns .tg-bind-error,
.cns .tg-unbind-tip {
  font-weight: 400;
  font-size: 12px;
}
.cns .tg-bind-success {
  color: #38de8c;
}
.cns .tg-unbind-tip {
  color: #ff9d00;
}

.cns .login-tip {
  margin-top: 8px;
}

.cns .connect-tg-tip {
  border-bottom: none;
  background: linear-gradient(175deg, #0c0c0c 0%, #243952 49%, #318b7b 120%);
}

.cns .setting-tg-bind-title {
  font-size: 16px;
}
.cns .setting-tg-bind-subtitle {
  font-size: 14px;
}
.cns .setting-tg-bind-description {
  font-size: 11px;
  font-weight: 300;
  color: #ededed;
}
.cns .notify-types h4 {
  font-size: 16px;
}
.cns .notify-types p {
  font-size: 14px;
  color: #ededed;
}

.cns .unsubscribe-button {
  color: #ee316a;
  font-size: 14px;
  padding-top: 20px;
}
.cns .footer {
  /* border-top: none; */
}
</code></pre>

*The above 👆 just a demo, you can change it apply to your current UI design. The components have a `className` you can choose a component to override it.*

</details>