Skip to content

Commit 1611f00

Browse files
nevo-davidnevo-david
authored
Merge pull request #562 from gitroomhq/feat/farcaster
Added warpcast
2 parents 2b8e0bc + 4fb674a commit 1611f00

File tree

15 files changed

+4454
-2005
lines changed

15 files changed

+4454
-2005
lines changed

‎apps/frontend/public/icons/platforms/wrapcast.png

1.92 KB
Loading

‎apps/frontend/src/components/launches/add.provider.component.tsx

+35
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { useVariables } from '@gitroom/react/helpers/variable.context';
1414
import { useToaster } from '@gitroom/react/toaster/toaster';
1515
import { object, string } from 'yup';
1616
import { yupResolver } from '@hookform/resolvers/yup';
17+
import { web3List } from '@gitroom/frontend/components/launches/web3/web3.list';
1718

1819
const resolver = classValidatorResolver(ApiKeyDto);
1920

@@ -307,6 +308,7 @@ export const AddProviderComponent: FC<{
307308
name: string;
308309
toolTip?: string;
309310
isExternal: boolean;
311+
isWeb3: boolean;
310312
customFields?: Array<{
311313
key: string;
312314
label: string;
@@ -327,6 +329,7 @@ export const AddProviderComponent: FC<{
327329
(
328330
identifier: string,
329331
isExternal: boolean,
332+
isWeb3: boolean,
330333
customFields?: Array<{
331334
key: string;
332335
label: string;
@@ -336,6 +339,32 @@ export const AddProviderComponent: FC<{
336339
}>
337340
) =>
338341
async () => {
342+
const openWeb3 = async () => {
343+
const { component: Web3Providers } = web3List.find(
344+
(item) => item.identifier === identifier
345+
)!;
346+
347+
const { url } = await (
348+
await fetch(`/integrations/social/${identifier}`)
349+
).json();
350+
351+
modal.openModal({
352+
title: '',
353+
withCloseButton: false,
354+
classNames: {
355+
modal: 'bg-transparent text-textColor',
356+
},
357+
children: (
358+
<Web3Providers
359+
onComplete={(code, newState) => {
360+
window.location.href = `/integrations/social/${identifier}?code=${code}&state=${newState}`;
361+
}}
362+
nonce={url}
363+
/>
364+
),
365+
});
366+
return;
367+
};
339368
const gotoIntegration = async (externalUrl?: string) => {
340369
const { url, err } = await (
341370
await fetch(
@@ -352,6 +381,11 @@ export const AddProviderComponent: FC<{
352381
window.location.href = url;
353382
};
354383

384+
if (isWeb3) {
385+
openWeb3();
386+
return;
387+
}
388+
355389
if (isExternal) {
356390
modal.closeAll();
357391

@@ -443,6 +477,7 @@ export const AddProviderComponent: FC<{
443477
onClick={getSocialLink(
444478
item.identifier,
445479
item.isExternal,
480+
item.isWeb3,
446481
item.customFields
447482
)}
448483
{...(!!item.toolTip

‎apps/frontend/src/components/launches/providers/show.all.providers.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import SlackProvider from '@gitroom/frontend/components/launches/providers/slack
1818
import MastodonProvider from '@gitroom/frontend/components/launches/providers/mastodon/mastodon.provider';
1919
import BlueskyProvider from '@gitroom/frontend/components/launches/providers/bluesky/bluesky.provider';
2020
import LemmyProvider from '@gitroom/frontend/components/launches/providers/lemmy/lemmy.provider';
21+
import WarpcastProvider from '@gitroom/frontend/components/launches/providers/warpcast/warpcast.provider';
2122

2223
export const Providers = [
2324
{identifier: 'devto', component: DevtoProvider},
@@ -40,6 +41,7 @@ export const Providers = [
4041
{identifier: 'mastodon', component: MastodonProvider},
4142
{identifier: 'bluesky', component: BlueskyProvider},
4243
{identifier: 'lemmy', component: LemmyProvider},
44+
{identifier: 'wrapcast', component: WarpcastProvider},
4345
];
4446

4547

‎apps/frontend/src/components/launches/providers/warpcast/subreddit.tsx

+152
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
import { FC, FormEvent, useCallback, useState } from 'react';
2+
import { useCustomProviderFunction } from '@gitroom/frontend/components/launches/helpers/use.custom.provider.function';
3+
import { Input } from '@gitroom/react/form/input';
4+
import { useDebouncedCallback } from 'use-debounce';
5+
import { useWatch } from 'react-hook-form';
6+
import { useSettings } from '@gitroom/frontend/components/launches/helpers/use.values';
7+
8+
export const Subreddit: FC<{
9+
onChange: (event: {
10+
target: {
11+
name: string;
12+
value: {
13+
id: string;
14+
subreddit: string;
15+
title: string;
16+
name: string;
17+
url: string;
18+
body: string;
19+
media: any[];
20+
};
21+
};
22+
}) => void;
23+
name: string;
24+
}> = (props) => {
25+
const { onChange, name } = props;
26+
27+
const state = useSettings();
28+
const split = name.split('.');
29+
const [loading, setLoading] = useState(false);
30+
// @ts-ignore
31+
const errors = state?.formState?.errors?.[split?.[0]]?.[split?.[1]]?.value;
32+
33+
const [results, setResults] = useState([]);
34+
const func = useCustomProviderFunction();
35+
const value = useWatch({ name });
36+
const [searchValue, setSearchValue] = useState('');
37+
38+
const setResult = (result: { id: string; name: string }) => async () => {
39+
setLoading(true);
40+
setSearchValue('');
41+
42+
onChange({
43+
target: {
44+
name,
45+
value: {
46+
id: String(result.id),
47+
subreddit: result.name,
48+
title: '',
49+
name: '',
50+
url: '',
51+
body: '',
52+
media: [],
53+
},
54+
},
55+
});
56+
57+
setLoading(false);
58+
};
59+
60+
const setTitle = useCallback(
61+
(e: any) => {
62+
onChange({
63+
target: {
64+
name,
65+
value: {
66+
...value,
67+
title: e.target.value,
68+
},
69+
},
70+
});
71+
},
72+
[value]
73+
);
74+
75+
const setURL = useCallback(
76+
(e: any) => {
77+
onChange({
78+
target: {
79+
name,
80+
value: {
81+
...value,
82+
url: e.target.value,
83+
},
84+
},
85+
});
86+
},
87+
[value]
88+
);
89+
90+
const search = useDebouncedCallback(
91+
useCallback(async (e: FormEvent<HTMLInputElement>) => {
92+
// @ts-ignore
93+
setResults([]);
94+
// @ts-ignore
95+
if (!e.target.value) {
96+
return;
97+
}
98+
// @ts-ignore
99+
const results = await func.get('subreddits', { word: e.target.value });
100+
// @ts-ignore
101+
setResults(results);
102+
}, []),
103+
500
104+
);
105+
106+
return (
107+
<div className="bg-primary p-[20px]">
108+
{value?.subreddit ? (
109+
<>
110+
<Input
111+
error={errors?.subreddit?.message}
112+
disableForm={true}
113+
value={value.subreddit}
114+
readOnly={true}
115+
label="Channel"
116+
name="subreddit"
117+
/>
118+
</>
119+
) : (
120+
<div className="relative">
121+
<Input
122+
placeholder="Channel"
123+
name="search"
124+
label="Search Channel"
125+
readOnly={loading}
126+
value={searchValue}
127+
error={errors?.message}
128+
disableForm={true}
129+
onInput={async (e) => {
130+
// @ts-ignore
131+
setSearchValue(e.target.value);
132+
await search(e);
133+
}}
134+
/>
135+
{!!results.length && !loading && (
136+
<div className="z-[400] w-full absolute bg-input -mt-[20px] outline-none border-fifth border cursor-pointer">
137+
{results.map((r: { id: string; name: string }) => (
138+
<div
139+
onClick={setResult(r)}
140+
key={r.id}
141+
className="px-[16px] py-[5px] hover:bg-secondary"
142+
>
143+
{r.name}
144+
</div>
145+
))}
146+
</div>
147+
)}
148+
</div>
149+
)}
150+
</div>
151+
);
152+
};

‎apps/frontend/src/components/launches/providers/warpcast/warpcast.provider.tsx

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import { withProvider } from '@gitroom/frontend/components/launches/providers/high.order.provider';
2+
import { FC, useCallback } from 'react';
3+
import { useSettings } from '@gitroom/frontend/components/launches/helpers/use.values';
4+
import { useFieldArray } from 'react-hook-form';
5+
import { deleteDialog } from '@gitroom/react/helpers/delete.dialog';
6+
import { Button } from '@gitroom/react/form/button';
7+
import { Subreddit } from './subreddit';
8+
9+
const WrapcastProvider: FC = () => {
10+
const { register, control } = useSettings();
11+
const { fields, append, remove } = useFieldArray({
12+
control, // control props comes from useForm (optional: if you are using FormContext)
13+
name: 'subreddit', // unique name for your Field Array
14+
});
15+
16+
const addField = useCallback(() => {
17+
append({});
18+
}, [fields, append]);
19+
20+
const deleteField = useCallback(
21+
(index: number) => async () => {
22+
if (
23+
!(await deleteDialog('Are you sure you want to delete this Subreddit?'))
24+
)
25+
return;
26+
remove(index);
27+
},
28+
[fields, remove]
29+
);
30+
31+
return (
32+
<>
33+
<div className="flex flex-col gap-[20px] mb-[20px]">
34+
{fields.map((field, index) => (
35+
<div key={field.id} className="flex flex-col relative">
36+
<div
37+
onClick={deleteField(index)}
38+
className="absolute -left-[10px] justify-center items-center flex -top-[10px] w-[20px] h-[20px] bg-red-600 rounded-full text-textColor"
39+
>
40+
x
41+
</div>
42+
<Subreddit {...register(`subreddit.${index}.value`)} />
43+
</div>
44+
))}
45+
</div>
46+
<Button onClick={addField}>Add Channel</Button>
47+
</>
48+
);
49+
};
50+
51+
export default withProvider(
52+
WrapcastProvider,
53+
undefined,
54+
undefined,
55+
async (list) => {
56+
if (
57+
list.some((item) => item.some((field) => field.path.indexOf('mp4') > -1))
58+
) {
59+
return 'Warpcast can only accept images';
60+
}
61+
62+
return true;
63+
},
64+
3000
65+
);

‎apps/frontend/src/components/launches/web3/providers/wrapcaster.provider.tsx

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
'use client';
2+
import '@neynar/react/dist/style.css';
3+
import React, { FC, useMemo, useState, useCallback, useEffect } from 'react';
4+
import { Web3ProviderInterface } from '@gitroom/frontend/components/launches/web3/web3.provider.interface';
5+
import { useVariables } from '@gitroom/react/helpers/variable.context';
6+
import { TopTitle } from '@gitroom/frontend/components/launches/helpers/top.title.component';
7+
import { useModals } from '@mantine/modals';
8+
import { LoadingComponent } from '@gitroom/frontend/components/layout/loading';
9+
import { NeynarAuthButton, NeynarContextProvider, Theme, useNeynarContext } from '@neynar/react';
10+
import { INeynarAuthenticatedUser } from '@neynar/react/dist/types/common';
11+
12+
export const WrapcasterProvider: FC<Web3ProviderInterface> = (props) => {
13+
const [id, state] = props.nonce.split('||');
14+
const modal = useModals();
15+
const [hide, setHide] = useState(false);
16+
17+
const auth = useCallback((params: { user: INeynarAuthenticatedUser }) => {
18+
setHide(true);
19+
return props.onComplete(Buffer.from(JSON.stringify(params.user)).toString('base64'), state);
20+
}, []);
21+
22+
return (
23+
<NeynarContextProvider
24+
settings={{
25+
clientId: id || '',
26+
defaultTheme: Theme.Dark,
27+
// eventsCallbacks: {
28+
// onAuthSuccess: (params: { user: INeynarAuthenticatedUser }) => {
29+
// auth(params);
30+
// },
31+
// },
32+
}}
33+
>
34+
<div className="rounded-[4px] border border-customColor6 bg-sixth px-[16px] pb-[16px] relative w-full">
35+
<TopTitle title={`Add Wrapcast`} />
36+
<button
37+
className="outline-none absolute right-[20px] top-[20px] mantine-UnstyledButton-root mantine-ActionIcon-root hover:bg-tableBorder cursor-pointer mantine-Modal-close mantine-1dcetaa"
38+
type="button"
39+
onClick={() => modal.closeAll()}
40+
>
41+
<svg
42+
viewBox="0 0 15 15"
43+
fill="none"
44+
xmlns="http://www.w3.org/2000/svg"
45+
width="16"
46+
height="16"
47+
>
48+
<path
49+
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"
50+
fill="currentColor"
51+
fillRule="evenodd"
52+
clipRule="evenodd"
53+
></path>
54+
</svg>
55+
</button>
56+
<div className="justify-center items-center flex">
57+
{hide ? (
58+
<div className="justify-center items-center flex -mt-[90px]">
59+
<LoadingComponent width={100} height={100} />
60+
</div>
61+
) : (
62+
<div className="justify-center items-center flex py-[20px]">
63+
<Logged onSuccess={auth} />
64+
<NeynarAuthButton className="right-4 top-4" />
65+
</div>
66+
)}
67+
</div>
68+
</div>
69+
</NeynarContextProvider>
70+
);
71+
};
72+
73+
export const Logged: FC<{onSuccess: (params: {user: INeynarAuthenticatedUser}) => void}> = (props) => {
74+
const context = useNeynarContext();
75+
useEffect(() => {
76+
if (context.isAuthenticated && context.user) {
77+
props.onSuccess({ user: context.user });
78+
}
79+
}, [context.isAuthenticated]);
80+
return null;
81+
}

0 commit comments

Comments
 (0)