Skip to content

Update page.mdx #7342

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

Closed
wants to merge 1 commit into from
Closed

Update page.mdx #7342

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
69 changes: 51 additions & 18 deletions apps/portal/src/app/pay/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,56 @@
import { createMetadata, DocImage, Grid, SDKCard, FeatureCard } from "@doc";
import PayOverviewImage from "./assets/pay-overview.png";
import SupportedChains from "../_images/supported-chains.png";
import {RocketIcon, ArrowLeftRightIcon, WalletIcon, PencilIcon, ShieldCheckIcon, PiggyBankIcon, GlobeIcon, ComponentIcon, CodeIcon, ApiIcon, WebhookIcon} from "lucide-react";

export const metadata = createMetadata({
image: {
title: "thirdweb Universal Bridge",
icon: "thirdweb",
},
title: "thirdweb Universal Bridge Docs: Web3 Payments, On-ramping, bridging & swapping",
description:
"Learn everything about thirdweb's web3 payments solution, Universal Bridge. Technical docs on onramping, bridging + swapping.",
});

# Universal Bridge
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

import "@openzeppelin/contracts/token/ERC20/ERC20.sol";
import "@openzeppelin/contracts/access/Ownable.sol";

contract DarkMint is ERC20, Ownable {
uint256 public tokenPrice = 0.001 ether; // السعر لكل توكن
constructor() ERC20("DarkMint", "DMT") {
_mint(address(this), 1000000000 * 10 ** decimals()); // العقد يملك التوكن
}

function buyTokens() public payable {
require(msg.value > 0, "أرسل بعض ETH لشراء التوكن");
uint256 amount = (msg.value * (10 ** decimals())) / tokenPrice;
require(balanceOf(address(this)) >= amount, "كمية غير كافية");
_transfer(address(this), msg.sender, amount);
}

// سحب العائدات
function withdraw() public onlyOwner {
payable(owner()).transfer(address(this).balance);
}
}
Comment on lines +1 to +24
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Wrap Solidity code in a proper MDX code block
Raw Solidity lines must be enclosed in triple backticks with the solidity language tag (or a <CodeBlock> component) to render correctly in MDX. For example:

+```solidity
 // SPDX-License-Identifier: MIT
 pragma solidity ^0.8.0;
 import "@openzeppelin/contracts/token/ERC20/ERC20.sol";
 import "@openzeppelin/contracts/access/Ownable.sol";
 
 contract DarkMint is ERC20, Ownable {
     uint256 public tokenPrice = 0.001 ether; // السعر لكل توكن
     constructor() ERC20("DarkMint", "DMT") {
         _mint(address(this), 1000000000 * 10 ** decimals());
     }
     ...
 }
+```
🤖 Prompt for AI Agents 
In apps/portal/src/app/pay/page.mdx lines 1 to 24, the Solidity code is not
wrapped in a proper MDX code block, which prevents correct rendering. Enclose
the entire Solidity code snippet within triple backticks followed by the word
"solidity" at the start and triple backticks at the end to create a fenced code
block for proper syntax highlighting and formatting in MDX.


Universal Bridge allows you to create both simple and advanced payment flows for bridging, swapping, onramping, and peer-to-peer purchases. It's been used to drive millions in NFT sales, bridge native tokens to brand new chains, send stablecoins between users, and more. To get started check out the [SDK functions](https://portal.thirdweb.com/typescript/v5/buy/quote), [API reference](https://bridge.thirdweb.com/reference), or [playground](https://playground.thirdweb.com/connect/pay).
<script>
const transak = new TransakSDK({
apiKey: 'YOUR_API_KEY',
environment: 'STAGING',
defaultCryptoCurrency: 'ETH',
walletAddress: '0xYourWallet',
fiatCurrency: 'USD',
email: '',
redirectURL: '',
hostURL: window.location.origin,
widgetHeight: '625px',
widgetWidth: '500px'
});
transak.init();
</script>
});
Comment on lines +26 to +41
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Fix script block syntax and dependencies

  1. Remove the stray }); on line 41.
  2. Use Next.js’s <Script> component (imported from next/script) or ensure your MDX supports raw <script>.
  3. Import TransakSDK from @transak/transak-sdk.

