Merge pull request #568 from gitroomhq/feat/telegram

nevo-david · web-flow · commit 5e0c161e2201 · 2025-01-20T20:25:05.000+07:00
Added telegram
diff --git a/apps/backend/src/api/routes/integrations.controller.ts b/apps/backend/src/api/routes/integrations.controller.ts
@@ -36,6 +36,7 @@ import {
   RefreshToken,
 } from '@gitroom/nestjs-libraries/integrations/social.abstract';
 import { timer } from '@gitroom/helpers/utils/timer';
+import { TelegramProvider } from '@gitroom/nestjs-libraries/integrations/social/telegram.provider';
 
 @ApiTags('Integrations')
 @Controller('/integrations')
@@ -609,4 +610,11 @@ export class IntegrationsController {
   ) {
     return this._integrationService.changePlugActivation(org.id, id, status);
   }
+
+  @Get('/telegram/updates')
+  async getUpdates(
+    @Query() query: { word: string; id?: number },
+  ) {
+    return new TelegramProvider().getBotId(query);
+  }
 }
diff --git a/apps/frontend/public/icons/platforms/telegram.png b/apps/frontend/public/icons/platforms/telegram.png
diff --git a/apps/frontend/src/app/layout.tsx b/apps/frontend/src/app/layout.tsx
@@ -42,6 +42,7 @@ export default async function AppLayout({ children }: { children: ReactNode }) {
           uploadDirectory={process.env.NEXT_PUBLIC_UPLOAD_STATIC_DIRECTORY!}
           tolt={process.env.NEXT_PUBLIC_TOLT!}
           facebookPixel={process.env.NEXT_PUBLIC_FACEBOOK_PIXEL!}
+          telegramBotName={process.env.TELEGRAM_BOT_NAME!}
           neynarClientId={process.env.NEYNAR_CLIENT_ID!}
         >
           <ToltScript />
diff --git a/apps/frontend/src/components/launches/add.edit.model.tsx b/apps/frontend/src/components/launches/add.edit.model.tsx
@@ -595,7 +595,7 @@ export const AddEditModal: FC<{
                 )}
               >
                 <Image
-                  src={selectedIntegrations?.[0]?.picture}
+                  src={selectedIntegrations?.[0]?.picture || '/no-picture.jpg'}
                   className="rounded-full"
                   alt={selectedIntegrations?.[0]?.identifier}
                   width={32}
diff --git a/apps/frontend/src/components/launches/bot.picture.tsx b/apps/frontend/src/components/launches/bot.picture.tsx
@@ -17,7 +17,7 @@ export const BotPicture: FC<{
   const modal = useModals();
   const toast = useToaster();
   const [nick, setNickname] = useState(props.integration.name);
-  const [picture, setPicture] = useState(props.integration.picture);
+  const [picture, setPicture] = useState(props.integration.picture || '/no-picture.jpg');
 
   const fetch = useFetch();
   const submitForm: FormEventHandler<HTMLFormElement> = useCallback(
diff --git a/apps/frontend/src/components/launches/calendar.tsx b/apps/frontend/src/components/launches/calendar.tsx
@@ -634,7 +634,7 @@ export const CalendarColumn: FC<{
                         )}
                       >
                         <Image
-                          src={selectedIntegrations.picture}
+                          src={selectedIntegrations.picture || '/no-picture.jpg'}
                           className="rounded-full"
                           alt={selectedIntegrations.identifier}
                           width={32}
@@ -747,7 +747,7 @@ const CalendarItem: FC<{
         >
           <img
             className="w-[20px] h-[20px] rounded-full"
-            src={post.integration.picture!}
+            src={post.integration.picture! || '/no-picture.jpg'}
           />
           <img
             className="w-[12px] h-[12px] rounded-full absolute z-10 top-[10px] right-0 border border-fifth"
diff --git a/apps/frontend/src/components/launches/general.preview.component.tsx b/apps/frontend/src/components/launches/general.preview.component.tsx
@@ -33,7 +33,7 @@ export const GeneralPreviewComponent: FC<{maximumCharacters?: number}> = (props)
           >
             <div className="w-[40px] flex flex-col items-center">
               <img
-                src={integration?.picture}
+                src={integration?.picture || '/no-picture.jpg'}
                 alt="x"
                 className="rounded-full relative z-[2]"
               />
diff --git a/apps/frontend/src/components/launches/helpers/pick.platform.component.tsx b/apps/frontend/src/components/launches/helpers/pick.platform.component.tsx
@@ -263,7 +263,7 @@ export const PickPlatforms: FC<{
                         )}
                       >
                         <Image
-                          src={integration.picture}
+                          src={integration.picture || '/no-picture.jpg'}
                           className="rounded-full"
                           alt={integration.identifier}
                           width={32}
@@ -302,7 +302,7 @@ export const PickPlatforms: FC<{
                         <div className="flex items-center justify-center gap-[10px]">
                           <div className="relative">
                             <img
-                              src={integration.picture}
+                              src={integration.picture || '/no-picture.jpg'}
                               className="rounded-full"
                               alt={integration.identifier}
                               width={24}
diff --git a/apps/frontend/src/components/launches/launches.component.tsx b/apps/frontend/src/components/launches/launches.component.tsx
@@ -215,7 +215,7 @@ export const MenuComponent: FC<
         )}
         <ImageWithFallback
           fallbackSrc={`/icons/platforms/${integration.identifier}.png`}
