Skip to content

🖼️ Reference images as files, not variables #2379

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
ElliotFriend merged 6 commits into from
Jul 14, 2026
Merged

🖼️ Reference images as files, not variables #2379

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0a496f2
use direct asset paths in sep24 docs
JFWooten4 Apr 23, 2026
17ab53a
use direct asset paths in sep10 docs
JFWooten4 Apr 23, 2026
e5f7f7b
prettier
JFWooten4 Apr 23, 2026
8450dad
revert Spanish updates
JFWooten4 Apr 27, 2026
f287731
Creating Visualizations page
JFWooten4 Apr 27, 2026
21925cd
🐛 Correct the Hubble visualization filename
JFWooten4 Jul 13, 2026
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
8 changes: 5 additions & 3 deletions docs/build/apps/example-application-tutorial/anchor-integration/sep10.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ title: "SEP-10: Stellar Web Authentication"
sidebar_position: 20
---

import auth_valid from "/assets/basic-pay/auth_valid.png";

Similar to the SEP-1 information, both SEP-6 and SEP-24 protocols make use of SEP-10 for authentication with the user. The user must prove they own the account before they can withdraw or deposit any assets as part of SEP-10: Stellar Web Authentication.

Since we have the `stellar.toml` file information already, we can use that to display some interactive elements to the user.
Expand Down Expand Up @@ -318,4 +316,8 @@ export const webAuthStore = createWebAuthStore();

Now that we have successfully authenticated our user with an asset anchor, we can display and process the various transfer capabilities of the anchor in question. We'll begin with SEP-6, since that will lay the groundwork for SEP-24 to follow.

<img src={auth_valid} width="70%" />
<img
src="/assets/basic-pay/auth_valid.png"
width="70%"
alt="SEP-10 authenticated state"
/>
8 changes: 5 additions & 3 deletions docs/build/apps/example-application-tutorial/anchor-integration/sep24.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ title: "SEP-24: Hosted Deposit and Withdrawal"
sidebar_position: 40
---

import sep24_transfers from "/assets/basic-pay/sep24_transfers.png";

SEP-24 provides a standard way for wallets and anchors to interact by having the user open a webview hosted by an anchor to collect and handle KYC information. In this integration, a user's KYC information is gathered and handled entirely by the anchor. For the most part, after the anchor's webview has opened, BasicPay will have little knowledge about what's going on.

