mirror of
https://github.com/MetaFam/TheGame.git
synced 2026-02-10 22:14:53 -05:00
8517a26048
* upgraded storybook dependencies * upgraded web dependencies * updated timezone selector * upgrade chakra in metamaps * upgraded react-dnd in metamaps * upgraded framer-motion * fixed types in metamaps * upgraded eslint * upgraded lerna, husky and graphql * upgraded node version * removed metamaps package * fixed all eslint issues * ran yarn format to prettier format all files * updated lint-staged & husky scripts * add executable perms to pre-push scripts * updated yarn.lock * fixed eslint and moved chakra icons to ds * fixed emotion errors * removed extra useContext * update yarn.lock * upgraded more packages * removed unnecessary .huskyrc.json * lint fix
89 lines
3.0 KiB
TypeScript
89 lines
3.0 KiB
TypeScript
import {
|
|
Flex,
|
|
HStack,
|
|
Image,
|
|
List,
|
|
ListIcon,
|
|
ListItem,
|
|
MetaButton,
|
|
MetaHeading,
|
|
Text,
|
|
VStack,
|
|
} from '@metafam/ds';
|
|
import { Constants } from '@metafam/utils';
|
|
import { FlexContainer } from 'components/Container';
|
|
import { MetaLink } from 'components/Link';
|
|
import { CONFIG } from 'config';
|
|
import React from 'react';
|
|
import { FaCheckCircle } from 'react-icons/fa';
|
|
|
|
export const GuildJoin: React.FC = () => {
|
|
const discordOAuthCallbackUrl = `${CONFIG.publicUrl}/${Constants.DISCORD_OAUTH_CALLBACK_PATH}`;
|
|
|
|
const discordAuthParams = new URLSearchParams({
|
|
response_type: 'code',
|
|
client_id: CONFIG.discordBotClientId,
|
|
state: 'guid-to-go-in-localstorage',
|
|
permissions: Constants.DISCORD_BOT_PERMISSIONS,
|
|
redirect_uri: encodeURI(discordOAuthCallbackUrl),
|
|
scope: Constants.DISCORD_OAUTH_SCOPES,
|
|
});
|
|
|
|
const discordAuthUrl = `https://discord.com/api/oauth2/authorize?${discordAuthParams.toString()}`;
|
|
|
|
return (
|
|
<FlexContainer flex="1" justify="start" mt={5}>
|
|
<MetaHeading textAlign="center" mb={10}>
|
|
Join MetaGame as Guild
|
|
</MetaHeading>
|
|
{/* TODO get design input, change content and make responsive */}
|
|
<Flex
|
|
direction="row"
|
|
bg="whiteAlpha.200"
|
|
style={{ backdropFilter: 'blur(7px)' }}
|
|
rounded="lg"
|
|
p="6"
|
|
my="6"
|
|
w="100%"
|
|
align="stretch"
|
|
justify="space-between"
|
|
>
|
|
<HStack h="100%" maxW="60rem" spacing="6" align="stretch">
|
|
<Image src="/assets/guilds.png" alt="Guild" maxW="20rem" />
|
|
<VStack spacing={8} align="stretch" pl="6">
|
|
<Text fontSize="xl" fontFamily="mono" color="blueLight">
|
|
Are you part of a group of people building tools & services
|
|
for a decentralized future?
|
|
</Text>
|
|
<VStack spacing={2} align="stretch">
|
|
<Text>Does your group need help</Text>
|
|
<List>
|
|
<ListItem fontStyle="italic" fontSize="sm">
|
|
<ListIcon as={FaCheckCircle} color="green.500" />
|
|
finding tools, frameworks or funds?
|
|
</ListItem>
|
|
<ListItem fontStyle="italic" fontSize="sm">
|
|
<ListIcon as={FaCheckCircle} color="green.500" />
|
|
getting value-aligned contributors & adopters?
|
|
</ListItem>
|
|
</List>
|
|
</VStack>
|
|
<Text fontSize="sm">
|
|
To apply, your guild must have a{' '}
|
|
<MetaLink isExternal href="https://discord.com/">
|
|
Discord
|
|
</MetaLink>{' '}
|
|
server. Clicking the link below will redirect to a Discord page
|
|
asking for your permission to collect certain relevant information
|
|
about your guild.
|
|
</Text>
|
|
<MetaButton size="lg" maxW="15rem" as="a" href={discordAuthUrl}>
|
|
Apply to Join
|
|
</MetaButton>
|
|
</VStack>
|
|
</HStack>
|
|
</Flex>
|
|
</FlexContainer>
|
|
);
|
|
};
|