Skip to content

kelvinpraises/mortystack

 
 

Repository files navigation

Hello Morty fren 👋

logo

MortyStack wants to help millions of unsatisfied and under-banked users meet their needs and grow their businesses

Alt text

Resources

Links

Examples

Videos

Contributor

Contributors

Testing MortStack Contracts

clone the repository

git clone https://github.com/acgodson/mortystack

open the tealscript directory and run the test

Requirements AlgoKit, Docker, NPM

cd morty-tealscript
npm install
algokit localnet start
npm run test test

Using the MortyStack SDK & Dashboard

To use enable morty within your React app, you will need to install mortystack and fill in your organization's ID obtained from the dashboard.

npm i mortystack
  • Usage
import { usePay, MortyStackProvider, PayButton } from "mortystack";

App Configuration

  • Initialize assets and get asset IDs:
const { initAssets, ASSET_IDS } = usePay();

const selectedAssets = initAssets([
  ASSET_IDS.WETH,
  { id: 10458941, symbol: "USDC" }, // custom asset
  ASSET_IDS.ALGOS,
  ASSET_IDS.WMATIC,
]);
  • Configure and wrap your app/desired componet with the Mortystack provider :
const config = {
  id: "HIG-1699996617305-FY1K59", // Morty Organization ID from your Dashboard
  assets: selectedAssets,
  signer: {
    addr: //HSDGESxxxxTYRJ, // address that owns and signs the record,
    secret?: process.env.Secret // dispenser secret if available
  }
}
    <MortyStackProvider config={config}>
        <Component {...pageProps} />
 </MortyStackProvider>

Retreiving your App ID

  1. Login to the MortStack Dashboard. We use Web3Auth and jwt to generate a unique account address for each email login.

login

  1. Connect an External provider to your dashboard. We use useWallet from @txnlabs

Connect Wallet

  1. Create a new Subscription

  2. Now you create a new organization and open a new record on chain

  3. Copy the Organization ID afterwards

With your Organization ID, you can now

- 1. Create quick Invoices and forward checkout links to customers. See example invoice

- 2. Set up the mortystack Button to receive assets originating from your website. See example website

button

import { PayButton } from "mortystack";

// The PayButton triggers the payment modal onclick
  • Add payload from your application states
const [payload, setPayload] = useState()

<PayButton
  payload={{
    asset: asset,
    amount: amount,
    email: undefined,
    name: undefined,
    items: undefined,
    acceptWrapped: true,
  }}
/>
Prop Type Description
asset number Asset ID
amount number amount in $
email string, optional customer's email
name string, optional customer's name
items InvoiceItems[], optional invoice items
acceptWrapped boolean, optional accept wrapped tokens (wormhole bridge)

- 3. Host a shop for your organization with your choice sub-domain example [name].mortystack.xyz, served from AWS Amplify

Custome Shop

Alt text

Appendix

Monorepo Structure

  • Docs
  • Frontend
    • API
    • Shops
    • Pay
    • Checkout
    • Dashboard
  • Smart Contract
    • Test
  • SDK
    • Example Project
    • Packages

Code Refactoring in progress

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 98.5%
  • CSS 1.1%
  • JavaScript 0.4%