// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`BackupScreen renders backup options when none are completed 1`] = `
<View
  style={
    {
      "backgroundColor": {
        "dynamic": {
          "dark": "#131313",
          "light": "#FFFFFF",
        },
      },
      "flex": 1,
      "flexDirection": "column",
      "paddingLeft": 0,
      "paddingRight": 0,
      "paddingTop": 200,
    }
  }
>
  <View
    behavior="padding"
    enabled={true}
    style={
      [
        {
          "flex": 1,
          "justifyContent": "flex-end",
        },
        {
          "marginBottom": 0,
        },
      ]
    }
  >
    <View
      collapsable={false}
      entering={[Function]}
      exiting={[Function]}
      style={
        {
          "flexDirection": "column",
          "flexGrow": 1,
          "gap": 16,
          "paddingBottom": 16,
          "paddingLeft": 16,
          "paddingRight": 16,
        }
      }
    >
      <View
        style={
          {
            "alignItems": "center",
            "flexDirection": "column",
            "gap": 8,
            "justifyContent": "center",
            "marginBottom": 12,
            "marginLeft": 12,
            "marginRight": 12,
            "marginTop": 12,
          }
        }
      >
        <View
          style={
            {
              "alignItems": "center",
              "flexDirection": "column",
              "justifyContent": "center",
              "marginBottom": 4,
            }
          }
        >
          <View
            style={
              {
                "alignItems": "center",
                "backgroundColor": {
                  "dynamic": {
                    "dark": "rgba(255,255,255,0.12)",
                    "light": "rgba(34,34,34,0.05)",
                  },
                },
                "borderBottomLeftRadius": 8,
                "borderBottomRightRadius": 8,
                "borderTopLeftRadius": 8,
                "borderTopRightRadius": 8,
                "flexDirection": "column",
                "justifyContent": "center",
                "paddingBottom": 12,
                "paddingLeft": 12,
                "paddingRight": 12,
                "paddingTop": 12,
              }
            }
          >
            <RNSVGSvgView
              align="xMidYMid"
              bbHeight={18}
              bbWidth={18}
              fill="none"
              focusable={false}
              meetOrSlice={0}
              minX={0}
              minY={0}
              strokeWidth={8}
              style={
                [
                  {
                    "backgroundColor": "transparent",
                    "borderWidth": 0,
                  },
                  {
                    "color": "#131313",
                    "height": 18,
                    "width": 18,
                  },
                  {
                    "flex": 0,
                    "height": 18,
                    "width": 18,
                  },
                ]
              }
              vbHeight={20}
              vbWidth={19}
            >
              <RNSVGGroup
                color="#131313"
                fill={null}
                propList={
                  [
                    "fill",
                    "strokeWidth",
                  ]
                }
                strokeWidth={8}
              >
                <RNSVGPath
                  d="M9.51807 0C7.27807 1.111 5.5 2 0.5 3C0.5 4.137 0.5 7.70192 0.5 8.88892C0.5 15.5559 6.167 18.889 9.5 20C12.833 18.889 18.5 15.5559 18.5 8.88892C18.5 7.66392 18.5 4.194 18.5 3C13.5 2 11.7221 1.111 9.51807 0ZM13.042 8.53003L9.04199 12.53C8.89599 12.676 8.70396 12.75 8.51196 12.75C8.31996 12.75 8.12793 12.677 7.98193 12.53L5.98193 10.53C5.68893 10.237 5.68893 9.76199 5.98193 9.46899C6.27493 9.17599 6.74997 9.17599 7.04297 9.46899L8.51294 10.939L11.9829 7.46899C12.2759 7.17599 12.7509 7.17599 13.0439 7.46899C13.3369 7.76199 13.335 8.23703 13.042 8.53003Z"
                  fill={
                    {
                      "type": 2,
                    }
                  }
                  propList={
                    [
                      "fill",
                    ]
                  }
                />
              </RNSVGGroup>
            </RNSVGSvgView>
          </View>
        </View>
        <Text
          allowFontScaling={false}
          maxFontSizeMultiplier={1.4}
          style={
            {
              "color": {
                "dynamic": {
                  "dark": "#FFFFFF",
                  "light": "#131313",
                },
              },
              "fontFamily": "Basel Grotesk",
              "fontSize": 19,
              "fontWeight": "400",
              "lineHeight": 24,
              "paddingTop": 0,
              "textAlign": "center",
            }
          }
          suppressHighlighting={true}
        >
          Choose your backup method
        </Text>
        <Text
          allowFontScaling={true}
          maxFontSizeMultiplier={1.4}
          style={
            {
              "color": {
                "dynamic": {
                  "dark": "rgba(255, 255, 255, 0.65)",
                  "light": "rgba(19, 19, 19, 0.63)",
                },
              },
              "fontFamily": "Basel Grotesk",
              "fontSize": 17,
              "fontWeight": "400",
              "lineHeight": 20,
              "textAlign": "center",
            }
          }
          suppressHighlighting={true}
        >
          This is how you will recover your wallet if you delete the app or lose your device.
        </Text>
      </View>
      <View
        style={
          {
            "flex": 1,
            "flexDirection": "column",
            "flexGrow": 1,
            "justifyContent": "space-between",
          }
        }
      >
        <View
          style={
            {
              "flexDirection": "column",
              "flexGrow": 1,
              "justifyContent": "space-between",
            }
          }
        >
          <View
            style={
              {
                "flexDirection": "column",
                "gap": 24,
              }
            }
          >
            <View
              style={
                {
                  "flexDirection": "column",
                  "gap": 12,
                  "shadowColor": "rgb(0,0,0)",
                  "shadowOffset": {
                    "height": 1,
                    "width": 0,
                  },
                  "shadowOpacity": 0.0196078431372549,
                  "shadowRadius": 6,
                }
              }
            >
              <View
                hitSlop={
                  {
                    "bottom": 5,
                    "left": 5,
                    "right": 5,
                    "top": 5,
                  }
                }
                onBlur={[Function]}
                onClick={[Function]}
                onFocus={[Function]}
                onResponderGrant={[Function]}
                onResponderMove={[Function]}
                onResponderRelease={[Function]}
                onResponderTerminate={[Function]}
                onResponderTerminationRequest={[Function]}
                onStartShouldSetResponder={[Function]}
                style={
                  {
                    "backgroundColor": {
                      "dynamic": {
                        "dark": "#131313",
                        "light": "#FFFFFF",
                      },
                    },
                    "borderBottomColor": {
                      "dynamic": {
                        "dark": "rgba(255,255,255,0.12)",
                        "light": "rgba(34,34,34,0.05)",
                      },
                    },
                    "borderBottomLeftRadius": 20,
                    "borderBottomRightRadius": 20,
                    "borderBottomWidth": 1,
                    "borderLeftColor": {
                      "dynamic": {
                        "dark": "rgba(255,255,255,0.12)",
                        "light": "rgba(34,34,34,0.05)",
                      },
                    },
                    "borderLeftWidth": 1,
                    "borderRightColor": {
                      "dynamic": {
                        "dark": "rgba(255,255,255,0.12)",
                        "light": "rgba(34,34,34,0.05)",
                      },
                    },
                    "borderRightWidth": 1,
                    "borderStyle": "solid",
                    "borderTopColor": {
                      "dynamic": {
                        "dark": "rgba(255,255,255,0.12)",
                        "light": "rgba(34,34,34,0.05)",
                      },
                    },
                    "borderTopLeftRadius": 20,
                    "borderTopRightRadius": 20,
                    "borderTopWidth": 1,
                    "flexDirection": "column",
                    "opacity": 1,
                    "paddingBottom": 16,
                    "paddingLeft": 16,
                    "paddingRight": 16,
                    "paddingTop": 16,
                    "transform": [
                      {
                        "scale": 1,
                      },
                    ],
                  }
                }
                testID="add-cloud-backup"
              >
                <View
                  style={
                    {
                      "alignContent": "center",
                      "alignItems": "flex-start",
                      "flexDirection": "row",
                      "gap": 16,
                    }
                  }
                >
                  <View
                    style={
                      {
                        "alignItems": "center",
                        "backgroundColor": {
                          "dynamic": {
                            "dark": "rgba(255, 55, 199, 0.08)",
                            "light": "rgba(255, 55, 199, 0.08)",
                          },
                        },
                        "borderBottomLeftRadius": 999999,
                        "borderBottomRightRadius": 999999,
                        "borderTopLeftRadius": 999999,
                        "borderTopRightRadius": 999999,
                        "flexDirection": "column",
                        "height": 32,
                        "justifyContent": "center",
                        "marginTop": 4,
                        "width": 32,
                      }
                    }
                  >
                    <RNSVGSvgView
                      align="xMidYMid"
                      bbHeight={16}
                      bbWidth={16}
                      fill="none"
                      focusable={false}
                      meetOrSlice={0}
                      minX={0}
                      minY={0}
                      strokeWidth={8}
                      style={
                        [
                          {
                            "backgroundColor": "transparent",
                            "borderWidth": 0,
                          },
                          {
                            "color": "#FF37C7",
                            "height": 16,
                            "width": 16,
                          },
                          {
                            "flex": 0,
                            "height": 16,
                            "width": 16,
                          },
                        ]
                      }
                      vbHeight={16}
                      vbWidth={16}
                    >
                      <RNSVGGroup
                        color="#FF37C7"
                        fill={null}
                        propList={
                          [
                            "fill",
                            "strokeWidth",
                          ]
                        }
                        strokeWidth={8}
                      >
                        <RNSVGPath
                          d="M9.26896 5.06732L9.26891 5.06728C8.50684 4.3958 7.50577 3.9872 6.4091 3.9872C4.01716 3.9872 2.07829 5.92607 2.07829 8.318C2.07829 10.7099 4.01716 12.6488 6.4091 12.6488H10.5455C12.4092 12.6488 13.9217 11.1363 13.9217 9.27255C13.9217 7.4088 12.4092 5.89629 10.5455 5.89629C10.3683 5.89629 10.1951 5.90917 10.023 5.9349C9.81109 5.61321 9.55717 5.32144 9.26896 5.06732Z"
                          fill={
                            {
                              "type": 2,
                            }
                          }
                          propList={
                            [
                              "fill",
                              "stroke",
                              "strokeWidth",
                            ]
                          }
                          stroke={
                            {
                              "type": 2,
                            }
                          }
                          strokeWidth="0.388889"
                        />
                      </RNSVGGroup>
                    </RNSVGSvgView>
                  </View>
                  <View
                    style={
                      {
                        "alignItems": "center",
                        "flexDirection": "row",
                        "gap": 4,
                        "paddingRight": 60,
                      }
                    }
                  >
                    <View
                      style={
                        {
                          "alignItems": "flex-start",
                          "flex": 1,
                          "flexDirection": "column",
                          "gap": 4,
                          "justifyContent": "space-around",
                        }
                      }
                    >
                      <View
                        style={
                          {
                            "flexDirection": "row",
                            "gap": 8,
                          }
                        }
                      >
                        <View
                          style={
                            {
                              "flex": 1,
                              "flexDirection": "column",
                              "paddingBottom": 4,
                              "paddingTop": 4,
                            }
                          }
                        >
                          <Text
                            allowFontScaling={false}
                            maxFontSizeMultiplier={1.4}
                            style={
                              {
                                "color": {
                                  "dynamic": {
                                    "dark": "#FFFFFF",
                                    "light": "#131313",
                                  },
                                },
                                "fontFamily": "Basel Grotesk",
                                "fontSize": 17,
                                "fontWeight": "400",
                                "lineHeight": 22.1,
                              }
                            }
                            suppressHighlighting={true}
                          >
                            Set a recovery password
                          </Text>
                        </View>
                        <View
                          style={
                            {
                              "alignItems": "center",
                              "backgroundColor": {
                                "dynamic": {
                                  "dark": "#FC72FF1f",
                                  "light": "#FC72FF1f",
                                },
                              },
                              "borderBottomLeftRadius": 8,
                              "borderBottomRightRadius": 8,
                              "borderTopLeftRadius": 8,
                              "borderTopRightRadius": 8,
                              "flexDirection": "column",
                              "justifyContent": "center",
                              "maxWidth": "30%",
                              "paddingBottom": 2,
                              "paddingLeft": 6,
                              "paddingRight": 6,
                              "paddingTop": 2,
                            }
                          }
                        >
                          <Text
                            allowFontScaling={true}
                            maxFontSizeMultiplier={1.2}
                            style={
                              {
                                "color": {
                                  "dynamic": {
                                    "dark": "#FF37C7",
                                    "light": "#FF37C7",
                                  },
                                },
                                "fontFamily": "Basel Grotesk",
                                "fontSize": 15,
                                "fontWeight": "500",
                                "lineHeight": 17.25,
                                "textAlign": "center",
                              }
                            }
                            suppressHighlighting={true}
                          >
                            Quick
                          </Text>
                        </View>
                      </View>
                      <Text
                        allowFontScaling={false}
                        maxFontSizeMultiplier={1.4}
                        style={
                          {
                            "color": {
                              "dynamic": {
                                "dark": "rgba(255, 255, 255, 0.65)",
                                "light": "rgba(19, 19, 19, 0.63)",
                              },
                            },
                            "fontFamily": "Basel Grotesk",
                            "fontSize": 15,
                            "fontWeight": "400",
                            "lineHeight": 19.5,
                          }
                        }
                        suppressHighlighting={true}
                      >
                        Back up your wallet via iCloud, protected by a recovery password.
                      </Text>
                    </View>
                  </View>
                </View>
              </View>
              <View
                hitSlop={
                  {
                    "bottom": 5,
                    "left": 5,
                    "right": 5,
                    "top": 5,
                  }
                }
                onBlur={[Function]}
                onClick={[Function]}
                onFocus={[Function]}
                onResponderGrant={[Function]}
                onResponderMove={[Function]}
                onResponderRelease={[Function]}
                onResponderTerminate={[Function]}
                onResponderTerminationRequest={[Function]}
                onStartShouldSetResponder={[Function]}
                style={
                  {
                    "backgroundColor": {
                      "dynamic": {
                        "dark": "#131313",
                        "light": "#FFFFFF",
                      },
                    },
                    "borderBottomColor": {
                      "dynamic": {
                        "dark": "rgba(255,255,255,0.12)",
                        "light": "rgba(34,34,34,0.05)",
                      },
                    },
                    "borderBottomLeftRadius": 20,
                    "borderBottomRightRadius": 20,
                    "borderBottomWidth": 1,
                    "borderLeftColor": {
                      "dynamic": {
                        "dark": "rgba(255,255,255,0.12)",
                        "light": "rgba(34,34,34,0.05)",
                      },
                    },
                    "borderLeftWidth": 1,
                    "borderRightColor": {
                      "dynamic": {
                        "dark": "rgba(255,255,255,0.12)",
                        "light": "rgba(34,34,34,0.05)",
                      },
                    },
                    "borderRightWidth": 1,
                    "borderStyle": "solid",
                    "borderTopColor": {
                      "dynamic": {
                        "dark": "rgba(255,255,255,0.12)",
                        "light": "rgba(34,34,34,0.05)",
                      },
                    },
                    "borderTopLeftRadius": 20,
                    "borderTopRightRadius": 20,
                    "borderTopWidth": 1,
                    "flexDirection": "column",
                    "opacity": 1,
                    "paddingBottom": 16,
                    "paddingLeft": 16,
                    "paddingRight": 16,
                    "paddingTop": 16,
                    "transform": [
                      {
                        "scale": 1,
                      },
                    ],
                  }
                }
                testID="add-manual-backup"
              >
                <View
                  style={
                    {
                      "alignContent": "center",
                      "alignItems": "flex-start",
                      "flexDirection": "row",
                      "gap": 16,
                    }
                  }
                >
                  <View
                    style={
                      {
                        "alignItems": "center",
                        "backgroundColor": {
                          "dynamic": {
                            "dark": "rgba(255, 55, 199, 0.08)",
                            "light": "rgba(255, 55, 199, 0.08)",
                          },
                        },
                        "borderBottomLeftRadius": 999999,
                        "borderBottomRightRadius": 999999,
                        "borderTopLeftRadius": 999999,
                        "borderTopRightRadius": 999999,
                        "flexDirection": "column",
                        "height": 32,
                        "justifyContent": "center",
                        "width": 32,
                      }
                    }
                  >
                    <RNSVGSvgView
                      align="xMidYMid"
                      bbHeight={12}
                      bbWidth={12}
                      fill="none"
                      focusable={false}
                      meetOrSlice={0}
                      minX={0}
                      minY={0}
                      strokeWidth={8}
                      style={
                        [
                          {
                            "backgroundColor": "transparent",
                            "borderWidth": 0,
                          },
                          {
                            "color": "#FF37C7",
                            "height": 12,
                            "width": 12,
                          },
                          {
                            "flex": 0,
                            "height": 12,
                            "width": 12,
                          },
                        ]
                      }
                      vbHeight={19}
                      vbWidth={19}
                    >
                      <RNSVGGroup
                        color="#FF37C7"
                        fill={null}
                        propList={
                          [
                            "fill",
                            "strokeWidth",
                          ]
                        }
                        strokeWidth={8}
                      >
                        <RNSVGPath
                          d="M14.0371 9.00194L5 18H0V13L8.99805 3.963C9.11505 3.845 9.3051 3.845 9.4231 3.963L14.0381 8.57799C14.1551 8.69499 14.1551 8.88494 14.0371 9.00194ZM15.1079 7.52794C15.2249 7.64494 15.415 7.64494 15.532 7.52794L17.4099 5.65001C18.1939 4.86601 18.1939 3.59405 17.4099 2.81005L15.1899 0.589953C14.4059 -0.194047 13.1341 -0.194047 12.3501 0.589953L10.4719 2.468C10.3549 2.58501 10.3549 2.77496 10.4719 2.89196L15.1079 7.52794ZM18 17.25H11C10.586 17.25 10.25 17.586 10.25 18C10.25 18.414 10.586 18.75 11 18.75H18C18.414 18.75 18.75 18.414 18.75 18C18.75 17.586 18.414 17.25 18 17.25Z"
                          fill={
                            {
                              "type": 2,
                            }
                          }
                          propList={
                            [
                              "fill",
                            ]
                          }
                        />
                      </RNSVGGroup>
                    </RNSVGSvgView>
                  </View>
                  <View
                    style={
                      {
                        "alignItems": "center",
                        "flexDirection": "row",
                        "gap": 4,
                        "paddingRight": 60,
                      }
                    }
                  >
                    <View
                      style={
                        {
                          "alignItems": "flex-start",
                          "flex": 1,
                          "flexDirection": "column",
                          "gap": 4,
                          "justifyContent": "space-around",
                        }
                      }
                    >
                      <View
                        style={
                          {
                            "flexDirection": "row",
                            "gap": 8,
                          }
                        }
                      >
                        <View
                          style={
                            {
                              "flex": 1,
                              "flexDirection": "column",
                            }
                          }
                        >
                          <Text
                            allowFontScaling={false}
                            maxFontSizeMultiplier={1.4}
                            style={
                              {
                                "color": {
                                  "dynamic": {
                                    "dark": "#FFFFFF",
                                    "light": "#131313",
                                  },
                                },
                                "fontFamily": "Basel Grotesk",
                                "fontSize": 17,
                                "fontWeight": "400",
                                "lineHeight": 22.1,
                              }
                            }
                            suppressHighlighting={true}
                          >
                            Write down recovery phrase
                          </Text>
                        </View>
                      </View>
                      <Text
                        allowFontScaling={false}
                        maxFontSizeMultiplier={1.4}
                        style={
                          {
                            "color": {
                              "dynamic": {
                                "dark": "rgba(255, 255, 255, 0.65)",
                                "light": "rgba(19, 19, 19, 0.63)",
                              },
                            },
                            "fontFamily": "Basel Grotesk",
                            "fontSize": 15,
                            "fontWeight": "400",
                            "lineHeight": 19.5,
                          }
                        }
                        suppressHighlighting={true}
                      >
                        Record your 12 secret words on a piece of paper and store it in a safe place.
                      </Text>
                    </View>
                  </View>
                </View>
              </View>
            </View>
          </View>
          <View
            style={
              {
                "flexDirection": "column",
                "gap": 12,
                "justifyContent": "flex-end",
              }
            }
          >
            <View
              hitSlop={
                {
                  "bottom": 5,
                  "left": 5,
                  "right": 5,
                  "top": 5,
                }
              }
              onBlur={[Function]}
              onClick={[Function]}
              onFocus={[Function]}
              onResponderGrant={[Function]}
              onResponderMove={[Function]}
              onResponderRelease={[Function]}
              onResponderTerminate={[Function]}
              onResponderTerminationRequest={[Function]}
              onStartShouldSetResponder={[Function]}
              style={
                {
                  "alignItems": "center",
                  "alignSelf": "center",
                  "flexDirection": "row",
                  "gap": 8,
                  "opacity": 1,
                  "paddingBottom": 8,
                  "paddingTop": 8,
                  "transform": [
                    {
                      "scale": 1,
                    },
                  ],
                }
              }
            >
              <RNSVGSvgView
                align="xMidYMid"
                bbHeight={20}
                bbWidth={20}
                fill="none"
                focusable={false}
                meetOrSlice={0}
                minX={0}
                minY={0}
                strokeWidth={8}
                style={
                  [
                    {
                      "backgroundColor": "transparent",
                      "borderWidth": 0,
                    },
                    {
                      "color": "rgba(19, 19, 19, 0.35)",
                      "height": 20,
                      "width": 20,
                    },
                    {
                      "flex": 0,
                      "height": 20,
                      "width": 20,
                    },
                  ]
                }
                vbHeight={24}
                vbWidth={24}
              >
                <RNSVGGroup
                  color="rgba(19, 19, 19, 0.35)"
                  fill={null}
                  propList={
                    [
                      "fill",
                      "strokeWidth",
                    ]
                  }
                  strokeWidth={8}
                >
                  <RNSVGPath
                    d="M12 2C6.477 2 2 6.477 2 12C2 17.523 6.477 22 12 22C17.523 22 22 17.523 22 12C22 6.477 17.523 2 12 2ZM12.02 17.5C11.468 17.5 11.0149 17.052 11.0149 16.5C11.0149 15.948 11.458 15.5 12.01 15.5H12.02C12.573 15.5 13.02 15.948 13.02 16.5C13.02 17.052 12.572 17.5 12.02 17.5ZM13.603 12.5281C12.872 13.0181 12.7359 13.291 12.7109 13.363C12.6059 13.676 12.314 13.874 12 13.874C11.921 13.874 11.841 13.862 11.762 13.835C11.369 13.703 11.1581 13.278 11.2891 12.885C11.4701 12.345 11.9391 11.836 12.7671 11.281C13.7881 10.597 13.657 9.84707 13.614 9.60107C13.501 8.94707 12.95 8.38988 12.303 8.27588C11.811 8.18588 11.3301 8.31488 10.9541 8.62988C10.5761 8.94688 10.3589 9.41391 10.3589 9.90991C10.3589 10.3239 10.0229 10.6599 9.60889 10.6599C9.19489 10.6599 8.85889 10.3239 8.85889 9.90991C8.85889 8.96891 9.27099 8.08396 9.98999 7.48096C10.702 6.88496 11.639 6.63605 12.564 6.80005C13.831 7.02405 14.8701 8.07097 15.0911 9.34497C15.3111 10.607 14.782 11.7381 13.603 12.5281Z"
                    fill={
                      {
                        "type": 2,
                      }
                    }
                    propList={
                      [
                        "fill",
                      ]
                    }
                  />
                </RNSVGGroup>
              </RNSVGSvgView>
              <Text
                allowFontScaling={true}
                maxFontSizeMultiplier={1.4}
                style={
                  {
                    "color": {
                      "dynamic": {
                        "dark": "rgba(255, 255, 255, 0.38)",
                        "light": "rgba(19, 19, 19, 0.35)",
                      },
                    },
                    "fontFamily": "Basel Grotesk",
                    "fontSize": 17,
                    "fontWeight": "400",
                    "lineHeight": 22.1,
                  }
                }
                suppressHighlighting={true}
              >
                What’s a recovery phrase?
              </Text>
            </View>
          </View>
        </View>
      </View>
    </View>
  </View>
