Sentre Legacy
  • 🥳Welcome
  • Getting Started
  • DApp Manifest
  • Folder Structure
  • Available Scripts
  • Development
    • View
    • Model & Controllers
    • Providers
      • UI Provider
      • Wallet Provider
      • Account Provider
      • Mint Provider
    • Static
    • Global variables
    • Configs
  • Advanced Usage
    • ☀️Theme
    • 👘Customizing Styles
    • 🪝Hooks
  • 🤩Submitting DApps
  • References
  • Best Practices
  • Troubleshoots
  • 🎨Design Pricinples
    • Button
    • Card
    • Checkbox
    • Color
    • Corner radius
    • Drawer
    • Dropdown
    • Grid
    • Icons
    • Input
    • List
    • Menu
    • Modal
    • Radio
    • Select
    • Shadow
    • Spacing
    • Switch
    • Tabs
    • Tooltip
    • Table
    • Typography
  • 📄Litepaper
    • Introduction
    • Industry Problems
    • Sentre: An All-in-one Solution
      • The Open Protocol
      • Liquidity Efficiency
    • SEN as the Heart of the Ecosystem
      • Asymmetric Deposit
      • Adaptive Fee Model
      • The Triad Pool
      • Simulated Mesh Trading
      • Token Use Cases
    • Conclusion
Powered by GitBook
On this page
  1. Development

Providers

The series of context providers

PreviousModel & ControllersNextUI Provider

Last updated 2 years ago

[Deprecated since senhub v4]

Consider instead. They serve the same functionality but with better performance.

By these context providers, a DApp can easily access data that is provided by the os. The context is pretty diverse including user interface info, wallet info, blockchain data, etc.

To use a provider, you need to wrap your DApps by the provider. For example, to access the user interface info like current viewpoint, is-touchable, etc., I have to wrap the widget view into the UI Provider.

// widget.app.tsx
// ...
const Widget = () => {
  return (
    <UIProvider appId={appId}>
      <Provider store={model}>
        <WidgetView />
      </Provider>
    </UIProvider>
  )
}
// ...

Then all components inside the widget view can read the user interface info like this,

// widget/index.tsx
// ...
import { useUI } from 'senhub/providers'

const Widget = () => {
  const {
    ui: { width, infix },
  } = useUI()
}
// ...
Hooks