WIP: InfinitySwap Widgets
The @infinityswap/widgets package [coming soon] is an npm package of React components used to provide subsets of the InfinitySwap Protocol functionality in a small and configurable user interface element.
Swap Widget
The Swap Widget bundles the whole swapping experience into a single React component that developers can easily embed in their app with a few lines of code.
You can customize the theme (colors, fonts, and more) to match the style of your application.
Installation
Install infinityswapwidget via npm
npm install --save @infinityswapofficial/widgets
Install infinityswapwidget via yarn
yarn add --save @infinityswapofficial/widgets
Adding the Swap Widget to Your React App
Next, embed the React component in your application.
import { SwapWidget } from "@infinityswapofficial/widgets";
import "@infinityswapofficial/widgets/index.css";
function App() {
return (
<div>
<SwapWidget />
</div>
);
}
Customizing the Swap Widget
You can change the appearance of the swap widgets to what best fits you. By passing your theme into the theme Prop, you can customize the theme of the SwapWidget.
You can customize the colors, font, and border radius of the swap widget to match the look and feel of your dApp. There are many options to choose from. The widget also comes with a lightTheme
and a darkTheme
. You can choose to define your own theme like the example below or import the theme and make changes to them.
import { SwapWidget, darkTheme } from "@infinityswapofficial/widgets";
function App() {
return <SwapWidget theme={darkTheme} />;
}
import { SwapWidget } from "@infinityswapofficial/widgets";
const theme = {
primary: "#752764",
secondary: "#606775",
module: "#eff1f4",
primaryActive: "#752764",
primaryActiveHover: "#632155",
accentActive: "#006fff",
fontFamily: "",
error: "#e9395e",
inputContainer: "rgba(138, 154, 185, 0.1)",
inputBorder: "rgba(138, 154, 185, 0.1)",
container: "#ffffff",
outline: "#bbbdc9",
textPrimary: "#00013a",
textSecondary: "#606775",
textWhite: "#fff",
textGrey: "#8a9ab9",
disabled: "rgba(232, 235, 241, 1)",
interactive: "#d7d9e0",
interactiveBorder: "#d7d9e0",
interactiveBorderRadius: "9999px",
placeholder: "",
width: "360px",
};
function App() {
return (
<div>
<SwapWidget theme={theme} />
</div>
);
}
Customizing the Default Input and Output Tokens
It is possible to pre-populate input and output token fields by setting the defaultInputAmount
, defaultOutputTokenSymbol
, and defaultOutputTokenSymbol
variables.
See example below,
function App() {
return (
<div>
<SwapWidget
defaultInputAmount="1"
defaultOutputTokenSymbol="SNS1"
defaultInputTokenSymbol="ICP"
/>
</div>
);
}
Swap Widget API Reference (Optional props)
Prop Name | Prop Type. | Default Value. | Description |
---|---|---|---|
theme |
object |
lightTheme |
Theme prop defines the theme of the widget |
onConnectWallet |
() => void |
If passed, allows you to add custom behavior when the user clicks on the 'Connect your wallet to swap' button. | |
defaultInputAmount |
number |
0 | Default amount for inToken |
defaultOutputTokenSymbol |
string |
The default output token symbol for the output token field eg. defaultOutputTokenSymbol="icp"
|
|
defaultInputTokenSymbol |
string |
The default input token symbol for the input token field eg. defaultInputTokenSymbol="icp"
|
|
onError |
(e) => void |
Widget error handler for Javascript errors. | |
onSuccess |
(e) => void |
A handler that is called when a transaction succeeds |
|
License
Legal notice
Astari encourages integrators to evaluate their own regulatory obligations when integrating this widget into their products, including, but not limited to, those related to economic or trade sanctions compliance.
THE CODE (THE “CODE”) PROVIDED BY ASTARI LTD (THE “COMPANY”), WHICH INTERFACES WITH THE AUTOMATED MARKET MAKER (“AMM”), IS PROVIDED ON AN AS IS BASIS. THE COMPANY DOES NOT GIVE ANY WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE AND/OR NONINFRINGEMENT. IN NO EVENT SHALL THE COMPANY BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE CODE, THE AMM AND/OR THE USE OF OR OTHER DEALINGS IN THE CODE AND THE AMM.
USERS SHOULD BE AWARE OF THE RISKS ASSOCIATED WITH USING OPEN-SOURCE CODE WHICH INCLUDE, BUT ARE NOT LIMITED TO, LACK OF SECURITY, OPERATIONAL INSUFFICIENCIES, SOFTWARE QUALITY AND COPYRIGHT INFRINGEMENT. BY USING THE CODE OR AMM USERS ACCEPT THESE RISKS. FOR THE AVOIDANCE OF DOUBT, THE COMPANY IS NOT RESPONSIBLE FOR AND ACCEPTS NO LIABILITY FOR ANY LOSS WHICH RESULTS FROM ANY SUCH RISK MATERIALISING OR ANY OTHER ISSUE WITH THE CODE OR AMM.