</View>
`;

exports[`BackupScreen renders backup options when some are completed 1`] = `
<View
  style={
    {
      "backgroundColor": {
        "dynamic": {
          "dark": "#131313",
          "light": "#FFFFFF",
        },
      },
      "flex": 1,
      "flexDirection": "column",
      "paddingLeft": 0,
      "paddingRight": 0,
      "paddingTop": 200,
    }
  }
>
  <View
    behavior="padding"
    enabled={true}
    style={
      [
        {
          "flex": 1,
          "justifyContent": "flex-end",
        },
        {
          "marginBottom": 0,
        },
      ]
    }
  >
    <View
      collapsable={false}
      entering={[Function]}
      exiting={[Function]}
      style={
        {
          "flexDirection": "column",
          "flexGrow": 1,
          "gap": 16,
          "paddingBottom": 16,
          "paddingLeft": 16,
          "paddingRight": 16,
        }
      }
    >
      <View
        style={
          {
            "alignItems": "center",
            "flexDirection": "column",
            "gap": 8,
            "justifyContent": "center",
            "marginBottom": 12,
            "marginLeft": 12,
            "marginRight": 12,
            "marginTop": 12,
          }
        }
      >
        <View
          style={
            {
              "alignItems": "center",
              "flexDirection": "column",
              "justifyContent": "center",
              "marginBottom": 4,
            }
          }
        >
          <View
            style={
              {
                "alignItems": "center",
                "backgroundColor": {
                  "dynamic": {
                    "dark": "rgba(255,255,255,0.12)",
                    "light": "rgba(34,34,34,0.05)",
                  },
                },
                "borderBottomLeftRadius": 8,
                "borderBottomRightRadius": 8,
                "borderTopLeftRadius": 8,
                "borderTopRightRadius": 8,
                "flexDirection": "column",
                "justifyContent": "center",
                "paddingBottom": 12,
                "paddingLeft": 12,
                "paddingRight": 12,
                "paddingTop": 12,
              }
            }
          >
            <RNSVGSvgView
              align="xMidYMid"
              bbHeight={18}
              bbWidth={18}
              fill="none"
              focusable={false}
              meetOrSlice={0}
              minX={0}
              minY={0}
              strokeWidth={8}
              style={
                [
                  {
                    "backgroundColor": "transparent",
                    "borderWidth": 0,
                  },
                  {
                    "color": "#131313",
                    "height": 18,
                    "width": 18,
                  },
                  {
                    "flex": 0,
                    "height": 18,
                    "width": 18,
                  },
                ]
              }
              vbHeight={20}
              vbWidth={19}
            >
              <RNSVGGroup
                color="#131313"
                fill={null}
                propList={
                  [
                    "fill",
                    "strokeWidth",
                  ]
                }
                strokeWidth={8}
              >
                <RNSVGPath
                  d="M9.51807 0C7.27807 1.111 5.5 2 0.5 3C0.5 4.137 0.5 7.70192 0.5 8.88892C0.5 15.5559 6.167 18.889 9.5 20C12.833 18.889 18.5 15.5559 18.5 8.88892C18.5 7.66392 18.5 4.194 18.5 3C13.5 2 11.7221 1.111 9.51807 0ZM13.042 8.53003L9.04199 12.53C8.89599 12.676 8.70396 12.75 8.51196 12.75C8.31996 12.75 8.12793 12.677 7.98193 12.53L5.98193 10.53C5.68893 10.237 5.68893 9.76199 5.98193 9.46899C6.27493 9.17599 6.74997 9.17599 7.04297 9.46899L8.51294 10.939L11.9829 7.46899C12.2759 7.17599 12.7509 7.17599 13.0439 7.46899C13.3369 7.76199 13.335 8.23703 13.042 8.53003Z"
                  fill={
                    {
                      "type": 2,
                    }
                  }
                  propList={
                    [
                      "fill",
                    ]
                  }
                />
              </RNSVGGroup>
            </RNSVGSvgView>
          </View>
        </View>
        <Text
          allowFontScaling={false}
          maxFontSizeMultiplier={1.4}
          style={
            {
              "color": {
                "dynamic": {
                  "dark": "#FFFFFF",
                  "light": "#131313",
                },
              },
              "fontFamily": "Basel Grotesk",
              "fontSize": 19,
              "fontWeight": "400",
              "lineHeight": 24,
              "paddingTop": 0,
              "textAlign": "center",
            }
          }
          suppressHighlighting={true}
        >
          Choose your backup method
        </Text>
        <Text
          allowFontScaling={true}
          maxFontSizeMultiplier={1.4}
          style={
            {
              "color": {
                "dynamic": {
                  "dark": "rgba(255, 255, 255, 0.65)",
                  "light": "rgba(19, 19, 19, 0.63)",
                },
              },
              "fontFamily": "Basel Grotesk",
              "fontSize": 17,
              "fontWeight": "400",
              "lineHeight": 20,
              "textAlign": "center",
            }
          }
          suppressHighlighting={true}
        >
          This is how you will recover your wallet if you delete the app or lose your device.
        </Text>
      </View>
      <View
        style={
          {
            "flex": 1,
            "flexDirection": "column",
            "flexGrow": 1,
            "justifyContent": "space-between",
          }
        }
      >
        <View
          style={
            {
              "flexDirection": "column",
              "flexGrow": 1,
              "justifyContent": "space-between",
            }
          }
        >
          <View
            style={
              {
                "flexDirection": "column",
                "gap": 24,
              }
            }
          >
            <View
              style={
                {
                  "flexDirection": "column",
                  "gap": 12,
                  "shadowColor": "rgb(0,0,0)",
                  "shadowOffset": {
                    "height": 1,
                    "width": 0,
                  },
                  "shadowOpacity": 0.0196078431372549,
                  "shadowRadius": 6,
                }
              }
            >
              <View
                hitSlop={
                  {
                    "bottom": 5,
                    "left": 5,
                    "right": 5,
                    "top": 5,
                  }
                }
                onBlur={[Function]}
                onClick={[Function]}
                onFocus={[Function]}
                onResponderGrant={[Function]}
                onResponderMove={[Function]}
                onResponderRelease={[Function]}
                onResponderTerminate={[Function]}
                onResponderTerminationRequest={[Function]}
                onStartShouldSetResponder={[Function]}
                style={
                  {
                    "backgroundColor": {
                      "dynamic": {
                        "dark": "#131313",
                        "light": "#FFFFFF",
                      },
                    },
                    "borderBottomColor": {
                      "dynamic": {
                        "dark": "rgba(255,255,255,0.12)",
                        "light": "rgba(34,34,34,0.05)",
                      },
                    },
                    "borderBottomLeftRadius": 20,
                    "borderBottomRightRadius": 20,
                    "borderBottomWidth": 1,
                    "borderLeftColor": {
                      "dynamic": {
                        "dark": "rgba(255,255,255,0.12)",
                        "light": "rgba(34,34,34,0.05)",
                      },
                    },
                    "borderLeftWidth": 1,
                    "borderRightColor": {
                      "dynamic": {
                        "dark": "rgba(255,255,255,0.12)",
                        "light": "rgba(34,34,34,0.05)",
                      },
                    },
                    "borderRightWidth": 1,
                    "borderStyle": "solid",
                    "borderTopColor": {
                      "dynamic": {
                        "dark": "rgba(255,255,255,0.12)",
                        "light": "rgba(34,34,34,0.05)",
                      },
                    },
                    "borderTopLeftRadius": 20,
                    "borderTopRightRadius": 20,
                    "borderTopWidth": 1,
                    "flexDirection": "column",
                    "opacity": 1,
                    "paddingBottom": 16,
                    "paddingLeft": 16,
                    "paddingRight": 16,
                    "paddingTop": 16,
                    "transform": [
                      {
                        "scale": 1,
                      },
                    ],
                  }
                }
                testID="add-cloud-backup"
              >
                <View
                  style={
                    {
                      "alignContent": "center",
                      "alignItems": "flex-start",
                      "flexDirection": "row",
                      "gap": 16,
                    }
                  }
                >
                  <View
                    style={
                      {
                        "alignItems": "center",
                        "backgroundColor": {
                          "dynamic": {
                            "dark": "rgba(255, 55, 199, 0.08)",
                            "light": "rgba(255, 55, 199, 0.08)",
                          },
                        },
                        "borderBottomLeftRadius": 999999,
                        "borderBottomRightRadius": 999999,
                        "borderTopLeftRadius": 999999,
                        "borderTopRightRadius": 999999,
                        "flexDirection": "column",
                        "height": 32,
                        "justifyContent": "center",
                        "marginTop": 4,
                        "width": 32,
                      }
                    }
                  >
                    <RNSVGSvgView
                      align="xMidYMid"
                      bbHeight={16}
                      bbWidth={16}
                      fill="none"
                      focusable={false}
                      meetOrSlice={0}
                      minX={0}
                      minY={0}
                      strokeWidth={8}
                      style={
                        [
                          {
                            "backgroundColor": "transparent",
                            "borderWidth": 0,
                          },
                          {
                            "color": "#FF37C7",
                            "height": 16,
                            "width": 16,
                          },
                          {
                            "flex": 0,
                            "height": 16,
                            "width": 16,
                          },
                        ]
                      }
                      vbHeight={16}
                      vbWidth={16}
                    >
                      <RNSVGGroup
                        color="#FF37C7"
                        fill={null}
                        propList={
                          [
                            "fill",
                            "strokeWidth",
                          ]
                        }
                        strokeWidth={8}
                      >
                        <RNSVGPath
                          d="M9.26896 5.06732L9.26891 5.06728C8.50684 4.3958 7.50577 3.9872 6.4091 3.9872C4.01716 3.9872 2.07829 5.92607 2.07829 8.318C2.07829 10.7099 4.01716 12.6488 6.4091 12.6488H10.5455C12.4092 12.6488 13.9217 11.1363 13.9217 9.27255C13.9217 7.4088 12.4092 5.89629 10.5455 5.89629C10.3683 5.89629 10.1951 5.90917 10.023 5.9349C9.81109 5.61321 9.55717 5.32144 9.26896 5.06732Z"
                          fill={
                            {
                              "type": 2,
                            }
                          }
                          propList={
                            [
                              "fill",
                              "stroke",
                              "strokeWidth",
                            ]
                          }
                          stroke={
                            {
                              "type": 2,
                            }
                          }
                          strokeWidth="0.388889"
                        />
                      </RNSVGGroup>
                    </RNSVGSvgView>
                  </View>
                  <View
                    style={
                      {
                        "alignItems": "center",
                        "flexDirection": "row",
                        "gap": 4,
                        "paddingRight": 60,
                      }
                    }
                  >
                    <View
                      style={
                        {
                          "alignItems": "flex-start",
                          "flex": 1,
                          "flexDirection": "column",
                          "gap": 4,
                          "justifyContent": "space-around",
                        }
                      }
                    >
                      <View
                        style={
                          {
                            "flexDirection": "row",
                            "gap": 8,
                          }
                        }
                      >
                        <View
                          style={
                            {
                              "flex": 1,
                              "flexDirection": "column",
                              "paddingBottom": 4,
                              "paddingTop": 4,
                            }
                          }
                        >
                          <Text
                            allowFontScaling={false}
                            maxFontSizeMultiplier={1.4}
                            style={
                              {
                                "color": {
                                  "dynamic": {
                                    "dark": "#FFFFFF",
                                    "light": "#131313",
                                  },
                                },
                                "fontFamily": "Basel Grotesk",
                                "fontSize": 17,
                                "fontWeight": "400",
                                "lineHeight": 22.1,
                              }
                            }
                            suppressHighlighting={true}
                          >
                            Set a recovery password
                          </Text>
                        </View>
                        <View
                          style={
                            {
                              "alignItems": "center",
                              "backgroundColor": {
                                "dynamic": {
                                  "dark": "#FC72FF1f",
                                  "light": "#FC72FF1f",
                                },
                              },
                              "borderBottomLeftRadius": 8,
                              "borderBottomRightRadius": 8,
                              "borderTopLeftRadius": 8,
                              "borderTopRightRadius": 8,
                              "flexDirection": "column",
                              "justifyContent": "center",
                              "maxWidth": "30%",
                              "paddingBottom": 2,
                              "paddingLeft": 6,
                              "paddingRight": 6,
                              "paddingTop": 2,
                            }
                          }
                        >
                          <Text
                            allowFontScaling={true}
                            maxFontSizeMultiplier={1.2}
                            style={
                              {
                                "color": {
                                  "dynamic": {
                                    "dark": "#FF37C7",
                                    "light": "#FF37C7",
                                  },
                                },
                                "fontFamily": "Basel Grotesk",
                                "fontSize": 15,
                                "fontWeight": "500",
                                "lineHeight": 17.25,
                                "textAlign": "center",
                              }
                            }
                            suppressHighlighting={true}
                          >
                            Quick
                          </Text>
                        </View>
                      </View>
                      <Text
                        allowFontScaling={false}
                        maxFontSizeMultiplier={1.4}
                        style={
                          {
                            "color": {
                              "dynamic": {
                                "dark": "rgba(255, 255, 255, 0.65)",
                                "light": "rgba(19, 19, 19, 0.63)",
                              },
                            },
                            "fontFamily": "Basel Grotesk",
                            "fontSize": 15,
                            "fontWeight": "400",
                            "lineHeight": 19.5,
                          }
                        }
                        suppressHighlighting={true}
                      >
                        Back up your wallet via iCloud, protected by a recovery password.
                      </Text>
                    </View>
                  </View>
                </View>
              </View>
              <View
                hitSlop={
                  {
                    "bottom": 5,
                    "left": 5,
                    "right": 5,
                    "top": 5,
                  }
                }
                onBlur={[Function]}
                onClick={[Function]}
                onFocus={[Function]}
                onResponderGrant={[Function]}
                onResponderMove={[Function]}
                onResponderRelease={[Function]}
                onResponderTerminate={[Function]}
                onResponderTerminationRequest={[Function]}
                onStartShouldSetResponder={[Function]}
                style={
                  {
                    "backgroundColor": {
                      "dynamic": {
                        "dark": "#131313",
                        "light": "#FFFFFF",
                      },
                    },
                    "borderBottomColor": {
                      "dynamic": {
                        "dark": "rgba(255,255,255,0.12)",
                        "light": "rgba(34,34,34,0.05)",
                      },
                    },
                    "borderBottomLeftRadius": 20,
                    "borderBottomRightRadius": 20,
                    "borderBottomWidth": 1,
                    "borderLeftColor": {
                      "dynamic": {
                        "dark": "rgba(255,255,255,0.12)",
                        "light": "rgba(34,34,34,0.05)",
                      },
                    },
                    "borderLeftWidth": 1,
                    "borderRightColor": {
                      "dynamic": {
                        "dark": "rgba(255,255,255,0.12)",
                        "light": "rgba(34,34,34,0.05)",
                      },
                    },
                    "borderRightWidth": 1,
                    "borderStyle": "solid",
                    "borderTopColor": {
                      "dynamic": {
                        "dark": "rgba(255,255,255,0.12)",
                        "light": "rgba(34,34,34,0.05)",
                      },
                    },
                    "borderTopLeftRadius": 20,
                    "borderTopRightRadius": 20,
                    "borderTopWidth": 1,
                    "flexDirection": "column",
                    "opacity": 1,
                    "paddingBottom": 16,
                    "paddingLeft": 16,
                    "paddingRight": 16,
                    "paddingTop": 16,
                    "transform": [
                      {
                        "scale": 1,
                      },
                    ],
                  }
                }
                testID="add-manual-backup"
              >
                <View
                  style={
                    {
                      "alignContent": "center",
                      "alignItems": "flex-start",
                      "flexDirection": "row",
                      "gap": 16,
                    }
                  }
                >
                  <View
                    style={
                      {
                        "alignItems": "center",
                        "backgroundColor": {
                          "dynamic": {
                            "dark": "rgba(255, 55, 199, 0.08)",
                            "light": "rgba(255, 55, 199, 0.08)",
                          },
                        },
                        "borderBottomLeftRadius": 999999,
                        "borderBottomRightRadius": 999999,
                        "borderTopLeftRadius": 999999,
                        "borderTopRightRadius": 999999,
                        "flexDirection": "column",
                        "height": 32,
                        "justifyContent": "center",
                        "width": 32,
                      }
                    }
                  >
                    <RNSVGSvgView
                      align="xMidYMid"
                      bbHeight={12}
                      bbWidth={12}
                      fill="none"
                      focusable={false}
                      meetOrSlice={0}
                      minX={0}
                      minY={0}
                      strokeWidth={8}
                      style={
                        [
                          {
                            "backgroundColor": "transparent",
                            "borderWidth": 0,
                          },
                          {
                            "color": "#FF37C7",
                            "height": 12,
                            "width": 12,
                          },
                          {
                            "flex": 0,
                            "height": 12,
                            "width": 12,
                          },
                        ]
                      }
                      vbHeight={19}
                      vbWidth={19}
                    >
                      <RNSVGGroup
                        color="#FF37C7"
                        fill={null}
                        propList={
                          [
                            "fill",
                            "strokeWidth",
                          ]
                        }
                        strokeWidth={8}
                      >
                        <RNSVGPath
                          d="M14.0371 9.00194L5 18H0V13L8.99805 3.963C9.11505 3.845 9.3051 3.845 9.4231 3.963L14.0381 8.57799C14.1551 8.69499 14.1551 8.88494 14.0371 9.00194ZM15.1079 7.52794C15.2249 7.64494 15.415 7.64494 15.532 7.52794L17.4099 5.65001C18.1939 4.86601 18.1939 3.59405 17.4099 2.81005L15.1899 0.589953C14.4059 -0.194047 13.1341 -0.194047 12.3501 0.589953L10.4719 2.468C10.3549 2.58501 10.3549 2.77496 10.4719 2.89196L15.1079 7.52794ZM18 17.25H11C10.586 17.25 10.25 17.586 10.25 18C10.25 18.414 10.586 18.75 11 18.75H18C18.414 18.75 18.75 18.414 18.75 18C18.75 17.586 18.414 17.25 18 17.25Z"
                          fill={
                            {
                              "type": 2,
                            }
                          }
                          propList={
                            [
                              "fill",
                            ]
                          }
                        />
                      </RNSVGGroup>
                    </RNSVGSvgView>
                  </View>
                  <View
                    style={
                      {
                        "alignItems": "center",
                        "flexDirection": "row",
                        "gap": 4,
                        "paddingRight": 60,
                      }
                    }
                  >
                    <View
                      style={
                        {
                          "alignItems": "flex-start",
                          "flex": 1,
                          "flexDirection": "column",
                          "gap": 4,
                          "justifyContent": "space-around",
                        }
                      }
                    >
                      <View
                        style={
                          {
                            "flexDirection": "row",
                            "gap": 8,
                          }
                        }
                      >
                        <View
                          style={
                            {
                              "flex": 1,
                              "flexDirection": "column",
                            }
                          }
                        >
                          <Text
                            allowFontScaling={false}
                            maxFontSizeMultiplier={1.4}
                            style={
                              {
                                "color": {
                                  "dynamic": {
                                    "dark": "#FFFFFF",
                                    "light": "#131313",
                                  },
                                },
                                "fontFamily": "Basel Grotesk",
                                "fontSize": 17,
                                "fontWeight": "400",
                                "lineHeight": 22.1,
                              }
                            }
                            suppressHighlighting={true}
                          >
                            Write down recovery phrase
                          </Text>
                        </View>
                      </View>
                      <Text
                        allowFontScaling={false}
                        maxFontSizeMultiplier={1.4}
                        style={
                          {
                            "color": {
                              "dynamic": {
                                "dark": "rgba(255, 255, 255, 0.65)",
                                "light": "rgba(19, 19, 19, 0.63)",
                              },
                            },
                            "fontFamily": "Basel Grotesk",
                            "fontSize": 15,
                            "fontWeight": "400",
                            "lineHeight": 19.5,
                          }
                        }
                        suppressHighlighting={true}
                      >
                        Record your 12 secret words on a piece of paper and store it in a safe place.
                      </Text>
                    </View>
                  </View>
                </View>
              </View>
            </View>
          </View>
          <View
            style={
              {
                "flexDirection": "column",
                "gap": 12,
                "justifyContent": "flex-end",
              }
            }
          >
            <View
              hitSlop={
                {
                  "bottom": 5,
                  "left": 5,
                  "right": 5,
                  "top": 5,
                }
              }
              onBlur={[Function]}
              onClick={[Function]}
              onFocus={[Function]}
              onResponderGrant={[Function]}
              onResponderMove={[Function]}
              onResponderRelease={[Function]}
              onResponderTerminate={[Function]}
              onResponderTerminationRequest={[Function]}
              onStartShouldSetResponder={[Function]}
              style={
                {
                  "alignItems": "center",
                  "alignSelf": "center",
                  "flexDirection": "row",
                  "gap": 8,
                  "opacity": 1,
                  "paddingBottom": 8,
                  "paddingTop": 8,
                  "transform": [
                    {
                      "scale": 1,
                    },
                  ],
                }
              }
            >
              <RNSVGSvgView
                align="xMidYMid"
                bbHeight={20}
                bbWidth={20}
                fill="none"
                focusable={false}
                meetOrSlice={0}
                minX={0}
                minY={0}
                strokeWidth={8}
                style={
                  [
                    {
                      "backgroundColor": "transparent",
                      "borderWidth": 0,
                    },
                    {
                      "color": "rgba(19, 19, 19, 0.35)",
                      "height": 20,
                      "width": 20,
                    },
                    {
                      "flex": 0,
                      "height": 20,
                      "width": 20,
                    },
                  ]
                }
                vbHeight={24}
                vbWidth={24}
              >
                <RNSVGGroup
                  color="rgba(19, 19, 19, 0.35)"
                  fill={null}
                  propList={
                    [
                      "fill",
                      "strokeWidth",
                    ]
                  }
                  strokeWidth={8}
                >
                  <RNSVGPath
                    d="M12 2C6.477 2 2 6.477 2 12C2 17.523 6.477 22 12 22C17.523 22 22 17.523 22 12C22 6.477 17.523 2 12 2ZM12.02 17.5C11.468 17.5 11.0149 17.052 11.0149 16.5C11.0149 15.948 11.458 15.5 12.01 15.5H12.02C12.573 15.5 13.02 15.948 13.02 16.5C13.02 17.052 12.572 17.5 12.02 17.5ZM13.603 12.5281C12.872 13.0181 12.7359 13.291 12.7109 13.363C12.6059 13.676 12.314 13.874 12 13.874C11.921 13.874 11.841 13.862 11.762 13.835C11.369 13.703 11.1581 13.278 11.2891 12.885C11.4701 12.345 11.9391 11.836 12.7671 11.281C13.7881 10.597 13.657 9.84707 13.614 9.60107C13.501 8.94707 12.95 8.38988 12.303 8.27588C11.811 8.18588 11.3301 8.31488 10.9541 8.62988C10.5761 8.94688 10.3589 9.41391 10.3589 9.90991C10.3589 10.3239 10.0229 10.6599 9.60889 10.6599C9.19489 10.6599 8.85889 10.3239 8.85889 9.90991C8.85889 8.96891 9.27099 8.08396 9.98999 7.48096C10.702 6.88496 11.639 6.63605 12.564 6.80005C13.831 7.02405 14.8701 8.07097 15.0911 9.34497C15.3111 10.607 14.782 11.7381 13.603 12.5281Z"
                    fill={
                      {
                        "type": 2,
                      }
                    }
                    propList={
                      [
                        "fill",
                      ]
                    }
                  />
                </RNSVGGroup>
              </RNSVGSvgView>
              <Text
                allowFontScaling={true}
                maxFontSizeMultiplier={1.4}
                style={
                  {
                    "color": {
                      "dynamic": {
                        "dark": "rgba(255, 255, 255, 0.38)",
                        "light": "rgba(19, 19, 19, 0.35)",
                      },
                    },
                    "fontFamily": "Basel Grotesk",
                    "fontSize": 17,
                    "fontWeight": "400",
                    "lineHeight": 22.1,
                  }
                }
                suppressHighlighting={true}
              >
                What’s a recovery phrase?
              </Text>
            </View>
          </View>
        </View>
      </View>
    </View>
  </View>
</View>
`;
