Skip to content

Fix/documentation images #143

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
SaeeDawod merged 5 commits into from
Feb 5, 2025
Merged

Fix/documentation images #143

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6bfaf6e
remove discord link and fix images in index page
saeeddawod Feb 5, 2025
2077a7b
fixed images in dev guides page
saeeddawod Feb 5, 2025
5fa0090
fix images in supported blockchain pages
saeeddawod Feb 5, 2025
cb3e620
remove background in supprted blockchain cards
saeeddawod Feb 5, 2025
69d297d
fix images in components mdx
saeeddawod Feb 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion blog/2024-03-26.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,6 @@ Token vaults are useful in the enterprise context when working with multiple tok

We just looked at 3 ways that developers can get more out of working with the ERC20 token standard. These extensions allow more control and visibility of assets that enterprise use cases may require. To get started deploying your own ERC20 smart contract on SettleMint, check out this guide on [Connecting a frontend to a token transfer application](/documentation/docs/developer-guides/connect-frontend/).

Have more questions about the ERC20 tokens and extensions, hop into our [Discord community](https://discord.gg/4WPatxDJ6A)!
Have more questions about the ERC20 tokens and extensions, please contact us at support@settlemint.com!

---
224 changes: 134 additions & 90 deletions docs/about-settlemint/1_supported-blockchains.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,125 +4,169 @@ When launching a blockchain development project, the selection of a blockchain p

SettleMint currently supports the following protocols:

import ContentCard from '@site/src/components/ContentCard';
import styles from '@site/src/components/ContentCard.module.css';
import Ethereum from '@site/static/img/about-settlemint/blockchain-logos/eth-logo.png';
import Besu from '@site/static/img/about-settlemint/blockchain-logos/besu-logo.png';
import Fabric from '@site/static/img/about-settlemint/blockchain-logos/fabric-logo.png';
import Quorum from '@site/static/img/about-settlemint/blockchain-logos/Quorum-logo.png';
import Avalanche from '@site/static/img/about-settlemint/blockchain-logos/avalanche-logo.png';
import Polygon from '@site/static/img/about-settlemint/blockchain-logos/polygon-logo.webp';
import zkevm from '@site/static/img/about-settlemint/blockchain-logos/zkevm-logo.png';
import Arbitrum from '@site/static/img/about-settlemint/blockchain-logos/arbitrum-logo.png';
import Optimism from '@site/static/img/about-settlemint/blockchain-logos/optimism-logo.png';
import Hedera from '@site/static/img/about-settlemint/blockchain-logos/hedera-logo.png';
<style>
{`
.blockchain-card {
padding: 24px;
border: 1px solid #2e2e2e;
border-radius: 8px;
margin-bottom: 20px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;

text-decoration: none;
}

.blockchain-card:hover {
border-color: #3578e5;
text-decoration: none;
}

.blockchain-logo-wrapper {
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}

.blockchain-logo {
width: 100%;
height: 100%;
object-fit: contain;
}

.blockchain-title {
color: #3578e5;
font-size: 1.2rem;
margin-bottom: 8px;
font-weight: 500;
}

.blockchain-description {
font-size: 0.9rem;
color: #999;
margin: 0;
line-height: 1.5;
}
`}
</style>

## Permissioned Blockchains

<div className="row">
<div className="col">
<ContentCard
image={Besu}
title="Hyperledger Besu"
description="Ethereum client designed to be enterprise-friendly"
page="/documentation/docs/blockchain-guides/Hyperledger-Besu/enterprise-ethereum-the-basics/"
/>
<a href="/documentation/docs/blockchain-guides/Hyperledger-Besu/enterprise-ethereum-the-basics/" className="blockchain-card">
<div className="blockchain-logo-wrapper">
<img src="/documentation/img/about-settlemint/blockchain-logos/besu-logo.png" className="blockchain-logo" alt="Hyperledger Besu" />
</div>
<div className="blockchain-title">Hyperledger Besu</div>
<div className="blockchain-description">Ethereum client designed to be enterprise-friendly</div>
</a>
</div>

<div className="col">
<ContentCard
image={Fabric}
title="Hyperledger Fabric"
description="An enterprise-grade permissioned distributed ledger"
page="/documentation/docs/blockchain-guides/Hyperledger-Fabric/hyperledger-fabric-the-basics/"
/>
<a href="/documentation/docs/blockchain-guides/Hyperledger-Fabric/hyperledger-fabric-the-basics/" className="blockchain-card">
<div className="blockchain-logo-wrapper">
<img src="/documentation/img/about-settlemint/blockchain-logos/fabric-logo.png" className="blockchain-logo" alt="Hyperledger Fabric" />
</div>
<div className="blockchain-title">Hyperledger Fabric</div>
<div className="blockchain-description">An enterprise-grade permissioned distributed ledger</div>
</a>
</div>
</div>

<div className="row">
<div className="col">
<ContentCard
image={Quorum}
title="Quorum"
description="An implementation of Ethereum supporting data privacy"
page=""
/>
<a href="/documentation/docs/blockchain-guides/quorum/quorum-the-basics/" className="blockchain-card">
<div className="blockchain-logo-wrapper">
<img src="/documentation/img/about-settlemint/blockchain-logos/Quorum-logo.png" className="blockchain-logo" alt="Quorum" />
</div>
<div className="blockchain-title">Quorum</div>
<div className="blockchain-description">An implementation of Ethereum supporting data privacy</div>
</a>
</div>
</div>

## Public Blockchains

<div className="row">
<div className="col">
<a href="/documentation/docs/blockchain-guides/ethereum/ethereum-the-basics/" className="blockchain-card">
<div className="blockchain-logo-wrapper">
<img src="/documentation/img/about-settlemint/blockchain-logos/eth-logo.png" className="blockchain-logo" alt="Ethereum" />
</div>
<div className="blockchain-title">Ethereum</div>
<div className="blockchain-description">Goerli, Mainnet, Sepolia Testnet & Holesky Testnet. Full nodes</div>
</a>
</div>

<div className="col">
<ContentCard
image={Ethereum}
title="Etheruem"
description="Geth. Mainnet, Sepolia Testnet & Holesky Testnet. Full nodes"
page="/documentation/docs/blockchain-guides/Ethereum/ethereum-the-basics/"
/>
</div>

<div className="col">
<ContentCard
image={Avalanche}
title="Avalanche"
description="Mainnet & Fuji testnet. Full nodes"
page="/documentation/docs/blockchain-guides/Avalanche/avalanche-the-basics/"
/>
</div>
<div className="col">
<a href="/documentation/docs/blockchain-guides/avalanche/avalanche-the-basics/" className="blockchain-card">
<div className="blockchain-logo-wrapper">
<img src="/documentation/img/about-settlemint/blockchain-logos/avalanche-logo.png" className="blockchain-logo" alt="Avalanche" />
</div>
<div className="blockchain-title">Avalanche</div>
<div className="blockchain-description">Mainnet & Fuji testnet. Full nodes</div>
</a>
</div>
</div>

<div className="row">

<div className="col">
<ContentCard
image={Polygon}
title="Polygon"
description="Mainnet & Mumbai Testnet. Full node"
page="/documentation/docs/blockchain-guides/Polygon/polygon-the-basics/"
/>
</div>
<div className="col">
<a href="/documentation/docs/blockchain-guides/polygon/polygon-the-basics/" className="blockchain-card">
<div className="blockchain-logo-wrapper">
<img src="/documentation/img/about-settlemint/blockchain-logos/polygon-logo.webp" className="blockchain-logo" alt="Polygon" />
</div>
<div className="blockchain-title">Polygon</div>
<div className="blockchain-description">Mainnet & Mumbai Testnet. Full node</div>
</a>
</div>
</div>

<div className="row">
<div className="col">
<a href="/documentation/docs/blockchain-guides/polygon-zkevm/polygon-zkevm-the-basics/" className="blockchain-card">
<div className="blockchain-logo-wrapper">
<img src="/documentation/img/about-settlemint/blockchain-logos/zkevm-logo.png" className="blockchain-logo" alt="Polygon zkEVM" />
</div>
<div className="blockchain-title">Polygon zkEVM</div>
<div className="blockchain-description">Mainnet & Testnet. Full nodes</div>
</a>
</div>

<div className="col">
<ContentCard
image={zkevm}
title="Polygon zkEVM"
description="Mainnet & Testnet. Full nodes"
page="/documentation/docs/blockchain-guides/Polygon-zkEVM/polygon-zkevm-the-basics/"
/>
</div>

<div className="col">
<ContentCard
image={Arbitrum}
title="Arbitrum"
description="Mainnet & Testnet. Full nodes"
page="/documentation/docs/blockchain-guides/Arbitrum/arbitrum-the-basics/"
/>
</div>
<div className="col">
<a href="/documentation/docs/blockchain-guides/Arbitrum/arbitrum-the-basics/" className="blockchain-card">
<div className="blockchain-logo-wrapper">
<img src="/documentation/img/about-settlemint/blockchain-logos/arbitrum-logo.png" className="blockchain-logo" alt="Arbitrum" />
</div>
<div className="blockchain-title">Arbitrum</div>
<div className="blockchain-description">Mainnet & Testnet. Full nodes</div>
</a>
</div>
</div>

<div className="row">
<div className="col">
<a href="/documentation/docs/blockchain-guides/Optimism/optimism-the-basics/" className="blockchain-card">
<div className="blockchain-logo-wrapper">
<img src="/documentation/img/about-settlemint/blockchain-logos/optimism-logo.png" className="blockchain-logo" alt="Optimism" />
</div>
<div className="blockchain-title">Optimism</div>
<div className="blockchain-description">OP Mainnet & OP Goerli. Full nodes</div>
</a>
</div>

<div className="col">
<ContentCard
image={Optimism}
title="Optimism"
description="OP Mainnet & OP Goerli. Full nodes"
page="/documentation/docs/blockchain-guides/Optimism/optimism-the-basics/"
/>
</div>

<div className="col">
<ContentCard
image={Hedera}
title="Hedera"
description="Hedera Mainnet & Testnet. Full nodes"
page="/documentation/docs/blockchain-guides/Hedera/hedera-the-basics/"
/>
</div>
<div className="col">
<a href="/documentation/docs/blockchain-guides/Hedera/hedera-the-basics/" className="blockchain-card">
<div className="blockchain-logo-wrapper">
<img src="/documentation/img/about-settlemint/blockchain-logos/hedera-logo.png" className="blockchain-logo" alt="Hedera" />
</div>
<div className="blockchain-title">Hedera</div>
<div className="blockchain-description">Hedera Mainnet & Testnet. Full nodes</div>
</a>
</div>
</div>
47 changes: 14 additions & 33 deletions docs/about-settlemint/4_components.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,67 +5,48 @@ description: Overview of the SettleMint components and tools available to build
sidebar_position: 1
---

import blockchainApplication from '@site/static/img/about-settlemint/blockchain-application.png';
import blockchainNetwork from '@site/static/img/about-settlemint/network-node.png';
import smartContract from '@site/static/img/about-settlemint/smart-contract.png';
import middleware from '@site/static/img/about-settlemint/middleware.png';
import storage from '@site/static/img/about-settlemint/storage.png';
import integration from '@site/static/img/about-settlemint/integration.png';
# SettleMint Components

This guide will explain each of the tools and services on SettleMint and how they connected to
build a blockchain application.
This guide will explain each of the tools and services on SettleMint and how they connect to build a blockchain application.

## The Blockchain Application

<img
src={blockchainApplication}
src="/documentation/img/about-settlemint/blockchain-application.png"
alt="Blockchain Application"
width="70%"
height="70%"
style={{ display: 'block', margin: '0 auto' }}
/>
The first step to building anything on SettleMint is to [create an
application](../../using-platform/create-an-application). You can think of an
application as the collection of resources that you need to build your
blockchain application. This includes a blockchain network, smart contracts,
middleware, storage, integrations, and insights.{' '}

The first step to building anything on SettleMint is to [create an application](../../using-platform/create-an-application). You can think of an application as the collection of resources that you need to build your blockchain application. This includes a blockchain network, smart contracts, middleware, storage, integrations, and insights.

## Add a Blockchain Network and Node

<img
src={blockchainNetwork}
src="/documentation/img/about-settlemint/network-node.png"
alt="Blockchain Network and Node"
width="70%"
height="70%"
style={{ display: 'block', margin: '0 auto' }}
/>
After creating a blockchain application, you now need to [add a blockchain
network](../../using-platform/add-a-network-to-an-application) and node to your
application. SettleMint offeres a variety of different [blockchain
networks](../supported-blockchains) to choose from whatever your usecase may be.
Networks need nodes to support the blockchain to run, once a [network is
created](../../using-platform/add-a-node-to-a-network/) then a node is also
added automatically.{' '}

After creating a blockchain application, you now need to [add a blockchain network](../../using-platform/add-a-network-to-an-application) and node to your application. SettleMint offers a variety of different [blockchain networks](../supported-blockchains) to choose from whatever your usecase may be.

## Create a Smart Contract

<img
src={smartContract}
alt="Add a Smart Contract"
src="/documentation/img/about-settlemint/smart-contract.png"
alt="Smart Contract"
width="70%"
height="70%"
style={{ display: 'block', margin: '0 auto' }}
/>
Smart Contracts allow us to run code on the blockchain. Developing a smart
contract by [adding a smart contract
set](../../using-platform/dev-tools/code-studio/smart-contract-sets), is an
important step to reaching the business and product goals of your blockchain
application.

## Add a Middleware

<img
src={middleware}
src="/documentation/img/about-settlemint/middleware.png"
alt="Middleware"
width="70%"
height="70%"
Expand All @@ -75,12 +56,12 @@ Blockchain applications produce data that lives on the blockchain, but we need
to be able to access that data in order to use it. Creating a
[middleware](../../using-platform/middleware/) allows us to do so. SettleMint
currently offers three middleware services: The Graph, Smart Contract Portal
Middleware and Firefly Fabconnect.{' '}
Middleware and Firefly Fabconnect.

## Add Storage

<img
src={storage}
src="/documentation/img/about-settlemint/storage.png"
alt="Storage"
width="70%"
height="70%"
Expand All @@ -95,7 +76,7 @@ options](../../using-platform/storage/): IPFS (decentralized) and MinIO
## Add an Integration

<img
src={storage}
src="/documentation/img/about-settlemint/integration.png"
alt="Integration"
width="70%"
height="70%"
Expand Down
6 changes: 2 additions & 4 deletions docs/developer-guides/guide-library.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,13 @@ sidebar_position: 1
---

import { ArticleCard } from '@site/src/components/BlogArticleComponent';
import frontendIcon from '@site/static/img/guides/connect-frontend.png';
import assetTokenization from '@site/static/img/guides/asset-tokenization.png';

## Application Development

These guides will help you in your blockchain application development process.

<ArticleCard
icon={frontendIcon}
icon="/documentation/img/guides/connect-frontend.png"
title="Connecting A Frontend - NextJS"
description="This connects a frontend to your blockchain application using NextJS, wagmi and web3auth."
githubLink="https://github.com/settlemint/settlemint-nextjs-wagmi"
Expand All @@ -25,7 +23,7 @@ These guides will help you in your blockchain application development process.
These guides will show you how to build blockchain applications for popular use-cases.

<ArticleCard
icon={assetTokenization}
icon="/documentation/img/guides/asset-tokenization.png"
title="Asset Tokenization"
description="This guide explains how to build an asset tokenization application using SettleMint"
articleLink="../asset-tokenization/"
Expand Down
Loading