:::info
Expand All @@ -31,7 +29,11 @@ export async function getTransferServerSep24(domain) {

Our application will request the `/info` endpoint from the anchor's transfer server to understand the supported transfer methods (deposit, withdraw) and available endpoints, as well as additional features that may be available during transfers.

<img src={sep24_transfers} width="70%" />
<img
src="/assets/basic-pay/sep24_transfers.png"
width="70%"
alt="SEP-24 Transfers"
/>

```js title=/src/lib/stellar/sep24.js
// Fetches and returns basic information about what the SEP-24 transfer server supports.
Expand Down
58 changes: 19 additions & 39 deletions docs/data/analytics/hubble/analyst-guide/creating-visualizations.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,31 +3,11 @@ title: "Creating Visualizations"
sidebar_position: 40
---

import hubble_visualization_demo from "/img/hubble/hubble_visualizatoin_demo.gif";
import create_data_source from "/img/hubble/create-data-source.png";
import bq_connector from "/img/hubble/bq-connector.png";
import add_contract_data from "/img/hubble/add-contract-data.png";
import create_report from "/img/hubble/create-report.png";
import select_data_sources from "/img/hubble/select-data-sources.png";
import add_pie_chart from "/img/hubble/add-pie-chart.png";
import pie_contract_data from "/img/hubble/pie-contract-data.png";
import pie_config from "/img/hubble/pie-config.png";
import pie_chart_durability from "/img/hubble/pie_chart_durability.png";
import click_add_data from "/img/hubble/click_add_data.png";
import add_custom_query from "/img/hubble/add-custom-query.png";
import add_column_chart from "/img/hubble/add-column-chart.png";
import column_chart_config from "/img/hubble/column-chart-config.png";
import expired_entry_column_chart from "/img/hubble/expired-entry-column-chart.png";
import add_quick_filter from "/img/hubble/add-quick-filter.png";
import filter_contract from "/img/hubble/filter-contract.png";
import persistent_only from "/img/hubble/persistent-only.png";
import filtered_report from "/img/hubble/filtered-report.png";

This page will show how you can create visualizations with Hubble and [Google Looker Studio](https://cloud.google.com/looker-studio?hl=en).

By the end of the tutorial you will have created two graphs that will help visualize temporary VS persistent contract data entry distribution and expiration.

<img src={hubble_visualization_demo} width="1000" />
<img src="/img/hubble/hubble_visualization_demo.gif" width="1000" alt="Demo" />

As you can see, persistent contract data entries account for roughly 25% of all contract data entries with the rest being temporary. There are also a lot more expired temporary contract data entries. This is expected because temporay entries cannot be bumped whereas persistent entries can be bumped/restored. For more information, you can read about [State Archival and the Contract Data Lifecycle](../../../../learn/fundamentals/contract-development/storage/state-archival.mdx#contract-data-type-descriptions).

Expand All @@ -43,52 +23,52 @@ As you can see, persistent contract data entries account for roughly 25% of all

1. Select `Create --> Data source`

<img src={create_data_source} width="200" />
<img src="/img/hubble/create-data-source.png" width="200" alt="New Source" />

2. Find and select the `BigQuery Google Connector`

<img src={bq_connector} width="300" />
<img src="/img/hubble/bq-connector.png" width="300" alt="Add BigQuery" />

3. Find the desired tables that you want to connect. For this example you will want to add a data source for:
1. `crypto-stellar.crypto_stellar.contract_data`

<img src={add_contract_data} width="600" />
<img src="/img/hubble/add-contract-data.png" width="600" alt="Contract Data" />

### Create a New Report (Dashboard)

1. Select `Create --> Report`

<img src={create_report} width="200" />
<img src="/img/hubble/create-report.png" width="200" alt="Create Report" />

2. Add your data sources from above

<img src={select_data_sources} width="300" />
<img src="/img/hubble/select-data-sources.png" width="300" alt="Get Data" />

3. Insert a `Pie chart`

<img src={add_pie_chart} width="200" />
<img src="/img/hubble/add-pie-chart.png" width="200" alt="Add A Pie Chart" />

4. Choose `contract_data` as the `Data source`

<img src={pie_contract_data} width="300" />
<img src="/img/hubble/pie-contract-data.png" width="300" alt="New Source" />

5. Choose `closed_at` as the `Date Range Dimension` and `contract_durability` as the `Dimension`

<img src={pie_config} width="300" />
<img src="/img/hubble/pie-config.png" width="300" alt="Add Pie Chart" />

6. You should now have a pie chart showing the percentage of Temporary VS Persistent Contract Data Durability

<img src={pie_chart_durability} width="500" />
<img src="/img/hubble/pie_chart_durability.png" width="500" alt="Results" />

### Use Custom SQL to Create a Chart

1. In your report, click `Add Data` which will be near the bottom right of your window

<img src={click_add_data} width="500" />
<img src="/img/hubble/click_add_data.png" width="500" alt="Click Button" />

2. Select `BigQuery` and choose `CUSTOM QUERY` and select your desired `Billing Project` where the query will be charged

<img src={add_custom_query} width="500" />
<img src="/img/hubble/add-custom-query.png" width="500" alt="Custom Query" />

3. Add the following query and click `Add`

Expand Down Expand Up @@ -132,7 +112,7 @@ order by 1 desc, 2

4. Insert `Column chart`

<img src={add_column_chart} width="200" />
<img src="/img/hubble/add-column-chart.png" width="200" alt="Column Chart" />

5. Select the following:

Expand All @@ -141,26 +121,26 @@ order by 1 desc, 2
- `contract_durability` as the `Breakdown Dimension`
- `expired_entry_count` as the `Metric`

<img src={column_chart_config} width="300" />
<img src="/img/hubble/column-chart-config.png" width="300" alt="Configure" />

6. You should now have a column chart (bar chart) showing the expired Soroban contract entries

<img src={expired_entry_column_chart} width="500" />
<img src="/img/hubble/expired-entry-column-chart.png" width="500" alt="Chart" />

### Applying a Global Filter

1. Click `+Add quick filter` to apply a filter throughout the whole report

<img src={add_quick_filter} width="500" />
<img src="/img/hubble/add-quick-filter.png" width="300" alt="Quick Filter" />

2. Select `contract_durability` to filter by `contract_durability` values

<img src={filter_contract} width="500" />
<img src="/img/hubble/filter-contract.png" width="500" alt="Durability" />

3. Select only `ContractDataDurabilityPersistent` and click `Apply`

<img src={persistent_only} width="500" />
<img src="/img/hubble/persistent-only.png" width="500" alt="Persistent" />

4. Your charts should now be filtered and show only `ContractDataDurabilityPersistent` data

<img src={filtered_report} width="500" />
<img src="/img/hubble/filtered-report.png" width="500" alt="Clean Report" />
0 .../img/hubble/hubble_visualizatoin_demo.gif → .../img/hubble/hubble_visualization_demo.gif
View file
Open in desktop
File renamed without changes
Loading