-          src={integration.picture!}
+          src={integration.picture || '/no-picture.jpg'}
           className="rounded-full"
           alt={integration.identifier}
           width={32}
diff --git a/apps/frontend/src/components/launches/providers/show.all.providers.tsx b/apps/frontend/src/components/launches/providers/show.all.providers.tsx
@@ -19,6 +19,7 @@ import MastodonProvider from '@gitroom/frontend/components/launches/providers/ma
 import BlueskyProvider from '@gitroom/frontend/components/launches/providers/bluesky/bluesky.provider';
 import LemmyProvider from '@gitroom/frontend/components/launches/providers/lemmy/lemmy.provider';
 import WarpcastProvider from '@gitroom/frontend/components/launches/providers/warpcast/warpcast.provider';
+import TelegramProvider from '@gitroom/frontend/components/launches/providers/telegram/telegram.provider';
 
 export const Providers = [
     {identifier: 'devto', component: DevtoProvider},
@@ -42,6 +43,7 @@ export const Providers = [
     {identifier: 'bluesky', component: BlueskyProvider},
     {identifier: 'lemmy', component: LemmyProvider},
     {identifier: 'wrapcast', component: WarpcastProvider},
+    {identifier: 'telegram', component: TelegramProvider},
 ];
 
 
diff --git a/apps/frontend/src/components/launches/providers/telegram/telegram.provider.tsx b/apps/frontend/src/components/launches/providers/telegram/telegram.provider.tsx
@@ -0,0 +1,11 @@
+import { withProvider } from '@gitroom/frontend/components/launches/providers/high.order.provider';
+
+export default withProvider(
+  null,
+  undefined,
+  undefined,
+  async () => {
+    return true;
+  },
+  500
+);
diff --git a/apps/frontend/src/components/launches/web3/providers/telegram.provider.tsx b/apps/frontend/src/components/launches/web3/providers/telegram.provider.tsx
@@ -0,0 +1,148 @@
+'use client';
+import '@neynar/react/dist/style.css';
+import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
+import { Web3ProviderInterface } from '@gitroom/frontend/components/launches/web3/web3.provider.interface';
+import { TopTitle } from '@gitroom/frontend/components/launches/helpers/top.title.component';
+import { useModals } from '@mantine/modals';
+import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
+import { timer } from '@gitroom/helpers/utils/timer';
+import { makeId } from '@gitroom/nestjs-libraries/services/make.is';
+import interClass from '@gitroom/react/helpers/inter.font';
+import { Input } from '@gitroom/react/form/input';
+import { Button } from '@gitroom/react/form/button';
+import copy from 'copy-to-clipboard';
+import { useToaster } from '@gitroom/react/toaster/toaster';
+import { useVariables } from '@gitroom/react/helpers/variable.context';
+
+export const TelegramProvider: FC<Web3ProviderInterface> = (props) => {
+  const { onComplete, nonce } = props;
+  const {telegramBotName} = useVariables();
+  const modal = useModals();
+  const fetch = useFetch();
+  const word = useRef(makeId(4));
+  const stop = useRef(false);
+  const [step, setStep] = useState(false);
+  const toaster = useToaster();
+
+  async function* load() {
+    let id = '';
+    while (true) {
+      const data = await (
+        await fetch(
+          `/integrations/telegram/updates?word=${word.current}${
+            id ? `&id=${id}` : ''
+          }`
+        )
+      ).json();
+
+      if (data.lastChatId) {
+        id = data.lastChatId;
+      }
+
+      yield data;
+    }
+  }
+
+  const loadAll = async () => {
+    stop.current = false;
+    setStep(true);
+    const generator = load();
+    for await (const data of generator) {
+      if (stop.current) {
+        return;
+      }
+      if (data.chatId) {
+        onComplete(data.chatId, nonce);
+        return;
+      }
+      await timer(2000);
+    }
+  };
+
+  const copyText = useCallback(() => {
+    copy(`/connect ${word.current}`);
+    toaster.show('Copied to clipboard', 'success');
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      stop.current = true;
+    };
+  }, []);
+
+  return (
+    <div className="rounded-[4px] border border-customColor6 bg-sixth px-[16px] pb-[16px] relative w-[700px]">
+      <TopTitle title={`Add Telegram`} />
+      <button
+        className="outline-none absolute right-[20px] top-[20px] mantine-UnstyledButton-root mantine-ActionIcon-root hover:bg-tableBorder cursor-pointer mantine-Modal-close mantine-1dcetaa"
+        type="button"
+        onClick={() => modal.closeAll()}
+      >
+        <svg
+          viewBox="0 0 15 15"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+        >
+          <path
+            d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z"
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+          ></path>
+        </svg>
+      </button>
+      <div className="justify-center items-center flex flex-col pt-[16px]">
+        <div>
+          Please add&nbsp;<strong>@{telegramBotName}</strong>&nbsp;to your
+          telegram group / channel and click here:
+        </div>
+        {!step ? (
+          <div className="w-full mt-[16px]" onClick={loadAll}>
+            <div
+              className={`cursor-pointer bg-[#2EA6DD] h-[44px] rounded-[4px] flex justify-center items-center text-white ${interClass} gap-[4px]`}
+            >
+              <svg
+                width="51"
+                height="22"
+                viewBox="0 0 72 63"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M71.85 3.00001L60.612 60.378C60.612 60.378 60.129 63 56.877 63C55.149 63 54.258 62.178 54.258 62.178L29.916 41.979L18.006 35.976L2.721 31.911C2.721 31.911 0 31.125 0 28.875C0 27 2.799 26.106 2.799 26.106L66.747 0.70201C66.747 0.70201 68.7 -0.00299041 70.125 9.58803e-06C71.001 9.58803e-06 72 0.37501 72 1.50001C72 2.25001 71.85 3.00001 71.85 3.00001Z"
+                  fill="white"
+                />
+                <path
+                  d="M39.0005 49.5147L28.7225 59.6367C28.7225 59.6367 28.2755 59.9817 27.6785 59.9967C27.4715 60.0027 27.2495 59.9697 27.0215 59.8677L29.9135 41.9727L39.0005 49.5147Z"
+                  fill="#B0BEC5"
+                />
+                <path
+                  d="M59.691 12.5877C59.184 11.9277 58.248 11.8077 57.588 12.3087L18 35.9997C18 35.9997 24.318 53.6757 25.281 56.7357C26.247 59.7987 27.021 59.8707 27.021 59.8707L29.913 41.9757L59.409 14.6877C60.069 14.1867 60.192 13.2477 59.691 12.5877Z"
+                  fill="#CFD8DC"
+                />
+              </svg>
+              <div>Connect Telegram</div>
+            </div>
+          </div>
+        ) : (
+          <div className="w-full text-center" onClick={copyText}>
+            Please add the following command in your chat:
+            <div className="mt-[16px] flex">
+              <div className="flex-1">
+                <Input
+                  label=""
+                  value={`/connect ${word.current}`}
+                  name=""
+                  disableForm={true}
+                />
+              </div>
+              <Button>Copy</Button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/apps/frontend/src/components/launches/web3/web3.list.tsx b/apps/frontend/src/components/launches/web3/web3.list.tsx
@@ -1,11 +1,16 @@
 import { FC } from 'react';
 import { Web3ProviderInterface } from '@gitroom/frontend/components/launches/web3/web3.provider.interface';
 import { WrapcasterProvider } from '@gitroom/frontend/components/launches/web3/providers/wrapcaster.provider';
+import { TelegramProvider } from '@gitroom/frontend/components/launches/web3/providers/telegram.provider';
 
 export const web3List: {
   identifier: string;
   component: FC<Web3ProviderInterface>;
 }[] = [
+  {
+    identifier: 'telegram',
+    component: TelegramProvider,
+  },
   {
     identifier: 'wrapcast',
     component: WrapcasterProvider,
diff --git a/libraries/nestjs-libraries/src/integrations/integration.manager.ts b/libraries/nestjs-libraries/src/integrations/integration.manager.ts
@@ -24,6 +24,7 @@ import { BlueskyProvider } from '@gitroom/nestjs-libraries/integrations/social/b
 import { LemmyProvider } from '@gitroom/nestjs-libraries/integrations/social/lemmy.provider';
 import { InstagramStandaloneProvider } from '@gitroom/nestjs-libraries/integrations/social/instagram.standalone.provider';
 import { FarcasterProvider } from '@gitroom/nestjs-libraries/integrations/social/farcaster.provider';
+import { TelegramProvider } from '@gitroom/nestjs-libraries/integrations/social/telegram.provider';
 
 const socialIntegrationList: SocialProvider[] = [
   new XProvider(),
@@ -44,6 +45,7 @@ const socialIntegrationList: SocialProvider[] = [
   new BlueskyProvider(),
   new LemmyProvider(),
   new FarcasterProvider(),
+  new TelegramProvider(),
   // new MastodonCustomProvider(),
 ];
 
diff --git a/libraries/nestjs-libraries/src/integrations/social/telegram.provider.ts b/libraries/nestjs-libraries/src/integrations/social/telegram.provider.ts
diff --git a/libraries/react-shared-libraries/src/helpers/variable.context.tsx b/libraries/react-shared-libraries/src/helpers/variable.context.tsx
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json

Original file line number	Diff line number	Diff line change
`@@ -42,6 +42,7 @@ export default async function AppLayout({ children }: { children: ReactNode }) {`
`42`	`42`	`uploadDirectory={process.env.NEXT_PUBLIC_UPLOAD_STATIC_DIRECTORY!}`
`43`	`43`	`tolt={process.env.NEXT_PUBLIC_TOLT!}`
`44`	`44`	`facebookPixel={process.env.NEXT_PUBLIC_FACEBOOK_PIXEL!}`
	`45`	`+ telegramBotName={process.env.TELEGRAM_BOT_NAME!}`
`45`	`46`	`neynarClientId={process.env.NEYNAR_CLIENT_ID!}`
`46`	`47`	`>`
`47`	`48`	`<ToltScript />`
Original file line number	Diff line number	Diff line change
`@@ -595,7 +595,7 @@ export const AddEditModal: FC<{`
`595`	`595`	`)}`
`596`	`596`	`>`
`597`	`597`	`<Image`
`598`		`- src={selectedIntegrations?.[0]?.picture}`
	`598`	`+ src={selectedIntegrations?.[0]?.picture \|\| '/no-picture.jpg'}`
`599`	`599`	`className="rounded-full"`
`600`	`600`	`alt={selectedIntegrations?.[0]?.identifier}`
`601`	`601`	`width={32}`
Original file line number	Diff line number	Diff line change
`@@ -33,7 +33,7 @@ export const GeneralPreviewComponent: FC<{maximumCharacters?: number}> = (props)`
`33`	`33`	`>`
`34`	`34`	`<div className="w-[40px] flex flex-col items-center">`
`35`	`35`	`<img`
`36`		`- src={integration?.picture}`
	`36`	`+ src={integration?.picture \|\| '/no-picture.jpg'}`
`37`	`37`	`alt="x"`
`38`	`38`	`className="rounded-full relative z-[2]"`
`39`	`39`	`/>`