From 9202f5cb41a918f7b0b88e0a59ecf9c3c4568eed Mon Sep 17 00:00:00 2001
From: kwasniew <kwasniewski.mateusz@gmail.com>
Date: Wed, 4 Sep 2024 12:56:21 +0200
Subject: [PATCH 1/9] feat: navigate between all stages

---
 .../component/onboarding/ConnectSdkDialog.tsx | 60 +++++++++++++++----
 .../component/onboarding/GenerateApiKey.tsx   | 12 +++-
 2 files changed, 57 insertions(+), 15 deletions(-)

diff --git a/frontend/src/component/onboarding/ConnectSdkDialog.tsx b/frontend/src/component/onboarding/ConnectSdkDialog.tsx
index 8fc02e13d7fb..fb5f6fc7fd61 100644
--- a/frontend/src/component/onboarding/ConnectSdkDialog.tsx
+++ b/frontend/src/component/onboarding/ConnectSdkDialog.tsx
@@ -56,10 +56,7 @@ const NextStepSectionSpacedContainer = styled('div')(({ theme }) => ({
     padding: theme.spacing(3, 8, 3, 8),
 }));
 
-type OnboardingStage =
-    | { name: 'select-sdk' }
-    | { name: 'generate-api-key' }
-    | { name: 'test-connection' };
+type OnboardingStage = 'select-sdk' | 'generate-api-key' | 'test-connection';
 
 export const ConnectSdkDialog = ({
     open,
@@ -71,7 +68,8 @@ export const ConnectSdkDialog = ({
     const isLargeScreen = useMediaQuery(theme.breakpoints.up('lg'));
     const [sdk, setSdk] = useState<Sdk | null>(null);
     const [environment, setEnvironment] = useState<string | null>(null);
-    const [stage, setStage] = useState<OnboardingStage>({ name: 'select-sdk' });
+    const [apiKey, setApiKey] = useState<string | null>(null);
+    const [stage, setStage] = useState<OnboardingStage>('select-sdk');
 
     useEffect(() => {
         if (environments.length > 0) {
@@ -83,46 +81,82 @@ export const ConnectSdkDialog = ({
         <StyledDialog open={open} onClose={onClose}>
             <Box sx={{ display: 'flex' }}>
                 <ConnectSdk>
-                    {stage.name === 'select-sdk' ? (
+                    {stage === 'select-sdk' ? (
                         <SelectSdk
                             onSelect={(sdk) => {
                                 setSdk(sdk);
-                                setStage({ name: 'generate-api-key' });
+                                setStage('generate-api-key');
                             }}
                         />
                     ) : null}
-                    {stage.name === 'generate-api-key' && sdk && environment ? (
+                    {stage === 'generate-api-key' && sdk && environment ? (
                         <GenerateApiKey
                             environments={environments}
                             environment={environment}
                             project={project}
                             sdkType={sdk.type}
                             onEnvSelect={setEnvironment}
+                            onApiKey={(apiKey) => {
+                                setApiKey(apiKey);
+                            }}
                         />
                     ) : null}
+                    {stage === 'test-connection' && sdk && environment ? (
+                        <div>Last stage</div>
+                    ) : null}
 
-                    {stage.name === 'generate-api-key' ? (
+                    {stage === 'generate-api-key' ? (
                         <Navigation>
                             <NextStepSectionSpacedContainer>
                                 <Button
                                     variant='text'
                                     color='inherit'
                                     onClick={() => {
-                                        setStage({ name: 'select-sdk' });
+                                        setStage('select-sdk');
                                     }}
                                 >
                                     Back
                                 </Button>
-                                <Button variant='contained'>Next</Button>
+                                <Button
+                                    variant='contained'
+                                    onClick={() => {
+                                        setStage('test-connection');
+                                    }}
+                                >
+                                    Next
+                                </Button>
+                            </NextStepSectionSpacedContainer>
+                        </Navigation>
+                    ) : null}
+                    {stage === 'test-connection' ? (
+                        <Navigation>
+                            <NextStepSectionSpacedContainer>
+                                <Button
+                                    variant='text'
+                                    color='inherit'
+                                    onClick={() => {
+                                        setStage('generate-api-key');
+                                    }}
+                                >
+                                    Back
+                                </Button>
+                                <Button
+                                    variant='contained'
+                                    onClick={() => {
+                                        onClose();
+                                    }}
+                                >
+                                    Finish
+                                </Button>
                             </NextStepSectionSpacedContainer>
                         </Navigation>
                     ) : null}
                 </ConnectSdk>
 
-                {isLargeScreen && stage.name === 'select-sdk' ? (
+                {isLargeScreen && stage === 'select-sdk' ? (
                     <SelectSdkConcepts />
                 ) : null}
-                {isLargeScreen && stage.name === 'generate-api-key' ? (
+                {isLargeScreen && stage === 'generate-api-key' ? (
                     <GenrateApiKeyConcepts />
                 ) : null}
             </Box>
diff --git a/frontend/src/component/onboarding/GenerateApiKey.tsx b/frontend/src/component/onboarding/GenerateApiKey.tsx
index 0517e9a4415d..f11c87fdb2d6 100644
--- a/frontend/src/component/onboarding/GenerateApiKey.tsx
+++ b/frontend/src/component/onboarding/GenerateApiKey.tsx
@@ -14,6 +14,7 @@ import {
 import { SingleSelectConfigButton } from '../common/DialogFormTemplate/ConfigButtons/SingleSelectConfigButton';
 import EnvironmentsIcon from '@mui/icons-material/CloudCircle';
 import { ArcherContainer, ArcherElement } from 'react-archer';
+import { useEffect } from 'react';
 
 const ChooseEnvironment = ({
     environments,
@@ -159,11 +160,11 @@ const TokenExplanation = ({
                             </SecretExplanationDescription>
                         </ArcherElement>
                         <ArcherElement
-                            id='secreat-description'
+                            id='secret-description'
                             relations={[
                                 {
                                     targetId: 'secret',
-                                    targetAnchor: 'bottom',
+                                    targetAnchor: 'right',
                                     sourceAnchor: 'top',
                                 },
                             ]}
@@ -185,6 +186,7 @@ interface GenerateApiKeyProps {
     environment: string;
     sdkType: 'client' | 'frontend';
     onEnvSelect: (env: string) => void;
+    onApiKey: (apiKey: string | null) => void;
 }
 
 export const GenerateApiKey = ({
@@ -193,12 +195,18 @@ export const GenerateApiKey = ({
     project,
     sdkType,
     onEnvSelect,
+    onApiKey,
 }: GenerateApiKeyProps) => {
     const { tokens, refetch: refreshTokens } = useProjectApiTokens(project);
     const { createToken, loading: creatingToken } = useProjectApiTokensApi();
     const currentEnvironmentToken = tokens.find(
         (token) => token.environment === environment && token.type === sdkType,
     );
+
+    useEffect(() => {
+        onApiKey(currentEnvironmentToken?.secret || null);
+    }, [currentEnvironmentToken]);
+
     const parsedToken = parseToken(currentEnvironmentToken?.secret);
 
     const { setToastApiError } = useToast();

From 5296a623edd31c0a34bd889e386705f3ced86a38 Mon Sep 17 00:00:00 2001
From: kwasniew <kwasniewski.mateusz@gmail.com>
Date: Wed, 4 Sep 2024 12:58:39 +0200
Subject: [PATCH 2/9] feat: navigate between all stages

---
 frontend/src/component/onboarding/ConnectSdkDialog.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/src/component/onboarding/ConnectSdkDialog.tsx b/frontend/src/component/onboarding/ConnectSdkDialog.tsx
index fb5f6fc7fd61..ea3f4da03878 100644
--- a/frontend/src/component/onboarding/ConnectSdkDialog.tsx
+++ b/frontend/src/component/onboarding/ConnectSdkDialog.tsx
@@ -101,7 +101,10 @@ export const ConnectSdkDialog = ({
                             }}
                         />
                     ) : null}
-                    {stage === 'test-connection' && sdk && environment ? (
+                    {stage === 'test-connection' &&
+                    sdk &&
+                    environment &&
+                    apiKey ? (
                         <div>Last stage</div>
                     ) : null}
 

From 24c88118feba0d68499b49f25ef2cca34ab1a4a5 Mon Sep 17 00:00:00 2001
From: kwasniew <kwasniewski.mateusz@gmail.com>
Date: Wed, 4 Sep 2024 13:05:26 +0200
Subject: [PATCH 3/9] feat: navigate between all stages

---
 .../component/onboarding/ConnectSdkDialog.tsx | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/frontend/src/component/onboarding/ConnectSdkDialog.tsx b/frontend/src/component/onboarding/ConnectSdkDialog.tsx
index ea3f4da03878..d22822edbf65 100644
--- a/frontend/src/component/onboarding/ConnectSdkDialog.tsx
+++ b/frontend/src/component/onboarding/ConnectSdkDialog.tsx
@@ -71,6 +71,12 @@ export const ConnectSdkDialog = ({
     const [apiKey, setApiKey] = useState<string | null>(null);
     const [stage, setStage] = useState<OnboardingStage>('select-sdk');
 
+    const isSelectSdkStage = stage === 'select-sdk';
+    const isGenerateApiKeyStage =
+        stage === 'generate-api-key' && sdk && environment;
+    const isTestConnectionStage =
+        stage === 'test-connection' && sdk && environment && apiKey;
+
     useEffect(() => {
         if (environments.length > 0) {
             setEnvironment(environments[0]);
@@ -81,7 +87,7 @@ export const ConnectSdkDialog = ({
         <StyledDialog open={open} onClose={onClose}>
             <Box sx={{ display: 'flex' }}>
                 <ConnectSdk>
-                    {stage === 'select-sdk' ? (
+                    {isSelectSdkStage ? (
                         <SelectSdk
                             onSelect={(sdk) => {
                                 setSdk(sdk);
@@ -89,7 +95,7 @@ export const ConnectSdkDialog = ({
                             }}
                         />
                     ) : null}
-                    {stage === 'generate-api-key' && sdk && environment ? (
+                    {isGenerateApiKeyStage ? (
                         <GenerateApiKey
                             environments={environments}
                             environment={environment}
@@ -101,12 +107,7 @@ export const ConnectSdkDialog = ({
                             }}
                         />
                     ) : null}
-                    {stage === 'test-connection' &&
-                    sdk &&
-                    environment &&
-                    apiKey ? (
-                        <div>Last stage</div>
-                    ) : null}
+                    {isTestConnectionStage ? <div>Last stage</div> : null}
 
                     {stage === 'generate-api-key' ? (
                         <Navigation>
@@ -131,7 +132,7 @@ export const ConnectSdkDialog = ({
                             </NextStepSectionSpacedContainer>
                         </Navigation>
                     ) : null}
-                    {stage === 'test-connection' ? (
+                    {isTestConnectionStage ? (
                         <Navigation>
                             <NextStepSectionSpacedContainer>
                                 <Button
@@ -156,10 +157,10 @@ export const ConnectSdkDialog = ({
                     ) : null}
                 </ConnectSdk>
 
-                {isLargeScreen && stage === 'select-sdk' ? (
+                {isLargeScreen && isSelectSdkStage ? (
                     <SelectSdkConcepts />
                 ) : null}
-                {isLargeScreen && stage === 'generate-api-key' ? (
+                {isLargeScreen && isGenerateApiKeyStage ? (
                     <GenrateApiKeyConcepts />
                 ) : null}
             </Box>

From 03fca7624369cceb65686e2fa1411b9c961bddca Mon Sep 17 00:00:00 2001
From: kwasniew <kwasniewski.mateusz@gmail.com>
Date: Wed, 4 Sep 2024 13:52:42 +0200
Subject: [PATCH 4/9] fix: icons after deployment

---
 frontend/src/component/onboarding/SelectSdk.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/component/onboarding/SelectSdk.tsx b/frontend/src/component/onboarding/SelectSdk.tsx
index 2836a12ce63f..84b77cf5517e 100644
--- a/frontend/src/component/onboarding/SelectSdk.tsx
+++ b/frontend/src/component/onboarding/SelectSdk.tsx
@@ -15,6 +15,7 @@ import ruby from 'assets/icons/sdks/Logo-ruby.svg';
 import rust from 'assets/icons/sdks/Logo-rust.svg';
 import svelte from 'assets/icons/sdks/Logo-svelte.svg';
 import vue from 'assets/icons/sdks/Logo-vue.svg';
+import { formatAssetPath } from 'utils/formatPath';
 
 const SpacedContainer = styled('div')(({ theme }) => ({
     padding: theme.spacing(5, 8, 8, 8),
@@ -108,7 +109,7 @@ export const SelectSdk: FC<ISelectSdkProps> = ({ onSelect }) => {
                 <SdkListSection>
                     {serverSdks.map((sdk) => (
                         <SdkTile>
-                            <StyledAvatar src={sdk.icon} />
+                            <StyledAvatar src={formatAssetPath(sdk.icon)} />
                             <SdkTileContent>
                                 <b>{sdk.name}</b>{' '}
                                 <Link
@@ -132,7 +133,7 @@ export const SelectSdk: FC<ISelectSdkProps> = ({ onSelect }) => {
                 <SdkListSection>
                     {clientSdks.map((sdk) => (
                         <SdkTile>
-                            <StyledAvatar src={sdk.icon} />
+                            <StyledAvatar src={formatAssetPath(sdk.icon)} />
                             <SdkTileContent>
                                 <b>{sdk.name}</b>{' '}
                                 <Link

From 18bcdce40ba1ea27593079a4cf888cff441e1f01 Mon Sep 17 00:00:00 2001
From: kwasniew <kwasniewski.mateusz@gmail.com>
Date: Wed, 4 Sep 2024 15:19:12 +0200
Subject: [PATCH 5/9] feat: sdk snippets in test connection stage

---
 .../component/onboarding/ConnectSdkDialog.tsx |  17 +-
 .../component/onboarding/GenerateApiKey.tsx   |  15 +-
 .../src/component/onboarding/SelectSdk.tsx    |  22 +-
 .../component/onboarding/SharedComponents.tsx |  29 +++
 .../onboarding/TestSdkConnection.tsx          | 240 ++++++++++++++++++
 .../component/onboarding/UnleashConcepts.tsx  |   2 +-
 6 files changed, 298 insertions(+), 27 deletions(-)
 create mode 100644 frontend/src/component/onboarding/SharedComponents.tsx
 create mode 100644 frontend/src/component/onboarding/TestSdkConnection.tsx

diff --git a/frontend/src/component/onboarding/ConnectSdkDialog.tsx b/frontend/src/component/onboarding/ConnectSdkDialog.tsx
index d22822edbf65..b64a784e4b2b 100644
--- a/frontend/src/component/onboarding/ConnectSdkDialog.tsx
+++ b/frontend/src/component/onboarding/ConnectSdkDialog.tsx
@@ -8,8 +8,14 @@ import {
 } from '@mui/material';
 import { GenerateApiKey } from './GenerateApiKey';
 import { useEffect, useState } from 'react';
-import { type Sdk, SelectSdk } from './SelectSdk';
-import { GenrateApiKeyConcepts, SelectSdkConcepts } from './UnleashConcepts';
+import { SelectSdk } from './SelectSdk';
+import {
+    ConceptsDefinitionsWrapper,
+    GenrateApiKeyConcepts,
+    SelectSdkConcepts,
+} from './UnleashConcepts';
+import { TestSdkConnection } from './TestSdkConnection';
+import type { Sdk } from './SharedComponents';
 
 interface IConnectSDKDialogProps {
     open: boolean;
@@ -107,7 +113,9 @@ export const ConnectSdkDialog = ({
                             }}
                         />
                     ) : null}
-                    {isTestConnectionStage ? <div>Last stage</div> : null}
+                    {isTestConnectionStage ? (
+                        <TestSdkConnection sdk={sdk} apiKey={apiKey} />
+                    ) : null}
 
                     {stage === 'generate-api-key' ? (
                         <Navigation>
@@ -163,6 +171,9 @@ export const ConnectSdkDialog = ({
                 {isLargeScreen && isGenerateApiKeyStage ? (
                     <GenrateApiKeyConcepts />
                 ) : null}
+                {isLargeScreen && isTestConnectionStage ? (
+                    <ConceptsDefinitionsWrapper />
+                ) : null}
             </Box>
         </StyledDialog>
     );
diff --git a/frontend/src/component/onboarding/GenerateApiKey.tsx b/frontend/src/component/onboarding/GenerateApiKey.tsx
index f11c87fdb2d6..8fdf0db3f677 100644
--- a/frontend/src/component/onboarding/GenerateApiKey.tsx
+++ b/frontend/src/component/onboarding/GenerateApiKey.tsx
@@ -1,8 +1,8 @@
-import { useProjectApiTokens } from '../../hooks/api/getters/useProjectApiTokens/useProjectApiTokens';
-import useProjectApiTokensApi from '../../hooks/api/actions/useProjectApiTokensApi/useProjectApiTokensApi';
+import { useProjectApiTokens } from 'hooks/api/getters/useProjectApiTokens/useProjectApiTokens';
+import useProjectApiTokensApi from 'hooks/api/actions/useProjectApiTokensApi/useProjectApiTokensApi';
 import { parseToken } from './parseToken';
-import useToast from '../../hooks/useToast';
-import { formatUnknownError } from '../../utils/formatUnknownError';
+import useToast from 'hooks/useToast';
+import { formatUnknownError } from 'utils/formatUnknownError';
 import {
     Box,
     Button,
@@ -15,6 +15,7 @@ import { SingleSelectConfigButton } from '../common/DialogFormTemplate/ConfigBut
 import EnvironmentsIcon from '@mui/icons-material/CloudCircle';
 import { ArcherContainer, ArcherElement } from 'react-archer';
 import { useEffect } from 'react';
+import { SectionHeader } from './SharedComponents';
 
 const ChooseEnvironment = ({
     environments,
@@ -79,12 +80,6 @@ const TokenExplanationBox = styled(Box)(({ theme }) => ({
     flexWrap: 'wrap',
 }));
 
-const SectionHeader = styled('div')(({ theme }) => ({
-    fontWeight: theme.typography.fontWeightBold,
-    marginBottom: theme.spacing(1),
-    fontSize: theme.typography.body1.fontSize,
-}));
-
 const SectionDescription = styled('p')(({ theme }) => ({
     color: theme.palette.text.secondary,
     fontSize: theme.typography.body2.fontSize,
diff --git a/frontend/src/component/onboarding/SelectSdk.tsx b/frontend/src/component/onboarding/SelectSdk.tsx
index 84b77cf5517e..9ee1f1697b45 100644
--- a/frontend/src/component/onboarding/SelectSdk.tsx
+++ b/frontend/src/component/onboarding/SelectSdk.tsx
@@ -16,6 +16,12 @@ import rust from 'assets/icons/sdks/Logo-rust.svg';
 import svelte from 'assets/icons/sdks/Logo-svelte.svg';
 import vue from 'assets/icons/sdks/Logo-vue.svg';
 import { formatAssetPath } from 'utils/formatPath';
+import {
+    type ClientSdkName,
+    type Sdk,
+    SectionHeader,
+    type ServerSdkName,
+} from './SharedComponents';
 
 const SpacedContainer = styled('div')(({ theme }) => ({
     padding: theme.spacing(5, 8, 8, 8),
@@ -24,12 +30,6 @@ const SpacedContainer = styled('div')(({ theme }) => ({
     gap: theme.spacing(3),
 }));
 
-const PrimarySectionHeader = styled('div')(({ theme }) => ({
-    fontWeight: theme.typography.fontWeightBold,
-    marginBottom: theme.spacing(1),
-    fontSize: theme.typography.body1.fontSize,
-}));
-
 const SecondarySectionHeader = styled('div')(({ theme }) => ({
     marginTop: theme.spacing(4),
     marginBottom: theme.spacing(2),
@@ -71,7 +71,7 @@ const StyledAvatar = styled(Avatar)(({ theme }) => ({
     boxShadow: theme.shadows[2],
 }));
 
-const serverSdks = [
+const serverSdks: { name: ServerSdkName; icon: string }[] = [
     { name: 'Node', icon: node },
     { name: 'Golang', icon: go },
     { name: 'Ruby', icon: ruby },
@@ -82,7 +82,7 @@ const serverSdks = [
     { name: 'Python', icon: python },
 ];
 
-const clientSdks = [
+const clientSdks: { name: ClientSdkName; icon: string }[] = [
     { name: 'Javascript', icon: javascript },
     { name: 'React', icon: react },
     { name: 'Vue', icon: vue },
@@ -92,8 +92,6 @@ const clientSdks = [
     { name: 'Flutter', icon: flutter },
 ];
 
-type SdkType = 'client' | 'frontend';
-export type Sdk = { name: string; type: SdkType };
 interface ISelectSdkProps {
     onSelect: (sdk: Sdk) => void;
 }
@@ -102,7 +100,7 @@ export const SelectSdk: FC<ISelectSdkProps> = ({ onSelect }) => {
         <SpacedContainer>
             <Typography variant='h2'>Connect an SDK to Unleash</Typography>
             <Box sx={{ mt: 4 }}>
-                <PrimarySectionHeader>Select SDK</PrimarySectionHeader>
+                <SectionHeader>Select SDK</SectionHeader>
                 <SecondarySectionHeader>
                     Server side SDKs
                 </SecondarySectionHeader>
@@ -155,5 +153,3 @@ export const SelectSdk: FC<ISelectSdkProps> = ({ onSelect }) => {
         </SpacedContainer>
     );
 };
-
-export const SelectSdkConcepts = () => {};
diff --git a/frontend/src/component/onboarding/SharedComponents.tsx b/frontend/src/component/onboarding/SharedComponents.tsx
new file mode 100644
index 000000000000..56ac88cdfb20
--- /dev/null
+++ b/frontend/src/component/onboarding/SharedComponents.tsx
@@ -0,0 +1,29 @@
+import { styled } from '@mui/material';
+
+export type SdkType = 'client' | 'frontend';
+export type Sdk = { name: SdkName; type: SdkType };
+
+export const SectionHeader = styled('div')(({ theme }) => ({
+    fontWeight: theme.typography.fontWeightBold,
+    marginBottom: theme.spacing(1),
+    fontSize: theme.typography.body1.fontSize,
+}));
+
+export type ServerSdkName =
+    | 'Node'
+    | 'Golang'
+    | 'Ruby'
+    | 'PHP'
+    | 'Rust'
+    | 'DotNet'
+    | 'Java'
+    | 'Python';
+export type ClientSdkName =
+    | 'Javascript'
+    | 'React'
+    | 'Vue'
+    | 'Svelte'
+    | 'Swift'
+    | 'Android'
+    | 'Flutter';
+export type SdkName = ServerSdkName | ClientSdkName;
diff --git a/frontend/src/component/onboarding/TestSdkConnection.tsx b/frontend/src/component/onboarding/TestSdkConnection.tsx
new file mode 100644
index 000000000000..3cc2b90649e5
--- /dev/null
+++ b/frontend/src/component/onboarding/TestSdkConnection.tsx
@@ -0,0 +1,240 @@
+import type { FC } from 'react';
+import { Box, styled, Typography } from '@mui/material';
+import { type Sdk, type SdkName, SectionHeader } from './SharedComponents';
+import useUiConfig from '../../hooks/api/getters/useUiConfig/useUiConfig';
+
+const SpacedContainer = styled('div')(({ theme }) => ({
+    padding: theme.spacing(5, 8, 8, 8),
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(3),
+}));
+
+const StyledCodeBlock = styled('pre')(({ theme }) => ({
+    backgroundColor: theme.palette.background.elevation1,
+    padding: theme.spacing(2),
+    borderRadius: theme.shape.borderRadius,
+    overflow: 'auto',
+    fontSize: theme.typography.body2.fontSize,
+    wordBreak: 'break-all',
+    whiteSpace: 'pre-wrap',
+}));
+
+const installCommands: Record<SdkName, string> = {
+    Node: ' npm install unleash-client',
+    Golang: 'go get github.com/Unleash/unleash-client-go/v3',
+    Ruby: 'gem install unleash',
+    PHP: 'composer require unleash/client',
+    Rust: 'cargo add unleash-client',
+    DotNet: `dotnet add package unleash.client
+// If you do not have a json library in your project:
+dotnet add package Newtonsoft.Json`,
+    Java: `<dependency>
+    <groupId>io.getunleash</groupId>
+    <artifactId>unleash-client-java</artifactId>
+    <version>Latest version here</version>
+</dependency>`,
+    Python: 'pip install UnleashClient',
+    Javascript: 'npm install unleash-proxy-client',
+    React: 'npm install @unleash/proxy-client-react unleash-proxy-client',
+    Vue: 'npm install @unleash/proxy-client-vue',
+    Svelte: 'npm install @unleash/proxy-client-svelte',
+    Swift: 'https://github.com/Unleash/unleash-proxy-client-swift',
+    Android:
+        'implementation("io.getunleash:unleash-android:${unleash.sdk.version}")',
+    Flutter: 'flutter pub add unleash_proxy_client_flutter',
+};
+
+const codeSnippets: Record<SdkName, string> = {
+    Node: `import { initialize } from 'unleash-client';
+
+const unleash = initialize({
+  url: '<YOUR_API_URL>',
+  appName: 'unleash-onboarding-node',
+  customHeaders: { Authorization: '<YOUR_API_TOKEN>' },
+});
+`,
+    Golang: `import (
+    "github.com/Unleash/unleash-client-go/v3"
+)
+
+func init() {
+    unleash.Initialize(
+        unleash.WithListener(&unleash.DebugListener{}),
+        unleash.WithAppName("unleash-onboarding-golang"),
+        unleash.WithUrl("<YOUR_API_URL>"),
+        unleash.WithCustomHeaders(http.Header{"Authorization": {"<YOUR_API_TOKEN>"}}),
+    )
+}`,
+    Ruby: `Unleash.configure do |config|
+  config.app_name            = 'unleash-onboarding-ruby'
+  config.url                 = '<YOUR_API_URL>'
+  config.custom_http_headers = {'Authorization': '<YOUR_API_TOKEN>'}
+end`,
+    PHP: `<?php
+
+use Unleash\\Client\\UnleashBuilder;
+
+$unleash = UnleashBuilder::create()
+    ->withAppName('unleash-onboarding-php')
+    ->withAppUrl('<YOUR_API_URL>')
+    ->withHeader('Authorization', '<YOUR_API_TOKEN>')
+    ->withInstanceId('unleash-onboarding-instance')
+    ->build();`,
+    Rust: `let client = client::ClientBuilder::default()
+    .interval(500)
+    .into_client::<UserFeatures, reqwest::Client>(
+        "<YOUR_API_URL>",
+        "unleash-onboarding-rust",
+        "unleash-onboarding-instance",
+        "<YOUR_API_TOKEN>",
+    )?;
+client.register().await?;`,
+    DotNet: `using Unleash;
+var settings = new UnleashSettings()
+{
+    AppName = "unleash-onboarding-dotnet",
+    UnleashApi = new Uri("<YOUR_API_URL>"),
+    CustomHttpHeaders = new Dictionary<string, string>()
+    {
+      {"Authorization","<YOUR_API_TOKEN>" }
+    }
+};`,
+    Java: `UnleashConfig config = UnleashConfig.builder()
+        .appName("unleash-onboarding-java")
+        .instanceId("unleash-onboarding-instance")
+        .unleashAPI("<YOUR_API_URL>")
+        .apiKey("<YOUR_API_TOKEN>")
+        .build();
+
+Unleash unleash = new DefaultUnleash(config);`,
+    Python: `from UnleashClient import UnleashClient
+
+client = UnleashClient(
+    url="<YOUR_API_URL>",
+    app_name="unleash-onboarding-python",
+    custom_headers={'Authorization': '<YOUR_API_TOKEN>"'})
+
+client.initialize_client()`,
+    Javascript: `import { UnleashClient } from 'unleash-proxy-client';
+
+const unleash = new UnleashClient({
+    url: '<YOUR_API_URL>',
+    clientKey: '<YOUR_API_TOKEN>',
+    appName: 'unleash-onboarding-javascript',
+});
+
+// Start the background polling
+unleash.start();`,
+    React: `import { createRoot } from 'react-dom/client';
+import { FlagProvider } from '@unleash/proxy-client-react';
+
+const config = {
+  url: '<YOUR_API_URL>',
+  clientKey: '<YOUR_API_TOKEN>',
+  refreshInterval: 15,
+  appName: 'unleash-onboarding-react',
+};
+
+const root = createRoot(document.getElementById('root'));
+
+root.render(
+  <React.StrictMode>
+    <FlagProvider config={config}>
+      <App />
+    </FlagProvider>
+  </React.StrictMode>
+);`,
+    Vue: `import { createApp } from 'vue'
+import { plugin as unleashPlugin } from '@unleash/proxy-client-vue'
+// import the root component App from a single-file component.
+import App from './App.vue'
+
+const config = {
+  url: '<YOUR_API_URL>'',
+  clientKey: '<YOUR_API_TOKEN>',
+  refreshInterval: 15,
+  appName: 'unleash-onboarding-vue',
+}
+
+const app = createApp(App)
+app.use(unleashPlugin, { config })
+app.mount('#app')`,
+    Svelte: `<script lang="ts">
+    import { FlagProvider } from '@unleash/proxy-client-svelte';
+
+    const config = {
+        url: '<YOUR_API_URL>',
+        clientKey: '<YOUR_API_TOKEN>',
+        refreshInterval: 15,
+        appName: 'unleash-onboarding-svelte'
+    };
+</script>
+
+<FlagProvider {config}>
+    <App />
+</FlagProvider>`,
+    Swift: `import SwiftUI
+import UnleashProxyClientSwift
+
+var unleash = UnleashProxyClientSwift.UnleashClient(
+   unleashUrl: "<YOUR_API_URL>",
+   clientKey: "<YOUR_API_TOKEN>",
+   refreshInterval: 15,
+   appName: "unleash-onboarding-swift",
+   context: [:])
+
+unleash.start()`,
+    Android: `val unleash = DefaultUnleash(
+    androidContext = applicationContext, // likely a reference to your Android application context
+    unleashConfig =  UnleashConfig.newBuilder(appName = "unleash-onboarding-android")
+        .proxyUrl("<YOUR_API_URL>")
+        .clientKey("<YOUR_API_TOKEN>")
+        .pollingStrategy.interval(3000)
+        .metricsStrategy.interval(3000)
+        .build()
+)`,
+    Flutter: `import 'package:unleash_proxy_client_flutter/unleash_proxy_client_flutter.dart';
+
+final unleash = UnleashClient(
+    url: Uri.parse('<YOUR_API_URL>'),
+    clientKey: '<YOUR_API_TOKEN>',
+    appName: 'unleash-onboarding-flutter');`,
+};
+
+interface ITestSdkConnectionProps {
+    sdk: Sdk;
+    apiKey: string;
+}
+export const TestSdkConnection: FC<ITestSdkConnectionProps> = ({
+    sdk,
+    apiKey,
+}) => {
+    const { uiConfig } = useUiConfig();
+
+    const clientApiUrl = `${uiConfig.unleashUrl}/api/`;
+    const frontendApiUrl = `${uiConfig.unleashUrl}/api/frontend/`;
+    const apiUrl = sdk.type === 'client' ? clientApiUrl : frontendApiUrl;
+    const codeSnippet =
+        codeSnippets[sdk.name] || `No snippet found for the ${sdk.name} SDK`;
+    const installCommand =
+        installCommands[sdk.name] ||
+        `No install command found for the ${sdk.name} SDK`;
+
+    return (
+        <SpacedContainer>
+            <Typography variant='h2'>Connect an SDK to Unleash</Typography>
+            <Box sx={{ mt: 4 }}>
+                <SectionHeader>Setup the SDK</SectionHeader>
+                <p>1. Install the SDK</p>
+                <StyledCodeBlock>{installCommand}</StyledCodeBlock>
+                <p>2. Initialize the SDK</p>
+                <StyledCodeBlock>
+                    {codeSnippet
+                        .replace('<YOUR_API_TOKEN>', apiKey)
+                        .replace('<YOUR_API_URL>', apiUrl)}
+                </StyledCodeBlock>
+            </Box>
+        </SpacedContainer>
+    );
+};
diff --git a/frontend/src/component/onboarding/UnleashConcepts.tsx b/frontend/src/component/onboarding/UnleashConcepts.tsx
index c62e1ebe49f6..a91804b1ba6d 100644
--- a/frontend/src/component/onboarding/UnleashConcepts.tsx
+++ b/frontend/src/component/onboarding/UnleashConcepts.tsx
@@ -3,7 +3,7 @@ import { ProjectIcon } from '../common/ProjectIcon/ProjectIcon';
 import EnvironmentsIcon from '@mui/icons-material/CloudCircle';
 import CodeIcon from '@mui/icons-material/Code';
 
-const ConceptsDefinitionsWrapper = styled('div')(({ theme }) => ({
+export const ConceptsDefinitionsWrapper = styled('div')(({ theme }) => ({
     backgroundColor: theme.palette.background.sidebar,
     padding: theme.spacing(12, 6, 6, 6),
     flex: 0,

From c41bafd47dd2857a78965dde9c525445c044799a Mon Sep 17 00:00:00 2001
From: kwasniew <kwasniewski.mateusz@gmail.com>
Date: Wed, 4 Sep 2024 15:28:44 +0200
Subject: [PATCH 6/9] feat: sdk snippets in test connection stage

---
 .../component/onboarding/ConnectSdkDialog.tsx |  3 ++-
 .../src/component/onboarding/SelectSdk.tsx    |  8 ++-----
 .../component/onboarding/SharedComponents.tsx | 22 -------------------
 .../onboarding/TestSdkConnection.tsx          |  5 +++--
 4 files changed, 7 insertions(+), 31 deletions(-)

diff --git a/frontend/src/component/onboarding/ConnectSdkDialog.tsx b/frontend/src/component/onboarding/ConnectSdkDialog.tsx
index b64a784e4b2b..d57ade6879d4 100644
--- a/frontend/src/component/onboarding/ConnectSdkDialog.tsx
+++ b/frontend/src/component/onboarding/ConnectSdkDialog.tsx
@@ -15,7 +15,8 @@ import {
     SelectSdkConcepts,
 } from './UnleashConcepts';
 import { TestSdkConnection } from './TestSdkConnection';
-import type { Sdk } from './SharedComponents';
+
+import type { Sdk } from './sharedTypes';
 
 interface IConnectSDKDialogProps {
     open: boolean;
diff --git a/frontend/src/component/onboarding/SelectSdk.tsx b/frontend/src/component/onboarding/SelectSdk.tsx
index 9ee1f1697b45..00354899d4d8 100644
--- a/frontend/src/component/onboarding/SelectSdk.tsx
+++ b/frontend/src/component/onboarding/SelectSdk.tsx
@@ -16,12 +16,8 @@ import rust from 'assets/icons/sdks/Logo-rust.svg';
 import svelte from 'assets/icons/sdks/Logo-svelte.svg';
 import vue from 'assets/icons/sdks/Logo-vue.svg';
 import { formatAssetPath } from 'utils/formatPath';
-import {
-    type ClientSdkName,
-    type Sdk,
-    SectionHeader,
-    type ServerSdkName,
-} from './SharedComponents';
+import { SectionHeader } from './SharedComponents';
+import type { ClientSdkName, Sdk, ServerSdkName } from './sharedTypes';
 
 const SpacedContainer = styled('div')(({ theme }) => ({
     padding: theme.spacing(5, 8, 8, 8),
diff --git a/frontend/src/component/onboarding/SharedComponents.tsx b/frontend/src/component/onboarding/SharedComponents.tsx
index 56ac88cdfb20..181f8ebf6355 100644
--- a/frontend/src/component/onboarding/SharedComponents.tsx
+++ b/frontend/src/component/onboarding/SharedComponents.tsx
@@ -1,29 +1,7 @@
 import { styled } from '@mui/material';
 
-export type SdkType = 'client' | 'frontend';
-export type Sdk = { name: SdkName; type: SdkType };
-
 export const SectionHeader = styled('div')(({ theme }) => ({
     fontWeight: theme.typography.fontWeightBold,
     marginBottom: theme.spacing(1),
     fontSize: theme.typography.body1.fontSize,
 }));
-
-export type ServerSdkName =
-    | 'Node'
-    | 'Golang'
-    | 'Ruby'
-    | 'PHP'
-    | 'Rust'
-    | 'DotNet'
-    | 'Java'
-    | 'Python';
-export type ClientSdkName =
-    | 'Javascript'
-    | 'React'
-    | 'Vue'
-    | 'Svelte'
-    | 'Swift'
-    | 'Android'
-    | 'Flutter';
-export type SdkName = ServerSdkName | ClientSdkName;
diff --git a/frontend/src/component/onboarding/TestSdkConnection.tsx b/frontend/src/component/onboarding/TestSdkConnection.tsx
index 3cc2b90649e5..fdf388ca7a68 100644
--- a/frontend/src/component/onboarding/TestSdkConnection.tsx
+++ b/frontend/src/component/onboarding/TestSdkConnection.tsx
@@ -1,7 +1,8 @@
 import type { FC } from 'react';
 import { Box, styled, Typography } from '@mui/material';
-import { type Sdk, type SdkName, SectionHeader } from './SharedComponents';
-import useUiConfig from '../../hooks/api/getters/useUiConfig/useUiConfig';
+import { SectionHeader } from './SharedComponents';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import type { Sdk, SdkName } from './sharedTypes';
 
 const SpacedContainer = styled('div')(({ theme }) => ({
     padding: theme.spacing(5, 8, 8, 8),

From 742a39748d5ec6c8012d4314da42d98a968c7281 Mon Sep 17 00:00:00 2001
From: kwasniew <kwasniewski.mateusz@gmail.com>
Date: Wed, 4 Sep 2024 15:29:03 +0200
Subject: [PATCH 7/9] feat: sdk snippets in test connection stage

---
 .../src/component/onboarding/sharedTypes.ts   | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 frontend/src/component/onboarding/sharedTypes.ts

diff --git a/frontend/src/component/onboarding/sharedTypes.ts b/frontend/src/component/onboarding/sharedTypes.ts
new file mode 100644
index 000000000000..c1c5117bed68
--- /dev/null
+++ b/frontend/src/component/onboarding/sharedTypes.ts
@@ -0,0 +1,20 @@
+export type SdkType = 'client' | 'frontend';
+export type Sdk = { name: SdkName; type: SdkType };
+export type ServerSdkName =
+    | 'Node'
+    | 'Golang'
+    | 'Ruby'
+    | 'PHP'
+    | 'Rust'
+    | 'DotNet'
+    | 'Java'
+    | 'Python';
+export type ClientSdkName =
+    | 'Javascript'
+    | 'React'
+    | 'Vue'
+    | 'Svelte'
+    | 'Swift'
+    | 'Android'
+    | 'Flutter';
+export type SdkName = ServerSdkName | ClientSdkName;

From 418a441740630258edd6e31de2a22d7bf746e921 Mon Sep 17 00:00:00 2001
From: kwasniew <kwasniewski.mateusz@gmail.com>
Date: Wed, 4 Sep 2024 15:30:57 +0200
Subject: [PATCH 8/9] feat: sdk snippets in test connection stage

---
 .../onboarding/TestSdkConnection.tsx          | 185 +-----------------
 1 file changed, 2 insertions(+), 183 deletions(-)

diff --git a/frontend/src/component/onboarding/TestSdkConnection.tsx b/frontend/src/component/onboarding/TestSdkConnection.tsx
index fdf388ca7a68..3e3f6d00f8d4 100644
--- a/frontend/src/component/onboarding/TestSdkConnection.tsx
+++ b/frontend/src/component/onboarding/TestSdkConnection.tsx
@@ -2,7 +2,8 @@ import type { FC } from 'react';
 import { Box, styled, Typography } from '@mui/material';
 import { SectionHeader } from './SharedComponents';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
-import type { Sdk, SdkName } from './sharedTypes';
+import type { Sdk } from './sharedTypes';
+import { codeSnippets, installCommands } from './sdkSnippets';
 
 const SpacedContainer = styled('div')(({ theme }) => ({
     padding: theme.spacing(5, 8, 8, 8),
@@ -21,188 +22,6 @@ const StyledCodeBlock = styled('pre')(({ theme }) => ({
     whiteSpace: 'pre-wrap',
 }));
 
-const installCommands: Record<SdkName, string> = {
-    Node: ' npm install unleash-client',
-    Golang: 'go get github.com/Unleash/unleash-client-go/v3',
-    Ruby: 'gem install unleash',
-    PHP: 'composer require unleash/client',
-    Rust: 'cargo add unleash-client',
-    DotNet: `dotnet add package unleash.client
-// If you do not have a json library in your project:
-dotnet add package Newtonsoft.Json`,
-    Java: `<dependency>
-    <groupId>io.getunleash</groupId>
-    <artifactId>unleash-client-java</artifactId>
-    <version>Latest version here</version>
-</dependency>`,
-    Python: 'pip install UnleashClient',
-    Javascript: 'npm install unleash-proxy-client',
-    React: 'npm install @unleash/proxy-client-react unleash-proxy-client',
-    Vue: 'npm install @unleash/proxy-client-vue',
-    Svelte: 'npm install @unleash/proxy-client-svelte',
-    Swift: 'https://github.com/Unleash/unleash-proxy-client-swift',
-    Android:
-        'implementation("io.getunleash:unleash-android:${unleash.sdk.version}")',
-    Flutter: 'flutter pub add unleash_proxy_client_flutter',
-};
-
-const codeSnippets: Record<SdkName, string> = {
-    Node: `import { initialize } from 'unleash-client';
-
-const unleash = initialize({
-  url: '<YOUR_API_URL>',
-  appName: 'unleash-onboarding-node',
-  customHeaders: { Authorization: '<YOUR_API_TOKEN>' },
-});
-`,
-    Golang: `import (
-    "github.com/Unleash/unleash-client-go/v3"
-)
-
-func init() {
-    unleash.Initialize(
-        unleash.WithListener(&unleash.DebugListener{}),
-        unleash.WithAppName("unleash-onboarding-golang"),
-        unleash.WithUrl("<YOUR_API_URL>"),
-        unleash.WithCustomHeaders(http.Header{"Authorization": {"<YOUR_API_TOKEN>"}}),
-    )
-}`,
-    Ruby: `Unleash.configure do |config|
-  config.app_name            = 'unleash-onboarding-ruby'
-  config.url                 = '<YOUR_API_URL>'
-  config.custom_http_headers = {'Authorization': '<YOUR_API_TOKEN>'}
-end`,
-    PHP: `<?php
-
-use Unleash\\Client\\UnleashBuilder;
-
-$unleash = UnleashBuilder::create()
-    ->withAppName('unleash-onboarding-php')
-    ->withAppUrl('<YOUR_API_URL>')
-    ->withHeader('Authorization', '<YOUR_API_TOKEN>')
-    ->withInstanceId('unleash-onboarding-instance')
-    ->build();`,
-    Rust: `let client = client::ClientBuilder::default()
-    .interval(500)
-    .into_client::<UserFeatures, reqwest::Client>(
-        "<YOUR_API_URL>",
-        "unleash-onboarding-rust",
-        "unleash-onboarding-instance",
-        "<YOUR_API_TOKEN>",
-    )?;
-client.register().await?;`,
-    DotNet: `using Unleash;
-var settings = new UnleashSettings()
-{
-    AppName = "unleash-onboarding-dotnet",
-    UnleashApi = new Uri("<YOUR_API_URL>"),
-    CustomHttpHeaders = new Dictionary<string, string>()
-    {
-      {"Authorization","<YOUR_API_TOKEN>" }
-    }
-};`,
-    Java: `UnleashConfig config = UnleashConfig.builder()
-        .appName("unleash-onboarding-java")
-        .instanceId("unleash-onboarding-instance")
-        .unleashAPI("<YOUR_API_URL>")
-        .apiKey("<YOUR_API_TOKEN>")
-        .build();
-
-Unleash unleash = new DefaultUnleash(config);`,
-    Python: `from UnleashClient import UnleashClient
-
-client = UnleashClient(
-    url="<YOUR_API_URL>",
-    app_name="unleash-onboarding-python",
-    custom_headers={'Authorization': '<YOUR_API_TOKEN>"'})
-
-client.initialize_client()`,
-    Javascript: `import { UnleashClient } from 'unleash-proxy-client';
-
-const unleash = new UnleashClient({
-    url: '<YOUR_API_URL>',
-    clientKey: '<YOUR_API_TOKEN>',
-    appName: 'unleash-onboarding-javascript',
-});
-
-// Start the background polling
-unleash.start();`,
-    React: `import { createRoot } from 'react-dom/client';
-import { FlagProvider } from '@unleash/proxy-client-react';
-
-const config = {
-  url: '<YOUR_API_URL>',
-  clientKey: '<YOUR_API_TOKEN>',
-  refreshInterval: 15,
-  appName: 'unleash-onboarding-react',
-};
-
-const root = createRoot(document.getElementById('root'));
-
-root.render(
-  <React.StrictMode>
-    <FlagProvider config={config}>
-      <App />
-    </FlagProvider>
-  </React.StrictMode>
-);`,
-    Vue: `import { createApp } from 'vue'
-import { plugin as unleashPlugin } from '@unleash/proxy-client-vue'
-// import the root component App from a single-file component.
-import App from './App.vue'
-
-const config = {
-  url: '<YOUR_API_URL>'',
-  clientKey: '<YOUR_API_TOKEN>',
-  refreshInterval: 15,
-  appName: 'unleash-onboarding-vue',
-}
-
-const app = createApp(App)
-app.use(unleashPlugin, { config })
-app.mount('#app')`,
-    Svelte: `<script lang="ts">
-    import { FlagProvider } from '@unleash/proxy-client-svelte';
-
-    const config = {
-        url: '<YOUR_API_URL>',
-        clientKey: '<YOUR_API_TOKEN>',
-        refreshInterval: 15,
-        appName: 'unleash-onboarding-svelte'
-    };
-</script>
-
-<FlagProvider {config}>
-    <App />
-</FlagProvider>`,
-    Swift: `import SwiftUI
-import UnleashProxyClientSwift
-
-var unleash = UnleashProxyClientSwift.UnleashClient(
-   unleashUrl: "<YOUR_API_URL>",
-   clientKey: "<YOUR_API_TOKEN>",
-   refreshInterval: 15,
-   appName: "unleash-onboarding-swift",
-   context: [:])
-
-unleash.start()`,
-    Android: `val unleash = DefaultUnleash(
-    androidContext = applicationContext, // likely a reference to your Android application context
-    unleashConfig =  UnleashConfig.newBuilder(appName = "unleash-onboarding-android")
-        .proxyUrl("<YOUR_API_URL>")
-        .clientKey("<YOUR_API_TOKEN>")
-        .pollingStrategy.interval(3000)
-        .metricsStrategy.interval(3000)
-        .build()
-)`,
-    Flutter: `import 'package:unleash_proxy_client_flutter/unleash_proxy_client_flutter.dart';
-
-final unleash = UnleashClient(
-    url: Uri.parse('<YOUR_API_URL>'),
-    clientKey: '<YOUR_API_TOKEN>',
-    appName: 'unleash-onboarding-flutter');`,
-};
-
 interface ITestSdkConnectionProps {
     sdk: Sdk;
     apiKey: string;

From a0109a7948d0adc61e013bcd30b145d6fc43f67d Mon Sep 17 00:00:00 2001
From: kwasniew <kwasniewski.mateusz@gmail.com>
Date: Wed, 4 Sep 2024 15:32:51 +0200
Subject: [PATCH 9/9] feat: sdk snippets in test connection stage

---
 .../src/component/onboarding/sdkSnippets.ts   | 183 ++++++++++++++++++
 1 file changed, 183 insertions(+)
 create mode 100644 frontend/src/component/onboarding/sdkSnippets.ts

diff --git a/frontend/src/component/onboarding/sdkSnippets.ts b/frontend/src/component/onboarding/sdkSnippets.ts
new file mode 100644
index 000000000000..46960bfd665c
--- /dev/null
+++ b/frontend/src/component/onboarding/sdkSnippets.ts
@@ -0,0 +1,183 @@
+import type { SdkName } from './sharedTypes';
+
+export const installCommands: Record<SdkName, string> = {
+    Node: ' npm install unleash-client',
+    Golang: 'go get github.com/Unleash/unleash-client-go/v3',
+    Ruby: 'gem install unleash',
+    PHP: 'composer require unleash/client',
+    Rust: 'cargo add unleash-client',
+    DotNet: `dotnet add package unleash.client
+// If you do not have a json library in your project:
+dotnet add package Newtonsoft.Json`,
+    Java: `<dependency>
+    <groupId>io.getunleash</groupId>
+    <artifactId>unleash-client-java</artifactId>
+    <version>Latest version here</version>
+</dependency>`,
+    Python: 'pip install UnleashClient',
+    Javascript: 'npm install unleash-proxy-client',
+    React: 'npm install @unleash/proxy-client-react unleash-proxy-client',
+    Vue: 'npm install @unleash/proxy-client-vue',
+    Svelte: 'npm install @unleash/proxy-client-svelte',
+    Swift: 'https://github.com/Unleash/unleash-proxy-client-swift',
+    Android:
+        'implementation("io.getunleash:unleash-android:${unleash.sdk.version}")',
+    Flutter: 'flutter pub add unleash_proxy_client_flutter',
+};
+
+export const codeSnippets: Record<SdkName, string> = {
+    Node: `import { initialize } from 'unleash-client';
+
+const unleash = initialize({
+  url: '<YOUR_API_URL>',
+  appName: 'unleash-onboarding-node',
+  customHeaders: { Authorization: '<YOUR_API_TOKEN>' },
+});
+`,
+    Golang: `import (
+    "github.com/Unleash/unleash-client-go/v3"
+)
+
+func init() {
+    unleash.Initialize(
+        unleash.WithListener(&unleash.DebugListener{}),
+        unleash.WithAppName("unleash-onboarding-golang"),
+        unleash.WithUrl("<YOUR_API_URL>"),
+        unleash.WithCustomHeaders(http.Header{"Authorization": {"<YOUR_API_TOKEN>"}}),
+    )
+}`,
+    Ruby: `Unleash.configure do |config|
+  config.app_name            = 'unleash-onboarding-ruby'
+  config.url                 = '<YOUR_API_URL>'
+  config.custom_http_headers = {'Authorization': '<YOUR_API_TOKEN>'}
+end`,
+    PHP: `<?php
+
+use Unleash\\Client\\UnleashBuilder;
+
+$unleash = UnleashBuilder::create()
+    ->withAppName('unleash-onboarding-php')
+    ->withAppUrl('<YOUR_API_URL>')
+    ->withHeader('Authorization', '<YOUR_API_TOKEN>')
+    ->withInstanceId('unleash-onboarding-instance')
+    ->build();`,
+    Rust: `let client = client::ClientBuilder::default()
+    .interval(500)
+    .into_client::<UserFeatures, reqwest::Client>(
+        "<YOUR_API_URL>",
+        "unleash-onboarding-rust",
+        "unleash-onboarding-instance",
+        "<YOUR_API_TOKEN>",
+    )?;
+client.register().await?;`,
+    DotNet: `using Unleash;
+var settings = new UnleashSettings()
+{
+    AppName = "unleash-onboarding-dotnet",
+    UnleashApi = new Uri("<YOUR_API_URL>"),
+    CustomHttpHeaders = new Dictionary<string, string>()
+    {
+      {"Authorization","<YOUR_API_TOKEN>" }
+    }
+};`,
+    Java: `UnleashConfig config = UnleashConfig.builder()
+        .appName("unleash-onboarding-java")
+        .instanceId("unleash-onboarding-instance")
+        .unleashAPI("<YOUR_API_URL>")
+        .apiKey("<YOUR_API_TOKEN>")
+        .build();
+
+Unleash unleash = new DefaultUnleash(config);`,
+    Python: `from UnleashClient import UnleashClient
+
+client = UnleashClient(
+    url="<YOUR_API_URL>",
+    app_name="unleash-onboarding-python",
+    custom_headers={'Authorization': '<YOUR_API_TOKEN>"'})
+
+client.initialize_client()`,
+    Javascript: `import { UnleashClient } from 'unleash-proxy-client';
+
+const unleash = new UnleashClient({
+    url: '<YOUR_API_URL>',
+    clientKey: '<YOUR_API_TOKEN>',
+    appName: 'unleash-onboarding-javascript',
+});
+
+// Start the background polling
+unleash.start();`,
+    React: `import { createRoot } from 'react-dom/client';
+import { FlagProvider } from '@unleash/proxy-client-react';
+
+const config = {
+  url: '<YOUR_API_URL>',
+  clientKey: '<YOUR_API_TOKEN>',
+  refreshInterval: 15,
+  appName: 'unleash-onboarding-react',
+};
+
+const root = createRoot(document.getElementById('root'));
+
+root.render(
+  <React.StrictMode>
+    <FlagProvider config={config}>
+      <App />
+    </FlagProvider>
+  </React.StrictMode>
+);`,
+    Vue: `import { createApp } from 'vue'
+import { plugin as unleashPlugin } from '@unleash/proxy-client-vue'
+// import the root component App from a single-file component.
+import App from './App.vue'
+
+const config = {
+  url: '<YOUR_API_URL>'',
+  clientKey: '<YOUR_API_TOKEN>',
+  refreshInterval: 15,
+  appName: 'unleash-onboarding-vue',
+}
+
+const app = createApp(App)
+app.use(unleashPlugin, { config })
+app.mount('#app')`,
+    Svelte: `<script lang="ts">
+    import { FlagProvider } from '@unleash/proxy-client-svelte';
+
+    const config = {
+        url: '<YOUR_API_URL>',
+        clientKey: '<YOUR_API_TOKEN>',
+        refreshInterval: 15,
+        appName: 'unleash-onboarding-svelte'
+    };
+</script>
+
+<FlagProvider {config}>
+    <App />
+</FlagProvider>`,
+    Swift: `import SwiftUI
+import UnleashProxyClientSwift
+
+var unleash = UnleashProxyClientSwift.UnleashClient(
+   unleashUrl: "<YOUR_API_URL>",
+   clientKey: "<YOUR_API_TOKEN>",
+   refreshInterval: 15,
+   appName: "unleash-onboarding-swift",
+   context: [:])
+
+unleash.start()`,
+    Android: `val unleash = DefaultUnleash(
+    androidContext = applicationContext, // likely a reference to your Android application context
+    unleashConfig =  UnleashConfig.newBuilder(appName = "unleash-onboarding-android")
+        .proxyUrl("<YOUR_API_URL>")
+        .clientKey("<YOUR_API_TOKEN>")
+        .pollingStrategy.interval(3000)
+        .metricsStrategy.interval(3000)
+        .build()
+)`,
+    Flutter: `import 'package:unleash_proxy_client_flutter/unleash_proxy_client_flutter.dart';
+
+final unleash = UnleashClient(
+    url: Uri.parse('<YOUR_API_URL>'),
+    clientKey: '<YOUR_API_TOKEN>',
+    appName: 'unleash-onboarding-flutter');`,
+};