Homepage - Wayfinding

docs/learn/fundamentals/anchors.mdx

@@ -3,6 +3,8 @@ title: Anchors
 sidebar_position: 90
 ---
 
+## Overview
+
 An anchor is a Stellar-specific term for the on and off-ramps that connect the Stellar network to traditional financial rails, such as financial institutions or fintech companies. Anchors accept deposits of fiat currencies (such as the US dollar, Argentine peso, or Nigerian naira) via existing rails (such as bank deposits or cash-in points), then sends the user the equivalent digital tokens on the Stellar network. The equivalent digital tokens can either represent that same fiat currency or another digital token altogether. Alternatively, anchors allow token holders to redeem their tokens for the real-world assets they represent.
 
 Stellar has anchor services operating worldwide. View the [Anchor Directory](https://resources.stellar.org/anchors?) for more information on existing Stellar anchors.
@@ -13,7 +15,7 @@ You can set up an anchor by using the SDF-maintained [Anchor Platform](/platform
 
 Learn how to integrate anchor services into your blockchain-based application by viewing the [Build Apps section](../../build/apps/overview.mdx). If you’re looking specifically for MoneyGram Access, see the Integrate with MoneyGram Access tutorial.
 
-### Stellar Ecosystem Proposals (SEPs)
+## Stellar Ecosystem Proposals (SEPs)
 
 Stellar is an open-source network that is designed to interoperate with traditional financial institutions, various types of assets, and other networks. Network participants implement Stellar Ecosystem Proposals (SEPs) to ensure they can interoperate with other products and services on the network. SEPs are publicly created, open-source documents that live in a [GitHub repository](https://github.com/stellar/stellar-protocol/tree/master/ecosystem#stellar-ecosystem-proposals-seps.mdx) and they define how anchors, asset issuers, applications, exchanges, and other service providers should interact and interoperate.
 
@@ -29,3 +31,29 @@ For anchors, the most important SEPs are [SEP-6]: Programmatic Deposit and Withd
 [sep-24]: https://github.com/stellar/stellar-protocol/blob/master/ecosystem/sep-0024.md
 [sep-31]: https://github.com/stellar/stellar-protocol/blob/master/ecosystem/sep-0031.md
 [sep-38]: https://github.com/stellar/stellar-protocol/blob/master/ecosystem/sep-0038.md
+
+### Using SEP-6: Programmatic Deposit and Withdrawal versus SEP-24: Hosted Deposit and Withdrawal
+
+A user typically must decide whether they want to set up an anchor using [SEP-6: Programmatic Deposit and Withdrawal](https://github.com/stellar/stellar-protocol/blob/master/ecosystem/sep-0006.md) or [SEP-24: Hosted Deposit and Withdrawal](https://github.com/stellar/stellar-protocol/blob/master/ecosystem/sep-0024.md). Here are the differences and what to consider when choosing one or the other.
+
+#### SEP-6: Programmatic Deposit and Withdrawal
+
+Defines the standard way for anchors and wallets to interact on behalf of users. With this SEP’s guidance, wallets and other clients can interact with anchors directly without the user needing to leave the wallet to go to the anchor’s site. With SEP-6, the client collects KYC information from the user.
+
+Wallets (clients) must take into consideration when using SEP-6:
+
+- Clients must collect KYC information they may not need
+- Clients must know what information to collect per-anchor
+- Clients must send the information in a standardized format [(SEP-12: KYC API)](https://github.com/stellar/stellar-protocol/blob/master/ecosystem/sep-0012.md)
+- Anchors must receive the information via SEP-12’s API
+
+#### SEP-24: Hosted Deposit and Withdrawal
+
+Defines the standard way for anchors and wallets to interact on behalf of users interactively. This means that the user’s application must open a webview hosted by a third-party anchor for the user to provide the information necessary to complete the transaction. With SEP-24, the anchor collects KYC information from the user.
+
+Wallets (clients) must take into consideration when using SEP-24:
+
+- Clients don’t have to collect the anchor’s required KYC information
+- Clients & anchors don’t have to implement [SEP-12: KYC API](https://github.com/stellar/stellar-protocol/blob/master/ecosystem/sep-0012.md)
+- Anchors must create a UI to be rendered by many clients
+- Clients must allow anchors to temporarily control UX

docs/tools/developer-tools/anchor-tools.mdx

@@ -15,6 +15,6 @@ View all anchors on Stellar, their currencies, and where they operate.
 
 An application for interactively testing anchor services. Lets financial application developers test their integrations and learn how Stellar ecosystem protocols (SEPs) work; use the demo wallet to test Regulated Assets (SEP-8), Hosted Deposit and Withdrawal (SEP-24), and Cross-Border Payments (SEP-31) with any home domain that has a Stellar Info File (also known as SEP-1, or a stellar.toml file).
 
-### [Polaris](https://django-polaris.readthedocs.io/en/stable/)
+### [Anchor Test Suite](https://anchor-tests.stellar.org/)
 
-An extendable django app that makes it easy for anchors to facilitate cross-border payments and enable deposits and withdrawals; run a web server supporting any combination of SEP-1, 6, 10, 12, and 24.
+A test suite for validating SEP6, SEP24, SEP31 transfer servers.

src/components/Homepage/DeveloperResources/index.tsx

@@ -0,0 +1,148 @@
+import React, { type ReactNode } from 'react'
+import Heading from '@theme/Heading';
+import Link from '@docusaurus/Link';
+import clsx from 'clsx';
+import { exploreLink, partitionBoxes, type NavigatingDocsItem as DeveloperResourcesItem } from '@site/src/components/Homepage/NavigatingTheDocs'
+import Translate, { translate } from '@docusaurus/Translate'
+import styles from './styles.module.css'
+
+const DeveloperResourcesBoxes: DeveloperResourcesItem[] = [
+  {
+    title: translate({
+      message: 'Stellar Developer Discord',
+      id: 'component.Homepage.DeveloperResources.Discord.Title',
+    }),
+    description: (
+      <Translate
+        id='component.Homepage.DeveloperResources.Discord.Description'
+        description='Long description of what kind of developer resource this is.'>
+        Ask questions and engage with other Stellar devs.
+      </Translate>
+    ),
+    link: exploreLink('https://discord.gg/st7Mxd58BV'),
+  },
+  {
+    title: translate({
+      message: 'Developer Site',
+      id: 'component.Homepage.DeveloperResources.DeveloperSite.Title',
+    }),
+    description: (
+      <Translate
+        id='component.Homepage.DeveloperResources.DeveloperSite.Description'
+        description='Long description of what kind of developer resource this is.'>
+        Get the latest news and insights about building on Stellar.
+      </Translate>
+    ),
+    link: exploreLink('https://stellar.org/developers'),
+  },
+  {
+    title: translate({
+      message: 'Stellar Stack Exchange',
+      id: 'component.Homepage.DeveloperResources.StackExchange.Title',
+    }),
+    description: (
+      <Translate
+        id='component.Homepage.DeveloperResources.StackExchange.Description'
+        description='Long description of what kind of developer resource this is.'>
+        A question and answer site for Stellar developers; if you can’t find what you’re looking for in the docs, try searching the Stack Exchange to see if your question has been addressed. If it hasn't, feel free to ask!
+      </Translate>
+    ),
+    link: exploreLink('https://stellar.stackexchange.com/'),
+  },
+  {
+    title: translate({
+      message: 'Stellar Developers Google Group',
+      id: 'component.Homepage.DeveloperResources.GoogleGroup.Title',
+    }),
+    description: (
+      <Translate
+        id='component.Homepage.DeveloperResources.GoogleGroup.Description'
+        description='Long description of what kind of developer resource this is.'>
+        Discuss Core Advancement Proposals (CAPs) and Stellar Ecosystem Proposals (SEPs), talk about the development of Stellar Core and Horizon, and stay informed about important network upgrades.
+      </Translate>
+    ),
+    link: exploreLink('https://groups.google.com/g/stellar-dev'),
+  },
+]
+
+function DeveloperResourcesFeature({title, description, link}) {
+  return (
+    <div className='col col--6 padding--md'>
+      <div className={clsx(styles.DeveloperResourcesFeature, 'padding--lg')}>
+        <Heading as="h3" className='text--semibold'>{title}</Heading>
+        <p>{description}</p>
+        <Link className='button button--outline button--primary' {...link.props} />
+      </div>
+    </div>
+  )
+}
+
+function DocsContribution() {
+  return (
+    <>
+      <Heading as="h3" className='text--semibold'>
+        <Translate
+          id='component.Homepage.DocsContribution.Heading'>
+          Contribute to the docs and leave feedback
+        </Translate>
+      </Heading>
+      <p>
+        <Translate
+          id='component.Homepage.DocsContribution.Paragraph1'
+          values={{
+            githubRepoLink: (
+              <Link to="https://github.com/stellar/stellar-docs">
+                <Translate
+                  id='component.Homepage.DocsContribution.DocsGithubLink'
+                  description='Label for the link to the Stellar docs repository on Github'>
+                  Stellar Docs GitHub Repo
+                </Translate>
+              </Link>
+            )
+          }}>
+          {'Stellar’s Developer Documentation is open-source, and contributions to the docs are encouraged. You can file an issue or pull request to add new content, suggest revisions to existing content, submit suggestions, report bugs, and more in the {githubRepoLink}.'}
+        </Translate>
+      </p>
+      <p>
+        <Translate
+          id='component.Homepage.DocsContribution.Paragraph2'
+          values={{
+            githubOrgLink: (
+              <Link to="https://github.com/stellar">
+                <Translate
+                  id='component.Homepage.DocsContribution.StellarRepos'
+                  description='Label for the link to the Stellar organization profile on Github'>
+                  Stellar repos
+                </Translate>
+              </Link>
+            )
+          }}>
+          {'Also, feel free to leave any additional feedback by filing issues in the various other {githubOrgLink}.'}
+        </Translate>
+      </p>
+    </>
+  )
+}
+
+export default function DeveloperResources() {
+  const partitionedBoxes = partitionBoxes(DeveloperResourcesBoxes);
+
+  return (
+    <section className='margin-vert--lg'>
+      {partitionedBoxes.map((twoBoxes) => (
+        <div className='row'>
+          {twoBoxes.map((props, idx) => (
+            <DeveloperResourcesFeature key={idx} {...props} />
+          ))}
+        </div>
+      ))}
+      <div className='row'>
+        <div className='col padding--md'>
+          <div className={clsx(styles.DeveloperResourcesFeature, 'padding--lg')}>
+            <DocsContribution />
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

src/components/Homepage/DeveloperResources/styles.module.css

@@ -0,0 +1,5 @@
+.DeveloperResourcesFeature {
+    border-radius: var(--ifm-global-radius);
+    background-color: var(--ifm-background-surface-color);
+    height: 100%;
+}

src/components/Homepage/NavigatingTheDocs/index.tsx

@@ -0,0 +1,160 @@
+import React, { type ReactNode } from 'react';
+import Heading from '@theme/Heading';
+import Link from '@docusaurus/Link';
+import Translate, { translate } from '@docusaurus/Translate';
+import clsx from 'clsx';
+import styles from './styles.module.css'
+
+export type NavigatingDocsItem = {
+  title: string;
+  description: ReactNode;
+  link: ReactNode;
+}
+
+export const exploreLink = (target: string) => (
+  <Link to={target}>
+    <Translate
+      id='component.Homepage.ExploreButton.Text'
+      description='The text that will be displayed on the "Explore" buttons'>
+      Explore
+    </Translate>
+  </Link>
+)
+
+export const partitionBoxes = (boxesArray: NavigatingDocsItem[]): NavigatingDocsItem[][] => {
+  return boxesArray.reduce((acc, item, i, arr) => {
+    if (i % 2 === 0) {
+      acc.push(arr.slice(i, i + 2))
+    }
+    return acc
+  }, [])
+}
+
+const NavigatingDocsBoxes: NavigatingDocsItem[] = [
+  {
+    title: translate({
+      message: 'Build',
+      id: 'component.Homepage.NavigatingTheDocs.Build.Title',
+    }),
+    description: (
+      <Translate
+        id='component.Homepage.NavigatingTheDocs.Build.Description'
+        description='Long description of what kind of information this section of the docs.'>
+        Contains tutorials and how-to guides for writing smart contracts, building applications, interacting with the network, and more.
+      </Translate>
+    ),
+    link: exploreLink('/docs/build'),
+  },
+  {
+    title: translate({
+      message: 'Learn',
+      id: 'component.Homepage.NavigatingTheDocs.Learn.Title',
+    }),
+    description: (
+      <Translate
+        id='component.Homepage.NavigatingTheDocs.Learn.Description'
+        description='Long description of what kind of information this section of the docs.'>
+        Find all informational and conceptual content here. Learn about Stellar fundamentals like how accounts and transactions function, dive deeper into the functionality of each operation, discover how fees work, and more.
+      </Translate>
+    ),
+    link: exploreLink('/docs/learn/fundamentals'),
+  },
+  {
+    title: translate({
+      message: 'Tokens',
+      id: 'component.Homepage.NavigatingTheDocs.Tokens.Title',
+    }),
+    description: (
+      <Translate
+        id='component.Homepage.NavigatingTheDocs.Tokens.Description'
+        description='Long description of what kind of information this section of the docs.'>
+        Information on how to issue assets on the Stellar network and create custom smart contract tokens.
+      </Translate>
+    ),
+    link: exploreLink('/docs/tokens'),
+  },
+  {
+    title: translate({
+      message: 'Data',
+      id: 'component.Homepage.NavigatingTheDocs.Data.Title',
+    }),
+    description: (
+      <Translate
+        id='component.Homepage.NavigatingTheDocs.Data.Description'
+        description='Long description of what kind of information this section of the docs.'>
+        Discover various data availability options: RPC, Hubble, Horizon, Galexie, and data indexers.
+      </Translate>
+    ),
+    link: exploreLink('/docs/data'),
+  },
+  {
+    title: translate({
+      message: 'Tools',
+      id: 'component.Homepage.NavigatingTheDocs.Tools.Title',
+    }),
+    description: (
+      <Translate
+        id='component.Homepage.NavigatingTheDocs.Tools.Description'
+        description='Long description of what kind of information this section of the docs.'>
+        Learn about all the available tools for building on, interacting with, or just watching the Stellar network. Also, find information on how to use the Anchor Platform or Stellar Disbursement Platform.
+      </Translate>
+    ),
+    link: exploreLink('/docs/tools'),
+  },
+  {
+    title: translate({
+      message: 'Networks',
+      id: 'component.Homepage.NavigatingTheDocs.Networks.Title',
+    }),
+    description: (
+      <Translate
+        id='component.Homepage.NavigatingTheDocs.Networks.Description'
+        description='Long description of what kind of information this section of the docs.'>
+        Information about deployed networks (Mainnet, Testnet, and Futurenet), current software versions, resource limitations, and fees.
+      </Translate>
+    ),
+    link: exploreLink('/docs/networks'),
+  },
+  {
+    title: translate({
+      message: 'Validators',
+      id: 'component.Homepage.NavigatingTheDocs.Validators.Title',
+    }),
+    description: (
+      <Translate
+        id='component.Homepage.NavigatingTheDocs.Validators.Description'
+        description='Long description of what kind of information this section of the docs.'>
+        Everything you'll need to know if you want to run, operate, and maintain a core validator node on the Stellar network.
+      </Translate>
+    ),
+    link: exploreLink('/docs/validators'),
+  },
+]
+
+function NavigatingDocsFeature({title, description, link}) {
+  return (
+    <div className='col col--6 padding--md'>
+      <div className={clsx(styles.NavigatingDocsFeature, 'padding--lg')}>
+        <Heading as="h3" className='text--semibold'>{title}</Heading>
+        <p>{description}</p>
+        <Link className='button button--outline button--primary' {...link.props} />
+      </div>
+    </div>
+  )
+}
+
+export default function NavigatingTheDocs() {
+  const partitionedBoxes = partitionBoxes(NavigatingDocsBoxes)
+
+  return (
+    <section className='margin-vert--lg'>
+      {partitionedBoxes.map((twoBoxes) => (
+        <div className='row'>
+          {twoBoxes.map((props, idx) => (
+            <NavigatingDocsFeature key={idx} {...props} />
+          ))}
+        </div>
+      ))}
+    </section>
+  )
+}

src/components/Homepage/NavigatingTheDocs/styles.module.css

@@ -0,0 +1,5 @@
+.NavigatingDocsFeature {
+    border-radius: var(--ifm-global-radius);
+    background-color: var(--ifm-background-surface-color);
+    height: 100%;
+}