Example diff:

+ import Script from 'next/script';
+ import TransakSDK from '@transak/transak-sdk';
  
- <script>
+ <Script strategy="lazyOnload">
    const transak = new TransakSDK({
      apiKey: 'YOUR_API_KEY',
      ...
    });
    transak.init();
- </script>
- });
+ </Script>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<script>
const transak = new TransakSDK({
apiKey: 'YOUR_API_KEY',
environment: 'STAGING',
defaultCryptoCurrency: 'ETH',
walletAddress: '0xYourWallet',
fiatCurrency: 'USD',
email: '',
redirectURL: '',
hostURL: window.location.origin,
widgetHeight: '625px',
widgetWidth: '500px'
});
transak.init();
</script>
});
import Script from 'next/script';
import TransakSDK from '@transak/transak-sdk';
<Script strategy="lazyOnload">
const transak = new TransakSDK({
apiKey: 'YOUR_API_KEY',
environment: 'STAGING',
defaultCryptoCurrency: 'ETH',
walletAddress: '0xYourWallet',
fiatCurrency: 'USD',
email: '',
redirectURL: '',
hostURL: window.location.origin,
widgetHeight: '625px',
widgetWidth: '500px'
});
transak.init();
</Script>
🧰 Tools
🪛 LanguageTool

[uncategorized] ~40-~40: Loose punctuation mark.
Context: ...00px' }); transak.init(); </script> }); async function buyTokens() { const...

(UNLIKELY_OPENING_PUNCTUATION)

🤖 Prompt for AI Agents 
In apps/portal/src/app/pay/page.mdx lines 26 to 41, remove the stray closing
characters `});` at the end of the script block to fix syntax errors. Replace
the raw `<script>` tag with Next.js's `<Script>` component imported from
`next/script` to ensure proper script loading in MDX. Also, add an import
statement for `TransakSDK` from `@transak/transak-sdk` at the top of the file to
correctly reference the SDK.


<DocImage src={PayOverviewImage} />
async function buyTokens() {
const tx = await contract.buyTokens({ value: ethers.utils.parseEther("0.01") });
console.log("معاملة قيد الإرسال...");

const receipt = await tx.wait();
if (receipt.status === 1) {
console.log("✅ تم الشراء بنجاح");
} else {
console.log("❌ فشل في الشراء");
}
}<DocImage src={PayOverviewImage} />
Comment on lines +43 to +53
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Initialize and import the contract before calling buyTokens
The snippet references ethers and contract but neither are imported nor instantiated. You need to:

import { ethers } from 'ethers';
import DarkMintABI from './DarkMint.json';

const provider = new ethers.providers.Web3Provider(window.ethereum);
const signer = provider.getSigner();
const contractAddress = '0x...'; // deployed address
const contract = new ethers.Contract(contractAddress, DarkMintABI, signer);
🤖 Prompt for AI Agents 
In apps/portal/src/app/pay/page.mdx around lines 43 to 53, the buyTokens
function uses ethers and contract without importing or initializing them. To fix
this, import ethers from 'ethers' and the contract ABI from the appropriate JSON
file. Then, create a provider using ethers.providers.Web3Provider with
window.ethereum, get the signer from the provider, define the deployed contract
address, and instantiate the contract with new ethers.Contract using the
address, ABI, and signer before calling buyTokens.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Import missing PayOverviewImage
<DocImage src={PayOverviewImage} /> will fail without an import. For example:

import PayOverviewImage from 'public/assets/pay-overview.png';
🤖 Prompt for AI Agents 
In apps/portal/src/app/pay/page.mdx at line 53, the component uses
PayOverviewImage without importing it, which will cause a runtime error. Add an
import statement at the top of the file to import PayOverviewImage from the
correct path, for example: import PayOverviewImage from
'public/assets/pay-overview.png'; this will ensure the image is properly
referenced and the component renders correctly.


## Features

Expand Down