ballerine-io / ballerine Goto Github PK
View Code? Open in Web Editor NEWOpen-source infrastructure and data orchestration platform for risk decisioning
Home Page: https://www.ballerine.com
License: Other
Open-source infrastructure and data orchestration platform for risk decisioning
Home Page: https://www.ballerine.com
License: Other
I have added translation overrides config for English & Swahili but can't seem to figure out how to change to other languages apart from English.
N
A way to switch languages should be provided both - programmatically and through UI.
Text is overridden for default locale only (English).
Maybe
Backend repo is not set to public. How can we check the backend code?
Finish Kubernetes deployment with first workflow service deployment (
The latest Prisma versions have some performance improvements (4.13.0)
Once upgrade please run some e2e flow (like pnpm run kyc-manual-review-example
) to check everything works
Currently the default camera for taking ID card photos seems to be the selfie cam on my phone and I couldn't really find a way to switch it easily.
I tested using the live demo links in the repo.
Phone: OnePlus 7 Pro
Phone OS: Android 11 (stock)
Browser: Google Chrome 107.0
Nest Docs reference: https://docs.nestjs.com/devtools/overview
In order to make the experience of the "Future" KYC example UI more appealing, please provide the following UI changes.
Enter: https://examples-future.ballerine.app/ and see the colors and texts throughout the flow.
Bug - Double-clicking on the "welcome" step action button produces an error and fails to move to the next step
The navigation breaks when rapidly clicking on the action button on the "welcome" screen (probably can happen in other ones as well).
No.
The flow should proceed to the next step without producing any error in the console.
After pressing multiple times on the action button the flow proceeds to a blank page and the console has the following error:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading of 'type')
Flow navigation mechanism: sdks/web-sdk/src/lib/contexts/navigation/hooks.ts:22
Welcome button: sdks/web-sdk/src/lib/pages/Welcome.svelte:60
Go over the whole flow and try to click rapidly on the action buttons when moving between steps - make sure the flow proceeds as usual and there a no console errors.
I would like to be able to add a custom and not a predefined flow step when initializing web SDK. This should make use of the components available such as image, input etc.
No alternative explored.
N
N
const ballerineInitConfig = {
uiConfig: {
general: {
colors: {
primary: '#1155cc',
},
fonts: {
/*Change the font name to "Courier New", click Run, and see the how the font changes */
name: 'Nunito',
link: 'https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700;800&display=swap',
weight: [400, 500, 700, 800],
},
translations: {
},
},
flows: {
'my-kyc-flow': {
steps: [
{
name: 'welcome',
id: 'welcome',
},
{
name: 'customs',
id: 'customs',
// EXAMPLE STEP
elements: [
{
"type": "image",
"props": {
"style": {
"margin": "8px auto",
"flex-grow": 1
},
"attributes": {
"src": "https://cdn.ballerine.io/ui-packs/default/images/welcome.svg",
"alt": "welcome",
"width": "248px",
"height": "212px"
}
}
},
{
"type": "input",
"props": {}
},
{
"type": "button",
"props": {}
},
]
},
{
name: 'document-selection',
id: 'document-selection',
documentOptions: ['id_card', 'drivers_license', 'passport'],
},
{
name: 'loading',
id: 'loading',
},
{
name: 'final',
id: 'final',
},
],
},
},
translations: {
},
endUserInfo: { id: 'test-id' },
backendConfig: {},
};
In order to make the experience of using the new UI them more appealing and trustworthy, the transitions between steps in the flow should be smoother.
###Tasks
###Examples and references
Enter: https://examples-future.ballerine.app/ and see the colors and texts throughout the flow.
resolvedAt
column to the WorkflowRuntimeData
tableIssue
Something breaks in the layout and prevents the primary button from being clickable on mobile when the phone's screen height is above a certain size.
How to reproduce
Do you plan to integrate with Fincen for e-filing SAR reports?
Case management dashboard zoom on previewed image is not working.
No.
Once you click on the image which is presented in the large image viewer, a modal should pop up, showing the image in full screen.
This behaviour was already implemented but it seems something prevents it from happening.
Clicking the image doesn't do anything.
On https://www.backoffice-demo.ballerine.app/case-management
All browsers
Search for web-sdk reference
Known locations:
We want to ease deployment, starting with the web app. let users self-shot it using Netlify and Vercel with deploy buttons.
Current deployment ways are still straightforward but one-click deploy buttons are an amazing experience for someone to quickly self-host and play with the web app
https://vercel.com/docs/deploy-button
https://docs.netlify.com/site-deploys/create-deploys/#deploy-to-netlify-button
Some examples from other repos:
Netlify: https://github.com/katiecorgieblahblah/soundboard
Netlify: https://github.com/ewuweblab/web-3-starter-static/blob/d007c942d5121854cb40547f5df003469dd8e3d8/README.md
Vercel: https://github.com/wk0/boilerplate-next/blob/eefff52c9b2f250d6ee4fa824fad0e47b23da292/README.md
Vercel: https://github.com/trfi/next-web3/blob/effb75c58e7b345c534eb69f22369de92f1395cd/README.md
https://www.notion.so/ballerine/Webhook-schema-mapping-f3deaea449ac49cf8864d2b330bb1c37
Bug - Landscape mode breaks the layout
The UI isn't built for landscape mode, yet when rotating the device the layout changes to landscape mode and breaks.
No.
The screen rotation should remain in portrait mode when turning the phone horizontally.
The screen rotation changes to landscape mode when rotated
Try disabling landscape with meta tags, for example, https://wpmudev.com/forums/topic/disable-landscape-mode-on-mobile/
Use an iOS & Android device, go over the reproduction steps and make sure the phone stays in portrait mode.
Hello, I was trying to deploy the app with the docker-compose file inside the deploy folder and I got an error while building the Workflow-Service. We would need to change the docker file to make migrations at the entrypoint and not inside the build stage.
I'd like the ability to enter in a "reject" reason when I reject the ID photo.
I don't think so
Not sure
Maybe
Links, screenshots, and other resources to help us understand the issue.
[ ] - install eslint-plugin-import (https://www.npmjs.com/package/eslint-plugin-import)
[ ] - add import/no-cycle
eslint rule to base eslint config (https://github.com/import-js/eslint-plugin-import/blob/HEAD/docs/rules/no-cycle.md)
[ ] - typescript support (https://github.com/import-js/eslint-plugin-import#typescript)
Bug - The camera loads while the user is on the camera screen
After entering the camera screen (where you take a picture of a document or a selfie) there are a few moments until the camera loads and appear on the screen. In the meanwhile, the user sees a grey screen.
This causes two problems:
No.
After giving permission to use the camera and right before entering any camera screen, hold the flow on the current screen the user is in and put a loader for until the camera loads and the flow can proceed.
Once the camera has loaded, enter the camera screen.
The user enters the camera screen and sees a blank page where the camera content should be presented, with UI on top of it.
Only once the camera has been loaded it appears on the screen.
Use the loader that exists in Ballerine's flow: sdks/web-sdk/src/lib/atoms/Loader/Loader.svelte
Change the text on the loader to be: "Initiating camera"
Convert WorkflowRuntimeData's status column from a string into an enum in the schema.prisma
file.
Try and see if with these properties we can make the overlay look good on every screen.
We can animate the border color of the overlay so the screen would feel more alive (like changing color from border: 3px solid #ffffff4d;
to border: 3px solid #007aff75;
and back.
Steps I did:
.overlay.card.svelte-10mpprx {
width: 100%;
.overlay.svelte-10mpprx {
max-width: 80%;
max-height: 100%;
outline: 1000px solid #000000d6;
border: 3px solid #ffffff4d;
z-index: 1;
border-radius: 12px;
aspect-ratio: 3/4;
Still need to vertically center the div + make it so in small screens the text won't overlap with it
.overlay.card.svelte-10mpprx {
width: 100%;
.overlay.svelte-10mpprx {
max-width: 80%;
max-height: 100%;
outline: 1000px solid #000000d6;
border: 3px solid #ffffff4d;
z-index: 1;
border-radius: 12px;
aspect-ratio: 4/3;
Still need to vertically center the div
.overlay.card.svelte-10mpprx {
width: 100%;
.overlay.svelte-10mpprx {
max-width: 80%;
max-height: 100%;
outline: 1000px solid #000000d6;
border: 3px solid #ffffff4d;
z-index: 1;
border-radius: 100%;
aspect-ratio: 3/4;
Still need to vertically center the div + make it so in small screens the text won't overlap with it
A4 doc
.overlay.card.svelte-10mpprx {
width: 100%;
.overlay.svelte-10mpprx {
max-width: 90%;
max-height: 100%;
outline: 1000px solid #000000d6;
border: 3px solid #ffffff4d;
z-index: 1;
border-radius: 12px;
aspect-ratio: 3/4;
Still need to vertically center the div + make it so in small screens the text won't overlap with it
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.