From 99a20d29d5fef0ccd63e739beaabc40c5eeaac5e Mon Sep 17 00:00:00 2001 From: WRadoslaw <92513933+WRadoslaw@users.noreply.github.com> Date: Tue, 4 Jul 2023 11:59:45 +0200 Subject: [PATCH 01/34] =?UTF-8?q?=F0=9F=93=88=20User=20connection=20benchm?= =?UTF-8?q?arking=20(#4385)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Initial work * Remove cache from benchmarking * CR fixes --- packages/atlas/src/hooks/useGetAssetUrl.ts | 46 +++++++++++++++---- .../src/providers/assets/assets.helpers.ts | 18 +++++++- .../src/providers/assets/assets.provider.tsx | 38 +++++++++++++++ 3 files changed, 93 insertions(+), 9 deletions(-) diff --git a/packages/atlas/src/hooks/useGetAssetUrl.ts b/packages/atlas/src/hooks/useGetAssetUrl.ts index bf122766d8..548a5d497a 100644 --- a/packages/atlas/src/hooks/useGetAssetUrl.ts +++ b/packages/atlas/src/hooks/useGetAssetUrl.ts @@ -2,10 +2,15 @@ import { useEffect, useState } from 'react' import { atlasConfig } from '@/config' import { testAssetDownload } from '@/providers/assets/assets.helpers' +import { useOperatorsContext } from '@/providers/assets/assets.provider' import { ConsoleLogger } from '@/utils/logs' import { TimeoutError, withTimeout } from '@/utils/misc' -export const getSingleAssetUrl = async (urls: string[] | undefined | null, type: 'image' | 'video' | 'subtitle') => { +export const getSingleAssetUrl = async ( + urls: string[] | undefined | null, + type: 'image' | 'video' | 'subtitle', + timeout?: number +): Promise => { if (!urls || urls[0] === '') { return } @@ -14,7 +19,10 @@ export const getSingleAssetUrl = async (urls: string[] | undefined | null, type: const distributorUrl = distributionAssetUrl.split(`/${atlasConfig.storage.assetPath}/`)[0] const assetTestPromise = testAssetDownload(distributionAssetUrl, type) - const assetTestPromiseWithTimeout = withTimeout(assetTestPromise, atlasConfig.storage.assetResponseTimeout) + const assetTestPromiseWithTimeout = withTimeout( + assetTestPromise, + timeout ?? atlasConfig.storage.assetResponseTimeout + ) try { await assetTestPromiseWithTimeout @@ -23,25 +31,47 @@ export const getSingleAssetUrl = async (urls: string[] | undefined | null, type: } catch (err) { if (err instanceof TimeoutError) { // AssetLogger.logDistributorResponseTimeout(eventEntry) - ConsoleLogger.warn(`Distributor didn't respond in ${atlasConfig.storage.assetResponseTimeout} seconds`, { - distributorUrl: distributorUrl, - assetUrl: distributionAssetUrl, - }) + ConsoleLogger.warn( + `Distributor didn't respond in ${timeout ?? atlasConfig.storage.assetResponseTimeout} seconds`, + { + distributorUrl: distributorUrl, + assetUrl: distributionAssetUrl, + } + ) } } } + + // if waterfall logic timeout was too small, fallback to waiting with no timeout + return new Promise((res) => { + const promises: Promise[] = [] + for (const distributionAssetUrl of urls) { + const assetTestPromise = testAssetDownload(distributionAssetUrl, type) + promises.push(assetTestPromise) + } + + Promise.race(promises) + .then(res) + .catch((error) => { + ConsoleLogger.warn(`Error during fallback asset promise race`, { + urls, + error, + }) + }) + }) } export const useGetAssetUrl = (urls: string[] | undefined | null, type: 'image' | 'video' | 'subtitle') => { const [url, setUrl] = useState(undefined) const [isLoading, setIsLoading] = useState(true) + const { userBenchmarkTime } = useOperatorsContext() useEffect(() => { if (url) { return } const init = async () => { setIsLoading(true) - const resolvedUrl = await getSingleAssetUrl(urls, type) + const resolvedUrl = await getSingleAssetUrl(urls, type, userBenchmarkTime ?? undefined) setIsLoading(false) if (resolvedUrl) { setUrl(resolvedUrl) @@ -49,7 +79,7 @@ export const useGetAssetUrl = (urls: string[] | undefined | null, type: 'image' } init() - }, [type, url, urls]) + }, [type, url, urls, userBenchmarkTime]) return { url, isLoading } } diff --git a/packages/atlas/src/providers/assets/assets.helpers.ts b/packages/atlas/src/providers/assets/assets.helpers.ts index f27719233b..43928ba531 100644 --- a/packages/atlas/src/providers/assets/assets.helpers.ts +++ b/packages/atlas/src/providers/assets/assets.helpers.ts @@ -1,3 +1,5 @@ +import axios from 'axios' + import { BasicMembershipFieldsFragment } from '@/api/queries/__generated__/fragments.generated' import { BUILD_ENV } from '@/config/env' import { AssetLogger, ConsoleLogger, DataObjectResponseMetric, DistributorEventEntry } from '@/utils/logs' @@ -51,7 +53,10 @@ export const testAssetDownload = (url: string, type: 'image' | 'video' | 'subtit if (type === 'image') { img = new Image() - img.addEventListener('load', resolve) + img.addEventListener('load', (e) => { + e.preventDefault() + resolve() + }) img.addEventListener('error', reject) img.src = url } else if (type === 'video') { @@ -105,3 +110,14 @@ export const logDistributorPerformance = async (assetUrl: string, eventEntry: Di AssetLogger.logDistributorResponseTime(eventEntry, metric) } + +export const getFastestImageUrl = async (urls: string[]) => { + const promises = urls.map((url) => { + return axios.head(url, { + headers: { + 'Cache-Control': 'no-cache', + }, + }) + }) + return Promise.race(promises) +} diff --git a/packages/atlas/src/providers/assets/assets.provider.tsx b/packages/atlas/src/providers/assets/assets.provider.tsx index 4f175f7290..06dc54e846 100644 --- a/packages/atlas/src/providers/assets/assets.provider.tsx +++ b/packages/atlas/src/providers/assets/assets.provider.tsx @@ -26,9 +26,12 @@ import { GetStorageBucketsWithBagsQuery, GetStorageBucketsWithBagsQueryVariables, } from '@/api/queries/__generated__/storage.generated' +import { useGetBasicVideosLazyQuery } from '@/api/queries/__generated__/videos.generated' import { ViewErrorFallback } from '@/components/ViewErrorFallback' import { atlasConfig } from '@/config' import { absoluteRoutes } from '@/config/routes' +import { useMountEffect } from '@/hooks/useMountEffect' +import { getFastestImageUrl } from '@/providers/assets/assets.helpers' import { UserCoordinates, useUserLocationStore } from '@/providers/userLocation' import { ConsoleLogger, SentryLogger } from '@/utils/logs' @@ -41,6 +44,7 @@ type OperatorsContextValue = { failedStorageOperatorIds: string[] setFailedStorageOperatorIds: Dispatch> fetchStorageOperators: () => Promise + userBenchmarkTime: number | null } const OperatorsContext = createContext(undefined) OperatorsContext.displayName = 'OperatorsContext' @@ -49,6 +53,8 @@ export const OperatorsContextProvider: FC = ({ children }) => const storageOperatorsMappingPromiseRef = useRef>() const [storageOperatorsError, setStorageOperatorsError] = useState(null) const [failedStorageOperatorIds, setFailedStorageOperatorIds] = useState([]) + const [userBenchmarkTime, setUserBenchmarkTime] = useState(null) + const [getBasicVideo] = useGetBasicVideosLazyQuery() const { coordinates, expiry, @@ -145,6 +151,37 @@ export const OperatorsContextProvider: FC = ({ children }) => fetchStorageOperators() }, [fetchStorageOperators, isStudio]) + useMountEffect(() => { + const initBenchmark = async () => { + const { data } = await getBasicVideo({ + variables: { + limit: 1, + where: { + thumbnailPhoto: { + isAccepted_eq: true, + }, + }, + }, + }) + const thumbnail = data?.videos[0].thumbnailPhoto + if (thumbnail) { + const promiseRace = getFastestImageUrl(thumbnail.resolvedUrls) + const startTime = performance.now() + await promiseRace + const msDuration = performance.now() - startTime + const previousTimeout = userBenchmarkTime ?? atlasConfig.storage.assetResponseTimeout + if (msDuration > previousTimeout || msDuration < previousTimeout / 2) { + setUserBenchmarkTime((msDuration + previousTimeout) * 0.75) + } + } + } + initBenchmark() + const id = setInterval(initBenchmark, 30 * 1_000) + return () => { + clearInterval(id) + } + }) + if (storageOperatorsError) { return } @@ -156,6 +193,7 @@ export const OperatorsContextProvider: FC = ({ children }) => failedStorageOperatorIds, setFailedStorageOperatorIds, fetchStorageOperators, + userBenchmarkTime, }} > {children} From 1b89544dc201fc824c39f5cd6ac4dfbe930693f1 Mon Sep 17 00:00:00 2001 From: attemka Date: Tue, 4 Jul 2023 14:00:05 +0400 Subject: [PATCH 02/34] Fixed metaserver build issue (#4386) Co-authored-by: Artem --- packages/atlas-meta-server/src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/atlas-meta-server/src/index.ts b/packages/atlas-meta-server/src/index.ts index b184c1f3ea..16ce1f5924 100644 --- a/packages/atlas-meta-server/src/index.ts +++ b/packages/atlas-meta-server/src/index.ts @@ -32,7 +32,7 @@ app.get('/video/:id', async (req, res) => { const thumbnailUrl = video.thumbnailPhoto ? generateAssetUrl(video.thumbnailPhoto) : '' - const videoMetaTags = generateVideoMetaTags(video, thumbnailUrl, appData.name, APP_URL, appData.twitterId) + const videoMetaTags = generateVideoMetaTags(video, [thumbnailUrl], appData.name, APP_URL, appData.twitterId) const videoSchemaTagsHtml = generateVideoSchemaTagsHtml(video, thumbnailUrl, appData.name, APP_URL) applyMetaTagsToHtml(html, videoMetaTags) From ec4005ea937e43c19bb79d24e6b3da3441eb9130 Mon Sep 17 00:00:00 2001 From: attemka Date: Tue, 4 Jul 2023 14:00:05 +0400 Subject: [PATCH 03/34] Fixed metaserver build issue (#4386) Co-authored-by: Artem --- packages/atlas-meta-server/src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/atlas-meta-server/src/index.ts b/packages/atlas-meta-server/src/index.ts index b184c1f3ea..16ce1f5924 100644 --- a/packages/atlas-meta-server/src/index.ts +++ b/packages/atlas-meta-server/src/index.ts @@ -32,7 +32,7 @@ app.get('/video/:id', async (req, res) => { const thumbnailUrl = video.thumbnailPhoto ? generateAssetUrl(video.thumbnailPhoto) : '' - const videoMetaTags = generateVideoMetaTags(video, thumbnailUrl, appData.name, APP_URL, appData.twitterId) + const videoMetaTags = generateVideoMetaTags(video, [thumbnailUrl], appData.name, APP_URL, appData.twitterId) const videoSchemaTagsHtml = generateVideoSchemaTagsHtml(video, thumbnailUrl, appData.name, APP_URL) applyMetaTagsToHtml(html, videoMetaTags) From 6d52af0e6a655dbe4bb5052eab339937407d060b Mon Sep 17 00:00:00 2001 From: Artem Date: Tue, 4 Jul 2023 14:31:11 +0400 Subject: [PATCH 04/34] Version bump --- packages/atlas-meta-server/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/atlas-meta-server/package.json b/packages/atlas-meta-server/package.json index b9bad8e6fd..a774241d49 100644 --- a/packages/atlas-meta-server/package.json +++ b/packages/atlas-meta-server/package.json @@ -1,6 +1,6 @@ { "name": "@joystream/atlas-meta-server", - "version": "1.3.0", + "version": "1.3.1", "description": "Node server for pre rendering html meta tags", "license": "GPL-3.0", "scripts": { From edc97a1325557f9ede41e65528592dcd67703b2d Mon Sep 17 00:00:00 2001 From: attemka Date: Tue, 4 Jul 2023 20:41:11 +0400 Subject: [PATCH 05/34] Updated segment events (#4393) Co-authored-by: Artem --- packages/atlas/src/MainLayout.tsx | 62 ++++++++++++++----- .../_video/VideoPlayer/VideoPlayer.tsx | 11 +++- .../atlas/src/hooks/useSegmentAnalytics.ts | 7 ++- .../atlas/src/views/studio/StudioLayout.tsx | 20 +++++- 4 files changed, 80 insertions(+), 20 deletions(-) diff --git a/packages/atlas/src/MainLayout.tsx b/packages/atlas/src/MainLayout.tsx index 29825c10e7..eb884c457d 100644 --- a/packages/atlas/src/MainLayout.tsx +++ b/packages/atlas/src/MainLayout.tsx @@ -1,10 +1,11 @@ import loadable from '@loadable/component' import { FC, useEffect, useRef, useState } from 'react' -import { Route, Routes, useLocation, useNavigationType, useSearchParams } from 'react-router-dom' +import { Route, Routes, useLocation, useNavigationType, useParams, useSearchParams } from 'react-router-dom' import { StudioLoading } from '@/components/_loaders/StudioLoading' import { CookiePopover } from '@/components/_overlays/CookiePopover' import { atlasConfig } from '@/config' +import { displayCategoriesLookup } from '@/config/categories' import { BASE_PATHS, absoluteRoutes } from '@/config/routes' import { useSegmentAnalytics } from '@/hooks/useSegmentAnalytics' import { transitions } from '@/styles' @@ -34,6 +35,21 @@ const LoadableStudioLayout = loadable(() => import('./views/studio/StudioLayout' ), }) +const locationToPageName = { + '/discover': 'Discover', + '/category': 'Category', + '/search': 'Search', + '/channels': 'Channels', + '/channel': 'Channel', + '/video': 'Video', + '/membership/edit': 'editMembership', + '/membership': 'Member', + '/notifications': 'Notifications', + '/marketplace': 'Marketplace', + '/ypp': 'YPP', + '/ypp-dashboard': 'YPP Dashboard', +} + const LoadablePlaygroundLayout = loadable(() => import('./views/playground/PlaygroundLayout'), { fallback:

Loading Playground...

, }) @@ -42,6 +58,7 @@ export const MainLayout: FC = () => { const scrollPosition = useRef(0) const location = useLocation() const [searchParams] = useSearchParams() + const { id } = useParams() const navigationType = useNavigationType() const [cachedLocation, setCachedLocation] = useState(location) const locationState = location.state as RoutingState @@ -59,16 +76,34 @@ export const MainLayout: FC = () => { const { trackPageView } = useSegmentAnalytics() useEffect(() => { - // had to include this timeout to make sure the page title is updated - const trackRequestTimeout = setTimeout( - () => - trackPageView( - document.title, - 'viewer', - (location.pathname === absoluteRoutes.viewer.ypp() && searchParams.get('referrer')) || undefined - ), - 1000 - ) + if (!location.pathname.includes('studio')) { + const pageName = + location.pathname === '/' + ? 'Home' + : Object.keys(locationToPageName).find((key) => location.pathname.includes(key)) + const categoryName = pageName === 'Category' && id ? displayCategoriesLookup[id] : undefined + const query = searchParams.get('query') + const referrer = searchParams.get('referrer') || searchParams.get('utm_source') + + const buildPageName = () => { + if (pageName === 'Category') { + return `pageName ${categoryName}` + } else if (pageName === 'Search') { + return `Search result page '${query}'` + } else return pageName || 'unknown' + } + + // had to include this timeout to make sure the page title is updated + const trackRequestTimeout = setTimeout( + () => + trackPageView(buildPageName(), (location.pathname === absoluteRoutes.viewer.ypp() && referrer) || undefined), + 1000 + ) + + return () => { + clearTimeout(trackRequestTimeout) + } + } if (!atlasConfig.analytics.sentry?.dsn) { return @@ -85,10 +120,7 @@ export const MainLayout: FC = () => { stopReplay() } } - return () => { - clearTimeout(trackRequestTimeout) - } - }, [location.pathname, trackPageView, searchParams]) + }, [location.pathname, trackPageView, searchParams, id]) const { clearOverlays } = useOverlayManager() diff --git a/packages/atlas/src/components/_video/VideoPlayer/VideoPlayer.tsx b/packages/atlas/src/components/_video/VideoPlayer/VideoPlayer.tsx index a6727f8766..5d61f60cd7 100644 --- a/packages/atlas/src/components/_video/VideoPlayer/VideoPlayer.tsx +++ b/packages/atlas/src/components/_video/VideoPlayer/VideoPlayer.tsx @@ -189,11 +189,20 @@ const VideoPlayerComponent: ForwardRefRenderFunction { ) const trackPageView = useCallback( - (name: string, category = 'App', referrer = 'no data') => { - analytics.page(category, name, { - referrer, + (name: string, referrer?: string) => { + analytics.page(undefined, name, { + ...(referrer ? { referrer } : {}), }) }, [analytics] diff --git a/packages/atlas/src/views/studio/StudioLayout.tsx b/packages/atlas/src/views/studio/StudioLayout.tsx index dfc9f3dd2d..8043fa5448 100644 --- a/packages/atlas/src/views/studio/StudioLayout.tsx +++ b/packages/atlas/src/views/studio/StudioLayout.tsx @@ -41,6 +41,22 @@ import { NotFoundView } from '../viewer/NotFoundView' const ENTRY_POINT_ROUTE = absoluteRoutes.studio.index() +const locationToPageName = { + '/channel/new': 'New channel', + '/channel': 'Channel', + '/videos': 'Videos', + '/crt-welcome': 'CRT Welcome', + '/crt-preview-edit': 'CRT Preview Edit', + '/crt-preview': 'CRT Preview', + 'video-workspace': 'Video workspace', + '/uploads': 'Uploads', + '/signin': 'Sign in', + '/notifications': 'Notifications', + '/payments': 'Payments', + '/ypp': 'YPP', + '/ypp-dashboard': 'YPP Dashboard', +} + const StudioLayout = () => { const location = useLocation() const displayedLocation = useVideoWorkspaceRouting() @@ -80,8 +96,10 @@ const StudioLayout = () => { }, [closeUnsupportedBrowserDialog, openUnsupportedBrowserDialog]) useEffect(() => { + const pageName = Object.keys(locationToPageName).find((key) => location.pathname.includes(key)) + // had to include this timeout to make sure the page title is updated - const trackRequestTimeout = setTimeout(() => trackPageView(document.title, 'studio', undefined), 1000) + const trackRequestTimeout = setTimeout(() => trackPageView(`Studio - ${pageName}`, undefined), 1000) return () => clearTimeout(trackRequestTimeout) }, [location.pathname, trackPageView]) From 641ec805a2b47ba20a7218dc099b78e77948d157 Mon Sep 17 00:00:00 2001 From: attemka Date: Thu, 6 Jul 2023 11:47:19 +0400 Subject: [PATCH 06/34] Merge 'Accounts' into 'dev' (#4398) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * anonymous user interaction (#4168) * 🔑 Protected actions (#4164) * 🔐 Login modal (#4182) * Sign up flow (#4210) * ðŸĪŊ External wallet login (#4252) * ðŸŒģ Rearrange user, wallet, and auth provider (#4260) * Public profile settings (#4275) * ðŸĨŠ Glue auth components (#4282) * ðŸĐđ My channel (#4329) * ðŸĶĒ Swap sign up step (#4317) * 🧠 Forgot password flow (#4325) * ðŸŒĩ Channel creation modal (#4334) * 🐉 Dropdown rework (#4337) * Wallet settings, change password and download mnemonic (#4326) * Update packages/atlas/src/views/viewer/MembershipSettingsView/MembershipWallet/MembershipWallet.tsx * Simplified ypp sign up (#4351) * ðŸ‘Ŋ‍♀ïļ Account followup fixes (#4394) --------------------- Co-authored-by: Bartosz Dryl Co-authored-by: WRadoslaw <92513933+WRadoslaw@users.noreply.github.com> Co-authored-by: Artem Slugin --- packages/atlas/atlas.config.yml | 2 +- packages/atlas/package.json | 4 + packages/atlas/src/.env | 9 +- packages/atlas/src/App.tsx | 4 +- packages/atlas/src/CommonProviders.tsx | 34 +- packages/atlas/src/api/client/index.ts | 2 +- .../__generated__/accounts.generated.tsx | 65 ++ .../atlas/src/api/queries/accounts.graphql | 9 + .../atlas/src/assets/animations/confetti.json | 2 +- .../src/assets/icons/ActionAddChannel.tsx | 17 + packages/atlas/src/assets/icons/index.ts | 1 + .../assets/icons/svgs/action-add-channel.svg | 4 + .../ypp-authorization/app-screenshot.webp | Bin 7644 -> 0 bytes .../components/ActionBar/ActionBar.styles.ts | 29 +- .../src/components/ActionBar/ActionBar.tsx | 37 +- packages/atlas/src/components/AppKV/AppKV.tsx | 28 +- .../atlas/src/components/Avatar/Avatar.tsx | 25 +- .../src/components/Banner/Banner.styles.ts | 4 +- .../atlas/src/components/Banner/Banner.tsx | 4 +- packages/atlas/src/components/List/List.tsx | 18 +- .../src/components/ListItem/ListItem.tsx | 4 + .../MembershipInfo/MembershipInfo.tsx | 13 +- .../components/PageTabs/PageTabs.styles.ts | 21 + .../src/components/PageTabs/PageTabs.tsx | 30 + .../atlas/src/components/PageTabs/index.ts | 1 + .../StudioEntrypoint/StudioEntrypoint.tsx | 2 +- .../src/components/Tooltip/Tooltip.styles.ts | 4 +- .../atlas/src/components/Tooltip/Tooltip.tsx | 17 +- .../_auth/AuthModals/AuthModals.tsx | 25 + .../src/components/_auth/AuthModals/index.ts | 1 + ...AuthenticationModalStepTemplate.styles.ts} | 25 +- .../AuthenticationModalStepTemplate.tsx} | 11 +- .../AuthenticationModalStepTemplate/index.ts | 1 + .../ExternalSignInModal.styles.ts} | 6 +- .../ExternalSignInModal.tsx | 148 ++++ .../ExternalSignInModalEmailStep.tsx | 106 +++ .../ExternalSignInModalMembershipsStep.tsx | 131 ++++ .../ExternalSignInModalWalletStep.tsx} | 61 +- .../ExternalSignInModalWalletStep.utils.ts} | 2 +- .../ExternalSignInModalWalletStep/index.ts | 1 + .../ExternalSignInSteps.styles.ts} | 0 .../ExternalSignInSteps.types.ts | 17 + .../ExternalSignInSteps/index.ts | 4 + .../_auth/ExternalSignInModal/index.ts | 1 + .../ForgotPasswordModal.styles.ts | 9 + .../ForgotPasswordModal.tsx | 223 ++++++ .../ForgotPasswordModal.types.ts | 16 + .../steps/EmailAndSeedStep.tsx | 44 ++ .../steps/NewPasswordStep.tsx | 41 ++ .../_auth/LogInModal/LogInModal.styles.ts | 14 + .../_auth/LogInModal/LogInModal.tsx | 154 +++++ .../src/components/_auth/LogInModal/index.ts | 1 + .../PasswordCriterias.styles.ts | 23 + .../PasswordCriterias/PasswordCriterias.tsx | 126 ++++ .../_auth/PasswordCriterias/index.ts | 1 + .../ProtectedActionWrapper.styles.ts | 34 + .../ProtectedActionWrapper.tsx | 69 ++ .../_auth/ProtectedActionWrapper/index.ts | 1 + .../_auth/SignInModal/SignInModal.tsx | 316 --------- .../_auth/SignInModal/SignInModal.types.ts | 9 - .../SignInSteps/SignInModalAccountStep.tsx | 88 --- .../SignInModalStepTemplate/index.ts | 1 - .../SignInSteps/SignInModalTermsStep.tsx | 26 - .../SignInModalWalletStep/index.ts | 1 - .../_auth/SignInModal/SignInSteps/index.ts | 6 - .../src/components/_auth/SignInModal/index.ts | 1 - .../_auth/SignUpModal/SignUpModal.tsx | 318 +++++++++ .../_auth/SignUpModal/SignUpModal.types.ts | 8 + .../SignUpSteps/SignUpCreatingMemberStep.tsx} | 9 +- .../SignUpSteps/SignUpEmailStep.tsx | 131 ++++ .../SignUpMembershipStep.styles.ts | 35 + .../SignUpMembershipStep.tsx} | 69 +- .../SignUpSteps/SignUpMembershipStep/index.ts | 1 + .../SignUpPasswordStep/SignUpPasswordStep.tsx | 101 +++ .../SignUpSteps/SignUpPasswordStep/index.ts | 1 + .../SignUpSeedStep/SignUpSeedStep.tsx | 116 ++++ .../SignUpSeedStep/SignupSeedStep.styles.ts | 19 + .../SignUpSteps/SignUpSeedStep/index.ts | 1 + .../SignUpSteps/SignUpSteps.styles.ts | 23 + .../SignUpSteps/SignUpSteps.types.ts} | 3 +- .../SignUpSuccessStep.styles.ts | 38 ++ .../SignUpSuccessStep/SignUpSuccessStep.tsx | 55 ++ .../SignUpSteps/SignUpSuccessStep/index.ts | 1 + .../_auth/SignUpModal/SignUpSteps/index.ts | 6 + .../src/components/_auth/SignUpModal/index.ts | 1 + .../CopyAddressButton.styles.ts | 26 +- .../CopyAddressButton/CopyAddressButton.tsx | 28 +- .../ChannelCover/ChannelCover.styles.ts | 11 +- .../ChannelLink/ChannelLink.styles.ts | 3 +- .../_channel/ChannelLink/ChannelLink.tsx | 17 +- .../CreateChannelModal/CreateChannelModal.tsx | 134 ++++ .../_channel/CreateChannelModal/index.ts | 1 + .../components/_comments/Comment/Comment.tsx | 32 +- .../_comments/Comment/InternalComment.tsx | 97 +-- .../_comments/CommentInput/CommentInput.tsx | 152 +++-- .../components/_inputs/Checkbox/Checkbox.tsx | 4 +- .../components/_inputs/Input/Input.styles.ts | 12 +- .../src/components/_inputs/Input/Input.tsx | 24 +- .../RadioAndCheckboxBase.tsx | 4 +- .../components/_inputs/TextArea/TextArea.tsx | 2 + .../_inputs/TokenInput/TokenInput.tsx | 2 +- .../src/components/_inputs/inputs.utils.ts | 26 +- .../_navigation/PrivateRoute/PrivateRoute.tsx | 2 +- .../SidenavStudio/SidenavStudio.tsx | 2 +- .../SidenavViewer/SidenavViewer.tsx | 13 +- .../TopbarStudio/TopbarStudio.styles.ts | 4 +- .../_navigation/TopbarStudio/TopbarStudio.tsx | 34 +- .../_navigation/TopbarViewer/TopbarViewer.tsx | 32 +- .../AcceptBidDialog/AcceptBidDialog.tsx | 2 +- .../_overlays/AdminModal/AdminModal.tsx | 74 +- .../AlertDialogModalWithFee.tsx | 2 +- .../ChangePriceDialog/ChangePriceDialog.tsx | 2 +- .../ClaimChannelPaymentsDialog.tsx | 2 +- .../_overlays/Dialog/Dialog.styles.ts | 3 +- .../_overlays/DialogModal/DialogModal.tsx | 17 +- .../ImageCropModal/ImageCropModal.tsx | 2 +- .../MemberDropdown/MemberDropdown.styles.ts | 18 +- .../MemberDropdown/MemberDropdown.tsx | 139 ++-- .../MemberDropdown/MemberDropdownList.tsx | 87 +-- .../MemberDropdownNav.styles.ts | 91 +-- .../MemberDropdown/MemberDropdownNav.tsx | 366 ++++------ .../_overlays/Modal/Modal.styles.ts | 17 +- .../src/components/_overlays/Modal/Modal.tsx | 62 +- .../SendTransferDialogs/SendFundsDialog.tsx | 2 +- .../WithdrawFundsDialog.tsx | 2 +- .../SignInDialogContent.styles.ts | 86 --- .../SignInDialogContent.tsx | 47 -- .../_overlays/SignInDialogContent/index.ts | 1 - .../TransactionModal/TransactionModal.tsx | 4 +- .../_templates/EntitySettingTemplate.tsx | 47 ++ .../ReactionStepper/ReactionStepper.tsx | 37 +- packages/atlas/src/config/config.ts | 12 +- packages/atlas/src/config/env.ts | 3 +- packages/atlas/src/config/routes.ts | 12 +- packages/atlas/src/hooks/useChannelForm.ts | 372 ++++++++++ .../useChannelFormSubmit.ts} | 70 +- packages/atlas/src/hooks/useCreateMember.ts | 219 ++++++ packages/atlas/src/hooks/useDebounceValue.ts | 15 + packages/atlas/src/hooks/useDeleteVideo.ts | 2 +- .../src/hooks/useDisplaySignInDialog.tsx | 60 -- .../atlas/src/hooks/useHasEnoughBalance.ts | 2 +- .../src/hooks/useHidePasswordInInput.tsx | 19 + .../atlas/src/hooks/useNftTransactions.tsx | 2 +- .../src/hooks/useReactionTransactions.ts | 2 +- .../atlas/src/hooks/useSegmentAnalytics.ts | 4 +- .../atlas/src/hooks/useUniqueMemberHandle.ts | 52 ++ .../atlas/src/joystream-lib/extrinsics.ts | 22 +- packages/atlas/src/joystream-lib/helpers.ts | 4 +- packages/atlas/src/joystream-lib/lib.ts | 26 +- packages/atlas/src/joystream-lib/types.ts | 2 + packages/atlas/src/main.tsx | 5 + .../atlas/src/providers/auth/auth.helpers.ts | 272 ++++++++ .../atlas/src/providers/auth/auth.hooks.ts | 1 + .../src/providers/auth/auth.provider.tsx | 254 +++++++ .../atlas/src/providers/auth/auth.store.ts | 52 ++ .../atlas/src/providers/auth/auth.types.ts | 91 +++ .../atlas/src/providers/joystream/index.ts | 2 + .../providers/joystream/joystream.hooks.ts | 12 +- .../providers/joystream/joystream.manager.ts | 2 +- .../joystream/joystream.provider.tsx | 81 ++- .../providers/nftActions/nftActions.hooks.ts | 9 +- .../atlas/src/providers/overlayManager.tsx | 4 +- .../transactions/transactions.hooks.ts | 10 +- .../transactions/transactions.manager.tsx | 6 +- .../atlas/src/providers/user/user.helpers.ts | 154 ----- .../atlas/src/providers/user/user.hooks.ts | 33 +- .../src/providers/user/user.provider.tsx | 227 ++---- .../atlas/src/providers/user/user.store.ts | 106 --- .../atlas/src/providers/user/user.types.ts | 19 +- .../src/providers/wallet/wallet.helpers.ts | 29 + .../src/providers/wallet/wallet.hooks.ts | 14 + .../src/providers/wallet/wallet.provider.tsx | 199 ++++++ .../src/providers/wallet/wallet.store.ts | 63 ++ .../src/providers/wallet/wallet.types.ts | 12 + packages/atlas/src/providers/ypp/ypp.store.ts | 54 +- packages/atlas/src/providers/ypp/ypp.types.ts | 12 + packages/atlas/src/styles/transitions.ts | 70 +- .../src/types/react-detectable-overflow.d.ts | 10 + .../atlas/src/utils/formValidationOptions.ts | 20 + packages/atlas/src/utils/image.ts | 61 ++ packages/atlas/src/utils/text.ts | 4 + .../NftPurchaseBottomDrawer.tsx | 2 +- .../NftForm/AcceptTerms/AcceptTerms.tsx | 2 +- .../NftForm/NftForm.hooks.ts | 2 +- .../NftSaleBottomDrawer/NftForm/NftForm.tsx | 2 +- .../NftSaleBottomDrawer.tsx | 2 +- .../NftSettlementBottomDrawer.tsx | 2 +- .../YppAuthorizationModal.stories.tsx | 22 +- .../YppAuthorizationModal.styles.ts | 8 - .../YppAuthorizationModal.tsx | 492 ++++++------- .../YppAuthorizationModal.types.ts | 24 +- .../YppAuthorizationDetailsFormStep.tsx | 49 +- ...YppAuthorizationRequirementsStep.styles.ts | 5 + .../YppAuthorizationRequirementsStep.tsx | 85 ++- .../useGetYppChannelRequirements.ts | 29 + ...onModal.hooks.tsx => useYppGoogleAuth.tsx} | 105 +-- .../views/global/YppLandingView/YppHero.tsx | 2 +- .../global/YppLandingView/YppLandingView.tsx | 58 +- .../YppLandingView/YppLandingView.types.ts | 20 + .../useGetYppLastVerifiedChannels.ts | 44 ++ ...ew.hooks.ts => useGetYppSyncedChannels.ts} | 62 +- .../src/views/playground/PlaygroundLayout.tsx | 16 +- .../PlaygroundIndirectSignInDialog.tsx | 11 - .../PlaygroundReactionsComments.tsx | 2 +- .../Playgrounds/PlaygroundSignUp.tsx | 9 + .../Playgrounds/PlaygroundTokenPrice.tsx | 2 +- .../src/views/playground/Playgrounds/index.ts | 2 +- .../CreateEditChannelView.styles.ts | 56 -- .../CreateEditChannelView.tsx | 645 ------------------ .../studio/CreateEditChannelView/index.ts | 1 - .../MyChannelView/MyChannelView.styles.ts | 22 + .../studio/MyChannelView/MyChannelView.tsx | 69 ++ .../src/views/studio/MyChannelView/index.ts | 1 + .../StudioChannelGeneralTab.styles.ts | 26 + .../StudioChannelGeneralTab.tsx | 277 ++++++++ .../tabs/StudioChannelGeneralTab/index.ts | 1 + .../PaymentsOverview/PaymentsOverView.tsx | 2 +- .../PaymentsOverview.hooks.ts | 2 +- .../PaymentTransactions.hooks.ts | 2 +- .../UploadStatus/UploadStatus.hooks.ts | 65 +- .../UploadStatus/UploadStatus.tsx | 2 +- .../studio/MyVideosView/MyVideosView.tsx | 2 +- .../atlas/src/views/studio/StudioLayout.tsx | 34 +- .../StudioWelcomeView/StudioWelcomeView.tsx | 13 +- .../VideoWorkspace/VideoForm/VideoForm.tsx | 2 +- .../VideoWorkspace/VideoWorkspace.hooks.ts | 2 +- .../studio/YppDashboard/YppDashboard.tsx | 2 +- .../YppDashboard/tabs/YppDashboardMainTab.tsx | 2 +- .../tabs/YppDashboardSettingsTab.tsx | 6 +- .../tabs/YppDashboardTabs.styles.ts | 11 +- .../views/viewer/ChannelView/ChannelView.tsx | 27 +- .../views/viewer/EditMembershipView/index.ts | 1 - .../ChangePasswordDialog.tsx | 209 ++++++ .../ExportSeedDialog.tsx | 140 ++++ .../MembershipPublicProfile.styles.ts} | 6 +- .../MembershipPublicProfile.tsx} | 115 ++-- .../MembershipPublicProfile/index.ts | 1 + .../MembershipSettingsView.styles.ts | 36 + .../MembershipSettingsView.tsx | 108 +++ .../MembershipWallet.styles.ts | 64 ++ .../MembershipWallet/MembershipWallet.tsx | 192 ++++++ .../MembershipWallet/index.ts | 1 + .../viewer/MembershipSettingsView/index.ts | 1 + .../viewer/VideoView/CommentsSection.tsx | 7 +- .../src/views/viewer/VideoView/VideoView.tsx | 22 +- .../atlas/src/views/viewer/ViewerLayout.tsx | 10 +- yarn.lock | 58 ++ 247 files changed, 7315 insertions(+), 3617 deletions(-) create mode 100644 packages/atlas/src/api/queries/__generated__/accounts.generated.tsx create mode 100644 packages/atlas/src/api/queries/accounts.graphql create mode 100644 packages/atlas/src/assets/icons/ActionAddChannel.tsx create mode 100644 packages/atlas/src/assets/icons/svgs/action-add-channel.svg delete mode 100644 packages/atlas/src/assets/images/ypp-authorization/app-screenshot.webp create mode 100644 packages/atlas/src/components/PageTabs/PageTabs.styles.ts create mode 100644 packages/atlas/src/components/PageTabs/PageTabs.tsx create mode 100644 packages/atlas/src/components/PageTabs/index.ts create mode 100644 packages/atlas/src/components/_auth/AuthModals/AuthModals.tsx create mode 100644 packages/atlas/src/components/_auth/AuthModals/index.ts rename packages/atlas/src/components/_auth/{SignInModal/SignInSteps/SignInModalStepTemplate/SignInModalStepTemplate.styles.ts => AuthenticationModalStepTemplate/AuthenticationModalStepTemplate.styles.ts} (87%) rename packages/atlas/src/components/_auth/{SignInModal/SignInSteps/SignInModalStepTemplate/SignInModalStepTemplate.tsx => AuthenticationModalStepTemplate/AuthenticationModalStepTemplate.tsx} (82%) create mode 100644 packages/atlas/src/components/_auth/AuthenticationModalStepTemplate/index.ts rename packages/atlas/src/components/_auth/{SignInModal/SignInModal.styles.ts => ExternalSignInModal/ExternalSignInModal.styles.ts} (59%) create mode 100644 packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInModal.tsx create mode 100644 packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/ExternalSignInModalEmailStep.tsx create mode 100644 packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/ExternalSignInModalMembershipsStep.tsx rename packages/atlas/src/components/_auth/{SignInModal/SignInSteps/SignInModalWalletStep/SignInModalWalletStep.tsx => ExternalSignInModal/ExternalSignInSteps/ExternalSignInModalWalletStep/ExternalSignInModalWalletStep.tsx} (77%) rename packages/atlas/src/components/_auth/{SignInModal/SignInSteps/SignInModalWalletStep/SignInModalWalletStep.utils.ts => ExternalSignInModal/ExternalSignInSteps/ExternalSignInModalWalletStep/ExternalSignInModalWalletStep.utils.ts} (94%) create mode 100644 packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/ExternalSignInModalWalletStep/index.ts rename packages/atlas/src/components/_auth/{SignInModal/SignInSteps/SignInSteps.styles.ts => ExternalSignInModal/ExternalSignInSteps/ExternalSignInSteps.styles.ts} (100%) create mode 100644 packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/ExternalSignInSteps.types.ts create mode 100644 packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/index.ts create mode 100644 packages/atlas/src/components/_auth/ExternalSignInModal/index.ts create mode 100644 packages/atlas/src/components/_auth/ForgotPasswordModal/ForgotPasswordModal.styles.ts create mode 100644 packages/atlas/src/components/_auth/ForgotPasswordModal/ForgotPasswordModal.tsx create mode 100644 packages/atlas/src/components/_auth/ForgotPasswordModal/ForgotPasswordModal.types.ts create mode 100644 packages/atlas/src/components/_auth/ForgotPasswordModal/steps/EmailAndSeedStep.tsx create mode 100644 packages/atlas/src/components/_auth/ForgotPasswordModal/steps/NewPasswordStep.tsx create mode 100644 packages/atlas/src/components/_auth/LogInModal/LogInModal.styles.ts create mode 100644 packages/atlas/src/components/_auth/LogInModal/LogInModal.tsx create mode 100644 packages/atlas/src/components/_auth/LogInModal/index.ts create mode 100644 packages/atlas/src/components/_auth/PasswordCriterias/PasswordCriterias.styles.ts create mode 100644 packages/atlas/src/components/_auth/PasswordCriterias/PasswordCriterias.tsx create mode 100644 packages/atlas/src/components/_auth/PasswordCriterias/index.ts create mode 100644 packages/atlas/src/components/_auth/ProtectedActionWrapper/ProtectedActionWrapper.styles.ts create mode 100644 packages/atlas/src/components/_auth/ProtectedActionWrapper/ProtectedActionWrapper.tsx create mode 100644 packages/atlas/src/components/_auth/ProtectedActionWrapper/index.ts delete mode 100644 packages/atlas/src/components/_auth/SignInModal/SignInModal.tsx delete mode 100644 packages/atlas/src/components/_auth/SignInModal/SignInModal.types.ts delete mode 100644 packages/atlas/src/components/_auth/SignInModal/SignInSteps/SignInModalAccountStep.tsx delete mode 100644 packages/atlas/src/components/_auth/SignInModal/SignInSteps/SignInModalStepTemplate/index.ts delete mode 100644 packages/atlas/src/components/_auth/SignInModal/SignInSteps/SignInModalTermsStep.tsx delete mode 100644 packages/atlas/src/components/_auth/SignInModal/SignInSteps/SignInModalWalletStep/index.ts delete mode 100644 packages/atlas/src/components/_auth/SignInModal/SignInSteps/index.ts delete mode 100644 packages/atlas/src/components/_auth/SignInModal/index.ts create mode 100644 packages/atlas/src/components/_auth/SignUpModal/SignUpModal.tsx create mode 100644 packages/atlas/src/components/_auth/SignUpModal/SignUpModal.types.ts rename packages/atlas/src/components/_auth/{SignInModal/SignInSteps/SignInModalCreatingStep.tsx => SignUpModal/SignUpSteps/SignUpCreatingMemberStep.tsx} (63%) create mode 100644 packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpEmailStep.tsx create mode 100644 packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpMembershipStep/SignUpMembershipStep.styles.ts rename packages/atlas/src/components/_auth/{SignInModal/SignInSteps/SignInModalMembershipStep.tsx => SignUpModal/SignUpSteps/SignUpMembershipStep/SignUpMembershipStep.tsx} (81%) create mode 100644 packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpMembershipStep/index.ts create mode 100644 packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpPasswordStep/SignUpPasswordStep.tsx create mode 100644 packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpPasswordStep/index.ts create mode 100644 packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpSeedStep/SignUpSeedStep.tsx create mode 100644 packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpSeedStep/SignupSeedStep.styles.ts create mode 100644 packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpSeedStep/index.ts create mode 100644 packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpSteps.styles.ts rename packages/atlas/src/components/_auth/{SignInModal/SignInSteps/SignInSteps.types.ts => SignUpModal/SignUpSteps/SignUpSteps.types.ts} (72%) create mode 100644 packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpSuccessStep/SignUpSuccessStep.styles.ts create mode 100644 packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpSuccessStep/SignUpSuccessStep.tsx create mode 100644 packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpSuccessStep/index.ts create mode 100644 packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/index.ts create mode 100644 packages/atlas/src/components/_auth/SignUpModal/index.ts create mode 100644 packages/atlas/src/components/_channel/CreateChannelModal/CreateChannelModal.tsx create mode 100644 packages/atlas/src/components/_channel/CreateChannelModal/index.ts delete mode 100644 packages/atlas/src/components/_overlays/SignInDialogContent/SignInDialogContent.styles.ts delete mode 100644 packages/atlas/src/components/_overlays/SignInDialogContent/SignInDialogContent.tsx delete mode 100644 packages/atlas/src/components/_overlays/SignInDialogContent/index.ts create mode 100644 packages/atlas/src/components/_templates/EntitySettingTemplate.tsx create mode 100644 packages/atlas/src/hooks/useChannelForm.ts rename packages/atlas/src/{views/studio/CreateEditChannelView/CreateEditChannelView.hooks.ts => hooks/useChannelFormSubmit.ts} (88%) create mode 100644 packages/atlas/src/hooks/useCreateMember.ts create mode 100644 packages/atlas/src/hooks/useDebounceValue.ts delete mode 100644 packages/atlas/src/hooks/useDisplaySignInDialog.tsx create mode 100644 packages/atlas/src/hooks/useHidePasswordInInput.tsx create mode 100644 packages/atlas/src/hooks/useUniqueMemberHandle.ts create mode 100644 packages/atlas/src/providers/auth/auth.helpers.ts create mode 100644 packages/atlas/src/providers/auth/auth.hooks.ts create mode 100644 packages/atlas/src/providers/auth/auth.provider.tsx create mode 100644 packages/atlas/src/providers/auth/auth.store.ts create mode 100644 packages/atlas/src/providers/auth/auth.types.ts create mode 100644 packages/atlas/src/providers/joystream/index.ts delete mode 100644 packages/atlas/src/providers/user/user.helpers.ts delete mode 100644 packages/atlas/src/providers/user/user.store.ts create mode 100644 packages/atlas/src/providers/wallet/wallet.helpers.ts create mode 100644 packages/atlas/src/providers/wallet/wallet.hooks.ts create mode 100644 packages/atlas/src/providers/wallet/wallet.provider.tsx create mode 100644 packages/atlas/src/providers/wallet/wallet.store.ts create mode 100644 packages/atlas/src/providers/wallet/wallet.types.ts create mode 100644 packages/atlas/src/providers/ypp/ypp.types.ts create mode 100644 packages/atlas/src/types/react-detectable-overflow.d.ts create mode 100644 packages/atlas/src/utils/text.ts create mode 100644 packages/atlas/src/views/global/YppLandingView/YppAuthorizationModal/YppAuthorizationSteps/YppAuthorizationRequirementsStep/useGetYppChannelRequirements.ts rename packages/atlas/src/views/global/YppLandingView/YppAuthorizationModal/{YppAuthorizationModal.hooks.tsx => useYppGoogleAuth.tsx} (81%) create mode 100644 packages/atlas/src/views/global/YppLandingView/YppLandingView.types.ts create mode 100644 packages/atlas/src/views/global/YppLandingView/useGetYppLastVerifiedChannels.ts rename packages/atlas/src/views/global/YppLandingView/{YppLandingView.hooks.ts => useGetYppSyncedChannels.ts} (57%) delete mode 100644 packages/atlas/src/views/playground/Playgrounds/PlaygroundIndirectSignInDialog.tsx create mode 100644 packages/atlas/src/views/playground/Playgrounds/PlaygroundSignUp.tsx delete mode 100644 packages/atlas/src/views/studio/CreateEditChannelView/CreateEditChannelView.styles.ts delete mode 100644 packages/atlas/src/views/studio/CreateEditChannelView/CreateEditChannelView.tsx delete mode 100644 packages/atlas/src/views/studio/CreateEditChannelView/index.ts create mode 100644 packages/atlas/src/views/studio/MyChannelView/MyChannelView.styles.ts create mode 100644 packages/atlas/src/views/studio/MyChannelView/MyChannelView.tsx create mode 100644 packages/atlas/src/views/studio/MyChannelView/index.ts create mode 100644 packages/atlas/src/views/studio/MyChannelView/tabs/StudioChannelGeneralTab/StudioChannelGeneralTab.styles.ts create mode 100644 packages/atlas/src/views/studio/MyChannelView/tabs/StudioChannelGeneralTab/StudioChannelGeneralTab.tsx create mode 100644 packages/atlas/src/views/studio/MyChannelView/tabs/StudioChannelGeneralTab/index.ts delete mode 100644 packages/atlas/src/views/viewer/EditMembershipView/index.ts create mode 100644 packages/atlas/src/views/viewer/MembershipSettingsView/ChangePasswordDialog.tsx create mode 100644 packages/atlas/src/views/viewer/MembershipSettingsView/ExportSeedDialog.tsx rename packages/atlas/src/views/viewer/{EditMembershipView/EditMembershipView.styles.ts => MembershipSettingsView/MembershipPublicProfile/MembershipPublicProfile.styles.ts} (76%) rename packages/atlas/src/views/viewer/{EditMembershipView/EditMembershipView.tsx => MembershipSettingsView/MembershipPublicProfile/MembershipPublicProfile.tsx} (77%) create mode 100644 packages/atlas/src/views/viewer/MembershipSettingsView/MembershipPublicProfile/index.ts create mode 100644 packages/atlas/src/views/viewer/MembershipSettingsView/MembershipSettingsView.styles.ts create mode 100644 packages/atlas/src/views/viewer/MembershipSettingsView/MembershipSettingsView.tsx create mode 100644 packages/atlas/src/views/viewer/MembershipSettingsView/MembershipWallet/MembershipWallet.styles.ts create mode 100644 packages/atlas/src/views/viewer/MembershipSettingsView/MembershipWallet/MembershipWallet.tsx create mode 100644 packages/atlas/src/views/viewer/MembershipSettingsView/MembershipWallet/index.ts create mode 100644 packages/atlas/src/views/viewer/MembershipSettingsView/index.ts diff --git a/packages/atlas/atlas.config.yml b/packages/atlas/atlas.config.yml index 875bb9eb61..27a0ea5eee 100644 --- a/packages/atlas/atlas.config.yml +++ b/packages/atlas/atlas.config.yml @@ -1,5 +1,5 @@ general: - appName: Atlas # Application name - used in the copy throughout the app, in index.html, open graph meta tags, etc. Don't use env variables here + appName: Gleev # Application name - used in the copy throughout the app, in index.html, open graph meta tags, etc. Don't use env variables here appDescription: 'The streaming platform empowering viewers, creators, and builders. Built on and operated by the Joystream blockchain and DAO.' # Application description - used in index.html meta tags appTagline: 'The streaming platform empowering viewers, creators, and builders. Built on and operated by the Joystream blockchain and DAO.' appId: '$VITE_APP_ID' # App ID for Apps as first-class citizens diff --git a/packages/atlas/package.json b/packages/atlas/package.json index 1f17fed6a9..2f7a0f2575 100644 --- a/packages/atlas/package.json +++ b/packages/atlas/package.json @@ -51,11 +51,13 @@ "awesome-debounce-promise": "^2.1.0", "axios": "^1.2.1", "bezier-easing": "^2.1.0", + "bip39": "^3.1.0", "blake3": "2.1.7", "bn.js": "^5.2.1", "buffer": "^6.0.3", "comlink": "^4.3.1", "cropperjs": "^1.5.13", + "crypto-js": "^4.1.1", "date-fns": "^2.29.3", "downshift": "^7.0.4", "graphql": "^16.6.0", @@ -70,6 +72,7 @@ "rc-slider": "^10.1.0", "react": "^18.2.0", "react-datepicker": "^4.8.0", + "react-detectable-overflow": "^0.7.1", "react-dom": "^18.2.0", "react-dropzone": "^14.2.3", "react-helmet": "^6.1.0", @@ -122,6 +125,7 @@ "@testing-library/react": "^13.4.0", "@types/aos": "^3.0.4", "@types/bn.js": "^5.1.1", + "@types/crypto-js": "^4.1.1", "@types/js-yaml": "^4.0.5", "@types/loadable__component": "^5.13.4", "@types/lodash-es": "^4.17.6", diff --git a/packages/atlas/src/.env b/packages/atlas/src/.env index a40cc7cdb0..becfa4554c 100644 --- a/packages/atlas/src/.env +++ b/packages/atlas/src/.env @@ -17,9 +17,6 @@ VITE_AVATAR_SERVICE_URL=https://atlas-services.joystream.org/avatars VITE_ASSET_LOGS_URL= VITE_GEOLOCATION_SERVICE_URL=https://geolocation.joystream.org VITE_HCAPTCHA_SITE_KEY=41cae189-7676-4f6b-aa56-635be26d3ceb -VITE_GOOGLE_CONSOLE_CLIENT_ID= -VITE_YOUTUBE_SYNC_API_URL= -VITE_YOUTUBE_COLLABORATOR_MEMBER_ID= # YPP configuration VITE_GOOGLE_CONSOLE_CLIENT_ID=246331758613-rc1psegmsr9l4e33nqu8rre3gno5dsca.apps.googleusercontent.com @@ -40,12 +37,14 @@ VITE_PRODUCTION_NODE_URL=wss://rpc.joystream.org:9944 VITE_PRODUCTION_FAUCET_URL=https://faucet.joystream.org/member-faucet/register # Development env URLs - this is the default configuration if VITE_ENV != production -VITE_DEVELOPMENT_ORION_URL=https://atlas-dev.joystream.org/orion-v2/graphql +VITE_DEVELOPMENT_ORION_AUTH_URL=https://atlas-dev.joystream.org/orion-auth/api/v1 +VITE_DEVELOPMENT_ORION_URL=https://atlas-dev.joystream.org/orion-api/graphql VITE_DEVELOPMENT_QUERY_NODE_SUBSCRIPTION_URL=wss://atlas-dev.joystream.org/orion-v2/graphql VITE_DEVELOPMENT_NODE_URL=wss://atlas-dev.joystream.org/ws-rpc VITE_DEVELOPMENT_FAUCET_URL=https://atlas-dev.joystream.org/member-faucet/register # Experimental env URLs +VITE_NEXT_ORION_AUTH_URL= VITE_NEXT_ORION_URL=https://atlas-next.joystream.org/orion/graphql VITE_NEXT_QUERY_NODE_SUBSCRIPTION_URL=wss://atlas-next.joystream.org/orion/graphql VITE_NEXT_NODE_URL=wss://atlas-next.joystream.org/ws-rpc @@ -55,4 +54,4 @@ VITE_NEXT_FAUCET_URL=https://atlas-next.joystream.org/member-faucet/register VITE_LOCAL_ORION_URL=http://localhost:6116/graphql VITE_LOCAL_QUERY_NODE_SUBSCRIPTION_URL=ws://localhost:8081/graphql VITE_LOCAL_NODE_URL=ws://localhost:9944/ws-rpc -VITE_LOCAL_FAUCET_URL=http://localhost:3002/register +VITE_LOCAL_FAUCET_URL=http://localhost:3002/register \ No newline at end of file diff --git a/packages/atlas/src/App.tsx b/packages/atlas/src/App.tsx index 59fe84cd77..0c64ba7215 100644 --- a/packages/atlas/src/App.tsx +++ b/packages/atlas/src/App.tsx @@ -1,7 +1,7 @@ import { AnalyticsManager } from '@/AnalyticsManager' import { CommonProviders } from '@/CommonProviders' import { WelcomeDialog } from '@/components/WelcomeDialog' -import { SignInModal } from '@/components/_auth/SignInModal' +import { AuthModals } from '@/components/_auth/AuthModals' import { JoystreamManager } from '@/providers/joystream/joystream.manager' import { JoystreamProvider } from '@/providers/joystream/joystream.provider' import { NftActionsProvider } from '@/providers/nftActions/nftActions.provider' @@ -25,7 +25,7 @@ export const App = () => { - + diff --git a/packages/atlas/src/CommonProviders.tsx b/packages/atlas/src/CommonProviders.tsx index d246512407..838be2c20b 100644 --- a/packages/atlas/src/CommonProviders.tsx +++ b/packages/atlas/src/CommonProviders.tsx @@ -8,10 +8,12 @@ import { createApolloClient } from '@/api' import { useGetKillSwitch } from '@/api/hooks/admin' import { AdminModal } from '@/components/_overlays/AdminModal' import { OperatorsContextProvider } from '@/providers/assets/assets.provider' +import { AuthProvider } from '@/providers/auth/auth.provider' import { ConfirmationModalProvider } from '@/providers/confirmationModal' import { OverlayManagerProvider } from '@/providers/overlayManager' import { SegmentAnalyticsProvider } from '@/providers/segmentAnalytics/segment.provider' import { UserProvider } from '@/providers/user/user.provider' +import { WalletProvider } from '@/providers/wallet/wallet.provider' import { GlobalStyles } from '@/styles' import { FORCE_MAINTENANCE } from './config/env' @@ -33,20 +35,24 @@ export const CommonProviders: FC = ({ children }) => { - - - - - - - - {children} - - - - - - + + + + + + + + + + {children} + + + + + + + + diff --git a/packages/atlas/src/api/client/index.ts b/packages/atlas/src/api/client/index.ts index a367a72812..7cc6917454 100644 --- a/packages/atlas/src/api/client/index.ts +++ b/packages/atlas/src/api/client/index.ts @@ -31,7 +31,7 @@ const createApolloClient = () => { }) ) - const orionLink = ApolloLink.from([delayLink, new HttpLink({ uri: ORION_GRAPHQL_URL })]) + const orionLink = ApolloLink.from([delayLink, new HttpLink({ uri: ORION_GRAPHQL_URL, credentials: 'include' })]) const operationSplitLink = split( ({ query, setContext }) => { diff --git a/packages/atlas/src/api/queries/__generated__/accounts.generated.tsx b/packages/atlas/src/api/queries/__generated__/accounts.generated.tsx new file mode 100644 index 0000000000..9cfc473143 --- /dev/null +++ b/packages/atlas/src/api/queries/__generated__/accounts.generated.tsx @@ -0,0 +1,65 @@ +import { gql } from '@apollo/client' +import * as Apollo from '@apollo/client' + +import * as Types from './baseTypes.generated' + +const defaultOptions = {} as const +export type GetCurrentAccountQueryVariables = Types.Exact<{ [key: string]: never }> + +export type GetCurrentAccountQuery = { + __typename?: 'Query' + accountData: { + __typename?: 'AccountData' + email: string + id: string + isEmailConfirmed: boolean + joystreamAccount: string + membershipId: string + } +} + +export const GetCurrentAccountDocument = gql` + query GetCurrentAccount { + accountData { + email + id + isEmailConfirmed + joystreamAccount + membershipId + } + } +` + +/** + * __useGetCurrentAccountQuery__ + * + * To run a query within a React component, call `useGetCurrentAccountQuery` and pass it any options that fit your needs. + * When your component renders, `useGetCurrentAccountQuery` returns an object from Apollo Client that contains loading, error, and data properties + * you can use to render your UI. + * + * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options; + * + * @example + * const { data, loading, error } = useGetCurrentAccountQuery({ + * variables: { + * }, + * }); + */ +export function useGetCurrentAccountQuery( + baseOptions?: Apollo.QueryHookOptions +) { + const options = { ...defaultOptions, ...baseOptions } + return Apollo.useQuery(GetCurrentAccountDocument, options) +} +export function useGetCurrentAccountLazyQuery( + baseOptions?: Apollo.LazyQueryHookOptions +) { + const options = { ...defaultOptions, ...baseOptions } + return Apollo.useLazyQuery( + GetCurrentAccountDocument, + options + ) +} +export type GetCurrentAccountQueryHookResult = ReturnType +export type GetCurrentAccountLazyQueryHookResult = ReturnType +export type GetCurrentAccountQueryResult = Apollo.QueryResult diff --git a/packages/atlas/src/api/queries/accounts.graphql b/packages/atlas/src/api/queries/accounts.graphql new file mode 100644 index 0000000000..61b6054e81 --- /dev/null +++ b/packages/atlas/src/api/queries/accounts.graphql @@ -0,0 +1,9 @@ +query GetCurrentAccount { + accountData { + email + id + isEmailConfirmed + joystreamAccount + membershipId + } +} diff --git a/packages/atlas/src/assets/animations/confetti.json b/packages/atlas/src/assets/animations/confetti.json index aeb66c3a82..1c51d5fa4e 100644 --- a/packages/atlas/src/assets/animations/confetti.json +++ b/packages/atlas/src/assets/animations/confetti.json @@ -1 +1 @@ -{"v":"5.5.6","fr":60,"ip":0,"op":300,"w":609,"h":812,"nm":"lottie (mobile)","ddd":0,"assets":[{"id":"comp_0","layers":[{"ddd":0,"ind":1,"ty":0,"nm":"_small-side","refId":"comp_1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[218,320,0],"ix":2},"a":{"a":0,"k":[400,400,0],"ix":1},"s":{"a":0,"k":[-100,100,100],"ix":6}},"ao":0,"w":800,"h":800,"ip":15,"op":234,"st":15,"bm":0}]},{"id":"comp_1","layers":[{"ddd":0,"ind":1,"ty":4,"nm":"streamer b","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":166,"ix":10},"p":{"a":0,"k":[554,664,0],"ix":2},"a":{"a":0,"k":[-157,-245,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[-1.685,-13.314],[0,-14.907],[0,-15.206],[0,-14.907],[0,-14.907],[0,-15.206],[1.754,-14.206],[-3.934,-9.465]],"o":[[-3.895,8.562],[1.872,14.789],[0,15.206],[0,14.907],[0,14.907],[0,15.206],[0,14.314],[-1.803,14.605],[0,0]],"v":[[-156.5,-406],[-166.5,-367],[-146.5,-327],[-166.5,-286],[-146.5,-246],[-166.5,-206],[-146.5,-165],[-166.5,-127],[-156.5,-84]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.2627450980392157,0.2,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":9,"s":[4]},{"t":57,"s":[0.5]}],"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":14,"s":[0]},{"t":57,"s":[100]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":9,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":14,"s":[35]},{"t":57,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":9,"op":58,"st":9,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"streamer a","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":167,"ix":10},"p":{"a":0,"k":[532,582,0],"ix":2},"a":{"a":0,"k":[-157,-245,0],"ix":1},"s":{"a":0,"k":[-100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[-1.685,-13.314],[0,-14.907],[0,-15.206],[0,-14.907],[0,-14.907],[0,-15.206],[1.754,-14.206],[-3.934,-9.465]],"o":[[-3.895,8.562],[1.872,14.789],[0,15.206],[0,14.907],[0,14.907],[0,15.206],[0,14.314],[-1.803,14.605],[0,0]],"v":[[-156.5,-406],[-166.5,-367],[-146.5,-327],[-166.5,-286],[-146.5,-246],[-166.5,-206],[-146.5,-165],[-166.5,-127],[-156.5,-84]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.12156862745098039,0.5647058823529412,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":5,"s":[4]},{"t":48,"s":[0.5]}],"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":10,"s":[0]},{"t":48,"s":[100]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":5,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":10,"s":[35]},{"t":48,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":5,"op":49,"st":5,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"circle a","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":1,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":29,"s":[321.019]},{"t":158,"s":[1800]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":1,"s":[599.5,838,0],"to":[-30,-106.667,0],"ti":[46.667,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":29,"s":[419.5,198,0],"to":[-46.667,0,0],"ti":[0,0,0]},{"t":158,"s":[319.5,838,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0,0]},"t":1,"s":[50,100,100]},{"i":{"x":[0.833,0.833,0.833],"y":[1,0.833,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":29,"s":[100,100,100]},{"t":128,"s":[100,50,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[16,16],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[0.12156862745098039,0.8431372549019608,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":1,"op":159,"st":1,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"circle b","sr":1,"ks":{"o":{"a":0,"k":50,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":3,"s":[0]},{"t":128,"s":[1440]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":3,"s":[599.5,838,0],"to":[-26.667,-93.333,0],"ti":[66.667,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":21,"s":[439.5,278,0],"to":[-66.667,0,0],"ti":[0,0,0]},{"t":128,"s":[199.5,838,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0,0]},"t":3,"s":[50,100,100]},{"i":{"x":[0.833,0.833,0.833],"y":[1,0.833,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":21,"s":[100,100,100]},{"t":98,"s":[100,50,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[16,16],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.12156862745098039,0.5647058823529412,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":3,"op":129,"st":3,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"star a","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":1,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":31,"s":[343.949]},{"t":158,"s":[1800]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":1,"s":[596.087,836.292,0],"to":[-36.098,-100,0],"ti":[52.765,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":31,"s":[379.5,236.292,0],"to":[-52.765,0,0],"ti":[0,0,0]},{"t":158,"s":[279.5,836.292,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0,0]},"t":1,"s":[50,100,100]},{"i":{"x":[0.833,0.833,0.833],"y":[1,0.833,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":31,"s":[100,100,100]},{"t":128,"s":[100,50,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"sr","sy":1,"d":1,"pt":{"a":0,"k":5,"ix":3},"p":{"a":0,"k":[0,0],"ix":4},"r":{"a":0,"k":0,"ix":5},"ir":{"a":0,"k":5,"ix":6},"is":{"a":0,"k":0,"ix":8},"or":{"a":0,"k":12,"ix":7},"os":{"a":0,"k":0,"ix":9},"ix":1,"nm":"Polystar Path 1","mn":"ADBE Vector Shape - Star","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.2627450980392157,0.2,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Polystar 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":1,"op":159,"st":1,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"star b","sr":1,"ks":{"o":{"a":0,"k":50,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":3,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":23,"s":[288]},{"t":128,"s":[1800]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":3,"s":[596.087,836.292,0],"to":[-39.431,-113.333,0],"ti":[66.098,1.667,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":23,"s":[359.5,156.292,0],"to":[-66.098,-1.667,0],"ti":[0,0,0]},{"t":128,"s":[199.5,826.292,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0,0]},"t":3,"s":[50,100,100]},{"i":{"x":[0.833,0.833,0.833],"y":[1,0.833,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":23,"s":[100,100,100]},{"t":98,"s":[100,50,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"sr","sy":1,"d":1,"pt":{"a":0,"k":5,"ix":3},"p":{"a":0,"k":[0,0],"ix":4},"r":{"a":0,"k":0,"ix":5},"ir":{"a":0,"k":5,"ix":6},"is":{"a":0,"k":0,"ix":8},"or":{"a":0,"k":12,"ix":7},"os":{"a":0,"k":0,"ix":9},"ix":1,"nm":"Polystar Path 1","mn":"ADBE Vector Shape - Star","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0.5215686274509804,0.27058823529411763,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Polystar 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":3,"op":129,"st":3,"bm":0},{"ddd":0,"ind":7,"ty":4,"nm":"rec a","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":33,"s":[381.468]},{"t":218,"s":[2520]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":0,"s":[599.5,842,0],"to":[-23.333,-100,0],"ti":[41.333,1.333,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":33,"s":[459.5,242,0],"to":[-41.333,-1.333,0],"ti":[0,0,0]},{"t":218,"s":[351.5,834,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0,0]},"t":0,"s":[50,100,100]},{"i":{"x":[0.833,0.833,0.833],"y":[1,0.833,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":33,"s":[100,100,100]},{"t":188,"s":[100,50,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[16,8],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[0.12156862745098039,0.8431372549019608,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":219,"st":0,"bm":0},{"ddd":0,"ind":8,"ty":4,"nm":"rec b","sr":1,"ks":{"o":{"a":0,"k":50,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":2,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":25,"s":[262.857]},{"t":191,"s":[2160]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":2,"s":[599.5,842,0],"to":[-23.333,-113.333,0],"ti":[74,5,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":25,"s":[459.5,162,0],"to":[-74,-5,0],"ti":[0,0,0]},{"t":191,"s":[155.5,812,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0,0]},"t":2,"s":[50,100,100]},{"i":{"x":[0.833,0.833,0.833],"y":[1,0.833,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":25,"s":[100,100,100]},{"t":161,"s":[100,50,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[16,8],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.12156862745098039,0.5647058823529412,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":2,"op":192,"st":2,"bm":0},{"ddd":0,"ind":9,"ty":4,"nm":"square a","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":35,"s":[462.385]},{"t":218,"s":[2880]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":0,"s":[599.5,838,0],"to":[-43.333,-123.333,0],"ti":[60,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":35,"s":[339.5,98,0],"to":[-60,0,0],"ti":[0,0,0]},{"t":218,"s":[239.5,838,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0,0]},"t":0,"s":[50,100,100]},{"i":{"x":[0.833,0.833,0.833],"y":[1,0.833,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":35,"s":[100,100,100]},{"t":188,"s":[100,50,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[16,16],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.2627450980392157,0.2,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":219,"st":0,"bm":0},{"ddd":0,"ind":10,"ty":4,"nm":"square b","sr":1,"ks":{"o":{"a":0,"k":50,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":2,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":27,"s":[285.714]},{"t":191,"s":[2160]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":2,"s":[599.5,838,0],"to":[-30,-120,0],"ti":[75,3.333,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":27,"s":[419.5,118,0],"to":[-75,-3.333,0],"ti":[0,0,0]},{"t":191,"s":[149.5,818,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0,0]},"t":2,"s":[50,100,100]},{"i":{"x":[0.833,0.833,0.833],"y":[1,0.833,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":27,"s":[100,100,100]},{"t":161,"s":[100,50,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[16,16],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.12156862745098039,0.5647058823529412,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":2,"op":192,"st":2,"bm":0},{"ddd":0,"ind":11,"ty":4,"nm":"streamer b 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":171,"ix":10},"p":{"a":0,"k":[543,427,0],"ix":2},"a":{"a":0,"k":[-157,-245,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[-1.685,-13.314],[0,-14.907],[0,-15.206],[0,-14.907],[0,-14.907],[0,-15.206],[1.754,-14.206],[-3.934,-9.465]],"o":[[-3.895,8.562],[1.872,14.789],[0,15.206],[0,14.907],[0,14.907],[0,15.206],[0,14.314],[-1.803,14.605],[0,0]],"v":[[-156.5,-406],[-166.5,-367],[-146.5,-327],[-166.5,-286],[-146.5,-246],[-166.5,-206],[-146.5,-165],[-166.5,-127],[-156.5,-84]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.12156862745098039,0.8431372549019608,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":13,"s":[4]},{"t":61,"s":[0.5]}],"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":18,"s":[0]},{"t":61,"s":[100]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":13,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":18,"s":[35]},{"t":61,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":13,"op":62,"st":13,"bm":0},{"ddd":0,"ind":12,"ty":4,"nm":"streamer a 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":151,"ix":10},"p":{"a":0,"k":[454,444,0],"ix":2},"a":{"a":0,"k":[-157,-245,0],"ix":1},"s":{"a":0,"k":[-100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[-1.685,-13.314],[0,-14.907],[0,-15.206],[0,-14.907],[0,-14.907],[0,-15.206],[1.754,-14.206],[-3.934,-9.465]],"o":[[-3.895,8.562],[1.872,14.789],[0,15.206],[0,14.907],[0,14.907],[0,15.206],[0,14.314],[-1.803,14.605],[0,0]],"v":[[-156.5,-406],[-166.5,-367],[-146.5,-327],[-166.5,-286],[-146.5,-246],[-166.5,-206],[-146.5,-165],[-166.5,-127],[-156.5,-84]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.2627450980392157,0.2,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":10,"s":[4]},{"t":53,"s":[0.5]}],"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":15,"s":[0]},{"t":53,"s":[100]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":10,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":15,"s":[35]},{"t":53,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":10,"op":54,"st":10,"bm":0},{"ddd":0,"ind":13,"ty":4,"nm":"circle a 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":1,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":29,"s":[-371.368]},{"t":191,"s":[-2520]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":1,"s":[599.5,838,0],"to":[-53.333,-113.333,0],"ti":[56.667,-3.333,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":29,"s":[279.5,158,0],"to":[-56.667,3.333,0],"ti":[0,0,0]},{"t":191,"s":[259.5,858,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0,0.167,0]},"t":1,"s":[100,50,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":29,"s":[100,100,100]},{"t":161,"s":[50,100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[16,16],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[0.12156862745098039,0.8431372549019608,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":1,"op":192,"st":1,"bm":0},{"ddd":0,"ind":14,"ty":4,"nm":"circle b 2","sr":1,"ks":{"o":{"a":0,"k":50,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":3,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":21,"s":[-250.839]},{"t":158,"s":[-2160]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":3,"s":[599.5,838,0],"to":[-53.333,-100,0],"ti":[63,-7,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":21,"s":[279.5,238,0],"to":[-63,7,0],"ti":[0,0,0]},{"t":158,"s":[221.5,880,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0,0.167,0]},"t":3,"s":[100,50,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":21,"s":[100,100,100]},{"t":128,"s":[50,100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[16,16],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0.5215686274509804,0.27058823529411763,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":3,"op":159,"st":3,"bm":0},{"ddd":0,"ind":15,"ty":4,"nm":"star a 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":1,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":31,"s":[-397.895]},{"t":191,"s":[-2520]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":1,"s":[596.087,836.292,0],"to":[-9.431,-113.333,0],"ti":[42.765,-3.333,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":31,"s":[539.5,156.292,0],"to":[-42.765,3.333,0],"ti":[0,0,0]},{"t":191,"s":[339.5,856.292,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0,0.167,0]},"t":1,"s":[100,50,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":31,"s":[100,100,100]},{"t":161,"s":[50,100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"sr","sy":1,"d":1,"pt":{"a":0,"k":5,"ix":3},"p":{"a":0,"k":[0,0],"ix":4},"r":{"a":0,"k":0,"ix":5},"ir":{"a":0,"k":5,"ix":6},"is":{"a":0,"k":0,"ix":8},"or":{"a":0,"k":12,"ix":7},"os":{"a":0,"k":0,"ix":9},"ix":1,"nm":"Polystar Path 1","mn":"ADBE Vector Shape - Star","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.2627450980392157,0.2,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Polystar 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":1,"op":192,"st":1,"bm":0},{"ddd":0,"ind":16,"ty":4,"nm":"star b 2","sr":1,"ks":{"o":{"a":0,"k":50,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":3,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":23,"s":[-278.71]},{"t":158,"s":[-2160]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":3,"s":[596.087,836.292,0],"to":[-12.765,-96.667,0],"ti":[52.765,-3.333,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":23,"s":[519.5,256.292,0],"to":[-52.765,3.333,0],"ti":[0,0,0]},{"t":158,"s":[279.5,856.292,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0,0.167,0]},"t":3,"s":[100,50,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":23,"s":[100,100,100]},{"t":128,"s":[50,100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"sr","sy":1,"d":1,"pt":{"a":0,"k":5,"ix":3},"p":{"a":0,"k":[0,0],"ix":4},"r":{"a":0,"k":0,"ix":5},"ir":{"a":0,"k":5,"ix":6},"is":{"a":0,"k":0,"ix":8},"or":{"a":0,"k":12,"ix":7},"os":{"a":0,"k":0,"ix":9},"ix":1,"nm":"Polystar Path 1","mn":"ADBE Vector Shape - Star","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.12156862745098039,0.5647058823529412,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Polystar 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":3,"op":159,"st":3,"bm":0},{"ddd":0,"ind":17,"ty":4,"nm":"rec a 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":33,"s":[-556.875]},{"t":128,"s":[-2160]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":0,"s":[599.5,842,0],"to":[-16.667,-120,0],"ti":[66.667,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":33,"s":[499.5,122,0],"to":[-66.667,0,0],"ti":[0,0,0]},{"t":128,"s":[199.5,842,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0,0.167,0]},"t":0,"s":[100,50,100]},{"i":{"x":[0.833,0.833,0.833],"y":[1,0.833,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":33,"s":[100,100,100]},{"t":98,"s":[100,50,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[16,8],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.2627450980392157,0.2,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":129,"st":0,"bm":0},{"ddd":0,"ind":18,"ty":4,"nm":"rec b 2","sr":1,"ks":{"o":{"a":0,"k":50,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":2,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":25,"s":[-306.667]},{"t":218,"s":[-2880]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":2,"s":[599.5,842,0],"to":[-22.62,-109.87,0],"ti":[2.877,-2.055,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":25,"s":[339.5,262,0],"to":[-51.333,36.667,0],"ti":[0,0,0]},{"t":218,"s":[219.5,862,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0,0.167,0]},"t":2,"s":[100,50,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":25,"s":[100,100,100]},{"t":188,"s":[50,100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[16,8],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[0.12156862745098039,0.8431372549019608,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":2,"op":219,"st":2,"bm":0},{"ddd":0,"ind":19,"ty":4,"nm":"square a 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":35,"s":[-590.625]},{"t":128,"s":[-2160]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":0,"s":[599.5,838,0],"to":[-20,-90,0],"ti":[36.667,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":35,"s":[479.5,298,0],"to":[-36.667,0,0],"ti":[0,0,0]},{"t":128,"s":[379.5,838,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0,0.167,0]},"t":0,"s":[100,50,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":35,"s":[100,100,100]},{"t":98,"s":[50,100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[16,16],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[0.12156862745098039,0.8431372549019608,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":129,"st":0,"bm":0},{"ddd":0,"ind":20,"ty":4,"nm":"square b 2","sr":1,"ks":{"o":{"a":0,"k":50,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":2,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":27,"s":[-333.333]},{"t":218,"s":[-2880]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":2,"s":[599.5,838,0],"to":[-10,-103.333,0],"ti":[50,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":27,"s":[539.5,218,0],"to":[-50,0,0],"ti":[0,0,0]},{"t":218,"s":[299.5,838,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0,0.167,0]},"t":2,"s":[100,50,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":27,"s":[100,100,100]},{"t":188,"s":[50,100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[16,16],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.12156862745098039,0.5647058823529412,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":2,"op":219,"st":2,"bm":0}]},{"id":"comp_2","layers":[{"ddd":0,"ind":1,"ty":0,"nm":"_small-side","refId":"comp_1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[260,320,0],"ix":2},"a":{"a":0,"k":[400,400,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":800,"h":800,"ip":0,"op":219,"st":0,"bm":0}]},{"id":"comp_3","layers":[{"ddd":0,"ind":1,"ty":0,"nm":"left","refId":"comp_4","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[400,400,0],"ix":2},"a":{"a":0,"k":[400,400,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":800,"h":800,"ip":13,"op":313,"st":13,"bm":0},{"ddd":0,"ind":2,"ty":0,"nm":"right","refId":"comp_4","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[400,400,0],"ix":2},"a":{"a":0,"k":[400,400,0],"ix":1},"s":{"a":0,"k":[-100,100,100],"ix":6}},"ao":0,"w":800,"h":800,"ip":30,"op":330,"st":30,"bm":0}]},{"id":"comp_4","layers":[{"ddd":0,"ind":1,"ty":4,"nm":"streamer a 4","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":14,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":13,"s":[219.178,-190.096,0],"to":[-95.333,426.667,0],"ti":[167.333,-560.667,0]},{"t":173,"s":[179.178,989.904,0]}],"ix":2},"a":{"a":0,"k":[-157,-245,0],"ix":1},"s":{"a":0,"k":[-100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[-1.685,-13.314],[0,-14.907],[0,-15.206],[0,-14.907],[0,-14.907],[0,-15.206],[1.754,-14.206],[-3.934,-9.465]],"o":[[-3.895,8.562],[1.872,14.789],[0,15.206],[0,14.907],[0,14.907],[0,15.206],[0,14.314],[-1.803,14.605],[0,0]],"v":[[-156.5,-406],[-166.5,-367],[-146.5,-327],[-166.5,-286],[-146.5,-246],[-166.5,-206],[-146.5,-165],[-166.5,-127],[-156.5,-84]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.12156862745098039,0.5647058823529412,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":13,"s":[4]},{"t":176,"s":[0.5]}],"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":18,"s":[0]},{"t":176,"s":[100]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":13,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":18,"s":[40]},{"t":176,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":13,"op":174,"st":13,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"streamer b 4","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-1.458,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":5,"s":[269.863,-175.455,0],"to":[-110,415.333,0],"ti":[216,-599.333,0]},{"t":173,"s":[69.863,984.545,0]}],"ix":2},"a":{"a":0,"k":[-157,-245,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[-1.685,-13.314],[0,-14.907],[0,-15.206],[0,-14.907],[0,-14.907],[0,-15.206],[1.754,-14.206],[-3.934,-9.465]],"o":[[-3.895,8.562],[1.872,14.789],[0,15.206],[0,14.907],[0,14.907],[0,15.206],[0,14.314],[-1.803,14.605],[0,0]],"v":[[-156.5,-406],[-166.5,-367],[-146.5,-327],[-166.5,-286],[-146.5,-246],[-166.5,-206],[-146.5,-165],[-166.5,-127],[-156.5,-84]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.2627450980392157,0.2,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":5,"s":[4]},{"t":173,"s":[0.5]}],"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":10,"s":[0]},{"t":173,"s":[100]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":5,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":10,"s":[40]},{"t":173,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":5,"op":174,"st":5,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"circle a 4","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":8,"s":[0]},{"t":155,"s":[1800]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":8,"s":[325.643,-26.292,0],"to":[-101.333,75.667,0],"ti":[15.333,-507.667,0]},{"t":155,"s":[125.643,835.708,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":8,"s":[50,100,100]},{"t":155,"s":[100,50,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[16,16],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[0.12156862745098039,0.8431372549019608,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":8,"op":156,"st":-7,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"circle b 4","sr":1,"ks":{"o":{"a":0,"k":50,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":2,"s":[0]},{"t":215,"s":[2520]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":2,"s":[619.5,-26.292,0],"to":[-138,77.667,0],"ti":[-2,-497.667,0]},{"t":215,"s":[259.5,835.708,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":2,"s":[50,100,100]},{"t":215,"s":[100,50,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[16,16],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.12156862745098039,0.5647058823529412,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":2,"op":216,"st":-13,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"star a 4","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":6,"s":[0]},{"t":245,"s":[2880]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":6,"s":[376.929,-28,0],"to":[-213.333,157.667,0],"ti":[173.333,-127.667,0]},{"t":245,"s":[116.929,834,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":6,"s":[50,100,100]},{"t":245,"s":[100,50,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"sr","sy":1,"d":1,"pt":{"a":0,"k":5,"ix":3},"p":{"a":0,"k":[0,0],"ix":4},"r":{"a":0,"k":0,"ix":5},"ir":{"a":0,"k":5,"ix":6},"is":{"a":0,"k":0,"ix":8},"or":{"a":0,"k":12,"ix":7},"os":{"a":0,"k":0,"ix":9},"ix":1,"nm":"Polystar Path 1","mn":"ADBE Vector Shape - Star","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.2627450980392157,0.2,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Polystar 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":6,"op":246,"st":-9,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"star b 4","sr":1,"ks":{"o":{"a":0,"k":50,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":2,"s":[0]},{"t":125,"s":[1800]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":2,"s":[171.786,-28,0],"to":[0,0,0],"ti":[-161.333,-275.667,0]},{"t":125,"s":[251.786,834,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":2,"s":[50,100,100]},{"t":125,"s":[100,50,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"sr","sy":1,"d":1,"pt":{"a":0,"k":5,"ix":3},"p":{"a":0,"k":[0,0],"ix":4},"r":{"a":0,"k":0,"ix":5},"ir":{"a":0,"k":5,"ix":6},"is":{"a":0,"k":0,"ix":8},"or":{"a":0,"k":12,"ix":7},"os":{"a":0,"k":0,"ix":9},"ix":1,"nm":"Polystar Path 1","mn":"ADBE Vector Shape - Star","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0.5215686274509804,0.27058823529411763,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Polystar 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":2,"op":126,"st":-13,"bm":0},{"ddd":0,"ind":7,"ty":4,"nm":"rec a 4","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":4,"s":[0]},{"t":185,"s":[2520]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":4,"s":[428.214,-22.292,0],"to":[-167.333,119.667,0],"ti":[-130.667,-315.667,0]},{"t":185,"s":[228.214,839.708,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":4,"s":[50,100,100]},{"t":185,"s":[100,50,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[16,8],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[0.12156862745098039,0.8431372549019608,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":4,"op":186,"st":-11,"bm":0},{"ddd":0,"ind":8,"ty":4,"nm":"rec b 4","sr":1,"ks":{"o":{"a":0,"k":50,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":6,"s":[0]},{"t":245,"s":[2880]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":6,"s":[223.071,-22.292,0],"to":[0,0,0],"ti":[-92.571,-383.708,0]},{"t":245,"s":[223.071,839.708,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":6,"s":[50,100,100]},{"t":245,"s":[100,50,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[16,8],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.12156862745098039,0.5647058823529412,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":6,"op":246,"st":-9,"bm":0},{"ddd":0,"ind":9,"ty":4,"nm":"square a 4","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":4,"s":[0]},{"t":217,"s":[2520]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":4,"s":[120.5,-26.292,0],"to":[13,430.305,0],"ti":[52.221,-418.892,0]},{"t":217,"s":[198.5,833.708,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":4,"s":[50,100,100]},{"t":217,"s":[100,50,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[16,16],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.2627450980392157,0.2,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":4,"op":218,"st":-11,"bm":0},{"ddd":0,"ind":10,"ty":4,"nm":"square b 4","sr":1,"ks":{"o":{"a":0,"k":50,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":8,"s":[0]},{"t":215,"s":[2520]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":8,"s":[274.357,-26.292,0],"to":[157.333,415.667,0],"ti":[22.667,-253.667,0]},{"t":215,"s":[114.357,835.708,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":8,"s":[50,100,100]},{"t":215,"s":[100,50,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[16,16],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.2627450980392157,0.2,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":8,"op":216,"st":-7,"bm":0},{"ddd":0,"ind":11,"ty":4,"nm":"streamer a 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":3,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[275.178,-173.096,0],"to":[-87.333,413.333,0],"ti":[177.333,-643.333,0]},{"t":185,"s":[219.178,974.904,0]}],"ix":2},"a":{"a":0,"k":[-157,-245,0],"ix":1},"s":{"a":0,"k":[-100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[-1.685,-13.314],[0,-14.907],[0,-15.206],[0,-14.907],[0,-14.907],[0,-15.206],[1.754,-14.206],[-3.934,-9.465]],"o":[[-3.895,8.562],[1.872,14.789],[0,15.206],[0,14.907],[0,14.907],[0,15.206],[0,14.314],[-1.803,14.605],[0,0]],"v":[[-156.5,-406],[-166.5,-367],[-146.5,-327],[-166.5,-286],[-146.5,-246],[-166.5,-206],[-146.5,-165],[-166.5,-127],[-156.5,-84]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.2627450980392157,0.2,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[4]},{"t":177,"s":[0.5]}],"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":5,"s":[0]},{"t":177,"s":[100]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":5,"s":[40]},{"t":177,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":186,"st":0,"bm":0},{"ddd":0,"ind":12,"ty":4,"nm":"streamer b 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":9,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":11,"s":[199.863,74.545,0],"to":[-13.363,405.455,0],"ti":[179.333,-430.667,0]},{"t":217,"s":[139.863,834.545,0]}],"ix":2},"a":{"a":0,"k":[-157,-245,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[-1.685,-13.314],[0,-14.907],[0,-15.206],[0,-14.907],[0,-14.907],[0,-15.206],[1.754,-14.206],[-3.934,-9.465]],"o":[[-3.895,8.562],[1.872,14.789],[0,15.206],[0,14.907],[0,14.907],[0,15.206],[0,14.314],[-1.803,14.605],[0,0]],"v":[[-156.5,-406],[-166.5,-367],[-146.5,-327],[-166.5,-286],[-146.5,-246],[-166.5,-206],[-146.5,-165],[-166.5,-127],[-156.5,-84]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.12156862745098039,0.8431372549019608,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":11,"s":[4]},{"t":199,"s":[0.5]}],"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":16,"s":[0]},{"t":199,"s":[100]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":11,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":16,"s":[40]},{"t":199,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":11,"op":218,"st":11,"bm":0},{"ddd":0,"ind":13,"ty":4,"nm":"circle a 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":2,"s":[0]},{"t":125,"s":[-1800]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":2,"s":[365.643,-26.292,0],"to":[-101.333,75.667,0],"ti":[15.333,-507.667,0]},{"t":125,"s":[165.643,835.708,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":2,"s":[100,50,100]},{"t":125,"s":[50,100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[16,16],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[0.12156862745098039,0.8431372549019608,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":2,"op":126,"st":-13,"bm":0},{"ddd":0,"ind":14,"ty":4,"nm":"circle b 3","sr":1,"ks":{"o":{"a":0,"k":50,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":8,"s":[0]},{"t":245,"s":[-2880]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":8,"s":[519.5,-26.292,0],"to":[-138,77.667,0],"ti":[-2,-497.667,0]},{"t":245,"s":[159.5,835.708,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":8,"s":[100,50,100]},{"t":245,"s":[50,100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[16,16],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0.5215686274509804,0.27058823529411763,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":8,"op":246,"st":-7,"bm":0},{"ddd":0,"ind":15,"ty":4,"nm":"star a 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":6,"s":[0]},{"t":245,"s":[-2880]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":6,"s":[416.929,-28,0],"to":[-213.333,157.667,0],"ti":[173.333,-127.667,0]},{"t":245,"s":[156.929,834,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":6,"s":[100,50,100]},{"t":245,"s":[50,100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"sr","sy":1,"d":1,"pt":{"a":0,"k":5,"ix":3},"p":{"a":0,"k":[0,0],"ix":4},"r":{"a":0,"k":0,"ix":5},"ir":{"a":0,"k":5,"ix":6},"is":{"a":0,"k":0,"ix":8},"or":{"a":0,"k":12,"ix":7},"os":{"a":0,"k":0,"ix":9},"ix":1,"nm":"Polystar Path 1","mn":"ADBE Vector Shape - Star","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.2627450980392157,0.2,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Polystar 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":6,"op":246,"st":-9,"bm":0},{"ddd":0,"ind":16,"ty":4,"nm":"star b 3","sr":1,"ks":{"o":{"a":0,"k":50,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":8,"s":[0]},{"t":155,"s":[-2160]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":8,"s":[211.786,-28,0],"to":[0,0,0],"ti":[-161.333,-275.667,0]},{"t":155,"s":[291.786,834,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":8,"s":[100,50,100]},{"t":155,"s":[50,100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"sr","sy":1,"d":1,"pt":{"a":0,"k":5,"ix":3},"p":{"a":0,"k":[0,0],"ix":4},"r":{"a":0,"k":0,"ix":5},"ir":{"a":0,"k":5,"ix":6},"is":{"a":0,"k":0,"ix":8},"or":{"a":0,"k":12,"ix":7},"os":{"a":0,"k":0,"ix":9},"ix":1,"nm":"Polystar Path 1","mn":"ADBE Vector Shape - Star","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.12156862745098039,0.5647058823529412,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Polystar 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":8,"op":156,"st":-7,"bm":0},{"ddd":0,"ind":17,"ty":4,"nm":"rec a 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":4,"s":[0]},{"t":185,"s":[-2160]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":4,"s":[468.214,-22.292,0],"to":[-167.333,119.667,0],"ti":[-130.667,-315.667,0]},{"t":185,"s":[268.214,839.708,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":4,"s":[100,50,100]},{"t":185,"s":[50,100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[16,8],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.2627450980392157,0.2,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":4,"op":186,"st":-11,"bm":0},{"ddd":0,"ind":18,"ty":4,"nm":"rec b 3","sr":1,"ks":{"o":{"a":0,"k":50,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":6,"s":[0]},{"t":245,"s":[-2880]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":6,"s":[263.071,-22.292,0],"to":[0,143.667,0],"ti":[-114.571,-267.708,0]},{"t":245,"s":[263.071,839.708,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":6,"s":[100,50,100]},{"t":245,"s":[50,100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[16,8],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[0.12156862745098039,0.8431372549019608,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":6,"op":246,"st":-9,"bm":0},{"ddd":0,"ind":19,"ty":4,"nm":"square a 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":2,"s":[0]},{"t":217,"s":[-2520]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":2,"s":[160.5,-26.292,0],"to":[13,430.305,0],"ti":[52.221,-418.892,0]},{"t":217,"s":[238.5,833.708,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":2,"s":[100,50,100]},{"t":217,"s":[50,100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[16,16],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[0.12156862745098039,0.8431372549019608,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":2,"op":218,"st":-13,"bm":0},{"ddd":0,"ind":20,"ty":4,"nm":"square b 3","sr":1,"ks":{"o":{"a":0,"k":50,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":4,"s":[0]},{"t":185,"s":[-2160]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":4,"s":[314.357,-26.292,0],"to":[157.333,415.667,0],"ti":[22.667,-253.667,0]},{"t":185,"s":[154.357,835.708,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":4,"s":[100,50,100]},{"t":185,"s":[50,100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[16,16],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.12156862745098039,0.5647058823529412,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":4,"op":186,"st":-11,"bm":0}]}],"layers":[{"ddd":0,"ind":1,"ty":0,"nm":"cannon (small - left)","refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[76,451.99999999999994,0],"ix":2},"a":{"a":0,"k":[0,360,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":480,"h":720,"ip":0,"op":300,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":0,"nm":"cannon (small - right)","refId":"comp_2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[533,451.99999999999994,0],"ix":2},"a":{"a":0,"k":[479.994,360,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":480,"h":720,"ip":0,"op":300,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":0,"nm":"cannon (small - top)","refId":"comp_3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[304,408,0],"ix":2},"a":{"a":0,"k":[400,400,0],"ix":1},"s":{"a":0,"k":[102,102,100],"ix":6}},"ao":0,"w":800,"h":800,"ip":0,"op":300,"st":0,"bm":0}],"markers":[]} +{"nm":"The Confetti_pop","mn":"","layers":[{"ty":4,"nm":"Shape Layer 35","mn":"","sr":1,"st":-7.00000028511585,"op":593.000024153385,"ip":-7.00000028511585,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"tt":0,"hasMask":false,"td":0,"ao":0,"ks":{"a":{"a":0,"k":[-115.887,-116.559,0],"ix":1},"s":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[13,13,100],"t":5},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[44,44,100],"t":18.8275007668598}],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[338.825,394.429,0],"ix":2},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":351.254,"ix":10}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Rectangle 1","ix":1,"cix":2,"np":3,"it":[{"ty":"rc","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Rect","nm":"Rectangle Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"s":{"a":0,"k":[34.227,32.883],"ix":2}},{"ty":"st","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":100,"ix":4},"w":{"a":1,"k":[{"o":{"x":0.167,"y":0},"i":{"x":0.833,"y":1},"s":[0],"t":5},{"o":{"x":0.536,"y":0},"i":{"x":0,"y":0.995},"s":[38],"t":11.173},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":25.0000010182709}],"ix":5},"d":[],"c":{"a":0,"k":[0.6235,0.6745,1],"ix":3}},{"ty":"fl","bm":0,"cl":"","ln":"","hd":true,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.6235,0.6745,1],"ix":4},"r":1,"o":{"a":0,"k":0,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[-115.887,-116.559],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":0},{"ty":4,"nm":"Shape Layer 34","mn":"","sr":1,"st":-9.00000036657752,"op":591.000024071923,"ip":-9.00000036657752,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"tt":0,"hasMask":false,"td":0,"ao":0,"ks":{"a":{"a":0,"k":[-115.887,-116.559,0],"ix":1},"s":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[0,0,100],"t":14},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[44,44,100],"t":20.9137508518345}],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[393.5,217.5,0],"ix":2},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":207.752,"ix":10}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Rectangle 1","ix":1,"cix":2,"np":3,"it":[{"ty":"rc","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Rect","nm":"Rectangle Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"s":{"a":0,"k":[34.227,32.883],"ix":2}},{"ty":"st","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":100,"ix":4},"w":{"a":1,"k":[{"o":{"x":0.536,"y":0},"i":{"x":0,"y":0.995},"s":[38],"t":17.086},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":24.00000097754}],"ix":5},"d":[],"c":{"a":0,"k":[0.6235,0.6745,1],"ix":3}},{"ty":"fl","bm":0,"cl":"","ln":"","hd":true,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.3529,0.3451,1],"ix":4},"r":1,"o":{"a":0,"k":0,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[-115.887,-116.559],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":1},{"ty":4,"nm":"Shape Layer 33","mn":"","sr":1,"st":3.00000012219251,"op":603.000024560694,"ip":3.00000012219251,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"tt":0,"hasMask":false,"td":0,"ao":0,"ks":{"a":{"a":0,"k":[-115.887,-116.559,0],"ix":1},"s":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[0,0,100],"t":10},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[44,44,100],"t":23.827500970514}],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[127.33,307.877,0],"ix":2},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":305.632,"ix":10}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Rectangle 1","ix":1,"cix":2,"np":3,"it":[{"ty":"rc","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Rect","nm":"Rectangle Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"s":{"a":0,"k":[34.227,32.883],"ix":2}},{"ty":"st","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":100,"ix":4},"w":{"a":1,"k":[{"o":{"x":0.536,"y":0},"i":{"x":0,"y":0.995},"s":[38],"t":16.173},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":28.0000011404634}],"ix":5},"d":[],"c":{"a":0,"k":[0.3529,0.3451,1],"ix":3}},{"ty":"fl","bm":0,"cl":"","ln":"","hd":true,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.3529,0.3451,1],"ix":4},"r":1,"o":{"a":0,"k":0,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[-115.887,-116.559],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":2},{"ty":4,"nm":"Shape Layer 30","mn":"","sr":1,"st":0,"op":600.000024438501,"ip":0,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"tt":0,"hasMask":false,"td":0,"ao":0,"ks":{"a":{"a":0,"k":[-118.896,-196.896,0],"ix":1},"s":{"a":0,"k":[32,32,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.098,"y":1},"s":[138.104,877.104,0],"t":3},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[138.104,387.104,0],"t":20.0000008146167}],"ix":2},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[100],"t":21},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":28.0000011404634}],"ix":11},"r":{"a":0,"k":0,"ix":10}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Ellipse 1","ix":1,"cix":2,"np":3,"it":[{"ty":"el","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Ellipse","nm":"Ellipse Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"s":{"a":0,"k":[22.207,22.207],"ix":2}},{"ty":"st","bm":0,"cl":"","ln":"","hd":true,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":0,"ix":4},"w":{"a":0,"k":14,"ix":5},"d":[],"c":{"a":0,"k":[1,1,1],"ix":3}},{"ty":"fl","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.5333,0.5647,1],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[-118.896,-196.896],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":3},{"ty":4,"nm":"Shape Layer 28","mn":"","sr":1,"st":2.00000008146167,"op":602.000024519963,"ip":2.00000008146167,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"tt":0,"hasMask":false,"td":0,"ao":0,"ks":{"a":{"a":0,"k":[-118.896,-196.896,0],"ix":1},"s":{"a":0,"k":[52,52,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.098,"y":1},"s":[291.104,890.104,0],"t":5},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[291.104,400.104,0],"t":22.0000008960784}],"ix":2},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[100],"t":19},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":26.0000010590017}],"ix":11},"r":{"a":0,"k":0,"ix":10}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Ellipse 1","ix":1,"cix":2,"np":3,"it":[{"ty":"el","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Ellipse","nm":"Ellipse Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"s":{"a":0,"k":[22.207,22.207],"ix":2}},{"ty":"st","bm":0,"cl":"","ln":"","hd":true,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":0,"ix":4},"w":{"a":0,"k":14,"ix":5},"d":[],"c":{"a":0,"k":[1,1,1],"ix":3}},{"ty":"fl","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.4824,0.5412,0.5843],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[-118.896,-196.896],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":4},{"ty":4,"nm":"Shape Layer 27","mn":"","sr":1,"st":0,"op":600.000024438501,"ip":0,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"tt":0,"hasMask":false,"td":0,"ao":0,"ks":{"a":{"a":0,"k":[-118.896,-196.896,0],"ix":1},"s":{"a":0,"k":[32,32,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.098,"y":1},"s":[39.104,689.104,0],"t":3},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[39.104,199.104,0],"t":20.0000008146167}],"ix":2},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[100],"t":18},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":25.0000010182709}],"ix":11},"r":{"a":0,"k":0,"ix":10}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Ellipse 1","ix":1,"cix":2,"np":3,"it":[{"ty":"el","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Ellipse","nm":"Ellipse Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"s":{"a":0,"k":[22.207,22.207],"ix":2}},{"ty":"st","bm":0,"cl":"","ln":"","hd":true,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":0,"ix":4},"w":{"a":0,"k":14,"ix":5},"d":[],"c":{"a":0,"k":[1,1,1],"ix":3}},{"ty":"fl","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.3529,0.3451,1],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[-118.896,-196.896],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":5},{"ty":4,"nm":"Shape Layer 26","mn":"","sr":1,"st":1.00000004073083,"op":601.000024479232,"ip":1.00000004073083,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"tt":0,"hasMask":false,"td":0,"ao":0,"ks":{"a":{"a":0,"k":[-118.896,-196.896,0],"ix":1},"s":{"a":0,"k":[32,32,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.098,"y":1},"s":[583.104,742.104,0],"t":4},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[583.104,252.104,0],"t":21.0000008553475}],"ix":2},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[100],"t":17},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":24.00000097754}],"ix":11},"r":{"a":0,"k":0,"ix":10}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Ellipse 1","ix":1,"cix":2,"np":3,"it":[{"ty":"el","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Ellipse","nm":"Ellipse Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"s":{"a":0,"k":[22.207,22.207],"ix":2}},{"ty":"st","bm":0,"cl":"","ln":"","hd":true,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":0,"ix":4},"w":{"a":0,"k":14,"ix":5},"d":[],"c":{"a":0,"k":[1,1,1],"ix":3}},{"ty":"fl","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.3529,0.3451,1],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[-118.896,-196.896],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":6},{"ty":4,"nm":"Shape Layer 25","mn":"","sr":1,"st":3.00000012219251,"op":603.000024560694,"ip":3.00000012219251,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"tt":0,"hasMask":false,"td":0,"ao":0,"ks":{"a":{"a":0,"k":[-118.896,-196.896,0],"ix":1},"s":{"a":0,"k":[32,32,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.098,"y":1},"s":[529.104,839.104,0],"t":6},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[529.104,349.104,0],"t":23.0000009368092}],"ix":2},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[100],"t":18},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":30.0000012219251}],"ix":11},"r":{"a":0,"k":0,"ix":10}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Ellipse 1","ix":1,"cix":2,"np":3,"it":[{"ty":"el","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Ellipse","nm":"Ellipse Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"s":{"a":0,"k":[22.207,22.207],"ix":2}},{"ty":"st","bm":0,"cl":"","ln":"","hd":true,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":0,"ix":4},"w":{"a":0,"k":14,"ix":5},"d":[],"c":{"a":0,"k":[1,1,1],"ix":3}},{"ty":"fl","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.4824,0.5412,0.5843],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[-118.896,-196.896],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":7},{"ty":4,"nm":"Shape Layer 24","mn":"","sr":1,"st":1.00000004073083,"op":601.000024479232,"ip":1.00000004073083,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"tt":0,"hasMask":false,"td":0,"ao":0,"ks":{"a":{"a":0,"k":[-118.896,-196.896,0],"ix":1},"s":{"a":0,"k":[32,32,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.098,"y":1},"s":[510.104,668.104,0],"t":4},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[510.104,178.104,0],"t":21.0000008553475}],"ix":2},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[100],"t":18},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":25.0000010182709}],"ix":11},"r":{"a":0,"k":0,"ix":10}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Ellipse 1","ix":1,"cix":2,"np":3,"it":[{"ty":"el","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Ellipse","nm":"Ellipse Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"s":{"a":0,"k":[22.207,22.207],"ix":2}},{"ty":"st","bm":0,"cl":"","ln":"","hd":true,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":0,"ix":4},"w":{"a":0,"k":14,"ix":5},"d":[],"c":{"a":0,"k":[1,1,1],"ix":3}},{"ty":"fl","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.5333,0.5647,1],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[-118.896,-196.896],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":8},{"ty":4,"nm":"Shape Layer 23","mn":"","sr":1,"st":0,"op":600.000024438501,"ip":0,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"tt":0,"hasMask":false,"td":0,"ao":0,"ks":{"a":{"a":0,"k":[-118.896,-196.896,0],"ix":1},"s":{"a":0,"k":[52,52,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.098,"y":1},"s":[444.104,772.104,0],"t":3},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[444.104,282.104,0],"t":20.0000008146167}],"ix":2},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[100],"t":17},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":24.00000097754}],"ix":11},"r":{"a":0,"k":0,"ix":10}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Ellipse 1","ix":1,"cix":2,"np":3,"it":[{"ty":"el","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Ellipse","nm":"Ellipse Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"s":{"a":0,"k":[22.207,22.207],"ix":2}},{"ty":"st","bm":0,"cl":"","ln":"","hd":true,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":0,"ix":4},"w":{"a":0,"k":14,"ix":5},"d":[],"c":{"a":0,"k":[1,1,1],"ix":3}},{"ty":"fl","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.5333,0.5647,1],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[-118.896,-196.896],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":9},{"ty":4,"nm":"Shape Layer 22","mn":"","sr":1,"st":4.00000016292334,"op":604.000024601424,"ip":4.00000016292334,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"tt":0,"hasMask":false,"td":0,"ao":0,"ks":{"a":{"a":0,"k":[-118.896,-196.896,0],"ix":1},"s":{"a":0,"k":[32,32,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.098,"y":1},"s":[22.104,813.104,0],"t":7},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[22.104,323.104,0],"t":24.00000097754}],"ix":2},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[100],"t":17},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":24.00000097754}],"ix":11},"r":{"a":0,"k":0,"ix":10}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Ellipse 1","ix":1,"cix":2,"np":3,"it":[{"ty":"el","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Ellipse","nm":"Ellipse Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"s":{"a":0,"k":[22.207,22.207],"ix":2}},{"ty":"st","bm":0,"cl":"","ln":"","hd":true,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":0,"ix":4},"w":{"a":0,"k":14,"ix":5},"d":[],"c":{"a":0,"k":[1,1,1],"ix":3}},{"ty":"fl","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.4824,0.5412,0.5843],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[-118.896,-196.896],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":10},{"ty":4,"nm":"Shape Layer 29","mn":"","sr":1,"st":2.00000008146167,"op":602.000024519963,"ip":2.00000008146167,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"tt":0,"hasMask":false,"td":0,"ao":0,"ks":{"a":{"a":0,"k":[-118.896,-196.896,0],"ix":1},"s":{"a":0,"k":[57,57,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.098,"y":1},"s":[258.104,642.104,0],"t":5},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[258.104,152.104,0],"t":22.0000008960784}],"ix":2},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[100],"t":16},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":23.0000009368092}],"ix":11},"r":{"a":0,"k":0,"ix":10}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Ellipse 1","ix":1,"cix":2,"np":3,"it":[{"ty":"el","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Ellipse","nm":"Ellipse Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"s":{"a":0,"k":[22.207,22.207],"ix":2}},{"ty":"st","bm":0,"cl":"","ln":"","hd":true,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":0,"ix":4},"w":{"a":0,"k":14,"ix":5},"d":[],"c":{"a":0,"k":[1,1,1],"ix":3}},{"ty":"fl","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.6235,0.6745,1],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[-118.896,-196.896],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":11},{"ty":4,"nm":"Shape Layer 21","mn":"","sr":1,"st":0,"op":600.000024438501,"ip":0,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"tt":0,"hasMask":false,"td":0,"ao":0,"ks":{"a":{"a":0,"k":[-118.896,-196.896,0],"ix":1},"s":{"a":0,"k":[52,52,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.098,"y":1},"s":[144.104,707.104,0],"t":3},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[144.104,217.104,0],"t":20.0000008146167}],"ix":2},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[100],"t":16},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":23.0000009368092}],"ix":11},"r":{"a":0,"k":0,"ix":10}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Ellipse 1","ix":1,"cix":2,"np":3,"it":[{"ty":"el","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Ellipse","nm":"Ellipse Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"s":{"a":0,"k":[22.207,22.207],"ix":2}},{"ty":"st","bm":0,"cl":"","ln":"","hd":true,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":0,"ix":4},"w":{"a":0,"k":14,"ix":5},"d":[],"c":{"a":0,"k":[1,1,1],"ix":3}},{"ty":"fl","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.6235,0.6745,1],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[-118.896,-196.896],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":12},{"ty":4,"nm":"Shape Layer 32","mn":"","sr":1,"st":-1.00000004073083,"op":599.00002439777,"ip":-1.00000004073083,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"tt":0,"hasMask":false,"td":0,"ao":0,"ks":{"a":{"a":0,"k":[-248,76,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[479,303,0],"ix":2},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Shape 1","ix":1,"cix":2,"np":3,"it":[{"ty":"sh","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,42.746]],"o":[[0,-42.761],[0,0]],"v":[[-247,78],[-247,-93]]},"ix":2}},{"ty":"st","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":8,"ix":5},"d":[],"c":{"a":0,"k":[0.4824,0.5412,0.5843],"ix":3}},{"ty":"fl","bm":0,"cl":"","ln":"","hd":true,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.3529,0.3451,1],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[0,0],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]},{"ty":"tm","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Filter - Trim","nm":"Trim Paths 1","ix":2,"e":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0,"y":1},"s":[0],"t":6.286},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100],"t":20.0000008146167}],"ix":2},"o":{"a":0,"k":0,"ix":3},"s":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0,"y":0.998},"s":[0],"t":12.286},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100],"t":26.0000010590017}],"ix":1},"m":1}],"ind":13},{"ty":4,"nm":"Shape Layer 31","mn":"","sr":1,"st":-3.00000012219251,"op":597.000024316308,"ip":-3.00000012219251,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"tt":0,"hasMask":false,"td":0,"ao":0,"ks":{"a":{"a":0,"k":[-248,76,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[239,493,0],"ix":2},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Shape 1","ix":1,"cix":2,"np":3,"it":[{"ty":"sh","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,42.746]],"o":[[0,-42.761],[0,0]],"v":[[-247,78],[-247,-93]]},"ix":2}},{"ty":"st","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":8,"ix":5},"d":[],"c":{"a":0,"k":[0.3529,0.3451,1],"ix":3}},{"ty":"fl","bm":0,"cl":"","ln":"","hd":true,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.3529,0.3451,1],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[0,0],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]},{"ty":"tm","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Filter - Trim","nm":"Trim Paths 1","ix":2,"e":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0,"y":1},"s":[0],"t":4.286},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100],"t":18.000000733155}],"ix":2},"o":{"a":0,"k":0,"ix":3},"s":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0,"y":0.998},"s":[0],"t":10.286},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100],"t":24.00000097754}],"ix":1},"m":1}],"ind":14},{"ty":4,"nm":"Shape Layer 20","mn":"","sr":1,"st":0,"op":600.000024438501,"ip":0,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"tt":0,"hasMask":false,"td":0,"ao":0,"ks":{"a":{"a":0,"k":[-248,76,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[59,383,0],"ix":2},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Shape 1","ix":1,"cix":2,"np":3,"it":[{"ty":"sh","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,18.847]],"o":[[0,-18.458],[0,0]],"v":[[-247,78],[-247,3]]},"ix":2}},{"ty":"st","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":5,"ix":5},"d":[],"c":{"a":0,"k":[0.4824,0.5412,0.5843],"ix":3}},{"ty":"fl","bm":0,"cl":"","ln":"","hd":true,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.3529,0.3451,1],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[0,0],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]},{"ty":"tm","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Filter - Trim","nm":"Trim Paths 1","ix":2,"e":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0,"y":1},"s":[0],"t":7.286},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100],"t":21.0000008553475}],"ix":2},"o":{"a":0,"k":0,"ix":3},"s":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0,"y":0.998},"s":[0],"t":13.286},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100],"t":27.0000010997325}],"ix":1},"m":1}],"ind":15},{"ty":4,"nm":"Shape Layer 19","mn":"","sr":1,"st":0,"op":600.000024438501,"ip":0,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"tt":0,"hasMask":false,"td":0,"ao":0,"ks":{"a":{"a":0,"k":[-125,220,0],"ix":1},"s":{"a":0,"k":[100.794,100.794,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[482,417,0],"ix":2},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Shape 1","ix":1,"cix":2,"np":3,"it":[{"ty":"sh","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[-0.252,19.35]],"o":[[0.252,-19.335],[0,0]],"v":[[-125,220],[-123.992,142.614]]},"ix":2}},{"ty":"st","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":16,"ix":5},"d":[],"c":{"a":0,"k":[0.3529,0.3451,1],"ix":3}},{"ty":"fl","bm":0,"cl":"","ln":"","hd":true,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.5333,0.5647,1],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[0,0],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]},{"ty":"tm","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Filter - Trim","nm":"Trim Paths 1","ix":2,"e":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0,"y":1},"s":[0],"t":3.286},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100],"t":17.0000006924242}],"ix":2},"o":{"a":0,"k":0,"ix":3},"s":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0,"y":0.998},"s":[0],"t":9.286},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100],"t":23.0000009368092}],"ix":1},"m":1}],"ind":16},{"ty":4,"nm":"Shape Layer 18","mn":"","sr":1,"st":0,"op":600.000024438501,"ip":0,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"tt":0,"hasMask":false,"td":0,"ao":0,"ks":{"a":{"a":0,"k":[-125,220,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[352,347,0],"ix":2},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Shape 1","ix":1,"cix":2,"np":3,"it":[{"ty":"sh","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[-0.253,31.5]],"o":[[0.241,-31.5],[0,0]],"v":[[-125,220],[-124,94]]},"ix":2}},{"ty":"st","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":12,"ix":5},"d":[],"c":{"a":0,"k":[0.5333,0.5647,1],"ix":3}},{"ty":"fl","bm":0,"cl":"","ln":"","hd":true,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.4824,0.5412,0.5843],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[0,0],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]},{"ty":"tm","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Filter - Trim","nm":"Trim Paths 1","ix":2,"e":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0,"y":1},"s":[0],"t":6},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100],"t":19.7137508029575}],"ix":2},"o":{"a":0,"k":0,"ix":3},"s":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0,"y":0.998},"s":[0],"t":12},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100],"t":25.7137510473425}],"ix":1},"m":1}],"ind":17},{"ty":4,"nm":"Shape Layer 17","mn":"","sr":1,"st":0,"op":600.000024438501,"ip":0,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"tt":0,"hasMask":false,"td":0,"ao":0,"ks":{"a":{"a":0,"k":[-125,220,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[182,437,0],"ix":2},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Shape 1","ix":1,"cix":2,"np":3,"it":[{"ty":"sh","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[-0.5,31.572]],"o":[[0.5,-31.284],[0,0]],"v":[[-125,220],[-123,94]]},"ix":2}},{"ty":"st","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":0,"ix":4},"w":{"a":0,"k":16,"ix":5},"d":[],"c":{"a":0,"k":[0.4824,0.5412,0.5843],"ix":3}},{"ty":"fl","bm":0,"cl":"","ln":"","hd":true,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.4824,0.5412,0.5843],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[0,0],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]},{"ty":"tm","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Filter - Trim","nm":"Trim Paths 1","ix":2,"e":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0,"y":1},"s":[0],"t":2},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100],"t":15.7137506400342}],"ix":2},"o":{"a":0,"k":0,"ix":3},"s":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0,"y":0.998},"s":[0],"t":8},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100],"t":21.7137508844192}],"ix":1},"m":1}],"ind":18},{"ty":4,"nm":"Shape Layer 13","mn":"","sr":1,"st":1.00000004073083,"op":601.000024479232,"ip":1.00000004073083,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"tt":0,"hasMask":false,"td":0,"ao":0,"ks":{"a":{"a":0,"k":[-115.887,-116.559,0],"ix":1},"s":{"a":0,"k":[44,44,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.098,"y":1},"s":[271,838,0],"t":4},{"o":{"x":0.333,"y":0},"i":{"x":0,"y":1},"s":[271,340,0],"t":21},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[271,350,0],"t":34.0000013848484}],"ix":2},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[100],"t":24},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":31.0000012626559}],"ix":11},"r":{"a":1,"k":[{"o":{"x":0.609,"y":0},"i":{"x":0,"y":1.002},"s":[0],"t":7},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[303],"t":31.0000012626559}],"ix":10}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Rectangle 1","ix":1,"cix":2,"np":3,"it":[{"ty":"rc","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Rect","nm":"Rectangle Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"s":{"a":0,"k":[34.227,32.883],"ix":2}},{"ty":"st","bm":0,"cl":"","ln":"","hd":true,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":0,"ix":4},"w":{"a":0,"k":2,"ix":5},"d":[],"c":{"a":0,"k":[1,1,1],"ix":3}},{"ty":"fl","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.3529,0.3451,1],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[-115.887,-116.559],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":19},{"ty":4,"nm":"Shape Layer 12","mn":"","sr":1,"st":0,"op":600.000024438501,"ip":0,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"tt":0,"hasMask":false,"td":0,"ao":0,"ks":{"a":{"a":0,"k":[-115.887,-116.559,0],"ix":1},"s":{"a":0,"k":[44,44,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.098,"y":1},"s":[426,858,0],"t":3},{"o":{"x":0.333,"y":0},"i":{"x":0,"y":1},"s":[426,360,0],"t":20},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[426,370,0],"t":33.0000013441176}],"ix":2},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[100],"t":23},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":30.0000012219251}],"ix":11},"r":{"a":1,"k":[{"o":{"x":0.609,"y":0},"i":{"x":0,"y":1.002},"s":[0],"t":6},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[303],"t":30.0000012219251}],"ix":10}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Rectangle 1","ix":1,"cix":2,"np":3,"it":[{"ty":"rc","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Rect","nm":"Rectangle Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"s":{"a":0,"k":[34.227,32.883],"ix":2}},{"ty":"st","bm":0,"cl":"","ln":"","hd":true,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":0,"ix":4},"w":{"a":0,"k":2,"ix":5},"d":[],"c":{"a":0,"k":[1,1,1],"ix":3}},{"ty":"fl","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.4824,0.5412,0.5843],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[-115.887,-116.559],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":20},{"ty":4,"nm":"Shape Layer 15","mn":"","sr":1,"st":2.00000008146167,"op":602.000024519963,"ip":2.00000008146167,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"tt":0,"hasMask":false,"td":0,"ao":0,"ks":{"a":{"a":0,"k":[-115.887,-116.559,0],"ix":1},"s":{"a":0,"k":[44,44,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.098,"y":1},"s":[557,692,0],"t":5},{"o":{"x":0.333,"y":0},"i":{"x":0,"y":1},"s":[557,194,0],"t":22},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[557,204,0],"t":35.0000014255792}],"ix":2},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[100],"t":25},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":32.0000013033867}],"ix":11},"r":{"a":1,"k":[{"o":{"x":0.609,"y":0},"i":{"x":0,"y":1.002},"s":[0],"t":8},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[303],"t":32.0000013033867}],"ix":10}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Rectangle 1","ix":1,"cix":2,"np":3,"it":[{"ty":"rc","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Rect","nm":"Rectangle Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"s":{"a":0,"k":[34.227,32.883],"ix":2}},{"ty":"st","bm":0,"cl":"","ln":"","hd":true,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":0,"ix":4},"w":{"a":0,"k":2,"ix":5},"d":[],"c":{"a":0,"k":[1,1,1],"ix":3}},{"ty":"fl","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.3529,0.3451,1],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[-115.887,-116.559],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":21},{"ty":4,"nm":"Shape Layer 14","mn":"","sr":1,"st":-1.00000004073083,"op":599.00002439777,"ip":-1.00000004073083,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"tt":0,"hasMask":false,"td":0,"ao":0,"ks":{"a":{"a":0,"k":[-115.887,-116.559,0],"ix":1},"s":{"a":0,"k":[44,44,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.098,"y":1},"s":[178,758,0],"t":2},{"o":{"x":0.333,"y":0},"i":{"x":0,"y":1},"s":[178,260,0],"t":19},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[178,270,0],"t":32.0000013033867}],"ix":2},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[100],"t":23},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":30.0000012219251}],"ix":11},"r":{"a":1,"k":[{"o":{"x":0.609,"y":0},"i":{"x":0,"y":1.002},"s":[0],"t":5},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[303],"t":29.0000011811942}],"ix":10}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Rectangle 1","ix":1,"cix":2,"np":3,"it":[{"ty":"rc","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Rect","nm":"Rectangle Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"s":{"a":0,"k":[34.227,32.883],"ix":2}},{"ty":"st","bm":0,"cl":"","ln":"","hd":true,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":0,"ix":4},"w":{"a":0,"k":2,"ix":5},"d":[],"c":{"a":0,"k":[1,1,1],"ix":3}},{"ty":"fl","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.3529,0.3451,1],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[-115.887,-116.559],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":22},{"ty":4,"nm":"Shape Layer 16","mn":"","sr":1,"st":3.00000012219251,"op":603.000024560694,"ip":3.00000012219251,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"tt":0,"hasMask":false,"td":0,"ao":0,"ks":{"a":{"a":0,"k":[-115.887,-116.559,0],"ix":1},"s":{"a":0,"k":[44,44,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.098,"y":1},"s":[573,818,0],"t":6},{"o":{"x":0.333,"y":0},"i":{"x":0,"y":1},"s":[573,320,0],"t":23},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[573,330,0],"t":36.0000014663101}],"ix":2},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[100],"t":25},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":32.0000013033867}],"ix":11},"r":{"a":1,"k":[{"o":{"x":0.609,"y":0},"i":{"x":0,"y":1.002},"s":[0],"t":9},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[303],"t":33.0000013441176}],"ix":10}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Rectangle 1","ix":1,"cix":2,"np":3,"it":[{"ty":"rc","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Rect","nm":"Rectangle Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"s":{"a":0,"k":[34.227,32.883],"ix":2}},{"ty":"st","bm":0,"cl":"","ln":"","hd":true,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":0,"ix":4},"w":{"a":0,"k":2,"ix":5},"d":[],"c":{"a":0,"k":[1,1,1],"ix":3}},{"ty":"fl","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.4824,0.5412,0.5843],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[-115.887,-116.559],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":23},{"ty":4,"nm":"Shape Layer 11","mn":"","sr":1,"st":-2.00000008146167,"op":598.000024357039,"ip":-2.00000008146167,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"tt":0,"hasMask":false,"td":0,"ao":0,"ks":{"a":{"a":0,"k":[-115.887,-116.559,0],"ix":1},"s":{"a":0,"k":[44,44,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.098,"y":1},"s":[103,848,0],"t":1},{"o":{"x":0.333,"y":0},"i":{"x":0,"y":1},"s":[103,350,0],"t":18},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[103,360,0],"t":31.0000012626559}],"ix":2},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[100],"t":23},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":30.0000012219251}],"ix":11},"r":{"a":1,"k":[{"o":{"x":0.609,"y":0},"i":{"x":0,"y":1.002},"s":[0],"t":4},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[303],"t":28.0000011404634}],"ix":10}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Rectangle 1","ix":1,"cix":2,"np":3,"it":[{"ty":"rc","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Rect","nm":"Rectangle Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"s":{"a":0,"k":[34.227,32.883],"ix":2}},{"ty":"st","bm":0,"cl":"","ln":"","hd":true,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":0,"ix":4},"w":{"a":0,"k":2,"ix":5},"d":[],"c":{"a":0,"k":[1,1,1],"ix":3}},{"ty":"fl","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.8549,0.8863,0.9216],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[-115.887,-116.559],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":24},{"ty":4,"nm":"Shape Layer 10","mn":"","sr":1,"st":1.00000004073083,"op":601.000024479232,"ip":1.00000004073083,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"tt":0,"hasMask":false,"td":0,"ao":0,"ks":{"a":{"a":0,"k":[-115.887,-116.559,0],"ix":1},"s":{"a":0,"k":[52,52,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.098,"y":1},"s":[509,629,0],"t":4},{"o":{"x":0.333,"y":0},"i":{"x":0,"y":1},"s":[509,131,0],"t":21},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[509,141,0],"t":34.0000013848484}],"ix":2},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[100],"t":22},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":29.0000011811942}],"ix":11},"r":{"a":1,"k":[{"o":{"x":0.609,"y":0},"i":{"x":0,"y":1.002},"s":[0],"t":7},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[303],"t":31.0000012626559}],"ix":10}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Rectangle 1","ix":1,"cix":2,"np":3,"it":[{"ty":"rc","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Rect","nm":"Rectangle Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"s":{"a":0,"k":[34.227,32.883],"ix":2}},{"ty":"st","bm":0,"cl":"","ln":"","hd":true,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":0,"ix":4},"w":{"a":0,"k":2,"ix":5},"d":[],"c":{"a":0,"k":[1,1,1],"ix":3}},{"ty":"fl","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.8549,0.8863,0.9216],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[-115.887,-116.559],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":25},{"ty":4,"nm":"Shape Layer 9","mn":"","sr":1,"st":4.00000016292334,"op":604.000024601424,"ip":4.00000016292334,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"tt":0,"hasMask":false,"td":0,"ao":0,"ks":{"a":{"a":0,"k":[-115.887,-116.559,0],"ix":1},"s":{"a":0,"k":[52,52,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.098,"y":1},"s":[508,782,0],"t":7},{"o":{"x":0.333,"y":0},"i":{"x":0,"y":1},"s":[508,284,0],"t":24},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[508,294,0],"t":37.0000015070409}],"ix":2},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[100],"t":26},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":33.0000013441176}],"ix":11},"r":{"a":1,"k":[{"o":{"x":0.609,"y":0},"i":{"x":0,"y":1.002},"s":[0],"t":10},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[303],"t":34.0000013848484}],"ix":10}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Rectangle 1","ix":1,"cix":2,"np":3,"it":[{"ty":"rc","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Rect","nm":"Rectangle Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"s":{"a":0,"k":[34.227,32.883],"ix":2}},{"ty":"st","bm":0,"cl":"","ln":"","hd":true,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":0,"ix":4},"w":{"a":0,"k":2,"ix":5},"d":[],"c":{"a":0,"k":[1,1,1],"ix":3}},{"ty":"fl","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.6235,0.6745,1],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[-115.887,-116.559],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":26},{"ty":4,"nm":"Shape Layer 8","mn":"","sr":1,"st":-1.00000004073083,"op":599.00002439777,"ip":-1.00000004073083,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"tt":0,"hasMask":false,"td":0,"ao":0,"ks":{"a":{"a":0,"k":[-115.887,-116.559,0],"ix":1},"s":{"a":0,"k":[52,52,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.098,"y":1},"s":[449,705,0],"t":2},{"o":{"x":0.333,"y":0},"i":{"x":0,"y":1},"s":[449,207,0],"t":19},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[449,217,0],"t":32.0000013033867}],"ix":2},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[100],"t":23},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":30.0000012219251}],"ix":11},"r":{"a":1,"k":[{"o":{"x":0.609,"y":0},"i":{"x":0,"y":1.002},"s":[0],"t":5},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[303],"t":29.0000011811942}],"ix":10}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Rectangle 1","ix":1,"cix":2,"np":3,"it":[{"ty":"rc","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Rect","nm":"Rectangle Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"s":{"a":0,"k":[34.227,32.883],"ix":2}},{"ty":"st","bm":0,"cl":"","ln":"","hd":true,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":0,"ix":4},"w":{"a":0,"k":2,"ix":5},"d":[],"c":{"a":0,"k":[1,1,1],"ix":3}},{"ty":"fl","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.4824,0.5412,0.5843],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[-115.887,-116.559],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":27},{"ty":4,"nm":"Shape Layer 7","mn":"","sr":1,"st":1.00000004073083,"op":601.000024479232,"ip":1.00000004073083,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"tt":0,"hasMask":false,"td":0,"ao":0,"ks":{"a":{"a":0,"k":[-115.887,-116.559,0],"ix":1},"s":{"a":0,"k":[52,52,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.098,"y":1},"s":[32,768,0],"t":4},{"o":{"x":0.333,"y":0},"i":{"x":0,"y":1},"s":[32,270,0],"t":21},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[32,280,0],"t":34.0000013848484}],"ix":2},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[100],"t":24},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":31.0000012626559}],"ix":11},"r":{"a":1,"k":[{"o":{"x":0.609,"y":0},"i":{"x":0,"y":1.002},"s":[0],"t":7},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[303],"t":31.0000012626559}],"ix":10}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Rectangle 1","ix":1,"cix":2,"np":3,"it":[{"ty":"rc","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Rect","nm":"Rectangle Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"s":{"a":0,"k":[34.227,32.883],"ix":2}},{"ty":"st","bm":0,"cl":"","ln":"","hd":true,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":0,"ix":4},"w":{"a":0,"k":2,"ix":5},"d":[],"c":{"a":0,"k":[1,1,1],"ix":3}},{"ty":"fl","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.3529,0.3451,1],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[-115.887,-116.559],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":28},{"ty":4,"nm":"Shape Layer 6","mn":"","sr":1,"st":-1.00000004073083,"op":599.00002439777,"ip":-1.00000004073083,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"tt":0,"hasMask":false,"td":0,"ao":0,"ks":{"a":{"a":0,"k":[-115.887,-116.559,0],"ix":1},"s":{"a":0,"k":[52,52,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.098,"y":1},"s":[96,642,0],"t":2},{"o":{"x":0.333,"y":0},"i":{"x":0,"y":1},"s":[96,144,0],"t":19},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[96,154,0],"t":32.0000013033867}],"ix":2},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[100],"t":22},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":29.0000011811942}],"ix":11},"r":{"a":1,"k":[{"o":{"x":0.609,"y":0},"i":{"x":0,"y":1.002},"s":[0],"t":5},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[303],"t":29.0000011811942}],"ix":10}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Rectangle 1","ix":1,"cix":2,"np":3,"it":[{"ty":"rc","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Rect","nm":"Rectangle Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"s":{"a":0,"k":[34.227,32.883],"ix":2}},{"ty":"st","bm":0,"cl":"","ln":"","hd":true,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":0,"ix":4},"w":{"a":0,"k":2,"ix":5},"d":[],"c":{"a":0,"k":[1,1,1],"ix":3}},{"ty":"fl","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.3529,0.3451,1],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[-115.887,-116.559],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":29},{"ty":4,"nm":"Shape Layer 5","mn":"","sr":1,"st":2.00000008146167,"op":602.000024519963,"ip":2.00000008146167,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"tt":0,"hasMask":false,"td":0,"ao":0,"ks":{"a":{"a":0,"k":[-115.887,-116.559,0],"ix":1},"s":{"a":0,"k":[52,52,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.098,"y":1},"s":[271,736,0],"t":5},{"o":{"x":0.333,"y":0},"i":{"x":0,"y":1},"s":[271,238,0],"t":22},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[271,248,0],"t":35.0000014255792}],"ix":2},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[100],"t":24},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":31.0000012626559}],"ix":11},"r":{"a":1,"k":[{"o":{"x":0.609,"y":0},"i":{"x":0,"y":1.002},"s":[0],"t":8},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[303],"t":32.0000013033867}],"ix":10}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Rectangle 1","ix":1,"cix":2,"np":3,"it":[{"ty":"rc","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Rect","nm":"Rectangle Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"s":{"a":0,"k":[34.227,32.883],"ix":2}},{"ty":"st","bm":0,"cl":"","ln":"","hd":true,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":0,"ix":4},"w":{"a":0,"k":2,"ix":5},"d":[],"c":{"a":0,"k":[1,1,1],"ix":3}},{"ty":"fl","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.5333,0.5647,1],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[-115.887,-116.559],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":30},{"ty":4,"nm":"Shape Layer 4","mn":"","sr":1,"st":-2.00000008146167,"op":598.000024357039,"ip":-2.00000008146167,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"tt":0,"hasMask":false,"td":0,"ao":0,"ks":{"a":{"a":0,"k":[-115.887,-116.559,0],"ix":1},"s":{"a":0,"k":[52,52,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.098,"y":1},"s":[98,741,0],"t":1},{"o":{"x":0.333,"y":0},"i":{"x":0,"y":1},"s":[98,243,0],"t":18},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[98,253,0],"t":31.0000012626559}],"ix":2},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[100],"t":22},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":29.0000011811942}],"ix":11},"r":{"a":1,"k":[{"o":{"x":0.609,"y":0},"i":{"x":0,"y":1.002},"s":[0],"t":4},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[303],"t":28.0000011404634}],"ix":10}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Rectangle 1","ix":1,"cix":2,"np":3,"it":[{"ty":"rc","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Rect","nm":"Rectangle Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"s":{"a":0,"k":[34.227,32.883],"ix":2}},{"ty":"st","bm":0,"cl":"","ln":"","hd":true,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":0,"ix":4},"w":{"a":0,"k":2,"ix":5},"d":[],"c":{"a":0,"k":[1,1,1],"ix":3}},{"ty":"fl","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.4431,0.4549,1],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[-115.887,-116.559],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":31},{"ty":4,"nm":"Shape Layer 3","mn":"","sr":1,"st":2.00000008146167,"op":602.000024519963,"ip":2.00000008146167,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"tt":0,"hasMask":false,"td":0,"ao":0,"ks":{"a":{"a":0,"k":[-115.887,-116.559,0],"ix":1},"s":{"a":0,"k":[52,52,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.098,"y":1},"s":[406,772,0],"t":5},{"o":{"x":0.333,"y":0},"i":{"x":0,"y":1},"s":[406,274,0],"t":22},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[406,284,0],"t":35.0000014255792}],"ix":2},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[100],"t":25},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":32.0000013033867}],"ix":11},"r":{"a":1,"k":[{"o":{"x":0.609,"y":0},"i":{"x":0,"y":1.002},"s":[0],"t":8},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[303],"t":32.0000013033867}],"ix":10}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Rectangle 1","ix":1,"cix":2,"np":3,"it":[{"ty":"rc","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Rect","nm":"Rectangle Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"s":{"a":0,"k":[34.227,32.883],"ix":2}},{"ty":"st","bm":0,"cl":"","ln":"","hd":true,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":0,"ix":4},"w":{"a":0,"k":2,"ix":5},"d":[],"c":{"a":0,"k":[1,1,1],"ix":3}},{"ty":"fl","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.3529,0.3451,1],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[-115.887,-116.559],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":32},{"ty":4,"nm":"Shape Layer 2","mn":"","sr":1,"st":1.00000004073083,"op":601.000024479232,"ip":1.00000004073083,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"tt":0,"hasMask":false,"td":0,"ao":0,"ks":{"a":{"a":0,"k":[-115.887,-116.559,0],"ix":1},"s":{"a":0,"k":[52,52,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.098,"y":1},"s":[193,681,0],"t":4},{"o":{"x":0.333,"y":0},"i":{"x":0,"y":1},"s":[193,183,0],"t":21},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[193,193,0],"t":34.0000013848484}],"ix":2},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[100],"t":26},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":33.0000013441176}],"ix":11},"r":{"a":1,"k":[{"o":{"x":0.609,"y":0},"i":{"x":0,"y":1.002},"s":[0],"t":7},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[303],"t":31.0000012626559}],"ix":10}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Rectangle 1","ix":1,"cix":2,"np":3,"it":[{"ty":"rc","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Rect","nm":"Rectangle Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"s":{"a":0,"k":[34.227,32.883],"ix":2}},{"ty":"st","bm":0,"cl":"","ln":"","hd":true,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":0,"ix":4},"w":{"a":0,"k":2,"ix":5},"d":[],"c":{"a":0,"k":[1,1,1],"ix":3}},{"ty":"fl","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.4431,0.4549,1],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[-115.887,-116.559],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":33},{"ty":4,"nm":"Shape Layer 1","mn":"","sr":1,"st":-2.00000008146167,"op":598.000024357039,"ip":-2.00000008146167,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"tt":0,"hasMask":false,"td":0,"ao":0,"ks":{"a":{"a":0,"k":[-115.887,-116.559,0],"ix":1},"s":{"a":0,"k":[52,52,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.098,"y":1},"s":[331,669,0],"t":1},{"o":{"x":0.333,"y":0},"i":{"x":0,"y":1},"s":[331,171,0],"t":18},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[331,181,0],"t":31.0000012626559}],"ix":2},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[100],"t":20},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":27.0000010997325}],"ix":11},"r":{"a":1,"k":[{"o":{"x":0.609,"y":0},"i":{"x":0,"y":1.002},"s":[0],"t":4},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[303],"t":28.0000011404634}],"ix":10}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Rectangle 1","ix":1,"cix":2,"np":3,"it":[{"ty":"rc","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Rect","nm":"Rectangle Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"s":{"a":0,"k":[34.227,32.883],"ix":2}},{"ty":"st","bm":0,"cl":"","ln":"","hd":true,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":0,"ix":4},"w":{"a":0,"k":2,"ix":5},"d":[],"c":{"a":0,"k":[1,1,1],"ix":3}},{"ty":"fl","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.4431,0.4549,1],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[-115.887,-116.559],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":34}],"ddd":0,"h":614,"w":614,"meta":{"a":"","k":"","d":"","g":"@lottiefiles/toolkit-js 0.21.1","tc":"#ffffff"},"v":"5.2.1","fr":29.9700012207031,"op":36.0000014663101,"ip":0,"assets":[]} \ No newline at end of file diff --git a/packages/atlas/src/assets/icons/ActionAddChannel.tsx b/packages/atlas/src/assets/icons/ActionAddChannel.tsx new file mode 100644 index 0000000000..158111f9c2 --- /dev/null +++ b/packages/atlas/src/assets/icons/ActionAddChannel.tsx @@ -0,0 +1,17 @@ +// THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY; +import { Ref, SVGProps, forwardRef, memo } from 'react' + +const SvgActionAddChannel = forwardRef((props: SVGProps, ref: Ref) => ( + + + + +)) +SvgActionAddChannel.displayName = 'SvgActionAddChannel' +const Memo = memo(SvgActionAddChannel) +export { Memo as SvgActionAddChannel } diff --git a/packages/atlas/src/assets/icons/index.ts b/packages/atlas/src/assets/icons/index.ts index 79695a65c7..e746434aad 100644 --- a/packages/atlas/src/assets/icons/index.ts +++ b/packages/atlas/src/assets/icons/index.ts @@ -1,4 +1,5 @@ // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY +export * from './ActionAddChannel' export * from './ActionAddImage' export * from './ActionAddVideo' export * from './ActionAdd' diff --git a/packages/atlas/src/assets/icons/svgs/action-add-channel.svg b/packages/atlas/src/assets/icons/svgs/action-add-channel.svg new file mode 100644 index 0000000000..f41a4f7bd4 --- /dev/null +++ b/packages/atlas/src/assets/icons/svgs/action-add-channel.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/atlas/src/assets/images/ypp-authorization/app-screenshot.webp b/packages/atlas/src/assets/images/ypp-authorization/app-screenshot.webp deleted file mode 100644 index 19996cdb9caa1e088b76d20ceede7c5bab2b4414..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 7644 zcmV<29V6mWNk&H09RL7VMM6+kP&il$0000G0001A0|0*k06|PpNKpg;00|r+0m1*} znivriK8rp0=Jmh(kMjTB zd2c0{e)_|!-+%n(`)>*9?ix~m{Od=&^^Rm8gX*Wh80Jk%4XZzX7TJ++te1)u_ds!fZ9^1Es@wF*LCr@2*pKWOQE(IAtYD);VHq;iWwv?c2k4xLNMKiX<)|TRNQDRFMZ9x_nh%Hud3AJUp zuNz%bUBuSV*ir;nTU*+!EtcaNsx2Fii?y}@+ERL4q|1x8tYWKGT*7f}(H5b$6xWvf zIucu2iVMURrM6J9RnQjF<5E~%99yhwODVSMdBNjCQ(V~KqP3;vxXO7AwWShUX3>@x zsV%hFDrgIcts%!{+2f+rmW9~zkhP^QxD;*SymYd*%&xYS^J=OK+9Cy4&r1_rXl*Hh zS8Y*_tEINA)t159(nVXyd7;%M*lJf>7O^#2TS~PBEH19N+}A2Dv9`FZEr7Pz>r$yM zVyk^QE+ny~FRU#FZ7IdpptjU5E+w`|Y6~s4inXO8FUK{#E>&^aU0V#X1v##+#|62r z?QvN>F4p2A+5)XDh1eoi7h+54+G51kme>N67jY@YMUJc8+EO2Ffd$ukTq?Cit1T?Y z)g-pitu5klS$1s^V+$fKYi((|wpd~d<+{e}QjTkBZ4t%AV(Zr9g4GtwaRG`;&x>eF z>v2)mma^dLXp3xhQC#MEaOq;}^E_iqRa-2_brNk+j|-WxCE>U_6I+7UMUIO}Z3&Jo zMr>_nY#G&-Ky4AVCC?m}m9b^?xWorrO@j+LE*Z5&2VJTy;BlGE*b=KP&J$edalx!D zlRUPl;HqQGnA+kbwqTEoJlc{pwy5Yb;u6P}D7G5MmND7_)|Npt!`?!g&eN7UOl%*petNTo>lLgans(TvQt`8E`>u z$vC#C;6h?cqPCbEmq2VWo|k}&i7wi9NenJVTf8qZxTtNHXlyY7R~=i%#1M`g6`svmI=mF)s>~H&@=~b&&=@0GQv;S@Uqx09r z$C*93{^RY-n?A!eEctKRPrv_p{lfM0{paN`p}!-)qxAyyr}^K^ze4?goecBuK#NYHfVC64D_&%Y_U3$ppPG81LI$Qc&=MEj}^a?zp6(;5zIuljJiW zlK5r#Jdmd#+chuKceSYSVc(sv$2Lo~)`tHUNCE7*hF5OwRH*QR1imqt=u6J<6|$=N_A6%7&D3O0L^N?fsRS5LRHc2$E- zP1n4zA?7P~cEham5ExiH&XM4m_Lvkgp=ldd>Rcc^*QjP3fr-)8?YCHa=;Ap*U@2`O zSy%o4Q_ISJ-^C<+Dp6c7-5>?7oCSA1gp4PR%9kENezGWj+hcby>YZS&)Ds}^>~olA zqHQ@bpBjLg*oj0DH|orlm~AY2F=pGe)kKff#K#z6)_+M4vKh}o$Kaa80ujoVy$(H} zZRm|kHB~IA8J0d`>Bw`qs(?PWC1m;~#6aY@UCuv@?nkAa`cBQu%v1OJs;wB0p1=gkpFz7-L|QsObKF zJ?F(AM^Y12x|T0x-udO8=BnB2ZO823gorr~c zN^V9b{N>*inE!dF6L9*`3;ckc9e9I7FOYtfecJ~74r!05G zSaqHw)$bYPLgo8e+fiN4lmWn6-?fyfQO(3!d}A|haZ;ng267Xh#ykyOw#8&9E3>`& zNRx29i-wkoPyqx6JXSwzDN>T<%e`&Cc$F;a~aTf6m2laPXgZ69+*j3d^ zy!X{54+tXD*qNLh(opapEj}^a(G;ms%=USKtM;>(xOh^fM}!e+@s9nq#Y&F|BGcm? z`)i7o9uP&R#xH#U008~gCC7q$1^?|pg)!$dHJiXxkfGs%r2B+DFyn-t zgZ#bFH%C_oOGmU?^64@iXtUiW4eR{zKmW zS=`Gd`ta1klvf~0Wc3UQKAtHBfA)=xUZ~svGyiDG)Bw;^n5MMIm|@jT zx9uk#pL)scB21|}q_U5w(`7w)`o@g@B}>^7rDDEjp%OO<7aDF) zc5-2bwzI}>k%=Fv(S7cpH%@L0oL|c|CpY*qgIV!$cZM1+Phl~1?KYYneI2H2;+W}M7_NBK_Gs7(Jx=bnd>Z7>Sq62Ku)DPsnV zu(12M@z zky2S85=@oi_f*)?i}iZaRRZpy6x$f#xmuAaTHmBJEGis}fQ8@xFp1s?@{C*JQJbzv z6rQ$kzWDF$3QL$mc{So2JMUZsxQAUn#yD~=(93vx?4Dl^JOBUzm}9`uL={ZYXN9aM zL7CB`2rnga5>q}hE~vhtK}+qnw;OMJRcPN0d#=LkQh4`jcR(^-`d3;_wb#2jZY3Tf z&I0X+m7n~>aOgavAn7amS`{3BG@D+qv|Y(+YI4_B-&m3Ay%yI7`{JNEFd!%G?n|GL zORSe|2T5rFhl4wfmcYzr2GdFO&-_Cw=Kfu@lw`p>-!_1lb36?pi0Hl#BZ?K`+?dqy z?wgozUnUV$)TOZUHuUDPQh*l5$pUA*+UfB{f!K63p7U6r=2}6whgRkF^SvWc8jBhx z%xcXtr|djIlDvC6%QgGq2fcAZ?;~+z#Sn|>XHk9CtV22tt*RY!c)4NLfkcH~*iELs z3<0wlHH82IdADyYbJ6tK8hk5UQpMOYVcO)v}@)sQZV9!SiZ9 zKmJR!$QlM!CLoO5(Hc7hpukPcSK)@6FK3QJhu0huA^5?Z_7Bo>G2M3kU4 zy!F|wW&%5=U4SL61(M?EU>nsz=FrVjQDGz$J7)vh%FR>`+LhePW*o&!3Wuk_+ISDO zS-C`?J~Jhb_2J$5$KxC+j>lV10KbJ^9eaxzYe&%2!P-O63p&g9aQ2u z2th!QFTdI4)w9YnfbEO9o}+W3dM#<9ikToZ-l4j0qcPI>n-%I4izO(XGtx#n%r6QkAnt{eY`h^r~}#nLv`-eOSuGB0%$6)n7DnvFXk1{*df zQ8=fr9_^J8doV~9ZA#>{dv>KKE$b6wbN@;Ujb%WS=!$4X1lj z9RG_-k`LW2f_(%W@OVEJ_svVHKxb-CJQhjRaOePw8{ht$IVItLrJr?>`(h;7a zzo*fT*GP7J#23tOQo_642jI0G3y5VU+_tik>_l#w;G>Cv&K57#)V}Q9HtE4rE_gA+ z=%~HKyx8#B=gO1Sn-3cWkoP~T=>*ZDnn(eutCCEt2HdZ3O;+br$i_IKsQ;-gZ+qTj zG7j&ZmfbGrytG{ea}NQ71*e>b!6Bp!enKU7$C!Vk72pc0%tzSE&>HUp>7uy69T%l% z#dOI@)eiWMw#FA1#Ux|dgv~+c`9V5O!t7QYxOIjV63^%%W*H9m+}XB^>fku{4>>te z2ht(-OuJDku$hOImeP%+s2G%w%Rb_P7l8|N*RY<#0sg6pd6-1ydM;_W z*d>}OaTD$(^m&4r=XAWTaXA>)q@j;tkn&)QpTWBue;a(RqHa87$*IQU5&NjO=0Zj+ zJo@U{xQxC?xUY%j^vGJWinek;-5F=>o_)ogaBvLFTweZH@=hU&W9kB-{5HZ}Y8WO+7G&bJeME@ieE=s22ljGJt zQ5Cn_<0~XT583j#A2vR&E$4Hh&_h}N6Bp7_8JnYSz&1w|Bq%)QkHCmWD<#u61mYV( z9}2zr&R-&B(Cg2xX8Y!(8;yp*U{!O#&$w_@+eLgTWXyE16*Tf-;f)>(UfgC7iDDn& zGQ&xx@Me<${dR=F*&l#Ozm2%juU7C1<`f)sj9~gt7rVenYrG2yP2a0S-Gg;bVh50- zLQX$wbQ3&a62tjU1q4p4A@mgI0!j)?1&eNVh0R(7t_la+g;n5$B$O5&vlfq zg3~xCqH%a!g2)*8?2Lf)tQ(X&UBq^~g2kYAImDzmqOG@qrF%L8Q_eoPar#A3sYq6zOzqrxz8J+N}s%Tp{aUw)xTd--e6xFpwJTXPW zak(_hR9iYme@fJ}C?t&AuRL}#12T^tH6i$8J+igW_<1;c1;h;V1R+z`i+xVcyLD`f zSp6wZ9inI;d&iMu-_^)JK!4EQpY$v;k@j0N$kpr!o&8hDPsK(=ZYy(5nf1nTGJLTM zloj@zsCBQ9A|@S#QK<4IqQNO574oXHT5C2K4siPvAa zw~zMTeJG`wiTtj8zmOL9D()$vGK0P-b?mx%sl^0Ss6nl|B3apHZWeXqo{T3fm#6h{w6G?0}~vK?1>FWNK>z-%jAq9 zzv;H%9Urnu?s}>V{O9JD=iJDlKdankuWI(3H4m_W_B zXD`MM>b+9?}pjI{8H2*f`ZOY|&N*;qq&$tIXoH_<9s82hUARO(eD z(T`~6_Z8qT{s$Yab`Lq469j!zIGa+B4(g#3Wndbx{1utMq{S?V!i=GRos4LU0WJ-f zv6(x5yH!X61xeS%d<=?Sf?O}))GQsa6wbQt;lmTVC@^TnKkz(v;BUar zju~WfsGq1(v`X?e7K={V7N$$}jazzP)5~0Yy-Z2GLZ&Ox_wR8h*mJz%KCJKWVCl2M znR$`N7cFtEm5GB6CI2Eoh@JIkqNRPpsxSKM!CSC0Aydy%G$|oGA{tLzj}rw8@788{ z^Xv$GS(P4ceC1@;_3kreT0yZ|Xv@-fgKSE??1lXS70d;6^po9r-_CI4)0RP&2c-); zsyqtZW65jd8pw$iO9CVWp@Tov&Lj+qYtK(Oy@05YxydA7**pWodA}WfIiUBO?HitA zhl$@GT8W3vtx(kqk(&nz=Txggup)9qyf+Vu#-xd78iSk9EyXWi@{@PHV z@DNLeXrs_dR}uoZt6vI0D2{ypquV?ui#g|!j$dz%#@YhBCb|fpWF#Yc*K}_3y|`)( zXyL5-7Djv@et;%wtnupv9)6a~(2D$lBLI&p$e&HyWJ$m`iBnQm>&Ka7>hi5`Ma`D? z37L+P?00moke7xBzPK{9EQ`hrR7--o1TCVlmB}Kba2uq#e}2uz3B(2)uz82mPv!ci z1=cn!84ijJ{vn0!a8~5Z_Csa60S#VUp6B&q^yhJhejGfPeCu}AIft)4ml5Q<7Y5i$ zABwx$pCvTximN#j;EhAEmq6B#ih5P-Kvu#d%dQ?-IqY&crEIvKAR9NPr3M4Npe6&o z$rqF3SlZZ~u_B@9ml7*#vjC?Osv^OV&3b*lPyS}aUCE0YU66(?fJukFI4FNd{|`S! z#v`c4oPOrq%}}#{k||#MA;I=kyw_Mghbt07ZEu-ro^XQ}6Rj!j>D{bN}lz5V%pS+=U8mDax{nV!TU? z1&h*GK0*(EYx;Kp2uCxl7&W@6+%9hr6jIJ>n3@7jPv2VKPzKP zO8aahKrQ8{B2O8fm--FWvPsU>vVP(C(JcH2zOg**fmNwv@Qvp%VsHXA3mw7+^C7u7 zy-SDL*0D^PkWcKM?SL7{LnkL{McuB11O;wNy#=_e%?U7d70p2sW!Qp;JP*f5Yo6S3 zBLW8VFr@Zx&Y-1H9?6_Bm2w6wYteQ>Q&IfQweXT7+89)xlCc4fJH7|kG<2jH(cUr# zn{Ty@IAYEo7n{hb*Isp)a-oKfV;9e^ZO-Qd1y+5pXEc7i^#i%Ebrlr;L#5nZbE5%=`_Hh=Kz1M|GYHcBT7J}2Z5*T zHBeFXvc%%ZFGE!!&S~$51xcqS&;CY=f?)v+$-5hpl^~mzX}_k9lWFQd)9KCjmM~pg zCEyM+`XGgm9QSa{DBN(dKv9IislH@{4+19y%dO3oBH0>n0PDbcoeh+MwdKPyU(pnr zbfTF?`@iu=I2??-w3wVrX_&S;S`y?>5zb4T6Ju1oG;|Mo25FNkcfp!M`kj z9CRNT63?Z!>MMrdXRF&n`2xO5M)Sc3PA6Qev<|R%*IryyC0fm!&y0T@A##R5tRGv0 zyHQ(WCG`LR`PzZ?YE5nQHS&^Bl33Y5THp_zQ{>l6K<{9000gb5Gh(N KYybcN0000u9Ll=@ diff --git a/packages/atlas/src/components/ActionBar/ActionBar.styles.ts b/packages/atlas/src/components/ActionBar/ActionBar.styles.ts index 2bb2c60a1c..bd8bac61cf 100644 --- a/packages/atlas/src/components/ActionBar/ActionBar.styles.ts +++ b/packages/atlas/src/components/ActionBar/ActionBar.styles.ts @@ -47,20 +47,6 @@ export const StyledInformation = styled(Information)` margin-left: ${sizes(1)}; ` -export const ActionButtonPrimary = styled(Button)<{ secondaryButtonExists: boolean }>` - grid-area: primary-button; - - ${({ secondaryButtonExists }) => - !secondaryButtonExists && - css` - grid-column: 1 / span 2; - - ${media.sm} { - grid-column: -3 / span 2; - } - `} -` - export const SecondaryButton = styled(Button)` grid-area: secondary-button; ` @@ -80,3 +66,18 @@ export const FeeContainer = styled.div` display: flex; align-items: center; ` + +export const PrimaryButtonContainer = styled.div<{ secondaryButtonExists: boolean }>` + grid-area: primary-button; + width: 100%; + + ${({ secondaryButtonExists }) => + !secondaryButtonExists && + css` + grid-column: 1 / span 2; + + ${media.sm} { + grid-column: -3 / span 2; + } + `} +` diff --git a/packages/atlas/src/components/ActionBar/ActionBar.tsx b/packages/atlas/src/components/ActionBar/ActionBar.tsx index a9cc751f8d..ef7719159a 100644 --- a/packages/atlas/src/components/ActionBar/ActionBar.tsx +++ b/packages/atlas/src/components/ActionBar/ActionBar.tsx @@ -1,20 +1,20 @@ import BN from 'bn.js' -import { MouseEvent, forwardRef } from 'react' +import { MouseEvent, forwardRef, useRef } from 'react' import { CSSTransition } from 'react-transition-group' import { Fee } from '@/components/Fee' import { Text } from '@/components/Text' -import { TooltipProps } from '@/components/Tooltip' -import { ButtonProps } from '@/components/_buttons/Button' +import { Tooltip, TooltipProps } from '@/components/Tooltip' +import { Button, ButtonProps } from '@/components/_buttons/Button' import { useHasEnoughBalance } from '@/hooks/useHasEnoughBalance' import { useMediaMatch } from '@/hooks/useMediaMatch' import { transitions } from '@/styles' import { ActionBarContainer, - ActionButtonPrimary, DraftsBadgeContainer, FeeContainer, + PrimaryButtonContainer, SecondaryButton, StyledInformation, } from './ActionBar.styles' @@ -34,6 +34,7 @@ export type ActionBarProps = { feeLoading?: boolean infoBadge?: ActionDialogInfoBadge primaryButton: ActionDialogButtonProps + primaryButtonTooltip?: Omit secondaryButton?: ActionDialogButtonProps isActive?: boolean skipFeeCheck?: boolean @@ -49,6 +50,7 @@ export const ActionBar = forwardRef( isActive = true, className, primaryButton, + primaryButtonTooltip, secondaryButton, infoBadge, skipFeeCheck, @@ -63,6 +65,7 @@ export const ActionBar = forwardRef( primaryButton.onClick, skipFeeCheck ) + const buttonRef = useRef(null) return ( @@ -90,16 +93,22 @@ export const ActionBar = forwardRef( {secondaryButton?.text} - - {loadingState ? 'Please wait...' : primaryButton.text} - + + {/* tooltip is positioned weirdly on this button, that's we are setting offsetY to 22 */} + + + + ) } diff --git a/packages/atlas/src/components/AppKV/AppKV.tsx b/packages/atlas/src/components/AppKV/AppKV.tsx index d2d5e60e60..6c9f9df713 100644 --- a/packages/atlas/src/components/AppKV/AppKV.tsx +++ b/packages/atlas/src/components/AppKV/AppKV.tsx @@ -1,20 +1,32 @@ +import { FC, ReactNode } from 'react' + import appKv from '@/assets/images/app-kv.webp' import { StyledSvgJoystreamLogoFull } from '@/components/_navigation/SidenavBase' import { AppLogoContainer, Fade, Image, LogoWrapper, StyledAppLogo, StyledText, Wrapper } from './AppKV.styles' -export const AppKV = () => { +type AppKVProps = { + customNode?: ReactNode +} + +export const AppKV: FC = ({ customNode }) => { return ( - - - - - Powered by - - + {customNode ? ( + customNode + ) : ( + <> + + + + + Powered by + + + + )} diff --git a/packages/atlas/src/components/Avatar/Avatar.tsx b/packages/atlas/src/components/Avatar/Avatar.tsx index 5bb39261d9..57b155a9f8 100644 --- a/packages/atlas/src/components/Avatar/Avatar.tsx +++ b/packages/atlas/src/components/Avatar/Avatar.tsx @@ -1,6 +1,7 @@ -import { FC, MouseEvent, PropsWithChildren, useCallback } from 'react' +import { FC, MouseEvent, PropsWithChildren, useCallback, useEffect } from 'react' import { SvgActionNewChannel } from '@/assets/icons' +import { validateImage } from '@/utils/image' import { AvatarSize, @@ -21,6 +22,7 @@ import { Text } from '../Text' export type AvatarProps = PropsWithChildren<{ onClick?: (event: MouseEvent) => void + onImageValidation?: (validImage: boolean) => void onError?: () => void assetUrls?: string[] | null hasAvatarUploadFailed?: boolean @@ -45,10 +47,31 @@ export const Avatar: FC = ({ clickable, onError, onClick, + onImageValidation, disableHoverDimm, }) => { const isEditable = !loading && editable && size !== 32 && size !== 24 + const checkIfImageIsValid = useCallback(async () => { + if (!assetUrls?.[0]) { + onImageValidation?.(true) + return + } + try { + await validateImage(assetUrls?.[0]) + onImageValidation?.(true) + } catch (error) { + onImageValidation?.(false) + } + }, [assetUrls, onImageValidation]) + + useEffect(() => { + if (!assetUrls?.[0]) { + return + } + checkIfImageIsValid() + }, [assetUrls, checkIfImageIsValid]) + const getEditableIconSize = useCallback(() => { const smallIconSizes = [24, 32, 40] if (smallIconSizes.includes(size)) { diff --git a/packages/atlas/src/components/Banner/Banner.styles.ts b/packages/atlas/src/components/Banner/Banner.styles.ts index c1da921839..e4d140ced3 100644 --- a/packages/atlas/src/components/Banner/Banner.styles.ts +++ b/packages/atlas/src/components/Banner/Banner.styles.ts @@ -34,13 +34,13 @@ export const BannerDescription = styled.div<{ withTitle?: boolean }>` white-space: pre-line; ` -export const BannerWrapper = styled.div<{ size: 'small' | 'medium' }>` +export const BannerWrapper = styled.div<{ size: 'small' | 'medium'; borderColor?: string }>` flex: 1; position: relative; padding: ${(props) => (props.size === 'small' ? sizes(4) : sizes(6))}; width: 100%; background-color: ${cVar('colorBackgroundMutedAlpha')}; - border-left: 2px solid ${cVar('colorBorderPrimary')}; + border-left: 2px solid ${({ borderColor }) => borderColor ?? cVar('colorBorderPrimary')}; ` export const ActionButton = styled(Button)` diff --git a/packages/atlas/src/components/Banner/Banner.tsx b/packages/atlas/src/components/Banner/Banner.tsx index 6ba6ede31a..49ed33bc30 100644 --- a/packages/atlas/src/components/Banner/Banner.tsx +++ b/packages/atlas/src/components/Banner/Banner.tsx @@ -22,6 +22,7 @@ type ActionButtonProps = { export type BannerProps = { dismissibleId?: string + borderColor?: string title?: string description?: ReactNode className?: string @@ -32,6 +33,7 @@ export type BannerProps = { export const Banner: FC = ({ title, + borderColor, description, className, icon, @@ -49,7 +51,7 @@ export const Banner: FC = ({ } return ( - +
{title && ( diff --git a/packages/atlas/src/components/List/List.tsx b/packages/atlas/src/components/List/List.tsx index ac2730b3a7..0e097f5cf0 100644 --- a/packages/atlas/src/components/List/List.tsx +++ b/packages/atlas/src/components/List/List.tsx @@ -1,5 +1,7 @@ import { FC } from 'react' +import { ProtectedActionWrapper } from '@/components/_auth/ProtectedActionWrapper' + import { ListWrapper } from './List.styles' import { ListItem, ListItemProps, ListItemSizes } from '../ListItem' @@ -14,9 +16,19 @@ type ListProps = { export const List: FC = ({ items, size, className, scrollable = false }) => { return ( - {items.map((item, index) => ( - - ))} + {items.map((item, index) => { + const component = + + if (item.protected) { + return ( + + {component} + + ) + } + + return component + })} ) } diff --git a/packages/atlas/src/components/ListItem/ListItem.tsx b/packages/atlas/src/components/ListItem/ListItem.tsx index 66a54572ae..998be1d170 100644 --- a/packages/atlas/src/components/ListItem/ListItem.tsx +++ b/packages/atlas/src/components/ListItem/ListItem.tsx @@ -40,6 +40,10 @@ export type ListItemProps = { } isSeparator?: boolean isInteractive?: boolean + protected?: { + title: string + description: string + } } export const ListItem = forwardRef( diff --git a/packages/atlas/src/components/MembershipInfo/MembershipInfo.tsx b/packages/atlas/src/components/MembershipInfo/MembershipInfo.tsx index bf03738202..aa610a8687 100644 --- a/packages/atlas/src/components/MembershipInfo/MembershipInfo.tsx +++ b/packages/atlas/src/components/MembershipInfo/MembershipInfo.tsx @@ -7,7 +7,7 @@ import { cVar, transitions } from '@/styles' import { MembershipDetails, MembershipHeader, MembershipInfoContainer, StyledHandle } from './MembershipInfo.style' -import { SvgActionEdit } from '../../assets/icons' +import { SvgActionSettings } from '../../assets/icons' import { Avatar } from '../Avatar' import { Button } from '../_buttons/Button' import { CopyAddressButton } from '../_buttons/CopyAddressButton/CopyAddressButton' @@ -22,7 +22,6 @@ export type MembershipInfoProps = { address?: string | null loading?: boolean isOwner?: boolean - editable?: boolean className?: string } @@ -31,11 +30,9 @@ export const MembershipInfo: FC = ({ avatarUrls, avatarLoading, hasAvatarUploadFailed, - onAvatarEditClick, handle, loading, isOwner, - editable, className, }) => { const smMatch = useMediaMatch('sm') @@ -51,8 +48,6 @@ export const MembershipInfo: FC = ({ = ({ ) : ( ))} diff --git a/packages/atlas/src/components/PageTabs/PageTabs.styles.ts b/packages/atlas/src/components/PageTabs/PageTabs.styles.ts new file mode 100644 index 0000000000..f1f1fb5613 --- /dev/null +++ b/packages/atlas/src/components/PageTabs/PageTabs.styles.ts @@ -0,0 +1,21 @@ +import styled from '@emotion/styled' + +import { cVar, sizes } from '@/styles' + +export const PageTabsWrapper = styled.div` + background-color: ${cVar('colorBackgroundMuted')}; + padding: 0 ${sizes(4)}; + box-shadow: ${cVar('effectDividersBottom')}; + display: flex; +` + +export const BackActionWrapper = styled.div` + display: flex; + align-items: center; + padding: ${sizes(2)} ${sizes(4)} ${sizes(2)} 0; + position: relative; + border-right: 1px solid ${cVar('colorCoreNeutral600')}; +` +export const TailingContentWrapper = styled.div` + margin: ${sizes(2)} ${sizes(4)} ${sizes(2)} auto; +` diff --git a/packages/atlas/src/components/PageTabs/PageTabs.tsx b/packages/atlas/src/components/PageTabs/PageTabs.tsx new file mode 100644 index 0000000000..68ea7ffc92 --- /dev/null +++ b/packages/atlas/src/components/PageTabs/PageTabs.tsx @@ -0,0 +1,30 @@ +import { FC, ReactNode } from 'react' + +import { SvgActionChevronL } from '@/assets/icons' + +import { BackActionWrapper, PageTabsWrapper, TailingContentWrapper } from './PageTabs.styles' + +import { Tabs, TabsProps } from '../Tabs' +import { Button, ButtonProps } from '../_buttons/Button' + +type BackAction = Pick + +type PageTabsProps = Omit & { + backAction?: BackAction + trailingContent?: ReactNode +} + +export const PageTabs: FC = ({ className, backAction, trailingContent, ...tabsProps }) => { + return ( + + {backAction && ( + + + ), + } + + return ( + + {renderStep()} + + ) +} diff --git a/packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/ExternalSignInModalEmailStep.tsx b/packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/ExternalSignInModalEmailStep.tsx new file mode 100644 index 0000000000..113ced7923 --- /dev/null +++ b/packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/ExternalSignInModalEmailStep.tsx @@ -0,0 +1,106 @@ +import { FC, useCallback, useEffect } from 'react' +import { useFormContext } from 'react-hook-form' +import shallow from 'zustand/shallow' + +import { FormField } from '@/components/_inputs/FormField' +import { Input } from '@/components/_inputs/Input' +import { registerAccount } from '@/providers/auth/auth.helpers' +import { useAuth } from '@/providers/auth/auth.hooks' +import { useAuthStore } from '@/providers/auth/auth.store' +import { OrionAccountError } from '@/providers/auth/auth.types' +import { useJoystream } from '@/providers/joystream' +import { useSnackbar } from '@/providers/snackbars' + +import { ModalSteps, SignInStepProps } from './ExternalSignInSteps.types' + +import { AuthenticationModalStepTemplate } from '../../AuthenticationModalStepTemplate' + +type SignInModalEmailStepProps = SignInStepProps & { + onConfirm?: (address: string) => void + memberId: string | null +} + +export const ExternalSignInModalEmailStep: FC = ({ + setPrimaryButtonProps, + goToStep, + memberId, +}) => { + const { handleLogin } = useAuth() + const { joystream } = useJoystream() + const { displaySnackbar } = useSnackbar() + const { setAuthModalOpenName } = useAuthStore( + (state) => ({ + authModalOpenName: state.authModalOpenName, + setAuthModalOpenName: state.actions.setAuthModalOpenName, + }), + shallow + ) + const { handleSubmit, setError, formState, register } = useFormContext<{ email: string }>() + const handleConfirm = useCallback(async () => { + const account = await joystream?.selectedAccountId + if (!joystream?.signMessage || !account || !memberId) return + const userAddress = typeof account === 'object' ? account.address : account + await handleSubmit(async (data) => { + goToStep(ModalSteps.ExtensionSigning) + + try { + const address = await registerAccount({ + type: 'external', + email: data.email, + address: userAddress, + signature: (data) => + joystream?.signMessage({ + type: 'payload', + data, + }), + memberId, + }) + + if (address) { + await handleLogin({ + type: 'external', + address, + sign: (data) => + joystream?.signMessage({ + type: 'payload', + data, + }), + }) + } + setAuthModalOpenName(undefined) + } catch (error) { + if (error instanceof OrionAccountError) { + if (error.message === 'Account with the provided e-mail address already exists.') { + displaySnackbar({ + title: 'Something went wrong', + description: `Account with the provided e-mail address already exists. Use different e-mail.`, + iconType: 'error', + }) + goToStep(ModalSteps.Email) + setError('email', { type: 'custom', message: 'Email already exists' }) + } + } + } + })() + }, [displaySnackbar, goToStep, handleLogin, handleSubmit, joystream, memberId, setAuthModalOpenName, setError]) + + // send updates to SignInModal on state of primary button + useEffect(() => { + setPrimaryButtonProps({ + text: 'Continue', + onClick: handleConfirm, + }) + }, [handleConfirm, setPrimaryButtonProps]) + + return ( + + + + + + ) +} diff --git a/packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/ExternalSignInModalMembershipsStep.tsx b/packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/ExternalSignInModalMembershipsStep.tsx new file mode 100644 index 0000000000..85bf465a7c --- /dev/null +++ b/packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/ExternalSignInModalMembershipsStep.tsx @@ -0,0 +1,131 @@ +import { FC, useCallback, useEffect } from 'react' +import shallow from 'zustand/shallow' + +import { GetMembershipsQuery } from '@/api/queries/__generated__/memberships.generated' +import { Avatar } from '@/components/Avatar' +import { AuthenticationModalStepTemplate } from '@/components/_auth/AuthenticationModalStepTemplate' +import { useMediaMatch } from '@/hooks/useMediaMatch' +import { getMemberAvatar } from '@/providers/assets/assets.helpers' +import { useAuth } from '@/providers/auth/auth.hooks' +import { useAuthStore } from '@/providers/auth/auth.store' +import { LogInErrors } from '@/providers/auth/auth.types' +import { useJoystream } from '@/providers/joystream' +import { useSnackbar } from '@/providers/snackbars' +import { shortenString } from '@/utils/misc' + +import { ListItemsWrapper, StyledListItem } from './ExternalSignInSteps.styles' +import { ModalSteps, SignInStepProps } from './ExternalSignInSteps.types' + +type SignInModalAccountStepProps = SignInStepProps & { + memberId: string | null + setMemberId: (id: string) => void + memberships: GetMembershipsQuery['memberships'] | null +} + +export const ExternalSignInModalMembershipsStep: FC = ({ + setPrimaryButtonProps, + hasNavigatedBack, + goToStep, + setMemberId, + memberId, + memberships, +}) => { + const smMatch = useMediaMatch('sm') + const { setAuthModalOpenName } = useAuthStore( + (state) => ({ setAuthModalOpenName: state.actions.setAuthModalOpenName }), + shallow + ) + const { setApiActiveAccount } = useJoystream() + + const { joystream } = useJoystream() + const { handleLogin } = useAuth() + const { displaySnackbar } = useSnackbar() + + const handleConfirm = useCallback(async () => { + if (!joystream?.signMessage) return + + const member = memberships?.find((entity) => entity.id === memberId) + + if (!member) return + + await setApiActiveAccount('address', member.controllerAccount) + + goToStep(ModalSteps.ExtensionSigning) + await handleLogin({ + type: 'external', + sign: (data) => + joystream.signMessage({ + type: 'payload', + data, + }), + address: member.controllerAccount, + }) + .then(() => { + setAuthModalOpenName(undefined) + }) + .catch((error) => { + if (error.message === LogInErrors.NoAccountFound) { + return goToStep(ModalSteps.Email) + } + if (error.message === LogInErrors.InvalidPayload) { + displaySnackbar({ + iconType: 'error', + title: 'There was a problem with signature. Please try again.', + }) + } + if (error.message === LogInErrors.SignatureCancelled) { + displaySnackbar({ + iconType: 'warning', + title: 'Message signing cancelled', + }) + goToStep(ModalSteps.Membership) + } + }) + }, [ + displaySnackbar, + goToStep, + handleLogin, + joystream, + memberId, + memberships, + setApiActiveAccount, + setAuthModalOpenName, + ]) + + useEffect(() => { + if (memberId) return + + setMemberId(memberships?.[0]?.id ?? '') + }, [memberId, memberships, setMemberId]) + + // send updates to SignInModal on state of primary button + useEffect(() => { + setPrimaryButtonProps({ + text: 'Log in', + disabled: !memberId, + onClick: handleConfirm, + }) + }, [handleConfirm, memberId, setPrimaryButtonProps]) + + return ( + + + {memberships?.map((member) => ( + } + onClick={() => setMemberId(member.id)} + /> + ))} + + + ) +} diff --git a/packages/atlas/src/components/_auth/SignInModal/SignInSteps/SignInModalWalletStep/SignInModalWalletStep.tsx b/packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/ExternalSignInModalWalletStep/ExternalSignInModalWalletStep.tsx similarity index 77% rename from packages/atlas/src/components/_auth/SignInModal/SignInSteps/SignInModalWalletStep/SignInModalWalletStep.tsx rename to packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/ExternalSignInModalWalletStep/ExternalSignInModalWalletStep.tsx index 3af688eb38..7306d44f11 100644 --- a/packages/atlas/src/components/_auth/SignInModal/SignInSteps/SignInModalWalletStep/SignInModalWalletStep.tsx +++ b/packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/ExternalSignInModalWalletStep/ExternalSignInModalWalletStep.tsx @@ -1,46 +1,50 @@ import { Wallet } from '@talismn/connect-wallets' import { FC, useCallback, useEffect, useMemo, useState } from 'react' +import { GetMembershipsQuery, useGetMembershipsLazyQuery } from '@/api/queries/__generated__/memberships.generated' import { SvgActionNewTab, SvgAlertsError24, SvgAlertsInformative24, SvgLogoPolkadot } from '@/assets/icons' import { IconWrapper } from '@/components/IconWrapper' +import { AuthenticationModalStepTemplate } from '@/components/_auth/AuthenticationModalStepTemplate' import { Loader } from '@/components/_loaders/Loader' import { useMediaMatch } from '@/hooks/useMediaMatch' import { useMountEffect } from '@/hooks/useMountEffect' -import { UnknownWallet } from '@/providers/user/user.helpers' -import { useUser } from '@/providers/user/user.hooks' -import { useUserStore } from '@/providers/user/user.store' +import { UnknownWallet, getWalletsList } from '@/providers/wallet/wallet.helpers' +import { useWallet } from '@/providers/wallet/wallet.hooks' import { isMobile } from '@/utils/browser' import { capitalizeFirstLetter } from '@/utils/misc' -import { MOBILE_SUPPORTED_WALLETS, walletSort } from './SignInModalWalletStep.utils' +import { MOBILE_SUPPORTED_WALLETS, walletSort } from './ExternalSignInModalWalletStep.utils' -import { SignInModalStepTemplate } from '../SignInModalStepTemplate' import { ListItemsWrapper, StyledBottomBanner, StyledListItem, StyledTopBanner, WalletLogo, -} from '../SignInSteps.styles' -import { SignInStepProps } from '../SignInSteps.types' +} from '../ExternalSignInSteps.styles' +import { ModalSteps, SignInStepProps } from '../ExternalSignInSteps.types' export const isMobileDevice = isMobile() -export const SignInModalWalletStep: FC = ({ +export type ExternalSignInModalWalletStepProps = SignInStepProps & { + setAvailableMemberships: (members: GetMembershipsQuery['memberships']) => void +} + +export const ExternalSignInModalWalletStep: FC = ({ setPrimaryButtonProps, - goToNextStep, + goToStep, hasNavigatedBack, + setAvailableMemberships, }) => { const smMatch = useMediaMatch('sm') const [selectedWalletIdx, setSelectedWalletIdx] = useState(0) const [hasError, setHasError] = useState(false) const [isConnecting, setIsConnecting] = useState(false) - const { getWalletsList, signIn } = useUser() - const walletFromStore = useUserStore((state) => state.wallet) - + const { wallet: walletFromStore, signInToWallet } = useWallet() + const [fetchMemberships] = useGetMembershipsLazyQuery({}) const wallets = useMemo(() => { - const unsortedWallets = getWalletsList() + const unsortedWallets = getWalletsList().filter((wallet) => wallet.installed) if (isMobileDevice) { // eslint-disable-next-line @typescript-eslint/no-explicit-any const rawWallets = Object.keys((window as any).injectedWeb3 || {}) @@ -78,7 +82,7 @@ export const SignInModalWalletStep: FC = ({ .sort(walletSort) } return unsortedWallets.sort(walletSort) - }, [getWalletsList]) + }, []) const selectedWallet = (selectedWalletIdx != null && wallets[selectedWalletIdx]) || null @@ -87,17 +91,30 @@ export const SignInModalWalletStep: FC = ({ setIsConnecting(true) setHasError(false) - const success = await signIn(selectedWallet.extensionName) - setIsConnecting(false) + const accounts = await signInToWallet(selectedWallet.extensionName) - if (!success) { + if (!accounts) { setHasError(true) // set error state return } - goToNextStep() - }, [goToNextStep, selectedWallet, signIn]) + const res = await fetchMemberships({ + variables: { + where: { + controllerAccount_in: accounts.map((acc) => acc.address), + }, + }, + }) + setIsConnecting(false) + + if (res.data?.memberships.length) { + setAvailableMemberships(res.data.memberships) + goToStep(ModalSteps.Membership) + } else { + goToStep(ModalSteps.NoMembership) + } + }, [fetchMemberships, goToStep, selectedWallet, setAvailableMemberships, signInToWallet]) const handleSelectWallet = useCallback((idx: number) => { setSelectedWalletIdx(idx) @@ -121,7 +138,7 @@ export const SignInModalWalletStep: FC = ({ text: isConnecting ? 'Connecting...' : selectedWallet?.installed || isMobileDevice - ? 'Select wallet' + ? 'Use wallet' : `Install ${selectedWallet?.title}`, disabled: isConnecting, icon: selectedWallet?.installed ? null : , @@ -132,7 +149,7 @@ export const SignInModalWalletStep: FC = ({ }, [handleConfirm, isConnecting, selectedWallet, setPrimaryButtonProps]) return ( - = ({ icon={} /> ) : null} - + ) } diff --git a/packages/atlas/src/components/_auth/SignInModal/SignInSteps/SignInModalWalletStep/SignInModalWalletStep.utils.ts b/packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/ExternalSignInModalWalletStep/ExternalSignInModalWalletStep.utils.ts similarity index 94% rename from packages/atlas/src/components/_auth/SignInModal/SignInSteps/SignInModalWalletStep/SignInModalWalletStep.utils.ts rename to packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/ExternalSignInModalWalletStep/ExternalSignInModalWalletStep.utils.ts index ba335406bf..397440d1bc 100644 --- a/packages/atlas/src/components/_auth/SignInModal/SignInSteps/SignInModalWalletStep/SignInModalWalletStep.utils.ts +++ b/packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/ExternalSignInModalWalletStep/ExternalSignInModalWalletStep.utils.ts @@ -1,7 +1,7 @@ import { Wallet } from '@talismn/connect-wallets' import polkaWalletLogo from '@/assets/images/polkawallet-logo.webp' -import { UnknownWallet } from '@/providers/user/user.helpers' +import { UnknownWallet } from '@/providers/wallet/wallet.helpers' export const PRIORITY_WALLETS = ['talisman', 'subwallet-js'] export const DEFAULT_PRIORITY = 100000 diff --git a/packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/ExternalSignInModalWalletStep/index.ts b/packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/ExternalSignInModalWalletStep/index.ts new file mode 100644 index 0000000000..f9b206e0f7 --- /dev/null +++ b/packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/ExternalSignInModalWalletStep/index.ts @@ -0,0 +1 @@ +export * from './ExternalSignInModalWalletStep' diff --git a/packages/atlas/src/components/_auth/SignInModal/SignInSteps/SignInSteps.styles.ts b/packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/ExternalSignInSteps.styles.ts similarity index 100% rename from packages/atlas/src/components/_auth/SignInModal/SignInSteps/SignInSteps.styles.ts rename to packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/ExternalSignInSteps.styles.ts diff --git a/packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/ExternalSignInSteps.types.ts b/packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/ExternalSignInSteps.types.ts new file mode 100644 index 0000000000..0239792094 --- /dev/null +++ b/packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/ExternalSignInSteps.types.ts @@ -0,0 +1,17 @@ +import { DialogButtonProps } from '@/components/_overlays/Dialog' + +export enum ModalSteps { + Wallet = 'Wallet', + Membership = 'Membership', + Logging = 'Logging', + Email = 'Email', + Register = 'Register', + ExtensionSigning = 'ExtensionSigning', + NoMembership = 'NoMembership', +} + +export type SignInStepProps = { + setPrimaryButtonProps: (props: DialogButtonProps) => void + goToStep: (step: ModalSteps) => void + hasNavigatedBack: boolean +} diff --git a/packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/index.ts b/packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/index.ts new file mode 100644 index 0000000000..708f0b989d --- /dev/null +++ b/packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/index.ts @@ -0,0 +1,4 @@ +export * from './ExternalSignInModalWalletStep/ExternalSignInModalWalletStep' +export * from './ExternalSignInModalMembershipsStep' +export type { SignInStepProps } from './ExternalSignInSteps.types' +export { ModalSteps } from './ExternalSignInSteps.types' diff --git a/packages/atlas/src/components/_auth/ExternalSignInModal/index.ts b/packages/atlas/src/components/_auth/ExternalSignInModal/index.ts new file mode 100644 index 0000000000..850a830ca5 --- /dev/null +++ b/packages/atlas/src/components/_auth/ExternalSignInModal/index.ts @@ -0,0 +1 @@ +export * from './ExternalSignInModal' diff --git a/packages/atlas/src/components/_auth/ForgotPasswordModal/ForgotPasswordModal.styles.ts b/packages/atlas/src/components/_auth/ForgotPasswordModal/ForgotPasswordModal.styles.ts new file mode 100644 index 0000000000..6cbd554b19 --- /dev/null +++ b/packages/atlas/src/components/_auth/ForgotPasswordModal/ForgotPasswordModal.styles.ts @@ -0,0 +1,9 @@ +import styled from '@emotion/styled' + +import { sizes } from '@/styles' + +export const GapContainer = styled.div` + display: flex; + flex-direction: column; + gap: ${sizes(6)}; +` diff --git a/packages/atlas/src/components/_auth/ForgotPasswordModal/ForgotPasswordModal.tsx b/packages/atlas/src/components/_auth/ForgotPasswordModal/ForgotPasswordModal.tsx new file mode 100644 index 0000000000..c9ed7cc5b8 --- /dev/null +++ b/packages/atlas/src/components/_auth/ForgotPasswordModal/ForgotPasswordModal.tsx @@ -0,0 +1,223 @@ +import { zodResolver } from '@hookform/resolvers/zod/dist/zod' +import { u8aToHex } from '@polkadot/util' +import axios from 'axios' +import { useCallback, useState } from 'react' +import { FormProvider, useForm } from 'react-hook-form' +import { z } from 'zod' +import shallow from 'zustand/shallow' + +import { useGetCurrentAccountLazyQuery } from '@/api/queries/__generated__/accounts.generated' +import { AuthenticationModalStepTemplate } from '@/components/_auth/AuthenticationModalStepTemplate' +import { EmailAndSeedStep } from '@/components/_auth/ForgotPasswordModal/steps/EmailAndSeedStep' +import { NewPasswordStep } from '@/components/_auth/ForgotPasswordModal/steps/NewPasswordStep' +import { Button } from '@/components/_buttons/Button' +import { DialogModal } from '@/components/_overlays/DialogModal' +import { atlasConfig } from '@/config' +import { ORION_AUTH_URL } from '@/config/env' +import { keyring } from '@/joystream-lib/lib' +import { loginRequest, logoutRequest, prepareEncryptionArtifacts } from '@/providers/auth/auth.helpers' +import { useAuthStore } from '@/providers/auth/auth.store' +import { useSnackbar } from '@/providers/snackbars' +import { SentryLogger } from '@/utils/logs' + +import { ForgotPasswordModalForm, ForgotPasswordStep } from './ForgotPasswordModal.types' + +const commonPasswordValidation = z + .string() + .regex(/^(?=.*[0-9])(?=.*[A-Z])(?=.*[!@#$%^&*()_+]).*$/, { message: 'Password has to meet requirements.' }) + .min(9, { message: 'Password has to meet requirements.' }) + +const schema = z.object({ + [ForgotPasswordStep.EmailAndSeedStep]: z.object({ + email: z.string().min(3, { message: 'Enter email address.' }).email({ message: 'Enter valid email address.' }), + mnemonic: z + .string() + .min(1, 'Enter mnemonic.') + .regex(/^(\w+\s){11}\w+$/, { message: 'Mnemonic should contain 12 words separated by spaces.' }), + }), + [ForgotPasswordStep.NewPasswordStep]: z + .object({ + password: commonPasswordValidation, + confirmPassword: commonPasswordValidation, + }) + .refine( + (data) => { + return data.password === data.confirmPassword + }, + { + path: ['confirmPassword'], + message: 'Password address has to match.', + } + ), +}) + +export const ForgotPasswordModal = () => { + const [currentStep, setCurrentStep] = useState(ForgotPasswordStep.EmailAndSeedStep) + const [isLoading, setIsLoading] = useState(false) + const [accountId, setAccountId] = useState() + const { displaySnackbar } = useSnackbar() + const setAuthModalName = useAuthStore((state) => state.actions.setAuthModalOpenName) + const isLastStep = currentStep === ForgotPasswordStep.NewPasswordStep + const [lazyCurrentAccountQuery] = useGetCurrentAccountLazyQuery() + + const form = useForm({ + resolver: zodResolver(isLastStep ? schema : schema.pick({ [currentStep]: true })), + }) + const { authModalOpenName, setAuthModalOpenName } = useAuthStore( + (state) => ({ + authModalOpenName: state.authModalOpenName, + setAuthModalOpenName: state.actions.setAuthModalOpenName, + }), + shallow + ) + const handleEmailAndSeedStepSubmit = async (data: ForgotPasswordModalForm) => { + setIsLoading(true) + + try { + const time = Date.now() - 10_000 + + const keypair = keyring.addFromMnemonic(data['EmailAndSeedStep'].mnemonic) + const address = keypair.address + const loginPayload = { + joystreamAccountId: address, + gatewayName: atlasConfig.general.appName, + timestamp: time, + action: 'login' as const, + } + const loginSignature = await keypair.sign(JSON.stringify(loginPayload)) + const loginResponse = await loginRequest(u8aToHex(loginSignature), loginPayload) + const accData = await lazyCurrentAccountQuery() + + if (accData.data?.accountData.email !== data['EmailAndSeedStep'].email) { + form.setError(`${ForgotPasswordStep.EmailAndSeedStep}.email`, { + message: 'Provided email do not match mnemonic.', + }) + logoutRequest().catch((error) => { + SentryLogger.error('Failed to logout when recovering password', 'ForgotPasswordModal', error) + }) + return + } + + setAccountId(loginResponse.data.accountId) + setCurrentStep(ForgotPasswordStep.NewPasswordStep) + } catch (error) { + displaySnackbar({ + title: 'Something went wrong', + description: `We encountered unexpected error. Please try again.`, + iconType: 'error', + }) + SentryLogger.error('Failed to login when recovering password', 'ForgotPasswordModal', error) + } finally { + setIsLoading(false) + } + } + + const handleNewPasswordStep = useCallback( + async (data: ForgotPasswordModalForm) => { + if (!accountId) { + displaySnackbar({ + title: 'Something went wrong', + description: `We couldn't find account associated with given credentials. Please try again.`, + iconType: 'error', + }) + return + } + setCurrentStep(ForgotPasswordStep.LoadingStep) + const time = Date.now() - 10_000 + try { + const keypair = keyring.addFromMnemonic(data['EmailAndSeedStep'].mnemonic) + const address = keypair.address + + const newArtifacts = await prepareEncryptionArtifacts( + data['EmailAndSeedStep'].email, + data['NewPasswordStep'].password, + data['EmailAndSeedStep'].mnemonic + ) + const forgetPayload = { + joystreamAccountId: address, + gatewayName: atlasConfig.general.appName, + timestamp: time, + action: 'changeAccount', + gatewayAccountId: accountId, + newArtifacts, + } + const forgetPayloadSignature = await keypair.sign(JSON.stringify(forgetPayload)) + + await axios.post<{ accountId: string }>( + `${ORION_AUTH_URL}/change-account`, + { + signature: u8aToHex(forgetPayloadSignature), + payload: forgetPayload, + }, + { + withCredentials: true, + headers: { + 'Content-Type': 'application/json', + }, + } + ) + displaySnackbar({ + title: 'Password has been changed', + description: 'You can now log in to your account using the new password', + iconType: 'success', + }) + setAuthModalName('logIn') + } catch (error) { + displaySnackbar({ + title: 'Something went wrong', + description: `We encountered unexpected error. Please try again.`, + iconType: 'error', + }) + SentryLogger.error('Failed to change password', 'ForgotPasswordModal', error) + } finally { + setCurrentStep(ForgotPasswordStep.NewPasswordStep) + } + }, + [accountId, displaySnackbar, setAuthModalName] + ) + + return ( + { + form.handleSubmit( + currentStep === ForgotPasswordStep.EmailAndSeedStep ? handleEmailAndSeedStepSubmit : handleNewPasswordStep + )() + }, + }} + secondaryButton={{ + text: 'Back', + onClick: () => + currentStep === ForgotPasswordStep.EmailAndSeedStep + ? setAuthModalName('logIn') + : setCurrentStep(ForgotPasswordStep.EmailAndSeedStep), + }} + dividers={currentStep === ForgotPasswordStep.NewPasswordStep} + additionalActionsNode={ + + } + > + + {currentStep === ForgotPasswordStep.EmailAndSeedStep && } + {currentStep === ForgotPasswordStep.NewPasswordStep && } + {currentStep === ForgotPasswordStep.LoadingStep && ( + + )} + + + ) +} diff --git a/packages/atlas/src/components/_auth/ForgotPasswordModal/ForgotPasswordModal.types.ts b/packages/atlas/src/components/_auth/ForgotPasswordModal/ForgotPasswordModal.types.ts new file mode 100644 index 0000000000..8085c675bf --- /dev/null +++ b/packages/atlas/src/components/_auth/ForgotPasswordModal/ForgotPasswordModal.types.ts @@ -0,0 +1,16 @@ +export enum ForgotPasswordStep { + EmailAndSeedStep = 'EmailAndSeedStep', + NewPasswordStep = 'NewPasswordStep', + LoadingStep = 'LoadingStep', +} + +export type ForgotPasswordModalForm = { + [ForgotPasswordStep.EmailAndSeedStep]: { + mnemonic: string + email: string + } + [ForgotPasswordStep.NewPasswordStep]: { + password: string + confirmPassword: string + } +} diff --git a/packages/atlas/src/components/_auth/ForgotPasswordModal/steps/EmailAndSeedStep.tsx b/packages/atlas/src/components/_auth/ForgotPasswordModal/steps/EmailAndSeedStep.tsx new file mode 100644 index 0000000000..474f8fcb13 --- /dev/null +++ b/packages/atlas/src/components/_auth/ForgotPasswordModal/steps/EmailAndSeedStep.tsx @@ -0,0 +1,44 @@ +import { useFormContext } from 'react-hook-form' + +import { AuthenticationModalStepTemplate } from '@/components/_auth/AuthenticationModalStepTemplate' +import { + ForgotPasswordModalForm, + ForgotPasswordStep, +} from '@/components/_auth/ForgotPasswordModal/ForgotPasswordModal.types' +import { FormField } from '@/components/_inputs/FormField' +import { Input } from '@/components/_inputs/Input' +import { TextArea } from '@/components/_inputs/TextArea' + +import { GapContainer } from '../ForgotPasswordModal.styles' + +export const EmailAndSeedStep = () => { + const { register, formState } = useFormContext() + return ( + + + +